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

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

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

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

相关推荐

MySQL进阶五之自动读写分离mysql-proxy

自动读写分离目前,大量现网用户的业务场景中存在读多写少、业务负载无法预测等情况,在有大量读请求的应用场景下,单个实例可能无法承受读取压力,甚至会对业务产生影响。为了实现读取能力的弹性扩展,分担数据库压...

Postgres vs MySQL_vs2022连接mysql数据库

...

3分钟短文 | Laravel SQL筛选两个日期之间的记录,怎么写?

引言今天说一个细分的需求,在模型中,或者使用laravel提供的EloquentORM功能,构造查询语句时,返回位于两个指定的日期之间的条目。应该怎么写?本文通过几个例子,为大家梳理一下。学习时...

一文由浅入深带你完全掌握MySQL的锁机制原理与应用

本文将跟大家聊聊InnoDB的锁。本文比较长,包括一条SQL是如何加锁的,一些加锁规则、如何分析和解决死锁问题等内容,建议耐心读完,肯定对大家有帮助的。为什么需要加锁呢?...

验证Mysql中联合索引的最左匹配原则

后端面试中一定是必问mysql的,在以往的面试中好几个面试官都反馈我Mysql基础不行,今天来着重复习一下自己的弱点知识。在Mysql调优中索引优化又是非常重要的方法,不管公司的大小只要后端项目中用到...

MySQL索引解析(联合索引/最左前缀/覆盖索引/索引下推)

目录1.索引基础...

你会看 MySQL 的执行计划(EXPLAIN)吗?

SQL执行太慢怎么办?我们通常会使用EXPLAIN命令来查看SQL的执行计划,然后根据执行计划找出问题所在并进行优化。用法简介...

MySQL 从入门到精通(四)之索引结构

索引概述索引(index),是帮助MySQL高效获取数据的数据结构(有序),在数据之外,数据库系统还维护者满足特定查询算法的数据结构,这些数据结构以某种方式引用(指向)数据,这样就可以在这些数据结构...

mysql总结——面试中最常问到的知识点

mysql作为开源数据库中的榜一大哥,一直是面试官们考察的重中之重。今天,我们来总结一下mysql的知识点,供大家复习参照,看完这些知识点,再加上一些边角细节,基本上能够应付大多mysql相关面试了(...

mysql总结——面试中最常问到的知识点(2)

首先我们回顾一下上篇内容,主要复习了索引,事务,锁,以及SQL优化的工具。本篇文章接着写后面的内容。性能优化索引优化,SQL中索引的相关优化主要有以下几个方面:最好是全匹配。如果是联合索引的话,遵循最...

MySQL基础全知全解!超详细无废话!轻松上手~

本期内容提醒:全篇2300+字,篇幅较长,可搭配饭菜一同“食”用,全篇无废话(除了这句),干货满满,可收藏供后期反复观看。注:MySQL中语法不区分大小写,本篇中...

深入剖析 MySQL 中的锁机制原理_mysql 锁详解

在互联网软件开发领域,MySQL作为一款广泛应用的关系型数据库管理系统,其锁机制在保障数据一致性和实现并发控制方面扮演着举足轻重的角色。对于互联网软件开发人员而言,深入理解MySQL的锁机制原理...

Java 与 MySQL 性能优化:MySQL分区表设计与性能优化全解析

引言在数据库管理领域,随着数据量的不断增长,如何高效地管理和操作数据成为了一个关键问题。MySQL分区表作为一种有效的数据管理技术,能够将大型表划分为多个更小、更易管理的分区,从而提升数据库的性能和可...

MySQL基础篇:DQL数据查询操作_mysql 查

一、基础查询DQL基础查询语法SELECT字段列表FROM表名列表WHERE条件列表GROUPBY分组字段列表HAVING分组后条件列表ORDERBY排序字段列表LIMIT...

MySql:索引的基本使用_mysql索引的使用和原理

一、索引基础概念1.什么是索引?索引是数据库表的特殊数据结构(通常是B+树),用于...