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 🐛 Bug Fixes 头像: 修复方形样式问题 ( bf4f831 ) 按钮: 修复禁用状态下的悬停效果 ( cd1ea49 ) 模态框: 修复宽度和高度问题 ( 456ecc1 ) 模态框: 将宽度更改为自动 ( dfe2a1c ) 行列: 修复跨度设置问题 ( beab688 ) 选择器: 修复多选状态下内容溢出的问题 ( 2d6c617 ) 工具提示: 修复箭头显示问题 ( cc40fb9 ) 工具提示: 修复延迟问题 ( 9ba105d ) 工具提示: 修复定位问题 ( 43e9024 ) ✨ Features 头像: 支持群组功能 ( d5347f0 ) 头像: 支持群组最大显示数量 ( 20426e5 ) 头像: 支持群组大小设置 ( 86a1d69 ) 头像: 支持群组方形样式 ( b33646f ) 分割线: 优化左右布局 ( c09ecbd ) 抽屉: 移除默认页脚 ( b7e89ce ) 表单: 支持数组校验器 ( 242e16f ) 渐变文本: 支持渐变文本功能 ( bfadd64 ) 渐变文本: 支持渐变文本配置选项 ( 4fabda7 ) 模态框: 添加默认内容插槽 ( 6fd610b ) 模态框: 移除默认页脚 ( 074e7d6 ) 模态框: 支持关闭功能 ( 264739c ) 模态框: 支持点击遮罩层关闭 ( 7e84e92 ) 数字输入框: 支持清除功能 ( ce932c2 ) 数字输入框: 支持禁用状态 ( d2f3be5 ) 数字输入框: 支持最大最小值 ( ae9805a ) 数字输入框: 支持数字输入 ( 0e068bc ) 数字输入框: 支持失焦事件 ( a1867d8 ) 数字输入框: 支持占位符 ( 426753d ) 数字输入框: 支持显示控制器 ( a643ec3 ) 数字输入框: 支持尺寸设置 ( 5b34615 ) 数字输入框: 支持类型设置 ( baf89da ) 选择器: 添加最大高度限制 ( 3862140 ) 选择器: 支持边框样式 ( 1ce22f2 ) 选择器: 支持多选功能 ( ac2a9c0 ) 文本: 支持颜色设置 ( af45193 ) 文本: 支持斜体样式 ( 3f2549d ) 文本: 支持加粗样式 ( 6be18a1 ) 文本: 支持文本设置 ( ba06e76 ) 文本: 支持类型设置 ( ce123fa ) 文本: 支持下划线和删除线 ( 74ee6b3 ) 树形控件: 支持级联操作 ( 441428b ) 树形控件: 支持复选框功能 ( d1cde73 ) 树形控件: 支持展开收起插槽 ( 5bb964e ) 树形控件: 支持标签插槽 ( 0a15652 ) 树形控件: 支持数据懒加载 ( 954bc5c ) 树形控件: 支持多选功能 ( 734bb29 ) 树形控件: 支持节点禁用 ( 1d3b866 ) 树形控件: 支持显示连接线 ( 9d0294a ) 树形控件: 支持树形结构 ( fe0314a ) 树形控件: 支持数据双向绑定 ( a21d9cf ) 全局引用修改 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) if(window.hljsLoader && !document.currentScript.parentNode.hasAttribute('data-s9e-livepreview-onupdate')) { window.hljsLoader.highlightBlocks(document.currentScript.parentNode); } 按需引用 import { ShadcnButton } from 'view-shadcn-ui' app.component('ShadcnButton', ShadcnButton) if(window.hljsLoader && !document.currentScript.parentNode.hasAttribute('data-s9e-livepreview-onupdate')) { window.hljsLoader.highlightBlocks(document.currentScript.parentNode); } 或者 <template> <ShadcnButton>Button</ShadcnButton> </template> <script setup> import { ShadcnButton } from 'view-shadcn-ui' </script> if(window.hljsLoader && !document.currentScript.parentNode.hasAttribute('data-s9e-livepreview-onupdate')) { window.hljsLoader.highlightBlocks(document.currentScript.parentNode); } 推荐一套全平台数据库管理工具，建议下载使用: https://github.com/devlive-community/dbm 我们即将推出一套开源新系统。InfoSphere 是一款面向企业和个人的开源 Wiki 系统，旨在提供简单而强大的知识管理解决方案。建议尝试使用: https://github.com/devlive-community/incubator-infosphere 欢迎大家前往测试站点使用并提出宝贵的建议，如果您有需要实现的布局，可以提交 issues 我们会在最快的时间内实现。我们的示例地址为： https://shadcn.vue.devlive.org

Vue3 组件 view-shadcn-ui 2024.3.0 发布

qianmoQ

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

🐛 Bug Fixes

头像: 修复方形样式问题 (bf4f831)
按钮: 修复禁用状态下的悬停效果 (cd1ea49)
模态框: 修复宽度和高度问题 (456ecc1)
模态框: 将宽度更改为自动 (dfe2a1c)
行列: 修复跨度设置问题 (beab688)
选择器: 修复多选状态下内容溢出的问题 (2d6c617)
工具提示: 修复箭头显示问题 (cc40fb9)
工具提示: 修复延迟问题 (9ba105d)
工具提示: 修复定位问题 (43e9024)

✨ Features

头像: 支持群组功能 (d5347f0)
头像: 支持群组最大显示数量 (20426e5)
头像: 支持群组大小设置 (86a1d69)
头像: 支持群组方形样式 (b33646f)
分割线: 优化左右布局 (c09ecbd)
抽屉: 移除默认页脚 (b7e89ce)
表单: 支持数组校验器 (242e16f)
渐变文本: 支持渐变文本功能 (bfadd64)
渐变文本: 支持渐变文本配置选项 (4fabda7)
模态框: 添加默认内容插槽 (6fd610b)
模态框: 移除默认页脚 (074e7d6)
模态框: 支持关闭功能 (264739c)
模态框: 支持点击遮罩层关闭 (7e84e92)
数字输入框: 支持清除功能 (ce932c2)
数字输入框: 支持禁用状态 (d2f3be5)
数字输入框: 支持最大最小值 (ae9805a)
数字输入框: 支持数字输入 (0e068bc)
数字输入框: 支持失焦事件 (a1867d8)
数字输入框: 支持占位符 (426753d)
数字输入框: 支持显示控制器 (a643ec3)
数字输入框: 支持尺寸设置 (5b34615)
数字输入框: 支持类型设置 (baf89da)
选择器: 添加最大高度限制 (3862140)
选择器: 支持边框样式 (1ce22f2)
选择器: 支持多选功能 (ac2a9c0)
文本: 支持颜色设置 (af45193)
文本: 支持斜体样式 (3f2549d)
文本: 支持加粗样式 (6be18a1)
文本: 支持文本设置 (ba06e76)
文本: 支持类型设置 (ce123fa)
文本: 支持下划线和删除线 (74ee6b3)
树形控件: 支持级联操作 (441428b)
树形控件: 支持复选框功能 (d1cde73)
树形控件: 支持展开收起插槽 (5bb964e)
树形控件: 支持标签插槽 (0a15652)
树形控件: 支持数据懒加载 (954bc5c)
树形控件: 支持多选功能 (734bb29)
树形控件: 支持节点禁用 (1d3b866)
树形控件: 支持显示连接线 (9d0294a)
树形控件: 支持树形结构 (fe0314a)
树形控件: 支持数据双向绑定 (a21d9cf)

全局引用

修改 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