View Shadcn UI 是一个基于 Tailwind CSS 构建的组件库。
组件源码地址：https://github.com/devlive-community/view-shadcn-ui
✨ 功能
- 日志： 支持大小写敏感
- 日志： 支持高度设置
- 日志： 支持日志功能
- 日志： 支持插槽
- 日志： 支持工具栏
- 日志： 支持搜索工具栏
- 滚动条： 支持自定义滚动条
- 滚动条： 支持滚动条功能
- 倒计时： 添加
on-complete事件
- 倒计时： 添加多个插槽
- 倒计时： 支持倒计时功能
- 倒计时： 支持进度显示
- 倒计时： 支持简单模式
- 倒计时： 支持标题和工具栏
- 倒计时： 支持警告阈值
- 空状态： 支持空状态显示
- 返回顶部： 支持返回顶部功能
- 工作流： 添加连接线验证
- 工作流： 添加国际化支持
- 工作流： 添加简单数据报告
- 工作流： 为节点添加唯一标识
- 工作流： 添加数据验证报告
- 工作流： 添加验证可视化
- 工作流： 拆分组件
- 工作流： 支持背景网格
- 工作流： 支持基础工作流
- 工作流： 支持节点验证
- 工作流： 支持面板插槽
- 工作流： 支持删除连接
- 工作流： 支持删除节点
- 工作流： 支持v-model
- 工作流： 支持工作流编辑
- 工作流： 支持工作流视图
- 工作流： 更新连接线状态
组件截图
日志
滚动条
倒计时
空状态
返回顶部
工作流
全局引用
修改 main.ts 入口文件中的配置如下:
import { createApp } from 'vue'
import App from './App.vue'
const app = createApp(App)
// Import View Shadcn UI
import ViewShadcnUI from 'view-shadcn-ui'
app.use(ViewShadcnUI)
按需引用
import { ShadcnButton } from 'view-shadcn-ui'
app.component('ShadcnButton', ShadcnButton)
或者
<template>
<ShadcnButton>Button</ShadcnButton>
</template>
<script setup>
import { ShadcnButton } from 'view-shadcn-ui'
</script>
欢迎大家前往测试站点使用并提出宝贵的建议，如果您有需要实现的布局，可以提交 issues 我们会在最快的时间内实现。
我们的示例地址为：https://view-shadcn-ui.devlive.org
