Vue3 组件 view-shadcn-ui 2024.5.1 发布

news/2024/12/12 4:12:53/

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

✨ 功能

  • 日志: 支持大小写敏感
  • 日志: 支持高度设置
  • 日志: 支持日志功能
  • 日志: 支持插槽
  • 日志: 支持工具栏
  • 日志: 支持搜索工具栏
  • 滚动条: 支持自定义滚动条
  • 滚动条: 支持滚动条功能
  • 倒计时: 添加on-complete事件
  • 倒计时: 添加多个插槽
  • 倒计时: 支持倒计时功能
  • 倒计时: 支持进度显示
  • 倒计时: 支持简单模式
  • 倒计时: 支持标题和工具栏
  • 倒计时: 支持警告阈值
  • 空状态: 支持空状态显示
  • 返回顶部: 支持返回顶部功能
  • 工作流: 添加连接线验证
  • 工作流: 添加国际化支持
  • 工作流: 添加简单数据报告
  • 工作流: 为节点添加唯一标识
  • 工作流: 添加数据验证报告
  • 工作流: 添加验证可视化
  • 工作流: 拆分组件
  • 工作流: 支持背景网格
  • 工作流: 支持基础工作流
  • 工作流: 支持节点验证
  • 工作流: 支持面板插槽
  • 工作流: 支持删除连接
  • 工作流: 支持删除节点
  • 工作流: 支持v-model
  • 工作流: 支持工作流编辑
  • 工作流: 支持工作流视图
  • 工作流: 更新连接线状态

组件截图

日志

滚动条



倒计时



空状态

返回顶部

工作流


全局引用

修改 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://view-shadcn-ui.devlive.org


http://www.ppmy.cn/news/1554395.html

相关文章

单例模式--懒汉 饿汉模式

一.啥是单例模式? 先介绍一下设计模式&#xff1a; 设计模式好⽐象棋中的 "棋谱". 红⽅当头炮, ⿊⽅⻢来跳. 针对红⽅的⼀些⾛法, ⿊⽅应招的时候有⼀些固定的套路. 按照套路来⾛局势就不会吃亏. 软件开发中也有很多常⻅的 "问题场景". 针对这些问题…

高效整合聚水潭库存数据至MySQL的实现

聚水潭数据集成到MySQL&#xff1a;商品库存查询案例分享 在本次技术案例中&#xff0c;我们将详细探讨如何通过轻易云数据集成平台&#xff0c;将聚水潭的商品库存数据高效、可靠地集成到MySQL数据库中。具体方案为“聚水潭-商品库存查询-->BI彩度-商品库存表”&#xff0…

HarmonyOS-中级(四)

文章目录 Native适配开发三方库的基本使用 &#x1f3e1;作者主页&#xff1a;点击&#xff01; &#x1f916;HarmonyOS专栏&#xff1a;点击&#xff01; ⏰️创作时间&#xff1a;2024年12月09日11点12分 Native适配开发 Node-API HarmonyOS Node-API 是 HarmonyOS 提供的…

使用 Temporal 管理和调度 Couchbase SQL 脚本的实际例子

场景描述 目标&#xff1a;使用 Temporal 管理和调度一组 Couchbase SQL 脚本来完成以下任务&#xff1a; 同步数据&#xff1a;从其他数据源同步数据到 Couchbase。 执行数据聚合&#xff1a;运行统计 SQL 查询。 清理过期数据&#xff1a;定期清理 Couchbase 中过期或无效…

如何在 cPanel 中创建子域名:分步指南

cPanel 是一个用于管理网站的工具&#xff0c;操作界面简单直观&#xff0c;常用于管理网站的各种功能&#xff0c;包括创建子域名。很多知名的网络服务提供商&#xff0c;如 Hostease&#xff0c;都提供了 cPanel 管理工具。 本文将详细介绍如何在 cPanel 中创建子域名&#x…

如何将CSDN的文章保存为PDF?

目录 1、打开CSDN文章2、按F12或者鼠标右键选择检查并进入控制台3、在控制台输入以下代码4、然后回车&#xff08;Enter&#xff09;如果纵向显示不全就横向 1、打开CSDN文章 2、按F12或者鼠标右键选择检查并进入控制台 3、在控制台输入以下代码 (function(){ $("#side&q…

鸿蒙面试---1208

HarmonyOS 三大技术理念 分布式架构&#xff1a;HarmonyOS 的分布式架构使得设备之间能够无缝协同工作。例如&#xff0c;它允许用户在不同的智能设备&#xff08;如手机、平板、智能手表等&#xff09;之间共享数据和功能。比如&#xff0c;用户可以在手机上开始编辑文档&…

如何解决压测过程中JMeter堆内存溢出问题

如何解决压测过程中JMeter堆内存溢出问题 背景一、为什么会堆内存溢出&#xff1f;二、解决堆内存溢出措施三、堆内存参数应该怎么调整&#xff1f;四、堆内存大小配置建议 背景 Windows环境下使用JMeter压测运行一段时间后&#xff0c;JMeter日志窗口报错“java.lang.OutOfMe…