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,由于还有部分组件还在开发中,目前就先分享出来这么多,接下来还会陆续分享出来。

基于Svelte3.x桌面端UI组件库Svelte UI的更多相关文章

  1. react UI组件库 Salt UI

    https://salt-ui.github.io/?spm=a219a.7629140.0.0.JWztQO

  2. 16款优秀的Vue UI组件库推荐

    16款优秀的Vue UI组件库推荐 Vue 是一个轻巧.高性能.可组件化的MVVM库,API简洁明了,上手快.从Vue推出以来,得到众多Web开发者的认可.在公司的Web前端项目开发中,多个项目采用基 ...

  3. [转载]前端——实用UI组件库

    https://www.cnblogs.com/xuepei/p/7920888.html Angular UI 组件 ngx-bootstrap 是一套Bootstrap 组件 官网:https:/ ...

  4. 强烈推荐优秀的Vue UI组件库

    Vue 是一个轻巧.高性能.可组件化的MVVM库,API简洁明了,上手快.从Vue推出以来,得到众多Web开发者的认可.在公司的Web前端项目开发中,多个项目采用基于Vue的UI组件框架开发,并投入正 ...

  5. ui组件库

    基于Vue的Quasar Framework 中文网 http://www.quasarchs.com/ quasarframework/quasar: Quasar Frameworkhttps:/ ...

  6. 【转】优秀的Vue UI组件库

    原文来源:https://www.leixuesong.com/3342 Vue 是一个轻巧.高性能.可组件化的MVVM库,API简洁明了,上手快.从Vue推出以来,得到众多Web开发者的认可.在公司 ...

  7. vue移动端金融UI组件库滴滴MandMobile面向金融场景设计附功能思维导图

    vue移动端金融UI组件库滴滴MandMobile面向金融场景设计附功能思维导图 Mand Mobile是面向金融场景设计的移动端组件库,基于Vue.js实现.目前已实际应用于滴滴四大金融业务板块的1 ...

  8. 基于Vue的前端UI组件库的比对和选型

    大家好,我是张飞洪,感谢您的阅读,我会不定期和你分享学习心得,希望我的文章能成为你成长路上的垫脚石,让我们一起精进. 由于录制视频的需要,要做前端UI组件库的选型.平时国内外也见了不少基于Vue的UI ...

  9. 【转】前端——实用UI组件库

    Angular UI 组件 ngx-bootstrap 是一套Bootstrap 组件 官网:https://valor-software.com/ngx-bootstrap/#/ github: h ...

随机推荐

  1. netty系列之:netty中的核心MessageToByte编码器

    目录 简介 MessageToByte框架简介 MessageToByteEncoder ByteToMessageDecoder ByteToMessageCodec 总结 简介 之前的文章中,我们 ...

  2. python基础-基本数据类型(一)

    一.什么是数据类型 编程语言通过计算机的一些物理底层机制创造出不同类型的数据,用来表示现实世界中的不同信息,以便于计算机更好的存储和计算. python中常见的数据类型有: 1.数值类型 名称 描述 ...

  3. windows使用命令行终止端口的进程

    C:\Users\fxz>netstat -ano | find "8093" TCP 0.0.0.0:8093 0.0.0.0:0 LISTENING 3956 TCP [ ...

  4. 车辆跟随滑模控制的python实现

    上一篇文章一个汽车跟踪问题的滑模控制实例,已经从理论上证明了可以使用滑模变结构控制策略来解决汽车跟踪问题. 下面分别采用指数趋近律.等速趋近律.准滑模控制的方法完成车辆跟随问题的仿真 import m ...

  5. jQuery操作标签,jQuery事件操作,jQuery动画效果,前端框架

    jQuery操作标签 jQuery代码查找标签绑定的变量名推荐使用 $xxxEle 样式类操作 addClass();// 添加指定的CSS类名. removeClass();// 移除指定的CSS类 ...

  6. 实用git指令

    实用git指令 clone 操作目的 简要操作说明 详细操作说明 init & add & commit & push 操作目的 简要操作说明 详细操作说明 pull & ...

  7. 记一次百万行WPF项目代码的重构记录

    此前带领小组成员主导过一个百万行代码上位机项目的重构工作,分析项目中存在的问题做了些针对性的优化,整个重构工作持续了一年半之久. 主要针对以下问题: 1.产品型号太多导致代码工程的分支太多,维护时会产 ...

  8. 安装Supervisor到CentOS(YUM)

    Supervisor是一个Linux下进程管理工具. Supervisor是用Python开发的一套通用的进程管理程序,能将一个普通的命令行进程变为守护进程,并监控进程状态,异常退出时能自动重启,可以 ...

  9. linux挂载新硬盘并进行分区格式化

    最近要给小伙伴们写几篇文章,关于<linux下误删除文件之后该如何恢复>.对于没有进程占用的文件想要进行数据恢复,不同的文件系统格式需要使用不同的工具,比如:ext4.xfs等.我找遍了我 ...

  10. 关于『HTML』:第二弹

    关于『HTML』:第二弹 建议缩放90%食用 第二弹! 它来了! 它来了! 我竟然没有拖更,对了,你们昨天用草稿纸了么 开始正文之前提一个问题:大家知道"%%%"是什么意思吗?就这 ...