百度360必应搜狗淘宝本站头条
当前位置:网站首页 > IT技术 > 正文

升级版 svelte-ui 2.0 网页端UI组件库

wptr33 2024-11-14 19:22 18 浏览

历时一个半月,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组件库,欢迎一起分享交流。

相关推荐

VPS主机搭建Ghost环境:Nginx Node.js MariaDB

Ghost是一款个人博客系统,它是使用Node.js语言和MySQL数据库开发的,同时支持MySQL、MariaDB、SQLite和PostgreSQL。用户可以在支持Node.js的服务器上使用自己...

centos7飞速搭建zabbix5.0并添加windows、linux监控

一、环境zabbix所在服务器系统为centos7,监控的服务器为windows2016和centos7。二、安装zabbix官方安装帮助页面...

Zabbix5.0安装部署

全盘展示运行状态,减轻运维人员的重复性工作量,提高系统排错速度,加速运维知识学习积累。1.png...

MariaDB10在CentOS7系统下,迁移数据存储位置

背景在CentOS7下如果没有默认安装MySQL数据库,可以选择安装MariaDB,最新的版本现在是10可以选择直接yum默认安装的方式yum-yinstallmariadbyum-yi...

frappe项目安装过程

1,准备一台虚拟机,debian12或者ubuntusever22.04.3可以用virtualbox/qemu,或者你的超融合服务器安装一些常用工具和依赖库我这里选择server模式安装,用tab...

最新zabbix一键安装脚本(基于centos8)

一、环境准备注意:操作系统必须是centos8及以上的,因为我配的安装源是centos8的。并且必须连接互联网,脚本是基于yum安装的!!!...

ip地址管理之phpIPAM保姆级安装教程 (原创)

本教程基于Ubuntu24.04LTS,安装phpIPAM(最新稳定版1.7),使用Apache、PHP8.3和MariaDB,遵循最佳实践,确保安全性和稳定性。一、环境准备1....

centos7傻瓜式安装搭建zabbix5.0监控服务器教程

zabbix([`zaebiks])是一个基于WEB界面的提供分布式系统监视...

zabbix7.0LTS 保姆级安装教程 小白也能轻松上手安装

系统环境:rockylinux9.4(yumupdate升级到最新版本)数据库:mariadb10.5.22第一步:关闭防火墙和selinux使用脚本关闭...

ubuntu通过下载安装包安装mariadb10.4

要在Ubuntu18.04上安装MariaDB10.4.34,用的是那个tar.gz的安装包。步骤大概是:...

从0到1:基于 Linux 快速搭建高可用 MariaDB Galera 集群(实战指南)

在企业生产环境中,数据库的高可用性至关重要。今天带你从0到1,手把手在Linux系统上快速搭建一个高可用MariaDBGaleraCluster,实现数据库同步复制、故障自动恢复,保障业务...

Windows 中安装 MariaDB 数据库

mariadb在Windows下的安装非常简单,下载程序双击运行就可以了。需要注意:mariadb和MySQL数据库在Windows下默认是不区分大小写的,但是在Linux下是区分...

SQL执行顺序(SqlServer)

学习SQL这么久,如果突然有人问你SQL的执行顺是怎么样的?是不是很多人会觉得C#、JavaScript都是根据编程顺序来处理的,那么SQL也是根据编程顺序来执行的吗?...

C# - StreamWriter与StreamReader 读写文件 101

读写文本文件的方式:1)File静态类的File.ReadAllLines();与File.WriteAllLines();方法进行读写...

C#中的数组探究与学习

C#中的数组一般分为:...