View Shadcn UI 是一个基于 Shadcn UI 和 Tailwind CSS 构建的组件库。
General Changes
- [Core] Add release npm repository configuration
- [Core] Support compile css
- [Core] Add docs
- [Core] Replace sh to bash
- [Core] Support on-demand import
Component Changes
- [Tree] Supports expanding parent directories by selecting subnodes
- [Tabs] Support vertical mode
- [Tab] Support check slot type
- [Card] Support loading
- [Card] Support description
- [User] User-related pages to enable ICard
- [Card] Optimize component introduction method
- [Button] Optimize component introduction method
- [Modal] Support width and height
- [Input] Support size
- [Input] Supports max length
- [Input] Supports prefix and suffix
- [Icon] Support icon
- [Icon] Support size
- [Icon] Support color
- [Copy] Support tooltip
- [Copy] Support position
- [Tooltip] Support delay
- [Tooltip] Support position
- [Tooltip] Support trigger
- [Tooltip] Support arrow
- [Code] Support theme
- [Code] Support language
- [Code] Support show line numbers
全局引用
修改 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://shadcn.vue.devlive.org