基于Svelte3.x桌面端UI组件库Svelte UI

Svelte-UI，一套基于svelte.js开发的桌面pc端ui组件库

最近一直忙于写svelte-ui，一套svelte3开发的桌面端ui组件库。在设计及功能上借鉴了element-ui组件库。所以组件的使用方法也非常类似饿了么组件库。起因是想开发一个svelte后台管理系统，无赖发现没有比较合适的svelte组件库。于是便着手开发了这个svelte-ui。

早前使用svelte3开发的两个组件 svelte-layer弹窗 和 svelte-scrollbar虚拟滚动条 也整合到该组件库中了。

◆ 特色

• 一致

在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。

• 反馈

通过界面样式和交互动效让用户可以清晰的感知自己的操作；

• 效率

设计简洁直观的操作流程。

◆ 引入组件

在需要用到组件功能的页面引入组件。

import {
    Button,
    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>

<Input bind:value={inputVal} />

<Radio bind:checked={radioVal} label="radio组件" value="1" />

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

<Layer title="标题" content="弹窗内容" resize />

...

<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 radioGroup = '2'
    function handleGroupChange(e) {
        console.log('groupChange：', e.detail)
    }
</script>

<RadioGroup
    bind:checked={radioGroup}
    on:change={handleGroupChange}
    style="background: #fee; padding: 10px;"
>
    <Radio value="1" style="background: #e4f2ff; padding: 10px;">复选框A</Radio>
    <Radio value="2">复选框B</Radio>
    <Radio value="3">复选框C</Radio>
    <Radio value="4" disabled>禁用</Radio>
</RadioGroup>

<Input bind:value={value1} placeholder="输入关键词" clearable />

<Input bind:value={value1} placeholder="输入关键词" size="small" clearable />

<Input bind:value={value1} placeholder="输入关键词" prefixIcon="sv-icon-search" clearable />

<Input bind:value={value1} placeholder="输入关键词" suffixIcon="sv-icon-locationfill" clearable>
    <div slot="prepend"><i class="sv-icon-mail"></i></div>
</Input>

<Input bind:value={value1} placeholder="输入关键词" clearable>
    <div slot="prepend"><i class="sv-icon-edit"></i></div>
    <div slot="append"><span>RMB</span></div>
</Input>

<Switch bind:checked={value1} activeColor="#d3bef9" inactiveColor="#eee" />

<Switch bind:checked={value2} activeText="open" inactiveText="close" />
<Switch bind:checked={value2} activeText="按季度结" inactiveText="按月结" />

<Switch bind:checked={value3} activeIcon="sv-icon-check" inactiveIcon="sv-icon-close" />
<Switch bind:checked={value3} activeIcon="sv-icon-musicfill" inactiveIcon="sv-icon-musicforbidfill" />

<script>
    let activeKey1 = '2'
    let tabArr1 = [
        { key: '1', label: '用户管理' }, 
        { key: '2', label: '系统管理' }, 
        { key: '3', label: '角色管理' },
        { key: '4', label: '定时任务管理' },
    ]
</script>

<Tabs bind:value={activeKey1} tabs={tabArr1}>
    {#each tabArr1 as item, index}
    <TabPane key={item.key}>{item.label}{index}</TabPane>
    {/each}
</Tabs>

<script>
    let activeKey2 = 'k3'
    let tabArr2 = [
        { key: 'k1', label: '用户管理' }, 
        { key: 'k2', label: '系统管理' }, 
        { key: 'k3', label: '角色管理' },
        { key: 'k4', label: '定时任务管理' },
    ]
    let tabPosition = 'left'
    function changePosition(pos) {
        tabPosition = pos
    }
</script>

<Button on:click={()=>changePosition('top')}>top</Button>

<Tabs
    bind:value={activeKey2}
    tabs={tabArr2}
    {tabPosition}
    style="height: 200px;"
>
    {#each tabArr2 as item, index}
    <TabPane key={item.key}>{item.label}{index}</TabPane>
    {/each}
</Tabs>

支持动态增减选项卡。

Divider分割线，支持各种样式。

OK，由于还有部分组件还在开发中，目前就先分享出来这么多，接下来还会陆续分享出来。

 

标签：ui,Svelte3,Svelte,label,UI,key,组件,let,svelte
来源： https://www.cnblogs.com/xiaoyan2017/p/16425528.html