uni-ui是DCloud提供的一个跨端ui库,它是基于vue组件的、flex布局的、无dom的跨全端ui框架。
安装:
yarn add @dcloudio/uni-ui
yarn add -D node-sass sass-loader
:::warning uni-ui 不支持使用 Vue.use() 的方式安装 :::
组件列表
组件名 | 引用路径 | 说明 |
---|---|---|
uniBadge | ‘@dcloudio/uni-ui/lib/uni-badge/uni-badge.vue’ | 数字角标 |
uniCalendar | ‘@dcloudio/uni-ui/lib/uni-calendar/uni-calendar.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’ | 宫格 |
uniIcons | ‘@dcloudio/uni-ui/lib/uni-icons/uni-icons.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’ | 分页器 |
uniPopup | ‘@dcloudio/uni-ui/lib/uni-popup/uni-popup.vue’ | 弹出层 |
uniRate | ‘@dcloudio/uni-ui/lib/uni-rate/uni-rate.vue’ | 评分 |
uniSegmentedControl | ‘@dcloudio/uni-ui/lib/uni-segmented-control/uni-segmented-control.vue’ | 分段器 |
uniSteps | ‘@dcloudio/uni-ui/lib/uni-steps/uni-steps.vue’ | 步骤条 |
uniSwipeAction | ‘@dcloudio/uni-ui/lib/uni-swipe-action/uni-swipe-action.vue’ | 滑动操作 |
uniSwipeDot | ‘@dcloudio/uni-ui/lib/uni-swipe-dot/uni-swipe-dot.vue’ | 滑动操作 |
uniTag | ‘@dcloudio/uni-ui/lib/uni-tag/uni-tag.vue’ | 标签 |
使用方式
以 uni-icons 举例:
<template lang="pug">
.main: uniIcon(type="contact")
</template>
<script>
import uniIcon from '@dcloudio/uni-ui/lib/uni-icons/uni-icons.vue'
export default {
components: {
uniIcon
},
}
</script>