专业编程教程与实战项目分享平台

网站首页 > 技术文章 正文

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

ins518 2024-09-25 22:26:28 技术文章 12 ℃ 0 评论

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

本文暂时没有评论,来添加一个吧(●'◡'●)

欢迎 发表评论:

最近发表
标签列表