网站首页 > 技术文章 正文
历时一个半月,svelte-ui2.0 终于开发完成了。期间由于一些事情耽搁了一段时间。今天就来作一些简单的分享。
svelte-ui 共有32+组件,都是一些在项目中比较常用的组件。
在此次的2.0开发中,新增并优化了有15+个组件。并对一些 input / radio / checkbox / switch / select 等组件实现了表单验证功能。
重新整理文档,对每一个组件进行组件+代码演示,并且新增了使用说明。
引入组件
import {
Button,
Input,
Switch,
Select,
Form,
...
} from 'svelte-ui'
快速使用
<Button>默认按钮</Button>
<Button type="primary">主要按钮</Button>
<Button type="success" round>成功按钮</Button>
<Button type="info" icon="sv-icon-message" circle>信息按钮</Button>
<Button type="warning" disabled>警告按钮</Button>
<Button type="danger" size="small">危险按钮</Button>
<Select bind:value={selectVal} size="small">
<Option label="Option1" value="a1"></Option>
<Option label="Option2" value="a2"></Option>
<Option label="Option3" value="a3"></Option>
</Select>
<Form bind:model={formObj} labelWidth="80px" size="small" labelPosition="right">
<FormItem label="活动名称">
<Input bind:value={formObj.name} />
</FormItem>
<FormItem label="活动区域">
<Select bind:value={formObj.region} clearable>
<Option label="区域1" value="beijing" />
<Option label="区域2" value="shanghai" />
</Select>
</FormItem>
<FormItem label="即时配送">
<Switch bind:checked={formObj.delivery} />
</FormItem>
<FormItem label="活动性质">
<CheckboxGroup bind:checked={formObj.type}>
<Checkbox label="美食/餐厅线上活动" border />
<Checkbox label="亲子主题" border />
<Checkbox label="品牌推广" border />
</CheckboxGroup>
</FormItem>
<FormItem label="特殊资源">
<RadioGroup bind:checked={formObj.resource}>
<Radio label="线上品牌商赞助" button />
<Radio label="线下场地免费" button />
</RadioGroup>
</FormItem>
<FormItem label="活动详情">
<Input bind:value={formObj.summary} type="textarea" rows={3} />
</FormItem>
<FormItem>
<Button type="primary">立即创建</Button>
<Button>取消</Button>
</FormItem>
</Form>
由于开发在开发之初有参考借鉴了element-ui组件库,所以在使用及语法上比较类似。这也使得学习使用更加容易。
后面如果有时间,打算在此组件库基础上精简一版vue2/3组件库出来,方便平时的一些快捷化开发。
如果大家有其他比较优秀的svelte组件库,欢迎一起分享交流。
猜你喜欢
- 2025-05-27 体验新秩序:前端接入 AI 的七个高效平台
- 2025-05-27 开发新项目看过来,3款基于 Vue 的免费开源 admin 管理后台框架
- 2025-05-27 【开源】一款免费美观的 Avalonia UI 原生控件库 - Semi Avalonia
- 2025-05-27 Vant Weapp - 有赞出品的微信小程序组件库
- 2025-05-27 ArcoDesign,字节跳动开源力作,企业级UI开源库,一个字“牛”!
- 2025-05-27 NutUI - 京东出品的适合快速开发商城类h5、小程序的UI组件库
- 2025-05-27 6个冷门但实用的前端测试及开发相关的chrome浏览器插件
- 2025-05-27 Taro - 京东凹凸实验室出品的小程序多端开发工具,内置 UI 组件库
- 2025-05-27 免费开源 UI 组件库,风格简约,在微信生态开发轻量项目的绝佳选择
- 2025-05-27 国内大厂AI插件评测:根据UI图生成Vue前端代码
你 发表评论:
欢迎- 633℃几个Oracle空值处理函数 oracle处理null值的函数
- 626℃Oracle分析函数之Lag和Lead()使用
- 614℃0497-如何将Kerberos的CDH6.1从Oracle JDK 1.8迁移至OpenJDK 1.8
- 608℃Oracle数据库的单、多行函数 oracle执行多个sql语句
- 606℃Oracle 12c PDB迁移(一) oracle迁移到oceanbase
- 598℃【数据统计分析】详解Oracle分组函数之CUBE
- 588℃最佳实践 | 提效 47 倍,制造业生产 Oracle 迁移替换
- 572℃Oracle有哪些常见的函数? oracle中常用的函数
- 最近发表
-
- oracle 19cOCM认证有哪些内容(oracle认证ocm月薪)
- Oracle新出AI课程认证,转型要持续学习
- oracle 表的查询join顺序,可能会影响查询效率
- Oracle DatabaseAmazon Web Services正式可用,Oracle数据库上云更容易了
- Oracle 19.28 RU 升级最佳实践指南
- 汉得信息:发布EBS系统安装启用JWS的高效解决方案
- 如何主导设计一个亿级高并发系统架构-数据存储架构(三)
- Java 后端开发必看!工厂设计模式轻松拿捏
- ORA-00600 「25027」 「x」报错(抱错孩子电视剧 爸爸是武术 另一个爸爸是画家)
- 新项目终于用上了jdk24(jdk新建项目)
- 标签列表
-
- 前端设计模式 (75)
- 前端性能优化 (51)
- 前端模板 (66)
- 前端跨域 (52)
- 前端缓存 (63)
- 前端aes加密 (58)
- 前端脚手架 (56)
- 前端md5加密 (54)
- 前端路由 (61)
- 前端数组 (73)
- 前端js面试题 (50)
- 前端定时器 (59)
- 前端获取当前时间 (50)
- Oracle RAC (76)
- oracle恢复 (77)
- oracle 删除表 (52)
- oracle 用户名 (80)
- oracle 工具 (55)
- oracle 内存 (55)
- oracle 导出表 (62)
- oracle约束 (54)
- oracle 中文 (51)
- oracle链接 (54)
- oracle的函数 (58)
- 前端调试 (52)
本文暂时没有评论,来添加一个吧(●'◡'●)