UI组件库使用示例

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>