基於Svelte3.x桌面端UI元件庫Svelte UI

xiaoyan2017發表於2022-06-30
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，由於還有部分元件還在開發中，目前就先分享出來這麼多，接下來還會陸續分享出來。

 

相關文章