Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including @dcloudio/uni-ui with all npm packages installed. Try it out:

var uniUi = require("@dcloudio/uni-ui")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

@dcloudio/uni-ui v0.0.8

uni-ui 使用说明

初始化项目

在 HBuilderX 中新建 uni-app 项目,进入项目目录,执行:

npm init -y

安装 uni-ui

npm install @dcloudio/uni-ui

使用 uni-ui

script 中引用组件:

import {uniBadge} from '@dcloudio/uni-ui'
//import uniBadge from '@dcloudio/uni-ui/lib/uni-badge/uni-badge.vue' //也可使用此方式引入组件
export default {
    components: {uniBadge}
}

template 中使用组件:

<uni-badge text="1"></uni-badge>
<uni-badge text="2" type="success" @click="bindClick"></uni-badge>
<uni-badge text="3" type="primary" :inverted="true"></uni-badge>

uni-ui 已支持的组件列表

组件名引用路径说明
uniBadge'@dcloudio/uni-ui/lib/uni-badge/uni-badge.vue'数字角标
uniCard'@dcloudio/uni-ui/lib/uni-card/uni-card.vue'卡片
uniCollapse'@dcloudio/uni-ui/lib/uni-collapse/uni-collapse.vue'折叠面板
uniCollapseItem'@dcloudio/uni-ui/lib/uni-collapse-item/uni-collapse-item.vue'折叠面板子组件
uniCountdown'@dcloudio/uni-ui/lib/uni-countdown/uni-countdown.vue'倒计时
uniDrawer'@dcloudio/uni-ui/lib/uni-drawer/uni-drawer.vue'抽屉
uniGrid'@dcloudio/uni-ui/lib/uni-grid/uni-grid.vue'宫格
uniIcon'@dcloudio/uni-ui/lib/uni-icon/uni-icon.vue'图标
uniList'@dcloudio/uni-ui/lib/uni-list/uni-list.vue'列表
uniListItem'@dcloudio/uni-ui/lib/uni-list-item/uni-list-item.vue'列表子组件
uniLoadMore'@dcloudio/uni-ui/lib/uni-load-more/uni-load-more.vue'加载更多
uniNoticeBar'@dcloudio/uni-ui/lib/uni-notice-bar/uni-notice-bar.vue'通告栏
uniNumberBox'@dcloudio/uni-ui/lib/uni-number-box/uni-number-box.vue'数字输入框
uniPagination'@dcloudio/uni-ui/lib/uni-pagination/uni-pagination.vue'分页器
uniRate'@dcloudio/uni-ui/lib/uni-rate/uni-rate.vue'评分
uniSteps'@dcloudio/uni-ui/lib/uni-steps/uni-steps.vue'步骤条
uniSwipeAction'@dcloudio/uni-ui/lib/uni-swipe-action/uni-swipe-action.vue'滑动操作
uniTag'@dcloudio/uni-ui/lib/uni-tag/uni-tag.vue'标签

其他

  • uni-ui 目前支持编译到:H5、App、小程序
  • 本页面介绍使用 npm 的安装使用方式,也可下载相关组件直接使用,组件下载地址见上表
  • uni-ui 不支持使用 Vue.use() 的方式安装
  • uni-ui 依赖 scss,若是 HBuilderX 中创建的 uni-app 项目,需要在 HBuilderX 中安装 scss 插件;如果是使用 cli 创建的 uni-app 项目,需要安装 node-sass 和 sass-loader

Metadata

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free