Vue3 组件 view-shadcn-ui 2024.1.2 发布

View Shadcn UI 是一个基于 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

常规更新

• [Docs] 添加了一些配置
• [Env] 优化了 NPM 版本发布脚本

组件更新

• [Row] 支持行、列
• [Row] 支持栅格间距
• [Row] 支持对齐
• [Row] 支持水平排列
• [Row] 支持换行
• [Col] 支持跨度
• [Col] 支持顺序
• [Divider] 支持类型
• [Divider] 支持位置
• [Divider] 支持虚线
• [Tooltip] 支持宽度
• [Tooltip] 支持省略号
• [Tooltip] 支持长度
• [Tooltip] 支持多行
• [Avatar] 支持尺寸
• [Avatar] 支持方形
• [Avatar] 支持成功事件
• [Avatar] 支持失败事件
• [Badge] 支持类型
• [Badge] 支持文本
• [Badge] 支持最大值
• [Badge] 支持小红点
• [Alert] 支持标题
• [Alert] 支持描述
• [Alert] 支持类型
• [Alert] 支持可关闭
• [Alert] 支持图标
• [Alert] 支持横幅模式
• [Progress] 支持状态
• [Progress] 支持尺寸
• [Progress] 支持显示标签
• [Space] 支持尺寸
• [Space] 支持自定义尺寸
• [Space] 支持换行
• [Space] 支持数组尺寸
• [Switch] 支持类型
• [Switch] 支持尺寸
• [Switch] 支持禁用
• [Switch] 支持开关槽
• [Radio] 支持禁用
• [Radio] 支持尺寸
• [Radio] 支持类型
• [Radio] 支持组
• [Checkbox] 支持禁用
• [Checkbox] 支持尺寸
• [Checkbox] 支持类型
• [Checkbox] 支持组
• [Input] 修复了边框样式
• [Input] 支持禁用
• [Input] 支持密码
• [Input] 支持文本域
• [Select] 支持禁用
• [Select] 支持插槽
• [Select] 支持尺寸
• [Select] 支持类型
• [Rate] 支持最大值
• [Rate] 支持半选
• [Rate] 支持类型
• [Rate] 支持禁用
• [Rate] 支持显示文本
• [Tab] 支持禁用
• [Tab] 支持类型
• [Tab] 支持尺寸
• [Tab] 支持 v-model
• [Tab] 支持项图标
• [Tab] 支持卡片模式
• [Tab] 支持可关闭
• [Tab] 支持额外插槽
• [Tab] 支持垂直模式
• [Tab] 支持位置
• [Tab] 增加动态示例
• [Tab] 支持移除
• [Skeleton] 支持动画
• [Skeleton] 支持标题
• [Skeleton] 支持项类型
• [Skeleton] 支持项尺寸
• [Layout] 支持布局和头部
• [Layout] 支持内容
• [Layout] 支持页脚
• [Layout] 支持多布局
• [Layout] 修复自定义宽度
• [Layout] 添加 shadcn-layout-wrapper 选择器
• [Layout] 添加一些选择器
• [Page] 支持分页尺寸
• [Page] 支持上一页和下一页
• [Page] 支持显示最大页数
• [Page] 支持显示总数
• [Page] 支持分页器
• [Page] 增加插槽
• [Drawer] 支持自定义标题
• [Drawer] 支持可关闭
• [Drawer] 支持遮罩可关闭
• [Drawer] 支持位置
• [Drawer] 支持宽度和高度
• [Menu] 支持宽度
• [Menu] 支持方向
• [Menu] 支持 v-model
• [Message] 支持显示图标
• [Message] 支持类型
• [Message] 支持背景
• [Message] 支持设置 0 则不会自动关闭
• [Message] 支持可关闭
• [Table] 支持条纹
• [Table] 支持边框
• [Table] 支持自定义列插槽
• [Table] 支持行点击事件
• [Table] 支持固定列
• [Table] 支持宽度
• [Table] 支持列宽
• [Table] 支持固定阴影
• [Table] 支持多列固定
• [Table] 支持高度

全局引用

修改 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://shadcn.vue.devlive.org