Vue3 组件 view-shadcn-ui 2024.5.1 发布

发布于:2024-12-18 ⋅ 阅读:(57) ⋅ 点赞:(0)

View Shadcn UI 是一个基于 Tailwind CSS 构建的组件库。

推荐一套为 Java 开发人员提供方便易用的 SDK 来与目前提供服务的的 Open AI 进行交互组件:https://github.com/devlive-community/openai-java-sdk

推荐一套功能强大的开源数据中台系统:https://github.com/devlive-community/datacap

组件源码地址: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>

推荐一套全平台数据库管理工具,建议下载使用: https://github.com/devlive-community/dbm

我们即将推出一套开源新系统。InfoSphere 是一款面向企业和个人的开源 Wiki 系统,旨在提供简单而强大的知识管理解决方案。建议尝试使用: https://github.com/devlive-community/incubator-infosphere

欢迎大家前往测试站点使用并提出宝贵的建议,如果您有需要实现的布局,可以提交 issues 我们会在最快的时间内实现。

我们的示例地址为:https://view-shadcn-ui.devlive.org


网站公告

今日签到

点亮在社区的每一天
去签到