diff --git a/Readme.md b/Readme.md index 51baf92..0815beb 100644 --- a/Readme.md +++ b/Readme.md @@ -1,6 +1,6 @@ -# @bd/wcui +# @bd/ui -百搭 WCUI 组件库, 基于 web components 开发。面向下一代的 UI 组件库 +百搭 UI 组件库, 基于 web components 开发。面向下一代的 UI 组件库 ### 开发环境 @@ -20,7 +20,7 @@ - [ ] `wc-avatar`头像组件 - [x] `wc-badge`徽标组件 - [x] `wc-drawer`抽屉组件 -- [ ] `wc-collapse`折叠组件 +- [x] `wc-collapse`折叠组件 - [ ] `wc-counter`倒计时组件 - [ ] `wc-drag`拖拽组件 - [x] `wc-image`图片组件 @@ -54,7 +54,8 @@ - [ ] `wc-progress`进度条组件 - [ ] `wc-tree`树形菜单组件 - [ ] `wc-uploader`上传组件 -- [ ] `wc-notify`通知组件 +- [x] `wc-notify`通知组件 +- [ ] `wc-tabs`选项卡组件 ### 测试预览 diff --git a/package.json b/package.json index 618f3e3..2a53056 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@bd/ui", - "version": "1.0.0", + "version": "0.0.1", "description": "", "files": [ "dist/*" diff --git a/src/tabs/index.js b/src/tabs/index.js new file mode 100644 index 0000000..244be71 --- /dev/null +++ b/src/tabs/index.js @@ -0,0 +1,44 @@ +/** + * {选项卡组件} + * @author yutent + * @date 2023/03/06 15:17:25 + */ + +import { css, html, bind, Component } from '@bd/core' + +class Tabs extends Component { + render() { + return html` +

+ 父组件内容 + dsds +

+ + ` + } + + created() { + console.log(this.root) + bind(this.root, 'slotchange', ev => { + let children = ev.target.assignedNodes() + + children.forEach(it => { + let slot = it.querySelector('[slot=label]') + this.$refs.label.append( + slot.cloneNode(true), + this.$refs.label.firstChild + ) + slot.remove() + }) + }) + } +} + +class Tab extends Component { + render() { + return html`
这是卡片内部
` + } +} + +Tabs.reg('tabs') +Tab.reg('tab')