@swc-ui/components

Stencil Web Component

使用 stencil.js 框架开发的符合 Web Components 规范的 web 组件库

使用须知

-   所有组件的使用方式都和原生方式一致（获取元素的属性...）
-   自定义事件（非原生事件）都需要使用`addEventListener`来绑定

使用说明

npm or yarn

npm i swc-ui
yarn add swc-ui
pnpm i swc-ui

已有组件

组件名称	搭配子组件	组件描述
aspect-ratio	-	宽高保持固定比例的容器
Badge	-	徽章组件
breadcrumb	breadcrumb-item	面包屑导航组件
breadcrumb-item	-	面包屑导航子组件，不可单独使用
button	-	按钮组件
card	-	卡片组件
checkbox	-	多选框
checkbox-group	checkbox	多选框组
col	-	row的子组件，不可单独使用
contextmenu	contextmenu-item	右键菜单组件
contextmenu-item	-	右键菜单子组件，不可单独使用
collapse	Collapse-item	折叠面板
collapse-item	-	折叠面板子组件，不可单独使用
dialog	-	弹窗组件
divider	-	分割线，常用于分割内容
drawer	-	抽屉组件
dropdown	dropdown-item	下拉菜单组件
dropdown-item	-	下拉菜单子组件，不可单独使用
empty	-	空组件，常用于内容为空的场合
grid	grid-item	宫格组件-常用于九宫格
image	-	图片组件
input	-	输入组件
Loading	-	加载
message	-	顶部弹层提示组件
option	-	下拉选择子组件，不可单独使用
process	-	进度条组件
radio	-	单选框
radio-group	radio	单选框组
row	col	行组件，子组件必须是col组件
select	option	下拉选择组件
switch	-	开关组件
step	-	步骤条子组件，不可单独使用
steps	step	步骤条组件
tabs	tab-pane	tab组件
tab-pane	-	tab子组件，不可单独使用
tag	-	标签组件
timeline	timeline-item	时间线组件
timeline-item	-	时间线子组件，不可单独使用
tip	-	直接显示在界面上提示组件，等同于elementPlus的alert组件
tooltip	-	提示组件
Link	-	链接
Text	-	文字

计划完成组件

组件名称	搭配子组件	组件描述
slider	-	滑块组件
pager	-	分页组件
notification	-	通知组件
rate	-	评分组件