当前位置: 首页 > article >正文

Vue3 组件 view-shadcn-ui 2024.4.0 发布

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

  • input: 修复文本域边框显示问题 (588b8dd)
  • tree: 修复在懒加载时悬浮和选中状态样式异常的问题 (b6610f1)

✨ 新功能

  • contextmenu: 支持右键菜单功能 (2f1620e)
  • contextmenu: 支持自定义位置 (59a9b1c)
  • contextmenu: 支持菜单项禁用状态 (13f0029)
  • contextmenu: 支持子菜单功能 (5bc2533)
  • select: 支持选项懒加载 (4bb4761)
  • spin: 优化背景层显示
  • tabs: 支持标签项的标签插槽 (41d4279)
  • tabs: 支持标签项的点击事件 (d191501)
  • collapse: 支持折叠面板项的标题功能 (0f0e99d)
  • form: 支持动态表单 (bfd3997)
  • hover card: 修复代码问题 (d22408c)
  • hover card: 支持悬浮卡片功能 (712549a)
  • hover card: 支持标题和底部插槽 (66f5b35)
  • toggle: 添加图片示例 (65703a8)
  • toggle: 支持禁用状态 (b151771)
  • toggle: 支持分组功能 (5b7bda1)
  • toggle: 支持分组多选模式 (ae09b8c)
  • toggle: 支持尺寸设置 (0efec03)
  • toggle: 支持切换功能 (f732b08)
  • switch: 支持自定义值设置 (036b7b3)

全局引用

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


http://www.kler.cn/a/403133.html

相关文章:

  • 【K8S问题系列 |18 】如何解决 imagePullSecrets配置正确,但docker pull仍然失败问题
  • 飞凌嵌入式T113-i开发板RISC-V核的实时应用方案
  • Nuxt.js 应用中的 webpack:configResolved事件钩子
  • docker安装zabbix +grafana
  • 状态模式之状态机
  • Kubernetes 安装配置ingress controller
  • 解决IntelliJ IDEA的Plugins无法访问Marketplace去下载插件
  • AWTK-WIDGET-WEB-VIEW 实现笔记 (2) - Windows
  • 阻尼Newton方法-数值最优化方法-课程学习笔记-5
  • 沃丰科技出海客服解决方案:为中国企业出海保驾护航
  • 第二十周:机器学习
  • WPF下 DataGrid加入序号列
  • STM32 | 超声波避障小车
  • 认识c++(c++入门)
  • 理解 Python 中的 __getitem__ 方法:在自定义类中启用索引和切片操作
  • 机器视觉相机重要名词
  • 建立独一无二的GitHub Profile
  • 很能体现FPGA硬件思维的一道面试题
  • docker的logs命令可以查看docker容器日志
  • [BSidesCF 2019]SVGMagic
  • 代替Spinnaker 的 POINTGREY工业级相机 FLIR相机 Python编程案例
  • pytest | 框架的简单使用
  • Knife4j与springboot集成自动编写API文档
  • 《生成式 AI》课程 第3講 CODE TASK 任务3:自定义任务的机器人
  • 【传知代码】VRT_ 关于视频修复的模型
  • mysql中mvcc如何处理纯读事务的?