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

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

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

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

相关推荐

Linux文件系统操作常用命令(linux文件内容操作命令)

在Linux系统中,有一些常用的文件系统操作命令,以下是这些命令的介绍和作用:#切换目录,其中./代表当前目录,../代表上一级目录cd#查看当前目录里的文件和文件夹ls#...

别小看tail 命令,它难倒了技术总监

我把自己以往的文章汇总成为了Github,欢迎各位大佬star...

lnav:基于 Linux 的高级控制台日志文件查看器

lnav是一款开源的控制台日志文件查看器,专为Linux和Unix-like系统设计。它通过自动检测日志文件的格式,提取时间戳、日志级别等关键信息,并将多个日志文件的内容按时间顺序合并显示,...

声明式与命令式代码(声明模式和命令模式)

编程范式中的术语和差异信不信由你,你可能已经以开发人员的身份使用了多种编程范例。因为没有什么比用编程理论招待朋友更有趣的了,所以这篇文章可以帮助您认识代码中的流行范例。命令式编程命令式编程是我们从As...

linux中的常用命令(linux常用命令和作用)

linux中的常用命令linux中的命令统称shell命令shell是一个命令行解释器,将用户命令解析为操作系统所能理解的指令,实现用户与操作系统的交互shell终端:我们平时输入命令,执行程序的那个...

提高工作效率的--Linux常用命令,能够决解95%以上的问题

点击上方关注,第一时间接受干货转发,点赞,收藏,不如一次关注评论区第一条注意查看回复:Linux命令获取linux常用命令大全pdf+Linux命令行大全pdf...

如何限制他人操作自己的电脑?(如何控制别人的电脑不让发现)

这段时间,小猪罗志祥正处于风口浪尖,具体是为啥?还不知道的小伙伴赶紧去补一下最近的娱乐圈八卦~简单来说,就是我们的小罗同事,以自己超强的体力,以及超强的时间管理能力,重新定义了「多人运动」的含义,重新...

最通俗易懂的命令模式讲解(命令模式百科)

我们先不讲什么是命令模式,先通过一个场景来引出命令模式,看看命令模式能解决什么样的问题。现在有一个渣男张三,他有还几个女朋友,你现在是不是还是单身狗,你就说你气不气?然后他需要每天分别叫几个女朋友起床...

互联网大厂后端必看!Spring Boot 中Runtime执行与停止命令?

你是否曾在使用SpringBoot开发项目时,遇到需要执行系统命令的场景?比如调用脚本进行文件处理,又或是启动外部程序?很多后端开发人员会使用Processexec=Runtime.get...

Linux 常用命令(linux常用的20个命令面试)

日志排查类操作命令...

Java字节码指令:if_icmpgt(0xA3)(java字节码使用的汇编语言)

if_icmpgt是Java字节码中的一条条件跳转指令,其全称是"IfIntegerCompareGreaterThan"。它用于比较两个整数值的大小。如果栈顶的第一个...

外贸干货|如何增加领英的曝光量和询盘

#跨境电商#...

golang执行linux命令(golang调用shell脚本)

需求需要通过openssl生成rsa秘钥,然后保存该秘钥。代码实例packagemainimport("io/ioutil""bytes"&...

LINUX磁盘挂载(linux磁盘挂载到windows)

1、使用root用户查看磁盘挂载情况:fdisk-l2、使用df查看当前磁盘挂载情况,根据和fdisk-l的结果进行对比,查看还有那些磁盘未使用3、挂载:mount磁盘挂载路径...

Linux命令学习——nl命令(linux ln命令的使用)

nl命令主要功能为每一个文件添加行号,每一个输入的文件添加行号后发送到标准输出。当没有文件或文件为-时,读取标准输入...