Vue 组件 view-shadcn-ui 2024.1.1 发布

时间：2024-10-17 13:38:45

Vue 组件 view-shadcn-ui 2024.1.1 发布

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

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>

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

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

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

我们的示例地址为：https://shadcn.vue.devlive.org

相关文章