ColorUI 开发文档ColorUI 开发文档
指南
组件
实验室
Api
更新日志
  • uni-app版
  • 2.x版本
  • GitHub 仓库
  • Gitee 仓库
指南
组件
实验室
Api
更新日志
  • uni-app版
  • 2.x版本
  • GitHub 仓库
  • Gitee 仓库
  • 组件

    • 引用组件
    • 主题 ui-change-theme
    • 导航栏 ui-navbar
    • 头像 ui-avatar
    • 标题 ui-title
    • 标签 ui-tag
    • 按钮 ui-btn
    • 图片 ui-img
    • 代码 ui-code
    • 进度条 ui-progress
    • 加载 ui-loading
    • 菜单 ui-menu
    • 浮动 ui-fixed
    • 卡片 ui-card
    • 栅栏 ui-grid
    • 气泡框 ui-popover
    • 模态框 ui-modal
    • 轻提示 $tips
    • 选项卡 ui-tab
    • 轮播图 ui-swiper
    • 步骤条 ui-steps
    • 输入框 ui-input
    • 单选框 ui-radio
    • 复选框 ui-checkbox
    • 开关 ui-switch

菜单 ui-menu

"usingComponents": {
    "ui-menu": "mp-cu/colorUI/components/ui-menu/ui-menu",
    "ui-menu-item": "mp-cu/colorUI/components/ui-menu-item/ui-menu-item"
}

示例

<ui-menu ui="mt-5 border radius">
    <ui-menu-item title="Github" icon="cicon-github"/>
    <ui-menu-item arrow title="关于Colorui组件库" isIcon>
        <image slot="icon" src="/static/logo.png" mode="aspectFill" class="ui-menu-item-image"/>
    </ui-menu-item>
    <ui-menu-item arrow title="按钮" icon="cicon-ellipse" isAction>
        <button class="ui-btn border sm" slot="action">
            <text class="cicon-cloud-upload"/>
            <text>上传</text>
        </button>
    </ui-menu-item>
    <ui-menu-item arrow title="标签" icon="cicon-tag text-orange" isAction>
        <view slot="action">
            <ui-tag bg="bg-red" info="bg-red" src="/static/avatar/1001.jpg"/>
            <ui-tag bg="bg-red-thin" info="bg-red-thin" ui="sm"/>
        </view>
    </ui-menu-item>
    <ui-menu-item arrow title="头像组" icon="cicon-tag text-orange" isAction>
        <ui-avatar-stack ui="mx-3" slot="action">
            <ui-avatar ui="round" src="/static/avatar/1001.jpg" stack first/>
            <ui-avatar ui="round" src="/static/avatar/1002.jpg" stack/>
            <ui-avatar ui="round" src="/static/avatar/1003.jpg" stack/>
        </ui-avatar-stack>
    </ui-menu-item>
</ui-menu>

参数

ui-menu

参数类型可选值默认值说明
uiString--其他class
bgString-ui-BG背景颜色

ui-menu-item

参数类型可选值默认值说明
uiString--其他class
titleString--标题名称
iconString--图标
arrowBoolean/String-false右边箭头
isIconBoolean-false图标插槽
isActionBoolean-false右边内容插槽

mp-cu

Prev
加载 ui-loading
Next
浮动 ui-fixed