diff --git a/index.html b/index.html new file mode 100644 index 0000000..bb6c0b7 --- /dev/null +++ b/index.html @@ -0,0 +1,781 @@ + + + + + + UI组件库使用示例 + + + + +
+
+

UI组件库使用示例

+

展示自定义Web组件库中搜索框、下拉框、泡泡列表、对话框、模态框、选项卡、提示条和加载中组件的用法

+
+ +
+ +
+
+
S
+

搜索框 (ui-search)

+
+

支持实时搜索、清除功能、回车触发和自定义样式。适用于任何需要用户输入的搜索场景。

+ +
+ +
+ + +
+
+ +
+ <!-- 基本用法 -->
+ <ui-search
+   id="productSearch"
+   placeholder="搜索产品..."
+   max="50"
+ ></ui-search>

+ + <!-- 带前缀/后缀插槽 -->
+ <ui-search placeholder="带图标的搜索">
+   <span slot="prefix">🔍</span>
+   <button slot="append">搜索</button>
+ </ui-search> +
+
+ + +
+
+
D
+

下拉选择框 (ui-select)

+
+

提供美观的下拉选择功能，支持选项分组、自定义样式和响应式设计。

+ +
+ +
+ + +
+
+ +
+ <!-- 基本用法 -->
+ <ui-select
+   list="苹果,香蕉,橙子"
+   value="apple,banana,orange"
+   placeholder="选择水果"
+ ></ui-select>

+ + <!-- 分组选项 -->
+ <ui-select placeholder="选择城市">
+   <dt>中国</dt>
+   <dd>北京</dd>
+   <dd>上海</dd>
+   <dt>美国</dt>
+   <dd>纽约</dd>
+   <dd>洛杉矶</dd>
+ </ui-select> +
+
+ + +
+
+
B
+

泡泡列表 (ui-bubble-list)

+
+

用于展示可选择的标签式选项，支持多行布局、自定义大小和响应式设计。

+ +
+ +
+ + +
+
+ +
+ <!-- 基本用法 -->
+ <ui-bubble-list
+   list="小,中,大"
+   value="sm,md,lg"
+   current="1"
+ ></ui-bubble-list>

+ + <!-- 控制行数和大小 -->
+ <ui-bubble-list
+   list="选项1,选项2,选项3,选项4,选项5"
+   rows="2"
+   size="100px"
+ ></ui-bubble-list> +
+
+ + +
+
+
A
+

对话框 (ui-dialog)

+
+

用于重要操作确认、信息展示或用户输入，支持自定义按钮和内容插槽。

+ +
+ +
+ + +
+
+ +
+ <!-- 基本用法 -->
+ <ui-dialog
+   id="confirmDialog"
+   subtitle="确认删除"
+   content="确定要删除此项吗？此操作不可撤销。"
+   hidden="true"
+ ></ui-dialog>

+ + <!-- 自定义内容 -->
+ <ui-dialog id="customDialog" hidden="true">
+   <span slot="title">自定义标题</span>
+   <div slot="content">
+     <p>这是自定义内容区域</p>
+     <input type="text" placeholder="输入内容">
+   </div>
+   <div slot="button">
+     <button class="dialog-btn">自定义按钮</button>
+   </div>
+ </ui-dialog> +
+
+ + +
+
+
M
+

模态框 (ui-modal)

+
+

用于展示重要信息或表单，背景模糊效果，支持平滑动画过渡。

+ +
+ +
+ + +
+
+ +
+ <!-- 基本用法 -->
+ <ui-modal
+   id="infoModal"
+   subtitle="系统通知"
+   content="您的账户已成功更新。"
+   hidden="true"
+ ></ui-modal>

+ + <!-- 自定义内容 -->
+ <ui-modal id="customModal" hidden="true">
+   <span slot="title">用户反馈</span>
+   <div slot="content">
+     <textarea placeholder="请输入您的反馈..."></textarea>
+   </div>
+ </ui-modal> +
+
+ + +
+
+
T
+

选项卡 (ui-tab)

+
+

用于内容分组和导航，支持描述文本和自定义高亮颜色。

+ +
+ +
选项卡内容区域
+
+ +
+ <!-- 基本用法 -->
+ <ui-tab
+   id="mainTab"
+   list="首页|产品|服务|关于"
+ ></ui-tab>

+ + <!-- 带描述的选项卡 -->
+ <ui-tab
+   list="选项1>描述1|选项2>描述2|选项3>描述3"
+ ></ui-tab>

+ + <!-- 内容区域示例 -->
+ <div id="tab1Content">选项卡1内容</div>
+ <div id="tab2Content" style="display:none">选项卡2内容</div> +
+
+ + +
+
+
N
+

提示条 (ui-tip)

+
+

用于显示操作反馈信息，支持多种类型(info/success/warn/error)和自动消失。

+ +
+ +
+ + + + +
+
+ +
+ <!-- 基本用法 -->
+ <ui-tip
+   id="infoTip"
+   content="操作成功！"
+   type="success"
+   hidden="true"
+   timeout="3000"
+ ></ui-tip>

+ + <!-- 自定义图标 -->
+ <ui-tip id="customTip" hidden="true">
+   <span slot="prefix">🚀</span>
+   <span slot="content">自定义图标提示</span>
+ </ui-tip> +
+
+ + +
+
+
L
+

加载指示器 (ui-loading)

+
+

用于数据加载、操作等待等场景，支持自定义内容和内联/全局模式。

+ +
+ +
+ + +
+
+ +
+ <!-- 全屏加载 -->
+ <ui-loading
+   id="globalLoading"
+   content="正在加载数据..."
+   hidden="true"
+ ></ui-loading>

+ + <!-- 内联加载 -->
+ <div style="position:relative; height:100px;">
+   <ui-loading
+     id="inlineLoading"
+     content="处理中..."
+     hidden="true"
+     inline="true"
+   ></ui-loading>
+ </div> +
+
+
+ +
+

API请求器使用示例

+
+ + + +
+
请求结果将显示在这里...
+
+ + +
+ + + + diff --git a/index.js b/index.js index 5ac4c74..9bae171 100644 --- a/index.js +++ b/index.js @@ -117,7 +117,7 @@ class API { class UI { constructor(registry = null) { const that = this - // TODO：搜索框 + // 搜索框 this.Search = class Input extends HTMLElement { // 可用属性 static observedAttributes = ['value', 'placeholder', 'disabled', 'max', 'wrap'] @@ -148,6 +148,14 @@ class UI { // 属性变化 attributeChangedCallback(name, oldValue, newValue) { this[name] = newValue + if (name == 'disabled') { + this.input.querySelector('.search-input').setAttribute('disabled', eval(this.disabled)) + this.input.querySelector('.search-input').setAttribute('contenteditable', !eval(this.disabled)) + } + + if (name == 'value') { + this.input.querySelector('.search-input').value = newValue + } } // 初始化 init() { @@ -267,7 +275,7 @@ class UI { } // 清空输入框 clear() { - this.input.innerText = this.value = '' + this.input.querySelector('.search-input').innerText = this.value = '' } // 绑定事件 bindEvent() { @@ -317,7 +325,7 @@ class UI { input.querySelector('.search-input').addEventListener('focus', () => this.dispatchEvent(new CustomEvent('focus'))) } } - // TODO：下拉框 + // 下拉框 this.Select = class Select extends HTMLElement { // 可用属性 static observedAttributes = ['placeholder', 'list', 'value', 'current', 'disabled', 'focus'] @@ -329,6 +337,7 @@ class UI { super() // 下拉框 this.select = null + this.ele = null // 下拉框列表 this.list = '默认选项' this.dl = null @@ -354,6 +363,18 @@ class UI { // 属性变化 attributeChangedCallback(name, oldValue, newValue) { this[name] = newValue + + if (name == 'disabled') { + if (eval(this.disabled)) { + this.ele.querySelector('.select-button').setAttribute('disabled', eval(this.disabled)) + } else { + this.ele.querySelector('.select-button').removeAttribute('disabled') + } + } else if (name == 'value') { + this.dl.innerHTML = '' + this.addOption() + this.button.innerText = this.placeholder || this.options[this.current].text + } } // 重置 reset() { @@ -483,6 +504,7 @@ class UI { this.select.appendChild(dl) shadow.appendChild(style) shadow.appendChild(this.select) + this.ele = shadow // 选项点击事件 dl.addEventListener('click', e => {