今天给大家分享一个自己最新研发的svelte3桌面pc端组件库SvelteUI。

svelte-ui 一款基于svelte3开发的类似element-ui风格组件库。目前已有超过20+组件。

快速引入

在需要用到组件的页面，按需引入即可。

import {
    Button,
    Layer, svLayer,
    Scrollbar,
    Input,
    Radio,
    Checkbox,
    ...
} from 'svelte-ui'

使用组件

<Button>默认按钮</el-button>
<Button type="primary">主要按钮</Button>
<Button type="success">成功按钮</Button>
<Button type="info">信息按钮</Button>
<Button type="warning">警告按钮</Button>
<Button type="danger">危险按钮</Button>

<Scrollbar autohide size={10}>...</Scrollbar>

<Layer title="提示" content="弹层显示内容" resize />

由于参考了element-ui组件设计。所以组件的使用方法比较类似饿了么组件。

目前还有部分几个组件还在设计开发中。后续也会整体分享出来。

<script>
    let checked = true
    let radioValue1 = ''
    let radioValue2 = 'a2'
    let radioValue3 = 3

    let radioValue4 = 2
    function handleChange(e) {
        console.log('onChange：', e.detail)
    }
</script>

<Radio {checked} label="默认选中" value={true} />
<Radio checked value={false}>默认不选中</Radio>

<Radio bind:checked={radioValue1} label="Radio" value="1" />

<Radio bind:checked={radioValue2} label="选项A" value="a1" />
<Radio bind:checked={radioValue2} label="选项B" value="a2" />

<Radio bind:checked={radioValue3} label="备选项" value={1} />
<Radio bind:checked={radioValue3} label="备选项" value={2} />
<Radio bind:checked={radioValue3} label="备选项" value={3} />

<h3>自定义事件</h3>
<p>radio value：{radioValue4}</p>
<Radio bind:checked={radioValue4} value="1" on:change={handleChange}>置顶</Radio>
<Radio bind:checked={radioValue4} value="2" on:change={handleChange}>热门</Radio>
<Radio bind:checked={radioValue4} value="3" on:change={handleChange}>推荐</Radio>

<script>
    let checkGroupList = ['复选框A', '复选框C']
    function handleGroupChange(e) {
        console.log('groupChange：', e.detail)
    }
</script>

<CheckboxGroup
    bind:checked={checkGroupList}
    on:change={handleGroupChange}
    style="background: #fee; padding: 10px;"
>
    <Checkbox label="复选框A" style="background: #e4f2ff; padding: 10px;" />
    <Checkbox label="复选框B" />
    <Checkbox label="复选框C" />
    <Checkbox label="禁用" disabled />
</CheckboxGroup>

非常值得期待的一款svelte3组件库。

如果大家有一些好的想法或建议，欢迎一起交流讨论。