Vue 组件 view-shadcn-ui 2024.1.1 发布

豆包MarsCode，一键解决编程难题，让代码更智能，开发更轻松！

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

一般更改​

• [Core] 添加发布 npm 存储库配置
• [Core] 支持编译 css
• [Core] 添加文档
• [Core] 将 sh 替换为 bash
• [Core] 支持按需导入

组件更改​

• [Tree] 支持通过选择子节点来扩展父目录
• [Tab] 支持垂直模式
• [Tab] 支持检查槽类型
• [Card] 支撑加载
• [Card] 支持说明
• [User] 用于启用 ICard 的用户相关页面
• [Card] 优化组件引入方式
• [Button] 优化组件引入方式
• [Modal] 支撑宽度和高度
• [Input] 支撑尺寸
• [Input] 支持最大长度
• [Input] 支持 prefix 和 suffix
• [Icon] 支持图标
• [Icon] 支撑尺寸
• [Icon] 支持颜色
• [Copy] 支持 tooltip
• [Copy] 支持位置
• [Tooltip] 支持延迟
• [Tooltip] 支持位置
• [Tooltip] 支持触发器
• [Tooltip] 支持箭头
• [Code] 支持主题
• [Code] 支持语言
• [Code] 支持显示行号

全局引用

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