https://github.com/guojikun/ivy-ui
使用 stencil.js 框架开发的 Web Components 组件库
https://github.com/guojikun/ivy-ui
component ivy-ui stenciljs webcomponent
Last synced: about 1 year ago
JSON representation
使用 stencil.js 框架开发的 Web Components 组件库
- Host: GitHub
- URL: https://github.com/guojikun/ivy-ui
- Owner: GuoJikun
- License: mit
- Created: 2021-12-05T04:55:27.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2024-05-27T06:56:35.000Z (about 2 years ago)
- Last Synced: 2025-04-12T02:06:08.096Z (about 1 year ago)
- Topics: component, ivy-ui, stenciljs, webcomponent
- Language: JavaScript
- Homepage: https://ivy.jser.press
- Size: 2.17 MB
- Stars: 31
- Watchers: 2
- Forks: 5
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# ivy-ui
使用 [stencil.js](https://stenciljs.com/) 框架开发的符合 Web Components 规范的 web 组件库
> 感谢 JetBrains 提供的 WebStorm 专业版授权
## 使用须知
```md
- 所有组件的使用方式都和原生方式一致（获取元素的属性...）
- 自定义事件（非原生事件）都需要使用`addEventListener`来绑定
```
## 使用说明
### npm、 yarn、 pnpm
```bash
npm i ivy-ui
yarn add ivy-ui
pnpm add ivy-ui
```
### script 引入
```html
```
## 已完成组件
| 组件名称 | 搭配子组件 | 组件描述 |
|------------------|:-----------------|:-------------------------------------|
| 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 | - | 提示组件 |
## 计划完成组件
| 组件名称 | 搭配子组件 | 组件描述 |
|:-------------|:------|:-----|
| slider | - | 滑块组件 |
| pager | - | 分页组件 |
| notification | - | 通知组件 |
| rate | - | 评分组件 |