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

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>