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

2022-06-30 08:35:47 阅读：259 来源： 互联网

标签：ui Svelte3 Svelte label UI key 组件 let svelte

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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

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

◆ 特色

◆ 引入组件

◆ 快速使用