32 changed files with 3894 additions and 10 deletions
@ -0,0 +1,38 @@ |
|||
## 1.4.4（2024-03-20） |
|||
- 修复 titleBorder类型修正 |
|||
## 1.4.3（2022-01-25） |
|||
- 修复 初始化的时候 ，open 属性失效的bug |
|||
## 1.4.2（2022-01-21） |
|||
- 修复 微信小程序resize后组件收起的bug |
|||
## 1.4.1（2021-11-22） |
|||
- 修复 vue3中个别scss变量无法找到的问题 |
|||
## 1.4.0（2021-11-19） |
|||
- 优化 组件UI，并提供设计资源，详见:[https://uniapp.dcloud.io/component/uniui/resource](https://uniapp.dcloud.io/component/uniui/resource) |
|||
- 文档迁移，详见:[https://uniapp.dcloud.io/component/uniui/uni-collapse](https://uniapp.dcloud.io/component/uniui/uni-collapse) |
|||
## 1.3.3（2021-08-17） |
|||
- 优化 show-arrow 属性默认为true |
|||
## 1.3.2（2021-08-17） |
|||
- 新增 show-arrow 属性，控制是否显示右侧箭头 |
|||
## 1.3.1（2021-07-30） |
|||
- 优化 vue3下小程序事件警告的问题 |
|||
## 1.3.0（2021-07-30） |
|||
- 组件兼容 vue3，如何创建vue3项目，详见 [uni-app 项目支持 vue3 介绍](https://ask.dcloud.net.cn/article/37834) |
|||
## 1.2.2（2021-07-21） |
|||
- 修复 由1.2.0版本引起的 change 事件返回 undefined 的Bug |
|||
## 1.2.1（2021-07-21） |
|||
- 优化 组件示例 |
|||
## 1.2.0（2021-07-21） |
|||
- 新增 组件折叠动画 |
|||
- 新增 value\v-model 属性 ，动态修改面板折叠状态 |
|||
- 新增 title 插槽 ，可定义面板标题 |
|||
- 新增 border 属性 ，显示隐藏面板内容分隔线 |
|||
- 新增 title-border 属性 ，显示隐藏面板标题分隔线 |
|||
- 修复 resize 方法失效的Bug |
|||
- 修复 change 事件返回参数不正确的Bug |
|||
- 优化 H5、App 平台自动更具内容更新高度，无需调用 reszie() 方法 |
|||
## 1.1.7（2021-05-12） |
|||
- 新增 组件示例地址 |
|||
## 1.1.6（2021-02-05） |
|||
- 优化 组件引用关系，通过uni_modules引用组件 |
|||
## 1.1.5（2021-02-05） |
|||
- 调整为uni_modules目录规范 |
|||
@ -0,0 +1,402 @@ |
|||
<template> |
|||
<view class="uni-collapse-item"> |
|||
<!-- onClick(!isOpen) --> |
|||
<view @click="onClick(!isOpen)" class="uni-collapse-item__title" |
|||
:class="{'is-open':isOpen &&titleBorder === 'auto' ,'uni-collapse-item-border':titleBorder !== 'none'}"> |
|||
<view class="uni-collapse-item__title-wrap"> |
|||
<slot name="title"> |
|||
<view class="uni-collapse-item__title-box" :class="{'is-disabled':disabled}"> |
|||
<image v-if="thumb" :src="thumb" class="uni-collapse-item__title-img" /> |
|||
<text class="uni-collapse-item__title-text">{{ title }}</text> |
|||
</view> |
|||
</slot> |
|||
</view> |
|||
<view v-if="showArrow" |
|||
:class="{ 'uni-collapse-item__title-arrow-active': isOpen, 'uni-collapse-item--animation': showAnimation === true }" |
|||
class="uni-collapse-item__title-arrow"> |
|||
<uni-icons :color="disabled?'#ddd':'#bbb'" size="14" type="bottom" /> |
|||
</view> |
|||
</view> |
|||
<view class="uni-collapse-item__wrap" :class="{'is--transition':showAnimation}" |
|||
:style="{height: (isOpen?height:0) +'px'}"> |
|||
<view :id="elId" ref="collapse--hook" class="uni-collapse-item__wrap-content" |
|||
:class="{open:isheight,'uni-collapse-item--border':border&&isOpen}"> |
|||
<slot></slot> |
|||
</view> |
|||
</view> |
|||
|
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
// #ifdef APP-NVUE |
|||
const dom = weex.requireModule('dom') |
|||
// #endif |
|||
/** |
|||
* CollapseItem 折叠面板子组件 |
|||
* @description 折叠面板子组件 |
|||
* @property {String} title 标题文字 |
|||
* @property {String} thumb 标题左侧缩略图 |
|||
* @property {String} name 唯一标志符 |
|||
* @property {Boolean} open = [true|false] 是否展开组件 |
|||
* @property {Boolean} titleBorder = [true|false] 是否显示标题分隔线 |
|||
* @property {String} border = ['auto'|'show'|'none'] 是否显示分隔线 |
|||
* @property {Boolean} disabled = [true|false] 是否展开面板 |
|||
* @property {Boolean} showAnimation = [true|false] 开启动画 |
|||
* @property {Boolean} showArrow = [true|false] 是否显示右侧箭头 |
|||
*/ |
|||
export default { |
|||
name: 'uniCollapseItem', |
|||
props: { |
|||
// 列表标题 |
|||
title: { |
|||
type: String, |
|||
default: '' |
|||
}, |
|||
name: { |
|||
type: [Number, String], |
|||
default: '' |
|||
}, |
|||
// 是否禁用 |
|||
disabled: { |
|||
type: Boolean, |
|||
default: false |
|||
}, |
|||
// #ifdef APP-PLUS |
|||
// 是否显示动画,app 端默认不开启动画，卡顿严重 |
|||
showAnimation: { |
|||
type: Boolean, |
|||
default: false |
|||
}, |
|||
// #endif |
|||
// #ifndef APP-PLUS |
|||
// 是否显示动画 |
|||
showAnimation: { |
|||
type: Boolean, |
|||
default: true |
|||
}, |
|||
// #endif |
|||
// 是否展开 |
|||
open: { |
|||
type: Boolean, |
|||
default: false |
|||
}, |
|||
// 缩略图 |
|||
thumb: { |
|||
type: String, |
|||
default: '' |
|||
}, |
|||
// 标题分隔线显示类型 |
|||
titleBorder: { |
|||
type: String, |
|||
default: 'auto' |
|||
}, |
|||
border: { |
|||
type: Boolean, |
|||
default: true |
|||
}, |
|||
showArrow: { |
|||
type: Boolean, |
|||
default: true |
|||
} |
|||
}, |
|||
data() { |
|||
// TODO 随机生生元素ID，解决百度小程序获取同一个元素位置信息的bug |
|||
const elId = `Uni_${Math.ceil(Math.random() * 10e5).toString(36)}` |
|||
return { |
|||
isOpen: false, |
|||
isheight: null, |
|||
height: 0, |
|||
elId, |
|||
nameSync: 0 |
|||
} |
|||
}, |
|||
watch: { |
|||
open(val) { |
|||
this.isOpen = val |
|||
this.onClick(val, 'init') |
|||
} |
|||
}, |
|||
updated(e) { |
|||
this.$nextTick(() => { |
|||
this.init(true) |
|||
}) |
|||
}, |
|||
created() { |
|||
this.collapse = this.getCollapse() |
|||
this.oldHeight = 0 |
|||
this.onClick(this.open, 'init') |
|||
}, |
|||
// #ifndef VUE3 |
|||
// TODO vue2 |
|||
destroyed() { |
|||
if (this.__isUnmounted) return |
|||
this.uninstall() |
|||
}, |
|||
// #endif |
|||
// #ifdef VUE3 |
|||
// TODO vue3 |
|||
unmounted() { |
|||
this.__isUnmounted = true |
|||
this.uninstall() |
|||
}, |
|||
// #endif |
|||
mounted() { |
|||
if (!this.collapse) return |
|||
if (this.name !== '') { |
|||
this.nameSync = this.name |
|||
} else { |
|||
this.nameSync = this.collapse.childrens.length + '' |
|||
} |
|||
if (this.collapse.names.indexOf(this.nameSync) === -1) { |
|||
this.collapse.names.push(this.nameSync) |
|||
} else { |
|||
console.warn(`name 值 ${this.nameSync} 重复`); |
|||
} |
|||
if (this.collapse.childrens.indexOf(this) === -1) { |
|||
this.collapse.childrens.push(this) |
|||
} |
|||
this.init() |
|||
}, |
|||
methods: { |
|||
init(type) { |
|||
// #ifndef APP-NVUE |
|||
this.getCollapseHeight(type) |
|||
// #endif |
|||
// #ifdef APP-NVUE |
|||
this.getNvueHwight(type) |
|||
// #endif |
|||
}, |
|||
uninstall() { |
|||
if (this.collapse) { |
|||
this.collapse.childrens.forEach((item, index) => { |
|||
if (item === this) { |
|||
this.collapse.childrens.splice(index, 1) |
|||
} |
|||
}) |
|||
this.collapse.names.forEach((item, index) => { |
|||
if (item === this.nameSync) { |
|||
this.collapse.names.splice(index, 1) |
|||
} |
|||
}) |
|||
} |
|||
}, |
|||
onClick(isOpen, type) { |
|||
if (this.disabled) return |
|||
this.isOpen = isOpen |
|||
if (this.isOpen && this.collapse) { |
|||
this.collapse.setAccordion(this) |
|||
} |
|||
if (type !== 'init') { |
|||
this.collapse.onChange(isOpen, this) |
|||
} |
|||
}, |
|||
getCollapseHeight(type, index = 0) { |
|||
const views = uni.createSelectorQuery().in(this) |
|||
views |
|||
.select(`#${this.elId}`) |
|||
.fields({ |
|||
size: true |
|||
}, data => { |
|||
// TODO 百度中可能获取不到节点信息 ，需要循环获取 |
|||
if (index >= 10) return |
|||
if (!data) { |
|||
index++ |
|||
this.getCollapseHeight(false, index) |
|||
return |
|||
} |
|||
// #ifdef APP-NVUE |
|||
this.height = data.height + 1 |
|||
// #endif |
|||
// #ifndef APP-NVUE |
|||
this.height = data.height |
|||
// #endif |
|||
this.isheight = true |
|||
if (type) return |
|||
this.onClick(this.isOpen, 'init') |
|||
}) |
|||
.exec() |
|||
}, |
|||
getNvueHwight(type) { |
|||
const result = dom.getComponentRect(this.$refs['collapse--hook'], option => { |
|||
if (option && option.result && option.size) { |
|||
// #ifdef APP-NVUE |
|||
this.height = option.size.height + 1 |
|||
// #endif |
|||
// #ifndef APP-NVUE |
|||
this.height = option.size.height |
|||
// #endif |
|||
this.isheight = true |
|||
if (type) return |
|||
this.onClick(this.open, 'init') |
|||
} |
|||
}) |
|||
}, |
|||
/** |
|||
* 获取父元素实例 |
|||
*/ |
|||
getCollapse(name = 'uniCollapse') { |
|||
let parent = this.$parent; |
|||
let parentName = parent.$options.name; |
|||
while (parentName !== name) { |
|||
parent = parent.$parent; |
|||
if (!parent) return false; |
|||
parentName = parent.$options.name; |
|||
} |
|||
return parent; |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
.uni-collapse-item { |
|||
/* #ifndef APP-NVUE */ |
|||
box-sizing: border-box; |
|||
|
|||
/* #endif */ |
|||
&__title { |
|||
/* #ifndef APP-NVUE */ |
|||
display: flex; |
|||
width: 100%; |
|||
box-sizing: border-box; |
|||
/* #endif */ |
|||
flex-direction: row; |
|||
align-items: center; |
|||
transition: border-bottom-color .3s; |
|||
|
|||
// transition-property: border-bottom-color; |
|||
// transition-duration: 5s; |
|||
&-wrap { |
|||
width: 100%; |
|||
flex: 1; |
|||
|
|||
} |
|||
|
|||
&-box { |
|||
padding: 0 15px; |
|||
/* #ifndef APP-NVUE */ |
|||
display: flex; |
|||
width: 100%; |
|||
box-sizing: border-box; |
|||
/* #endif */ |
|||
flex-direction: row; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
height: 48px; |
|||
line-height: 48px; |
|||
background-color: #fff; |
|||
color: #303133; |
|||
font-size: 13px; |
|||
font-weight: 500; |
|||
/* #ifdef H5 */ |
|||
cursor: pointer; |
|||
outline: none; |
|||
|
|||
/* #endif */ |
|||
&.is-disabled { |
|||
.uni-collapse-item__title-text { |
|||
color: #999; |
|||
} |
|||
} |
|||
|
|||
} |
|||
|
|||
&.uni-collapse-item-border { |
|||
border-bottom: 1px solid #ebeef5; |
|||
} |
|||
|
|||
&.is-open { |
|||
border-bottom-color: transparent; |
|||
} |
|||
|
|||
&-img { |
|||
height: 22px; |
|||
width: 22px; |
|||
margin-right: 10px; |
|||
} |
|||
|
|||
&-text { |
|||
flex: 1; |
|||
font-size: 14px; |
|||
/* #ifndef APP-NVUE */ |
|||
white-space: nowrap; |
|||
color: inherit; |
|||
/* #endif */ |
|||
/* #ifdef APP-NVUE */ |
|||
lines: 1; |
|||
/* #endif */ |
|||
overflow: hidden; |
|||
text-overflow: ellipsis; |
|||
} |
|||
|
|||
&-arrow { |
|||
/* #ifndef APP-NVUE */ |
|||
display: flex; |
|||
box-sizing: border-box; |
|||
/* #endif */ |
|||
align-items: center; |
|||
justify-content: center; |
|||
width: 20px; |
|||
height: 20px; |
|||
margin-right: 10px; |
|||
transform: rotate(0deg); |
|||
|
|||
&-active { |
|||
transform: rotate(-180deg); |
|||
} |
|||
} |
|||
|
|||
|
|||
} |
|||
|
|||
&__wrap { |
|||
/* #ifndef APP-NVUE */ |
|||
will-change: height; |
|||
box-sizing: border-box; |
|||
/* #endif */ |
|||
background-color: #fff; |
|||
overflow: hidden; |
|||
position: relative; |
|||
height: 0; |
|||
|
|||
&.is--transition { |
|||
// transition: all 0.3s; |
|||
transition-property: height, border-bottom-width; |
|||
transition-duration: 0.3s; |
|||
/* #ifndef APP-NVUE */ |
|||
will-change: height; |
|||
/* #endif */ |
|||
} |
|||
|
|||
|
|||
|
|||
&-content { |
|||
position: absolute; |
|||
font-size: 13px; |
|||
color: #303133; |
|||
// transition: height 0.3s; |
|||
border-bottom-color: transparent; |
|||
border-bottom-style: solid; |
|||
border-bottom-width: 0; |
|||
|
|||
&.uni-collapse-item--border { |
|||
border-bottom-width: 1px; |
|||
border-bottom-color: red; |
|||
border-bottom-color: #ebeef5; |
|||
} |
|||
|
|||
&.open { |
|||
position: relative; |
|||
} |
|||
} |
|||
} |
|||
|
|||
&--animation { |
|||
transition-property: transform; |
|||
transition-duration: 0.3s; |
|||
transition-timing-function: ease; |
|||
} |
|||
|
|||
} |
|||
</style> |
|||
@ -0,0 +1,147 @@ |
|||
<template> |
|||
<view class="uni-collapse"> |
|||
<slot /> |
|||
</view> |
|||
</template> |
|||
<script> |
|||
/** |
|||
* Collapse 折叠面板 |
|||
* @description 展示可以折叠 / 展开的内容区域 |
|||
* @tutorial https://ext.dcloud.net.cn/plugin?id=23 |
|||
* @property {String|Array} value 当前激活面板改变时触发(如果是手风琴模式，参数类型为string，否则为array) |
|||
* @property {Boolean} accordion = [true|false] 是否开启手风琴效果是否开启手风琴效果 |
|||
* @event {Function} change 切换面板时触发，如果是手风琴模式，返回类型为string，否则为array |
|||
*/ |
|||
export default { |
|||
name: 'uniCollapse', |
|||
emits:['change','activeItem','input','update:modelValue'], |
|||
props: { |
|||
value: { |
|||
type: [String, Array], |
|||
default: '' |
|||
}, |
|||
modelValue: { |
|||
type: [String, Array], |
|||
default: '' |
|||
}, |
|||
accordion: { |
|||
// 是否开启手风琴效果 |
|||
type: [Boolean, String], |
|||
default: false |
|||
}, |
|||
}, |
|||
data() { |
|||
return {} |
|||
}, |
|||
computed: { |
|||
// TODO 兼容 vue2 和 vue3 |
|||
dataValue() { |
|||
let value = (typeof this.value === 'string' && this.value === '') || |
|||
(Array.isArray(this.value) && this.value.length === 0) |
|||
let modelValue = (typeof this.modelValue === 'string' && this.modelValue === '') || |
|||
(Array.isArray(this.modelValue) && this.modelValue.length === 0) |
|||
if (value) { |
|||
return this.modelValue |
|||
} |
|||
if (modelValue) { |
|||
return this.value |
|||
} |
|||
|
|||
return this.value |
|||
} |
|||
}, |
|||
watch: { |
|||
dataValue(val) { |
|||
this.setOpen(val) |
|||
} |
|||
}, |
|||
created() { |
|||
this.childrens = [] |
|||
this.names = [] |
|||
}, |
|||
mounted() { |
|||
this.$nextTick(()=>{ |
|||
this.setOpen(this.dataValue) |
|||
}) |
|||
}, |
|||
methods: { |
|||
setOpen(val) { |
|||
let str = typeof val === 'string' |
|||
let arr = Array.isArray(val) |
|||
this.childrens.forEach((vm, index) => { |
|||
if (str) { |
|||
if (val === vm.nameSync) { |
|||
if (!this.accordion) { |
|||
console.warn('accordion 属性为 false ,v-model 类型应该为 array') |
|||
return |
|||
} |
|||
vm.isOpen = true |
|||
} |
|||
} |
|||
if (arr) { |
|||
val.forEach(v => { |
|||
if (v === vm.nameSync) { |
|||
if (this.accordion) { |
|||
console.warn('accordion 属性为 true ,v-model 类型应该为 string') |
|||
return |
|||
} |
|||
vm.isOpen = true |
|||
} |
|||
}) |
|||
} |
|||
}) |
|||
this.emit(val) |
|||
}, |
|||
setAccordion(self) { |
|||
if (!this.accordion) return |
|||
this.childrens.forEach((vm, index) => { |
|||
if (self !== vm) { |
|||
vm.isOpen = false |
|||
} |
|||
}) |
|||
}, |
|||
resize() { |
|||
this.childrens.forEach((vm, index) => { |
|||
// #ifndef APP-NVUE |
|||
vm.getCollapseHeight() |
|||
// #endif |
|||
// #ifdef APP-NVUE |
|||
vm.getNvueHwight() |
|||
// #endif |
|||
}) |
|||
}, |
|||
onChange(isOpen, self) { |
|||
let activeItem = [] |
|||
|
|||
if (this.accordion) { |
|||
activeItem = isOpen ? self.nameSync : '' |
|||
} else { |
|||
this.childrens.forEach((vm, index) => { |
|||
if (vm.isOpen) { |
|||
activeItem.push(vm.nameSync) |
|||
} |
|||
}) |
|||
} |
|||
this.$emit('change', activeItem) |
|||
this.emit(activeItem) |
|||
}, |
|||
emit(val){ |
|||
this.$emit('input', val) |
|||
this.$emit('update:modelValue', val) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
<style lang="scss" > |
|||
.uni-collapse { |
|||
/* #ifndef APP-NVUE */ |
|||
width: 100%; |
|||
display: flex; |
|||
/* #endif */ |
|||
/* #ifdef APP-NVUE */ |
|||
flex: 1; |
|||
/* #endif */ |
|||
flex-direction: column; |
|||
background-color: #fff; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,86 @@ |
|||
{ |
|||
"id": "uni-collapse", |
|||
"displayName": "uni-collapse 折叠面板", |
|||
"version": "1.4.4", |
|||
"description": "Collapse 组件，可以折叠 / 展开的内容区域。", |
|||
"keywords": [ |
|||
"uni-ui", |
|||
"折叠", |
|||
"折叠面板", |
|||
"手风琴" |
|||
], |
|||
"repository": "https://github.com/dcloudio/uni-ui", |
|||
"engines": { |
|||
"HBuilderX": "" |
|||
}, |
|||
"directories": { |
|||
"example": "../../temps/example_temps" |
|||
}, |
|||
"dcloudext": { |
|||
"sale": { |
|||
"regular": { |
|||
"price": "0.00" |
|||
}, |
|||
"sourcecode": { |
|||
"price": "0.00" |
|||
} |
|||
}, |
|||
"contact": { |
|||
"qq": "" |
|||
}, |
|||
"declaration": { |
|||
"ads": "无", |
|||
"data": "无", |
|||
"permissions": "无" |
|||
}, |
|||
"npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui", |
|||
"type": "component-vue" |
|||
}, |
|||
"uni_modules": { |
|||
"dependencies": [ |
|||
"uni-scss", |
|||
"uni-icons" |
|||
], |
|||
"encrypt": [], |
|||
"platforms": { |
|||
"cloud": { |
|||
"tcb": "y", |
|||
"aliyun": "y" |
|||
}, |
|||
"client": { |
|||
"App": { |
|||
"app-vue": "y", |
|||
"app-nvue": "y" |
|||
}, |
|||
"H5-mobile": { |
|||
"Safari": "y", |
|||
"Android Browser": "y", |
|||
"微信浏览器(Android)": "y", |
|||
"QQ浏览器(Android)": "y" |
|||
}, |
|||
"H5-pc": { |
|||
"Chrome": "y", |
|||
"IE": "y", |
|||
"Edge": "y", |
|||
"Firefox": "y", |
|||
"Safari": "y" |
|||
}, |
|||
"小程序": { |
|||
"微信": "y", |
|||
"阿里": "y", |
|||
"百度": "y", |
|||
"字节跳动": "y", |
|||
"QQ": "y" |
|||
}, |
|||
"快应用": { |
|||
"华为": "u", |
|||
"联盟": "u" |
|||
}, |
|||
"Vue": { |
|||
"vue2": "y", |
|||
"vue3": "y" |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
@ -0,0 +1,12 @@ |
|||
|
|||
|
|||
## Collapse 折叠面板 |
|||
> **组件名：uni-collapse** |
|||
> 代码块： `uCollapse` |
|||
> 关联组件：`uni-collapse-item`、`uni-icons`。 |
|||
|
|||
|
|||
折叠面板用来折叠/显示过长的内容或者是列表。通常是在多内容分类项使用，折叠不重要的内容，显示重要内容。点击可以展开折叠部分。 |
|||
|
|||
### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-collapse) |
|||
#### 如使用过程中有任何问题，或者您对uni-ui有一些好的建议，欢迎加入 uni-ui 交流群：871950839 |
|||
@ -0,0 +1,42 @@ |
|||
## 2.0.10（2024-06-07） |
|||
- 优化 uni-app x 中，size 属性的类型 |
|||
## 2.0.9（2024-01-12） |
|||
fix: 修复图标大小默认值错误的问题 |
|||
## 2.0.8（2023-12-14） |
|||
- 修复 项目未使用 ts 情况下，打包报错的bug |
|||
## 2.0.7（2023-12-14） |
|||
- 修复 size 属性为 string 时，不加单位导致尺寸异常的bug |
|||
## 2.0.6（2023-12-11） |
|||
- 优化 兼容老版本icon类型，如 top ，bottom 等 |
|||
## 2.0.5（2023-12-11） |
|||
- 优化 兼容老版本icon类型，如 top ，bottom 等 |
|||
## 2.0.4（2023-12-06） |
|||
- 优化 uni-app x 下示例项目图标排序 |
|||
## 2.0.3（2023-12-06） |
|||
- 修复 nvue下引入组件报错的bug |
|||
## 2.0.2（2023-12-05） |
|||
-优化 size 属性支持单位 |
|||
## 2.0.1（2023-12-05） |
|||
- 新增 uni-app x 支持定义图标 |
|||
## 1.3.5（2022-01-24） |
|||
- 优化 size 属性可以传入不带单位的字符串数值 |
|||
## 1.3.4（2022-01-24） |
|||
- 优化 size 支持其他单位 |
|||
## 1.3.3（2022-01-17） |
|||
- 修复 nvue 有些图标不显示的bug，兼容老版本图标 |
|||
## 1.3.2（2021-12-01） |
|||
- 优化 示例可复制图标名称 |
|||
## 1.3.1（2021-11-23） |
|||
- 优化 兼容旧组件 type 值 |
|||
## 1.3.0（2021-11-19） |
|||
- 新增 更多图标 |
|||
- 优化 自定义图标使用方式 |
|||
- 优化 组件UI，并提供设计资源，详见:[https://uniapp.dcloud.io/component/uniui/resource](https://uniapp.dcloud.io/component/uniui/resource) |
|||
- 文档迁移，详见:[https://uniapp.dcloud.io/component/uniui/uni-icons](https://uniapp.dcloud.io/component/uniui/uni-icons) |
|||
## 1.1.7（2021-11-08） |
|||
## 1.2.0（2021-07-30） |
|||
- 组件兼容 vue3，如何创建vue3项目，详见 [uni-app 项目支持 vue3 介绍](https://ask.dcloud.net.cn/article/37834) |
|||
## 1.1.5（2021-05-12） |
|||
- 新增 组件示例地址 |
|||
## 1.1.4（2021-02-05） |
|||
- 调整为uni_modules目录规范 |
|||
@ -0,0 +1,91 @@ |
|||
<template> |
|||
<text class="uni-icons" :style="styleObj"> |
|||
<slot>{{unicode}}</slot> |
|||
</text> |
|||
</template> |
|||
|
|||
<script> |
|||
import { fontData, IconsDataItem } from './uniicons_file' |
|||
|
|||
/** |
|||
* Icons 图标 |
|||
* @description 用于展示 icon 图标 |
|||
* @tutorial https://ext.dcloud.net.cn/plugin?id=28 |
|||
* @property {Number,String} size 图标大小 |
|||
* @property {String} type 图标图案，参考示例 |
|||
* @property {String} color 图标颜色 |
|||
* @property {String} customPrefix 自定义图标 |
|||
* @event {Function} click 点击 Icon 触发事件 |
|||
*/ |
|||
export default { |
|||
name: "uni-icons", |
|||
props: { |
|||
type: { |
|||
type: String, |
|||
default: '' |
|||
}, |
|||
color: { |
|||
type: String, |
|||
default: '#333333' |
|||
}, |
|||
size: { |
|||
type: [Number, String], |
|||
default: 16 |
|||
}, |
|||
fontFamily: { |
|||
type: String, |
|||
default: '' |
|||
} |
|||
}, |
|||
data() { |
|||
return {}; |
|||
}, |
|||
computed: { |
|||
unicode() : string { |
|||
let codes = fontData.find((item : IconsDataItem) : boolean => { return item.font_class == this.type }) |
|||
if (codes !== null) { |
|||
return codes.unicode |
|||
} |
|||
return '' |
|||
}, |
|||
iconSize() : string { |
|||
const size = this.size |
|||
if (typeof size == 'string') { |
|||
const reg = /^[0-9]*$/g |
|||
return reg.test(size as string) ? '' + size + 'px' : '' + size; |
|||
// return '' + this.size |
|||
} |
|||
return this.getFontSize(size as number) |
|||
}, |
|||
styleObj() : UTSJSONObject { |
|||
if (this.fontFamily !== '') { |
|||
return { color: this.color, fontSize: this.iconSize, fontFamily: this.fontFamily } |
|||
} |
|||
return { color: this.color, fontSize: this.iconSize } |
|||
} |
|||
}, |
|||
created() { }, |
|||
methods: { |
|||
/** |
|||
* 字体大小 |
|||
*/ |
|||
getFontSize(size : number) : string { |
|||
return size + 'px'; |
|||
}, |
|||
}, |
|||
} |
|||
</script> |
|||
|
|||
<style scoped> |
|||
@font-face { |
|||
font-family: UniIconsFontFamily; |
|||
src: url('./uniicons.ttf'); |
|||
} |
|||
|
|||
.uni-icons { |
|||
font-family: UniIconsFontFamily; |
|||
font-size: 18px; |
|||
font-style: normal; |
|||
color: #333; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,110 @@ |
|||
<template> |
|||
<!-- #ifdef APP-NVUE --> |
|||
<text :style="styleObj" class="uni-icons" @click="_onClick">{{unicode}}</text> |
|||
<!-- #endif --> |
|||
<!-- #ifndef APP-NVUE --> |
|||
<text :style="styleObj" class="uni-icons" :class="['uniui-'+type,customPrefix,customPrefix?type:'']" @click="_onClick"> |
|||
<slot></slot> |
|||
</text> |
|||
<!-- #endif --> |
|||
</template> |
|||
|
|||
<script> |
|||
import { fontData } from './uniicons_file_vue.js'; |
|||
|
|||
const getVal = (val) => { |
|||
const reg = /^[0-9]*$/g |
|||
return (typeof val === 'number' || reg.test(val)) ? val + 'px' : val; |
|||
} |
|||
|
|||
// #ifdef APP-NVUE |
|||
var domModule = weex.requireModule('dom'); |
|||
import iconUrl from './uniicons.ttf' |
|||
domModule.addRule('fontFace', { |
|||
'fontFamily': "uniicons", |
|||
'src': "url('" + iconUrl + "')" |
|||
}); |
|||
// #endif |
|||
|
|||
/** |
|||
* Icons 图标 |
|||
* @description 用于展示 icons 图标 |
|||
* @tutorial https://ext.dcloud.net.cn/plugin?id=28 |
|||
* @property {Number} size 图标大小 |
|||
* @property {String} type 图标图案，参考示例 |
|||
* @property {String} color 图标颜色 |
|||
* @property {String} customPrefix 自定义图标 |
|||
* @event {Function} click 点击 Icon 触发事件 |
|||
*/ |
|||
export default { |
|||
name: 'UniIcons', |
|||
emits: ['click'], |
|||
props: { |
|||
type: { |
|||
type: String, |
|||
default: '' |
|||
}, |
|||
color: { |
|||
type: String, |
|||
default: '#333333' |
|||
}, |
|||
size: { |
|||
type: [Number, String], |
|||
default: 16 |
|||
}, |
|||
customPrefix: { |
|||
type: String, |
|||
default: '' |
|||
}, |
|||
fontFamily: { |
|||
type: String, |
|||
default: '' |
|||
} |
|||
}, |
|||
data() { |
|||
return { |
|||
icons: fontData |
|||
} |
|||
}, |
|||
computed: { |
|||
unicode() { |
|||
let code = this.icons.find(v => v.font_class === this.type) |
|||
if (code) { |
|||
return code.unicode |
|||
} |
|||
return '' |
|||
}, |
|||
iconSize() { |
|||
return getVal(this.size) |
|||
}, |
|||
styleObj() { |
|||
if (this.fontFamily !== '') { |
|||
return `color: ${this.color}; font-size: ${this.iconSize}; font-family: ${this.fontFamily};` |
|||
} |
|||
return `color: ${this.color}; font-size: ${this.iconSize};` |
|||
} |
|||
}, |
|||
methods: { |
|||
_onClick() { |
|||
this.$emit('click') |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
/* #ifndef APP-NVUE */ |
|||
@import './uniicons.css'; |
|||
|
|||
@font-face { |
|||
font-family: uniicons; |
|||
src: url('./uniicons.ttf'); |
|||
} |
|||
|
|||
/* #endif */ |
|||
.uni-icons { |
|||
font-family: uniicons; |
|||
text-decoration: none; |
|||
text-align: center; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,664 @@ |
|||
|
|||
.uniui-cart-filled:before { |
|||
content: "\e6d0"; |
|||
} |
|||
|
|||
.uniui-gift-filled:before { |
|||
content: "\e6c4"; |
|||
} |
|||
|
|||
.uniui-color:before { |
|||
content: "\e6cf"; |
|||
} |
|||
|
|||
.uniui-wallet:before { |
|||
content: "\e6b1"; |
|||
} |
|||
|
|||
.uniui-settings-filled:before { |
|||
content: "\e6ce"; |
|||
} |
|||
|
|||
.uniui-auth-filled:before { |
|||
content: "\e6cc"; |
|||
} |
|||
|
|||
.uniui-shop-filled:before { |
|||
content: "\e6cd"; |
|||
} |
|||
|
|||
.uniui-staff-filled:before { |
|||
content: "\e6cb"; |
|||
} |
|||
|
|||
.uniui-vip-filled:before { |
|||
content: "\e6c6"; |
|||
} |
|||
|
|||
.uniui-plus-filled:before { |
|||
content: "\e6c7"; |
|||
} |
|||
|
|||
.uniui-folder-add-filled:before { |
|||
content: "\e6c8"; |
|||
} |
|||
|
|||
.uniui-color-filled:before { |
|||
content: "\e6c9"; |
|||
} |
|||
|
|||
.uniui-tune-filled:before { |
|||
content: "\e6ca"; |
|||
} |
|||
|
|||
.uniui-calendar-filled:before { |
|||
content: "\e6c0"; |
|||
} |
|||
|
|||
.uniui-notification-filled:before { |
|||
content: "\e6c1"; |
|||
} |
|||
|
|||
.uniui-wallet-filled:before { |
|||
content: "\e6c2"; |
|||
} |
|||
|
|||
.uniui-medal-filled:before { |
|||
content: "\e6c3"; |
|||
} |
|||
|
|||
.uniui-fire-filled:before { |
|||
content: "\e6c5"; |
|||
} |
|||
|
|||
.uniui-refreshempty:before { |
|||
content: "\e6bf"; |
|||
} |
|||
|
|||
.uniui-location-filled:before { |
|||
content: "\e6af"; |
|||
} |
|||
|
|||
.uniui-person-filled:before { |
|||
content: "\e69d"; |
|||
} |
|||
|
|||
.uniui-personadd-filled:before { |
|||
content: "\e698"; |
|||
} |
|||
|
|||
.uniui-arrowthinleft:before { |
|||
content: "\e6d2"; |
|||
} |
|||
|
|||
.uniui-arrowthinup:before { |
|||
content: "\e6d3"; |
|||
} |
|||
|
|||
.uniui-arrowthindown:before { |
|||
content: "\e6d4"; |
|||
} |
|||
|
|||
.uniui-back:before { |
|||
content: "\e6b9"; |
|||
} |
|||
|
|||
.uniui-forward:before { |
|||
content: "\e6ba"; |
|||
} |
|||
|
|||
.uniui-arrow-right:before { |
|||
content: "\e6bb"; |
|||
} |
|||
|
|||
.uniui-arrow-left:before { |
|||
content: "\e6bc"; |
|||
} |
|||
|
|||
.uniui-arrow-up:before { |
|||
content: "\e6bd"; |
|||
} |
|||
|
|||
.uniui-arrow-down:before { |
|||
content: "\e6be"; |
|||
} |
|||
|
|||
.uniui-arrowthinright:before { |
|||
content: "\e6d1"; |
|||
} |
|||
|
|||
.uniui-down:before { |
|||
content: "\e6b8"; |
|||
} |
|||
|
|||
.uniui-bottom:before { |
|||
content: "\e6b8"; |
|||
} |
|||
|
|||
.uniui-arrowright:before { |
|||
content: "\e6d5"; |
|||
} |
|||
|
|||
.uniui-right:before { |
|||
content: "\e6b5"; |
|||
} |
|||
|
|||
.uniui-up:before { |
|||
content: "\e6b6"; |
|||
} |
|||
|
|||
.uniui-top:before { |
|||
content: "\e6b6"; |
|||
} |
|||
|
|||
.uniui-left:before { |
|||
content: "\e6b7"; |
|||
} |
|||
|
|||
.uniui-arrowup:before { |
|||
content: "\e6d6"; |
|||
} |
|||
|
|||
.uniui-eye:before { |
|||
content: "\e651"; |
|||
} |
|||
|
|||
.uniui-eye-filled:before { |
|||
content: "\e66a"; |
|||
} |
|||
|
|||
.uniui-eye-slash:before { |
|||
content: "\e6b3"; |
|||
} |
|||
|
|||
.uniui-eye-slash-filled:before { |
|||
content: "\e6b4"; |
|||
} |
|||
|
|||
.uniui-info-filled:before { |
|||
content: "\e649"; |
|||
} |
|||
|
|||
.uniui-reload:before { |
|||
content: "\e6b2"; |
|||
} |
|||
|
|||
.uniui-micoff-filled:before { |
|||
content: "\e6b0"; |
|||
} |
|||
|
|||
.uniui-map-pin-ellipse:before { |
|||
content: "\e6ac"; |
|||
} |
|||
|
|||
.uniui-map-pin:before { |
|||
content: "\e6ad"; |
|||
} |
|||
|
|||
.uniui-location:before { |
|||
content: "\e6ae"; |
|||
} |
|||
|
|||
.uniui-starhalf:before { |
|||
content: "\e683"; |
|||
} |
|||
|
|||
.uniui-star:before { |
|||
content: "\e688"; |
|||
} |
|||
|
|||
.uniui-star-filled:before { |
|||
content: "\e68f"; |
|||
} |
|||
|
|||
.uniui-calendar:before { |
|||
content: "\e6a0"; |
|||
} |
|||
|
|||
.uniui-fire:before { |
|||
content: "\e6a1"; |
|||
} |
|||
|
|||
.uniui-medal:before { |
|||
content: "\e6a2"; |
|||
} |
|||
|
|||
.uniui-font:before { |
|||
content: "\e6a3"; |
|||
} |
|||
|
|||
.uniui-gift:before { |
|||
content: "\e6a4"; |
|||
} |
|||
|
|||
.uniui-link:before { |
|||
content: "\e6a5"; |
|||
} |
|||
|
|||
.uniui-notification:before { |
|||
content: "\e6a6"; |
|||
} |
|||
|
|||
.uniui-staff:before { |
|||
content: "\e6a7"; |
|||
} |
|||
|
|||
.uniui-vip:before { |
|||
content: "\e6a8"; |
|||
} |
|||
|
|||
.uniui-folder-add:before { |
|||
content: "\e6a9"; |
|||
} |
|||
|
|||
.uniui-tune:before { |
|||
content: "\e6aa"; |
|||
} |
|||
|
|||
.uniui-auth:before { |
|||
content: "\e6ab"; |
|||
} |
|||
|
|||
.uniui-person:before { |
|||
content: "\e699"; |
|||
} |
|||
|
|||
.uniui-email-filled:before { |
|||
content: "\e69a"; |
|||
} |
|||
|
|||
.uniui-phone-filled:before { |
|||
content: "\e69b"; |
|||
} |
|||
|
|||
.uniui-phone:before { |
|||
content: "\e69c"; |
|||
} |
|||
|
|||
.uniui-email:before { |
|||
content: "\e69e"; |
|||
} |
|||
|
|||
.uniui-personadd:before { |
|||
content: "\e69f"; |
|||
} |
|||
|
|||
.uniui-chatboxes-filled:before { |
|||
content: "\e692"; |
|||
} |
|||
|
|||
.uniui-contact:before { |
|||
content: "\e693"; |
|||
} |
|||
|
|||
.uniui-chatbubble-filled:before { |
|||
content: "\e694"; |
|||
} |
|||
|
|||
.uniui-contact-filled:before { |
|||
content: "\e695"; |
|||
} |
|||
|
|||
.uniui-chatboxes:before { |
|||
content: "\e696"; |
|||
} |
|||
|
|||
.uniui-chatbubble:before { |
|||
content: "\e697"; |
|||
} |
|||
|
|||
.uniui-upload-filled:before { |
|||
content: "\e68e"; |
|||
} |
|||
|
|||
.uniui-upload:before { |
|||
content: "\e690"; |
|||
} |
|||
|
|||
.uniui-weixin:before { |
|||
content: "\e691"; |
|||
} |
|||
|
|||
.uniui-compose:before { |
|||
content: "\e67f"; |
|||
} |
|||
|
|||
.uniui-qq:before { |
|||
content: "\e680"; |
|||
} |
|||
|
|||
.uniui-download-filled:before { |
|||
content: "\e681"; |
|||
} |
|||
|
|||
.uniui-pyq:before { |
|||
content: "\e682"; |
|||
} |
|||
|
|||
.uniui-sound:before { |
|||
content: "\e684"; |
|||
} |
|||
|
|||
.uniui-trash-filled:before { |
|||
content: "\e685"; |
|||
} |
|||
|
|||
.uniui-sound-filled:before { |
|||
content: "\e686"; |
|||
} |
|||
|
|||
.uniui-trash:before { |
|||
content: "\e687"; |
|||
} |
|||
|
|||
.uniui-videocam-filled:before { |
|||
content: "\e689"; |
|||
} |
|||
|
|||
.uniui-spinner-cycle:before { |
|||
content: "\e68a"; |
|||
} |
|||
|
|||
.uniui-weibo:before { |
|||
content: "\e68b"; |
|||
} |
|||
|
|||
.uniui-videocam:before { |
|||
content: "\e68c"; |
|||
} |
|||
|
|||
.uniui-download:before { |
|||
content: "\e68d"; |
|||
} |
|||
|
|||
.uniui-help:before { |
|||
content: "\e679"; |
|||
} |
|||
|
|||
.uniui-navigate-filled:before { |
|||
content: "\e67a"; |
|||
} |
|||
|
|||
.uniui-plusempty:before { |
|||
content: "\e67b"; |
|||
} |
|||
|
|||
.uniui-smallcircle:before { |
|||
content: "\e67c"; |
|||
} |
|||
|
|||
.uniui-minus-filled:before { |
|||
content: "\e67d"; |
|||
} |
|||
|
|||
.uniui-micoff:before { |
|||
content: "\e67e"; |
|||
} |
|||
|
|||
.uniui-closeempty:before { |
|||
content: "\e66c"; |
|||
} |
|||
|
|||
.uniui-clear:before { |
|||
content: "\e66d"; |
|||
} |
|||
|
|||
.uniui-navigate:before { |
|||
content: "\e66e"; |
|||
} |
|||
|
|||
.uniui-minus:before { |
|||
content: "\e66f"; |
|||
} |
|||
|
|||
.uniui-image:before { |
|||
content: "\e670"; |
|||
} |
|||
|
|||
.uniui-mic:before { |
|||
content: "\e671"; |
|||
} |
|||
|
|||
.uniui-paperplane:before { |
|||
content: "\e672"; |
|||
} |
|||
|
|||
.uniui-close:before { |
|||
content: "\e673"; |
|||
} |
|||
|
|||
.uniui-help-filled:before { |
|||
content: "\e674"; |
|||
} |
|||
|
|||
.uniui-paperplane-filled:before { |
|||
content: "\e675"; |
|||
} |
|||
|
|||
.uniui-plus:before { |
|||
content: "\e676"; |
|||
} |
|||
|
|||
.uniui-mic-filled:before { |
|||
content: "\e677"; |
|||
} |
|||
|
|||
.uniui-image-filled:before { |
|||
content: "\e678"; |
|||
} |
|||
|
|||
.uniui-locked-filled:before { |
|||
content: "\e668"; |
|||
} |
|||
|
|||
.uniui-info:before { |
|||
content: "\e669"; |
|||
} |
|||
|
|||
.uniui-locked:before { |
|||
content: "\e66b"; |
|||
} |
|||
|
|||
.uniui-camera-filled:before { |
|||
content: "\e658"; |
|||
} |
|||
|
|||
.uniui-chat-filled:before { |
|||
content: "\e659"; |
|||
} |
|||
|
|||
.uniui-camera:before { |
|||
content: "\e65a"; |
|||
} |
|||
|
|||
.uniui-circle:before { |
|||
content: "\e65b"; |
|||
} |
|||
|
|||
.uniui-checkmarkempty:before { |
|||
content: "\e65c"; |
|||
} |
|||
|
|||
.uniui-chat:before { |
|||
content: "\e65d"; |
|||
} |
|||
|
|||
.uniui-circle-filled:before { |
|||
content: "\e65e"; |
|||
} |
|||
|
|||
.uniui-flag:before { |
|||
content: "\e65f"; |
|||
} |
|||
|
|||
.uniui-flag-filled:before { |
|||
content: "\e660"; |
|||
} |
|||
|
|||
.uniui-gear-filled:before { |
|||
content: "\e661"; |
|||
} |
|||
|
|||
.uniui-home:before { |
|||
content: "\e662"; |
|||
} |
|||
|
|||
.uniui-home-filled:before { |
|||
content: "\e663"; |
|||
} |
|||
|
|||
.uniui-gear:before { |
|||
content: "\e664"; |
|||
} |
|||
|
|||
.uniui-smallcircle-filled:before { |
|||
content: "\e665"; |
|||
} |
|||
|
|||
.uniui-map-filled:before { |
|||
content: "\e666"; |
|||
} |
|||
|
|||
.uniui-map:before { |
|||
content: "\e667"; |
|||
} |
|||
|
|||
.uniui-refresh-filled:before { |
|||
content: "\e656"; |
|||
} |
|||
|
|||
.uniui-refresh:before { |
|||
content: "\e657"; |
|||
} |
|||
|
|||
.uniui-cloud-upload:before { |
|||
content: "\e645"; |
|||
} |
|||
|
|||
.uniui-cloud-download-filled:before { |
|||
content: "\e646"; |
|||
} |
|||
|
|||
.uniui-cloud-download:before { |
|||
content: "\e647"; |
|||
} |
|||
|
|||
.uniui-cloud-upload-filled:before { |
|||
content: "\e648"; |
|||
} |
|||
|
|||
.uniui-redo:before { |
|||
content: "\e64a"; |
|||
} |
|||
|
|||
.uniui-images-filled:before { |
|||
content: "\e64b"; |
|||
} |
|||
|
|||
.uniui-undo-filled:before { |
|||
content: "\e64c"; |
|||
} |
|||
|
|||
.uniui-more:before { |
|||
content: "\e64d"; |
|||
} |
|||
|
|||
.uniui-more-filled:before { |
|||
content: "\e64e"; |
|||
} |
|||
|
|||
.uniui-undo:before { |
|||
content: "\e64f"; |
|||
} |
|||
|
|||
.uniui-images:before { |
|||
content: "\e650"; |
|||
} |
|||
|
|||
.uniui-paperclip:before { |
|||
content: "\e652"; |
|||
} |
|||
|
|||
.uniui-settings:before { |
|||
content: "\e653"; |
|||
} |
|||
|
|||
.uniui-search:before { |
|||
content: "\e654"; |
|||
} |
|||
|
|||
.uniui-redo-filled:before { |
|||
content: "\e655"; |
|||
} |
|||
|
|||
.uniui-list:before { |
|||
content: "\e644"; |
|||
} |
|||
|
|||
.uniui-mail-open-filled:before { |
|||
content: "\e63a"; |
|||
} |
|||
|
|||
.uniui-hand-down-filled:before { |
|||
content: "\e63c"; |
|||
} |
|||
|
|||
.uniui-hand-down:before { |
|||
content: "\e63d"; |
|||
} |
|||
|
|||
.uniui-hand-up-filled:before { |
|||
content: "\e63e"; |
|||
} |
|||
|
|||
.uniui-hand-up:before { |
|||
content: "\e63f"; |
|||
} |
|||
|
|||
.uniui-heart-filled:before { |
|||
content: "\e641"; |
|||
} |
|||
|
|||
.uniui-mail-open:before { |
|||
content: "\e643"; |
|||
} |
|||
|
|||
.uniui-heart:before { |
|||
content: "\e639"; |
|||
} |
|||
|
|||
.uniui-loop:before { |
|||
content: "\e633"; |
|||
} |
|||
|
|||
.uniui-pulldown:before { |
|||
content: "\e632"; |
|||
} |
|||
|
|||
.uniui-scan:before { |
|||
content: "\e62a"; |
|||
} |
|||
|
|||
.uniui-bars:before { |
|||
content: "\e627"; |
|||
} |
|||
|
|||
.uniui-checkbox:before { |
|||
content: "\e62b"; |
|||
} |
|||
|
|||
.uniui-checkbox-filled:before { |
|||
content: "\e62c"; |
|||
} |
|||
|
|||
.uniui-shop:before { |
|||
content: "\e62f"; |
|||
} |
|||
|
|||
.uniui-headphones:before { |
|||
content: "\e630"; |
|||
} |
|||
|
|||
.uniui-cart:before { |
|||
content: "\e631"; |
|||
} |
|||
Binary file not shown.
@ -0,0 +1,664 @@ |
|||
|
|||
export type IconsData = { |
|||
id : string |
|||
name : string |
|||
font_family : string |
|||
css_prefix_text : string |
|||
description : string |
|||
glyphs : Array<IconsDataItem> |
|||
} |
|||
|
|||
export type IconsDataItem = { |
|||
font_class : string |
|||
unicode : string |
|||
} |
|||
|
|||
|
|||
export const fontData = [ |
|||
{ |
|||
"font_class": "arrow-down", |
|||
"unicode": "\ue6be" |
|||
}, |
|||
{ |
|||
"font_class": "arrow-left", |
|||
"unicode": "\ue6bc" |
|||
}, |
|||
{ |
|||
"font_class": "arrow-right", |
|||
"unicode": "\ue6bb" |
|||
}, |
|||
{ |
|||
"font_class": "arrow-up", |
|||
"unicode": "\ue6bd" |
|||
}, |
|||
{ |
|||
"font_class": "auth", |
|||
"unicode": "\ue6ab" |
|||
}, |
|||
{ |
|||
"font_class": "auth-filled", |
|||
"unicode": "\ue6cc" |
|||
}, |
|||
{ |
|||
"font_class": "back", |
|||
"unicode": "\ue6b9" |
|||
}, |
|||
{ |
|||
"font_class": "bars", |
|||
"unicode": "\ue627" |
|||
}, |
|||
{ |
|||
"font_class": "calendar", |
|||
"unicode": "\ue6a0" |
|||
}, |
|||
{ |
|||
"font_class": "calendar-filled", |
|||
"unicode": "\ue6c0" |
|||
}, |
|||
{ |
|||
"font_class": "camera", |
|||
"unicode": "\ue65a" |
|||
}, |
|||
{ |
|||
"font_class": "camera-filled", |
|||
"unicode": "\ue658" |
|||
}, |
|||
{ |
|||
"font_class": "cart", |
|||
"unicode": "\ue631" |
|||
}, |
|||
{ |
|||
"font_class": "cart-filled", |
|||
"unicode": "\ue6d0" |
|||
}, |
|||
{ |
|||
"font_class": "chat", |
|||
"unicode": "\ue65d" |
|||
}, |
|||
{ |
|||
"font_class": "chat-filled", |
|||
"unicode": "\ue659" |
|||
}, |
|||
{ |
|||
"font_class": "chatboxes", |
|||
"unicode": "\ue696" |
|||
}, |
|||
{ |
|||
"font_class": "chatboxes-filled", |
|||
"unicode": "\ue692" |
|||
}, |
|||
{ |
|||
"font_class": "chatbubble", |
|||
"unicode": "\ue697" |
|||
}, |
|||
{ |
|||
"font_class": "chatbubble-filled", |
|||
"unicode": "\ue694" |
|||
}, |
|||
{ |
|||
"font_class": "checkbox", |
|||
"unicode": "\ue62b" |
|||
}, |
|||
{ |
|||
"font_class": "checkbox-filled", |
|||
"unicode": "\ue62c" |
|||
}, |
|||
{ |
|||
"font_class": "checkmarkempty", |
|||
"unicode": "\ue65c" |
|||
}, |
|||
{ |
|||
"font_class": "circle", |
|||
"unicode": "\ue65b" |
|||
}, |
|||
{ |
|||
"font_class": "circle-filled", |
|||
"unicode": "\ue65e" |
|||
}, |
|||
{ |
|||
"font_class": "clear", |
|||
"unicode": "\ue66d" |
|||
}, |
|||
{ |
|||
"font_class": "close", |
|||
"unicode": "\ue673" |
|||
}, |
|||
{ |
|||
"font_class": "closeempty", |
|||
"unicode": "\ue66c" |
|||
}, |
|||
{ |
|||
"font_class": "cloud-download", |
|||
"unicode": "\ue647" |
|||
}, |
|||
{ |
|||
"font_class": "cloud-download-filled", |
|||
"unicode": "\ue646" |
|||
}, |
|||
{ |
|||
"font_class": "cloud-upload", |
|||
"unicode": "\ue645" |
|||
}, |
|||
{ |
|||
"font_class": "cloud-upload-filled", |
|||
"unicode": "\ue648" |
|||
}, |
|||
{ |
|||
"font_class": "color", |
|||
"unicode": "\ue6cf" |
|||
}, |
|||
{ |
|||
"font_class": "color-filled", |
|||
"unicode": "\ue6c9" |
|||
}, |
|||
{ |
|||
"font_class": "compose", |
|||
"unicode": "\ue67f" |
|||
}, |
|||
{ |
|||
"font_class": "contact", |
|||
"unicode": "\ue693" |
|||
}, |
|||
{ |
|||
"font_class": "contact-filled", |
|||
"unicode": "\ue695" |
|||
}, |
|||
{ |
|||
"font_class": "down", |
|||
"unicode": "\ue6b8" |
|||
}, |
|||
{ |
|||
"font_class": "bottom", |
|||
"unicode": "\ue6b8" |
|||
}, |
|||
{ |
|||
"font_class": "download", |
|||
"unicode": "\ue68d" |
|||
}, |
|||
{ |
|||
"font_class": "download-filled", |
|||
"unicode": "\ue681" |
|||
}, |
|||
{ |
|||
"font_class": "email", |
|||
"unicode": "\ue69e" |
|||
}, |
|||
{ |
|||
"font_class": "email-filled", |
|||
"unicode": "\ue69a" |
|||
}, |
|||
{ |
|||
"font_class": "eye", |
|||
"unicode": "\ue651" |
|||
}, |
|||
{ |
|||
"font_class": "eye-filled", |
|||
"unicode": "\ue66a" |
|||
}, |
|||
{ |
|||
"font_class": "eye-slash", |
|||
"unicode": "\ue6b3" |
|||
}, |
|||
{ |
|||
"font_class": "eye-slash-filled", |
|||
"unicode": "\ue6b4" |
|||
}, |
|||
{ |
|||
"font_class": "fire", |
|||
"unicode": "\ue6a1" |
|||
}, |
|||
{ |
|||
"font_class": "fire-filled", |
|||
"unicode": "\ue6c5" |
|||
}, |
|||
{ |
|||
"font_class": "flag", |
|||
"unicode": "\ue65f" |
|||
}, |
|||
{ |
|||
"font_class": "flag-filled", |
|||
"unicode": "\ue660" |
|||
}, |
|||
{ |
|||
"font_class": "folder-add", |
|||
"unicode": "\ue6a9" |
|||
}, |
|||
{ |
|||
"font_class": "folder-add-filled", |
|||
"unicode": "\ue6c8" |
|||
}, |
|||
{ |
|||
"font_class": "font", |
|||
"unicode": "\ue6a3" |
|||
}, |
|||
{ |
|||
"font_class": "forward", |
|||
"unicode": "\ue6ba" |
|||
}, |
|||
{ |
|||
"font_class": "gear", |
|||
"unicode": "\ue664" |
|||
}, |
|||
{ |
|||
"font_class": "gear-filled", |
|||
"unicode": "\ue661" |
|||
}, |
|||
{ |
|||
"font_class": "gift", |
|||
"unicode": "\ue6a4" |
|||
}, |
|||
{ |
|||
"font_class": "gift-filled", |
|||
"unicode": "\ue6c4" |
|||
}, |
|||
{ |
|||
"font_class": "hand-down", |
|||
"unicode": "\ue63d" |
|||
}, |
|||
{ |
|||
"font_class": "hand-down-filled", |
|||
"unicode": "\ue63c" |
|||
}, |
|||
{ |
|||
"font_class": "hand-up", |
|||
"unicode": "\ue63f" |
|||
}, |
|||
{ |
|||
"font_class": "hand-up-filled", |
|||
"unicode": "\ue63e" |
|||
}, |
|||
{ |
|||
"font_class": "headphones", |
|||
"unicode": "\ue630" |
|||
}, |
|||
{ |
|||
"font_class": "heart", |
|||
"unicode": "\ue639" |
|||
}, |
|||
{ |
|||
"font_class": "heart-filled", |
|||
"unicode": "\ue641" |
|||
}, |
|||
{ |
|||
"font_class": "help", |
|||
"unicode": "\ue679" |
|||
}, |
|||
{ |
|||
"font_class": "help-filled", |
|||
"unicode": "\ue674" |
|||
}, |
|||
{ |
|||
"font_class": "home", |
|||
"unicode": "\ue662" |
|||
}, |
|||
{ |
|||
"font_class": "home-filled", |
|||
"unicode": "\ue663" |
|||
}, |
|||
{ |
|||
"font_class": "image", |
|||
"unicode": "\ue670" |
|||
}, |
|||
{ |
|||
"font_class": "image-filled", |
|||
"unicode": "\ue678" |
|||
}, |
|||
{ |
|||
"font_class": "images", |
|||
"unicode": "\ue650" |
|||
}, |
|||
{ |
|||
"font_class": "images-filled", |
|||
"unicode": "\ue64b" |
|||
}, |
|||
{ |
|||
"font_class": "info", |
|||
"unicode": "\ue669" |
|||
}, |
|||
{ |
|||
"font_class": "info-filled", |
|||
"unicode": "\ue649" |
|||
}, |
|||
{ |
|||
"font_class": "left", |
|||
"unicode": "\ue6b7" |
|||
}, |
|||
{ |
|||
"font_class": "link", |
|||
"unicode": "\ue6a5" |
|||
}, |
|||
{ |
|||
"font_class": "list", |
|||
"unicode": "\ue644" |
|||
}, |
|||
{ |
|||
"font_class": "location", |
|||
"unicode": "\ue6ae" |
|||
}, |
|||
{ |
|||
"font_class": "location-filled", |
|||
"unicode": "\ue6af" |
|||
}, |
|||
{ |
|||
"font_class": "locked", |
|||
"unicode": "\ue66b" |
|||
}, |
|||
{ |
|||
"font_class": "locked-filled", |
|||
"unicode": "\ue668" |
|||
}, |
|||
{ |
|||
"font_class": "loop", |
|||
"unicode": "\ue633" |
|||
}, |
|||
{ |
|||
"font_class": "mail-open", |
|||
"unicode": "\ue643" |
|||
}, |
|||
{ |
|||
"font_class": "mail-open-filled", |
|||
"unicode": "\ue63a" |
|||
}, |
|||
{ |
|||
"font_class": "map", |
|||
"unicode": "\ue667" |
|||
}, |
|||
{ |
|||
"font_class": "map-filled", |
|||
"unicode": "\ue666" |
|||
}, |
|||
{ |
|||
"font_class": "map-pin", |
|||
"unicode": "\ue6ad" |
|||
}, |
|||
{ |
|||
"font_class": "map-pin-ellipse", |
|||
"unicode": "\ue6ac" |
|||
}, |
|||
{ |
|||
"font_class": "medal", |
|||
"unicode": "\ue6a2" |
|||
}, |
|||
{ |
|||
"font_class": "medal-filled", |
|||
"unicode": "\ue6c3" |
|||
}, |
|||
{ |
|||
"font_class": "mic", |
|||
"unicode": "\ue671" |
|||
}, |
|||
{ |
|||
"font_class": "mic-filled", |
|||
"unicode": "\ue677" |
|||
}, |
|||
{ |
|||
"font_class": "micoff", |
|||
"unicode": "\ue67e" |
|||
}, |
|||
{ |
|||
"font_class": "micoff-filled", |
|||
"unicode": "\ue6b0" |
|||
}, |
|||
{ |
|||
"font_class": "minus", |
|||
"unicode": "\ue66f" |
|||
}, |
|||
{ |
|||
"font_class": "minus-filled", |
|||
"unicode": "\ue67d" |
|||
}, |
|||
{ |
|||
"font_class": "more", |
|||
"unicode": "\ue64d" |
|||
}, |
|||
{ |
|||
"font_class": "more-filled", |
|||
"unicode": "\ue64e" |
|||
}, |
|||
{ |
|||
"font_class": "navigate", |
|||
"unicode": "\ue66e" |
|||
}, |
|||
{ |
|||
"font_class": "navigate-filled", |
|||
"unicode": "\ue67a" |
|||
}, |
|||
{ |
|||
"font_class": "notification", |
|||
"unicode": "\ue6a6" |
|||
}, |
|||
{ |
|||
"font_class": "notification-filled", |
|||
"unicode": "\ue6c1" |
|||
}, |
|||
{ |
|||
"font_class": "paperclip", |
|||
"unicode": "\ue652" |
|||
}, |
|||
{ |
|||
"font_class": "paperplane", |
|||
"unicode": "\ue672" |
|||
}, |
|||
{ |
|||
"font_class": "paperplane-filled", |
|||
"unicode": "\ue675" |
|||
}, |
|||
{ |
|||
"font_class": "person", |
|||
"unicode": "\ue699" |
|||
}, |
|||
{ |
|||
"font_class": "person-filled", |
|||
"unicode": "\ue69d" |
|||
}, |
|||
{ |
|||
"font_class": "personadd", |
|||
"unicode": "\ue69f" |
|||
}, |
|||
{ |
|||
"font_class": "personadd-filled", |
|||
"unicode": "\ue698" |
|||
}, |
|||
{ |
|||
"font_class": "personadd-filled-copy", |
|||
"unicode": "\ue6d1" |
|||
}, |
|||
{ |
|||
"font_class": "phone", |
|||
"unicode": "\ue69c" |
|||
}, |
|||
{ |
|||
"font_class": "phone-filled", |
|||
"unicode": "\ue69b" |
|||
}, |
|||
{ |
|||
"font_class": "plus", |
|||
"unicode": "\ue676" |
|||
}, |
|||
{ |
|||
"font_class": "plus-filled", |
|||
"unicode": "\ue6c7" |
|||
}, |
|||
{ |
|||
"font_class": "plusempty", |
|||
"unicode": "\ue67b" |
|||
}, |
|||
{ |
|||
"font_class": "pulldown", |
|||
"unicode": "\ue632" |
|||
}, |
|||
{ |
|||
"font_class": "pyq", |
|||
"unicode": "\ue682" |
|||
}, |
|||
{ |
|||
"font_class": "qq", |
|||
"unicode": "\ue680" |
|||
}, |
|||
{ |
|||
"font_class": "redo", |
|||
"unicode": "\ue64a" |
|||
}, |
|||
{ |
|||
"font_class": "redo-filled", |
|||
"unicode": "\ue655" |
|||
}, |
|||
{ |
|||
"font_class": "refresh", |
|||
"unicode": "\ue657" |
|||
}, |
|||
{ |
|||
"font_class": "refresh-filled", |
|||
"unicode": "\ue656" |
|||
}, |
|||
{ |
|||
"font_class": "refreshempty", |
|||
"unicode": "\ue6bf" |
|||
}, |
|||
{ |
|||
"font_class": "reload", |
|||
"unicode": "\ue6b2" |
|||
}, |
|||
{ |
|||
"font_class": "right", |
|||
"unicode": "\ue6b5" |
|||
}, |
|||
{ |
|||
"font_class": "scan", |
|||
"unicode": "\ue62a" |
|||
}, |
|||
{ |
|||
"font_class": "search", |
|||
"unicode": "\ue654" |
|||
}, |
|||
{ |
|||
"font_class": "settings", |
|||
"unicode": "\ue653" |
|||
}, |
|||
{ |
|||
"font_class": "settings-filled", |
|||
"unicode": "\ue6ce" |
|||
}, |
|||
{ |
|||
"font_class": "shop", |
|||
"unicode": "\ue62f" |
|||
}, |
|||
{ |
|||
"font_class": "shop-filled", |
|||
"unicode": "\ue6cd" |
|||
}, |
|||
{ |
|||
"font_class": "smallcircle", |
|||
"unicode": "\ue67c" |
|||
}, |
|||
{ |
|||
"font_class": "smallcircle-filled", |
|||
"unicode": "\ue665" |
|||
}, |
|||
{ |
|||
"font_class": "sound", |
|||
"unicode": "\ue684" |
|||
}, |
|||
{ |
|||
"font_class": "sound-filled", |
|||
"unicode": "\ue686" |
|||
}, |
|||
{ |
|||
"font_class": "spinner-cycle", |
|||
"unicode": "\ue68a" |
|||
}, |
|||
{ |
|||
"font_class": "staff", |
|||
"unicode": "\ue6a7" |
|||
}, |
|||
{ |
|||
"font_class": "staff-filled", |
|||
"unicode": "\ue6cb" |
|||
}, |
|||
{ |
|||
"font_class": "star", |
|||
"unicode": "\ue688" |
|||
}, |
|||
{ |
|||
"font_class": "star-filled", |
|||
"unicode": "\ue68f" |
|||
}, |
|||
{ |
|||
"font_class": "starhalf", |
|||
"unicode": "\ue683" |
|||
}, |
|||
{ |
|||
"font_class": "trash", |
|||
"unicode": "\ue687" |
|||
}, |
|||
{ |
|||
"font_class": "trash-filled", |
|||
"unicode": "\ue685" |
|||
}, |
|||
{ |
|||
"font_class": "tune", |
|||
"unicode": "\ue6aa" |
|||
}, |
|||
{ |
|||
"font_class": "tune-filled", |
|||
"unicode": "\ue6ca" |
|||
}, |
|||
{ |
|||
"font_class": "undo", |
|||
"unicode": "\ue64f" |
|||
}, |
|||
{ |
|||
"font_class": "undo-filled", |
|||
"unicode": "\ue64c" |
|||
}, |
|||
{ |
|||
"font_class": "up", |
|||
"unicode": "\ue6b6" |
|||
}, |
|||
{ |
|||
"font_class": "top", |
|||
"unicode": "\ue6b6" |
|||
}, |
|||
{ |
|||
"font_class": "upload", |
|||
"unicode": "\ue690" |
|||
}, |
|||
{ |
|||
"font_class": "upload-filled", |
|||
"unicode": "\ue68e" |
|||
}, |
|||
{ |
|||
"font_class": "videocam", |
|||
"unicode": "\ue68c" |
|||
}, |
|||
{ |
|||
"font_class": "videocam-filled", |
|||
"unicode": "\ue689" |
|||
}, |
|||
{ |
|||
"font_class": "vip", |
|||
"unicode": "\ue6a8" |
|||
}, |
|||
{ |
|||
"font_class": "vip-filled", |
|||
"unicode": "\ue6c6" |
|||
}, |
|||
{ |
|||
"font_class": "wallet", |
|||
"unicode": "\ue6b1" |
|||
}, |
|||
{ |
|||
"font_class": "wallet-filled", |
|||
"unicode": "\ue6c2" |
|||
}, |
|||
{ |
|||
"font_class": "weibo", |
|||
"unicode": "\ue68b" |
|||
}, |
|||
{ |
|||
"font_class": "weixin", |
|||
"unicode": "\ue691" |
|||
} |
|||
] as IconsDataItem[] |
|||
|
|||
// export const fontData = JSON.parse<IconsDataItem>(fontDataJson)
|
|||
@ -0,0 +1,649 @@ |
|||
|
|||
export const fontData = [ |
|||
{ |
|||
"font_class": "arrow-down", |
|||
"unicode": "\ue6be" |
|||
}, |
|||
{ |
|||
"font_class": "arrow-left", |
|||
"unicode": "\ue6bc" |
|||
}, |
|||
{ |
|||
"font_class": "arrow-right", |
|||
"unicode": "\ue6bb" |
|||
}, |
|||
{ |
|||
"font_class": "arrow-up", |
|||
"unicode": "\ue6bd" |
|||
}, |
|||
{ |
|||
"font_class": "auth", |
|||
"unicode": "\ue6ab" |
|||
}, |
|||
{ |
|||
"font_class": "auth-filled", |
|||
"unicode": "\ue6cc" |
|||
}, |
|||
{ |
|||
"font_class": "back", |
|||
"unicode": "\ue6b9" |
|||
}, |
|||
{ |
|||
"font_class": "bars", |
|||
"unicode": "\ue627" |
|||
}, |
|||
{ |
|||
"font_class": "calendar", |
|||
"unicode": "\ue6a0" |
|||
}, |
|||
{ |
|||
"font_class": "calendar-filled", |
|||
"unicode": "\ue6c0" |
|||
}, |
|||
{ |
|||
"font_class": "camera", |
|||
"unicode": "\ue65a" |
|||
}, |
|||
{ |
|||
"font_class": "camera-filled", |
|||
"unicode": "\ue658" |
|||
}, |
|||
{ |
|||
"font_class": "cart", |
|||
"unicode": "\ue631" |
|||
}, |
|||
{ |
|||
"font_class": "cart-filled", |
|||
"unicode": "\ue6d0" |
|||
}, |
|||
{ |
|||
"font_class": "chat", |
|||
"unicode": "\ue65d" |
|||
}, |
|||
{ |
|||
"font_class": "chat-filled", |
|||
"unicode": "\ue659" |
|||
}, |
|||
{ |
|||
"font_class": "chatboxes", |
|||
"unicode": "\ue696" |
|||
}, |
|||
{ |
|||
"font_class": "chatboxes-filled", |
|||
"unicode": "\ue692" |
|||
}, |
|||
{ |
|||
"font_class": "chatbubble", |
|||
"unicode": "\ue697" |
|||
}, |
|||
{ |
|||
"font_class": "chatbubble-filled", |
|||
"unicode": "\ue694" |
|||
}, |
|||
{ |
|||
"font_class": "checkbox", |
|||
"unicode": "\ue62b" |
|||
}, |
|||
{ |
|||
"font_class": "checkbox-filled", |
|||
"unicode": "\ue62c" |
|||
}, |
|||
{ |
|||
"font_class": "checkmarkempty", |
|||
"unicode": "\ue65c" |
|||
}, |
|||
{ |
|||
"font_class": "circle", |
|||
"unicode": "\ue65b" |
|||
}, |
|||
{ |
|||
"font_class": "circle-filled", |
|||
"unicode": "\ue65e" |
|||
}, |
|||
{ |
|||
"font_class": "clear", |
|||
"unicode": "\ue66d" |
|||
}, |
|||
{ |
|||
"font_class": "close", |
|||
"unicode": "\ue673" |
|||
}, |
|||
{ |
|||
"font_class": "closeempty", |
|||
"unicode": "\ue66c" |
|||
}, |
|||
{ |
|||
"font_class": "cloud-download", |
|||
"unicode": "\ue647" |
|||
}, |
|||
{ |
|||
"font_class": "cloud-download-filled", |
|||
"unicode": "\ue646" |
|||
}, |
|||
{ |
|||
"font_class": "cloud-upload", |
|||
"unicode": "\ue645" |
|||
}, |
|||
{ |
|||
"font_class": "cloud-upload-filled", |
|||
"unicode": "\ue648" |
|||
}, |
|||
{ |
|||
"font_class": "color", |
|||
"unicode": "\ue6cf" |
|||
}, |
|||
{ |
|||
"font_class": "color-filled", |
|||
"unicode": "\ue6c9" |
|||
}, |
|||
{ |
|||
"font_class": "compose", |
|||
"unicode": "\ue67f" |
|||
}, |
|||
{ |
|||
"font_class": "contact", |
|||
"unicode": "\ue693" |
|||
}, |
|||
{ |
|||
"font_class": "contact-filled", |
|||
"unicode": "\ue695" |
|||
}, |
|||
{ |
|||
"font_class": "down", |
|||
"unicode": "\ue6b8" |
|||
}, |
|||
{ |
|||
"font_class": "bottom", |
|||
"unicode": "\ue6b8" |
|||
}, |
|||
{ |
|||
"font_class": "download", |
|||
"unicode": "\ue68d" |
|||
}, |
|||
{ |
|||
"font_class": "download-filled", |
|||
"unicode": "\ue681" |
|||
}, |
|||
{ |
|||
"font_class": "email", |
|||
"unicode": "\ue69e" |
|||
}, |
|||
{ |
|||
"font_class": "email-filled", |
|||
"unicode": "\ue69a" |
|||
}, |
|||
{ |
|||
"font_class": "eye", |
|||
"unicode": "\ue651" |
|||
}, |
|||
{ |
|||
"font_class": "eye-filled", |
|||
"unicode": "\ue66a" |
|||
}, |
|||
{ |
|||
"font_class": "eye-slash", |
|||
"unicode": "\ue6b3" |
|||
}, |
|||
{ |
|||
"font_class": "eye-slash-filled", |
|||
"unicode": "\ue6b4" |
|||
}, |
|||
{ |
|||
"font_class": "fire", |
|||
"unicode": "\ue6a1" |
|||
}, |
|||
{ |
|||
"font_class": "fire-filled", |
|||
"unicode": "\ue6c5" |
|||
}, |
|||
{ |
|||
"font_class": "flag", |
|||
"unicode": "\ue65f" |
|||
}, |
|||
{ |
|||
"font_class": "flag-filled", |
|||
"unicode": "\ue660" |
|||
}, |
|||
{ |
|||
"font_class": "folder-add", |
|||
"unicode": "\ue6a9" |
|||
}, |
|||
{ |
|||
"font_class": "folder-add-filled", |
|||
"unicode": "\ue6c8" |
|||
}, |
|||
{ |
|||
"font_class": "font", |
|||
"unicode": "\ue6a3" |
|||
}, |
|||
{ |
|||
"font_class": "forward", |
|||
"unicode": "\ue6ba" |
|||
}, |
|||
{ |
|||
"font_class": "gear", |
|||
"unicode": "\ue664" |
|||
}, |
|||
{ |
|||
"font_class": "gear-filled", |
|||
"unicode": "\ue661" |
|||
}, |
|||
{ |
|||
"font_class": "gift", |
|||
"unicode": "\ue6a4" |
|||
}, |
|||
{ |
|||
"font_class": "gift-filled", |
|||
"unicode": "\ue6c4" |
|||
}, |
|||
{ |
|||
"font_class": "hand-down", |
|||
"unicode": "\ue63d" |
|||
}, |
|||
{ |
|||
"font_class": "hand-down-filled", |
|||
"unicode": "\ue63c" |
|||
}, |
|||
{ |
|||
"font_class": "hand-up", |
|||
"unicode": "\ue63f" |
|||
}, |
|||
{ |
|||
"font_class": "hand-up-filled", |
|||
"unicode": "\ue63e" |
|||
}, |
|||
{ |
|||
"font_class": "headphones", |
|||
"unicode": "\ue630" |
|||
}, |
|||
{ |
|||
"font_class": "heart", |
|||
"unicode": "\ue639" |
|||
}, |
|||
{ |
|||
"font_class": "heart-filled", |
|||
"unicode": "\ue641" |
|||
}, |
|||
{ |
|||
"font_class": "help", |
|||
"unicode": "\ue679" |
|||
}, |
|||
{ |
|||
"font_class": "help-filled", |
|||
"unicode": "\ue674" |
|||
}, |
|||
{ |
|||
"font_class": "home", |
|||
"unicode": "\ue662" |
|||
}, |
|||
{ |
|||
"font_class": "home-filled", |
|||
"unicode": "\ue663" |
|||
}, |
|||
{ |
|||
"font_class": "image", |
|||
"unicode": "\ue670" |
|||
}, |
|||
{ |
|||
"font_class": "image-filled", |
|||
"unicode": "\ue678" |
|||
}, |
|||
{ |
|||
"font_class": "images", |
|||
"unicode": "\ue650" |
|||
}, |
|||
{ |
|||
"font_class": "images-filled", |
|||
"unicode": "\ue64b" |
|||
}, |
|||
{ |
|||
"font_class": "info", |
|||
"unicode": "\ue669" |
|||
}, |
|||
{ |
|||
"font_class": "info-filled", |
|||
"unicode": "\ue649" |
|||
}, |
|||
{ |
|||
"font_class": "left", |
|||
"unicode": "\ue6b7" |
|||
}, |
|||
{ |
|||
"font_class": "link", |
|||
"unicode": "\ue6a5" |
|||
}, |
|||
{ |
|||
"font_class": "list", |
|||
"unicode": "\ue644" |
|||
}, |
|||
{ |
|||
"font_class": "location", |
|||
"unicode": "\ue6ae" |
|||
}, |
|||
{ |
|||
"font_class": "location-filled", |
|||
"unicode": "\ue6af" |
|||
}, |
|||
{ |
|||
"font_class": "locked", |
|||
"unicode": "\ue66b" |
|||
}, |
|||
{ |
|||
"font_class": "locked-filled", |
|||
"unicode": "\ue668" |
|||
}, |
|||
{ |
|||
"font_class": "loop", |
|||
"unicode": "\ue633" |
|||
}, |
|||
{ |
|||
"font_class": "mail-open", |
|||
"unicode": "\ue643" |
|||
}, |
|||
{ |
|||
"font_class": "mail-open-filled", |
|||
"unicode": "\ue63a" |
|||
}, |
|||
{ |
|||
"font_class": "map", |
|||
"unicode": "\ue667" |
|||
}, |
|||
{ |
|||
"font_class": "map-filled", |
|||
"unicode": "\ue666" |
|||
}, |
|||
{ |
|||
"font_class": "map-pin", |
|||
"unicode": "\ue6ad" |
|||
}, |
|||
{ |
|||
"font_class": "map-pin-ellipse", |
|||
"unicode": "\ue6ac" |
|||
}, |
|||
{ |
|||
"font_class": "medal", |
|||
"unicode": "\ue6a2" |
|||
}, |
|||
{ |
|||
"font_class": "medal-filled", |
|||
"unicode": "\ue6c3" |
|||
}, |
|||
{ |
|||
"font_class": "mic", |
|||
"unicode": "\ue671" |
|||
}, |
|||
{ |
|||
"font_class": "mic-filled", |
|||
"unicode": "\ue677" |
|||
}, |
|||
{ |
|||
"font_class": "micoff", |
|||
"unicode": "\ue67e" |
|||
}, |
|||
{ |
|||
"font_class": "micoff-filled", |
|||
"unicode": "\ue6b0" |
|||
}, |
|||
{ |
|||
"font_class": "minus", |
|||
"unicode": "\ue66f" |
|||
}, |
|||
{ |
|||
"font_class": "minus-filled", |
|||
"unicode": "\ue67d" |
|||
}, |
|||
{ |
|||
"font_class": "more", |
|||
"unicode": "\ue64d" |
|||
}, |
|||
{ |
|||
"font_class": "more-filled", |
|||
"unicode": "\ue64e" |
|||
}, |
|||
{ |
|||
"font_class": "navigate", |
|||
"unicode": "\ue66e" |
|||
}, |
|||
{ |
|||
"font_class": "navigate-filled", |
|||
"unicode": "\ue67a" |
|||
}, |
|||
{ |
|||
"font_class": "notification", |
|||
"unicode": "\ue6a6" |
|||
}, |
|||
{ |
|||
"font_class": "notification-filled", |
|||
"unicode": "\ue6c1" |
|||
}, |
|||
{ |
|||
"font_class": "paperclip", |
|||
"unicode": "\ue652" |
|||
}, |
|||
{ |
|||
"font_class": "paperplane", |
|||
"unicode": "\ue672" |
|||
}, |
|||
{ |
|||
"font_class": "paperplane-filled", |
|||
"unicode": "\ue675" |
|||
}, |
|||
{ |
|||
"font_class": "person", |
|||
"unicode": "\ue699" |
|||
}, |
|||
{ |
|||
"font_class": "person-filled", |
|||
"unicode": "\ue69d" |
|||
}, |
|||
{ |
|||
"font_class": "personadd", |
|||
"unicode": "\ue69f" |
|||
}, |
|||
{ |
|||
"font_class": "personadd-filled", |
|||
"unicode": "\ue698" |
|||
}, |
|||
{ |
|||
"font_class": "personadd-filled-copy", |
|||
"unicode": "\ue6d1" |
|||
}, |
|||
{ |
|||
"font_class": "phone", |
|||
"unicode": "\ue69c" |
|||
}, |
|||
{ |
|||
"font_class": "phone-filled", |
|||
"unicode": "\ue69b" |
|||
}, |
|||
{ |
|||
"font_class": "plus", |
|||
"unicode": "\ue676" |
|||
}, |
|||
{ |
|||
"font_class": "plus-filled", |
|||
"unicode": "\ue6c7" |
|||
}, |
|||
{ |
|||
"font_class": "plusempty", |
|||
"unicode": "\ue67b" |
|||
}, |
|||
{ |
|||
"font_class": "pulldown", |
|||
"unicode": "\ue632" |
|||
}, |
|||
{ |
|||
"font_class": "pyq", |
|||
"unicode": "\ue682" |
|||
}, |
|||
{ |
|||
"font_class": "qq", |
|||
"unicode": "\ue680" |
|||
}, |
|||
{ |
|||
"font_class": "redo", |
|||
"unicode": "\ue64a" |
|||
}, |
|||
{ |
|||
"font_class": "redo-filled", |
|||
"unicode": "\ue655" |
|||
}, |
|||
{ |
|||
"font_class": "refresh", |
|||
"unicode": "\ue657" |
|||
}, |
|||
{ |
|||
"font_class": "refresh-filled", |
|||
"unicode": "\ue656" |
|||
}, |
|||
{ |
|||
"font_class": "refreshempty", |
|||
"unicode": "\ue6bf" |
|||
}, |
|||
{ |
|||
"font_class": "reload", |
|||
"unicode": "\ue6b2" |
|||
}, |
|||
{ |
|||
"font_class": "right", |
|||
"unicode": "\ue6b5" |
|||
}, |
|||
{ |
|||
"font_class": "scan", |
|||
"unicode": "\ue62a" |
|||
}, |
|||
{ |
|||
"font_class": "search", |
|||
"unicode": "\ue654" |
|||
}, |
|||
{ |
|||
"font_class": "settings", |
|||
"unicode": "\ue653" |
|||
}, |
|||
{ |
|||
"font_class": "settings-filled", |
|||
"unicode": "\ue6ce" |
|||
}, |
|||
{ |
|||
"font_class": "shop", |
|||
"unicode": "\ue62f" |
|||
}, |
|||
{ |
|||
"font_class": "shop-filled", |
|||
"unicode": "\ue6cd" |
|||
}, |
|||
{ |
|||
"font_class": "smallcircle", |
|||
"unicode": "\ue67c" |
|||
}, |
|||
{ |
|||
"font_class": "smallcircle-filled", |
|||
"unicode": "\ue665" |
|||
}, |
|||
{ |
|||
"font_class": "sound", |
|||
"unicode": "\ue684" |
|||
}, |
|||
{ |
|||
"font_class": "sound-filled", |
|||
"unicode": "\ue686" |
|||
}, |
|||
{ |
|||
"font_class": "spinner-cycle", |
|||
"unicode": "\ue68a" |
|||
}, |
|||
{ |
|||
"font_class": "staff", |
|||
"unicode": "\ue6a7" |
|||
}, |
|||
{ |
|||
"font_class": "staff-filled", |
|||
"unicode": "\ue6cb" |
|||
}, |
|||
{ |
|||
"font_class": "star", |
|||
"unicode": "\ue688" |
|||
}, |
|||
{ |
|||
"font_class": "star-filled", |
|||
"unicode": "\ue68f" |
|||
}, |
|||
{ |
|||
"font_class": "starhalf", |
|||
"unicode": "\ue683" |
|||
}, |
|||
{ |
|||
"font_class": "trash", |
|||
"unicode": "\ue687" |
|||
}, |
|||
{ |
|||
"font_class": "trash-filled", |
|||
"unicode": "\ue685" |
|||
}, |
|||
{ |
|||
"font_class": "tune", |
|||
"unicode": "\ue6aa" |
|||
}, |
|||
{ |
|||
"font_class": "tune-filled", |
|||
"unicode": "\ue6ca" |
|||
}, |
|||
{ |
|||
"font_class": "undo", |
|||
"unicode": "\ue64f" |
|||
}, |
|||
{ |
|||
"font_class": "undo-filled", |
|||
"unicode": "\ue64c" |
|||
}, |
|||
{ |
|||
"font_class": "up", |
|||
"unicode": "\ue6b6" |
|||
}, |
|||
{ |
|||
"font_class": "top", |
|||
"unicode": "\ue6b6" |
|||
}, |
|||
{ |
|||
"font_class": "upload", |
|||
"unicode": "\ue690" |
|||
}, |
|||
{ |
|||
"font_class": "upload-filled", |
|||
"unicode": "\ue68e" |
|||
}, |
|||
{ |
|||
"font_class": "videocam", |
|||
"unicode": "\ue68c" |
|||
}, |
|||
{ |
|||
"font_class": "videocam-filled", |
|||
"unicode": "\ue689" |
|||
}, |
|||
{ |
|||
"font_class": "vip", |
|||
"unicode": "\ue6a8" |
|||
}, |
|||
{ |
|||
"font_class": "vip-filled", |
|||
"unicode": "\ue6c6" |
|||
}, |
|||
{ |
|||
"font_class": "wallet", |
|||
"unicode": "\ue6b1" |
|||
}, |
|||
{ |
|||
"font_class": "wallet-filled", |
|||
"unicode": "\ue6c2" |
|||
}, |
|||
{ |
|||
"font_class": "weibo", |
|||
"unicode": "\ue68b" |
|||
}, |
|||
{ |
|||
"font_class": "weixin", |
|||
"unicode": "\ue691" |
|||
} |
|||
] |
|||
|
|||
// export const fontData = JSON.parse<IconsDataItem>(fontDataJson)
|
|||
@ -0,0 +1,89 @@ |
|||
{ |
|||
"id": "uni-icons", |
|||
"displayName": "uni-icons 图标", |
|||
"version": "2.0.10", |
|||
"description": "图标组件，用于展示移动端常见的图标，可自定义颜色、大小。", |
|||
"keywords": [ |
|||
"uni-ui", |
|||
"uniui", |
|||
"icon", |
|||
"图标" |
|||
], |
|||
"repository": "https://github.com/dcloudio/uni-ui", |
|||
"engines": { |
|||
"HBuilderX": "^3.2.14" |
|||
}, |
|||
"directories": { |
|||
"example": "../../temps/example_temps" |
|||
}, |
|||
"dcloudext": { |
|||
"sale": { |
|||
"regular": { |
|||
"price": "0.00" |
|||
}, |
|||
"sourcecode": { |
|||
"price": "0.00" |
|||
} |
|||
}, |
|||
"contact": { |
|||
"qq": "" |
|||
}, |
|||
"declaration": { |
|||
"ads": "无", |
|||
"data": "无", |
|||
"permissions": "无" |
|||
}, |
|||
"npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui", |
|||
"type": "component-vue" |
|||
}, |
|||
"uni_modules": { |
|||
"dependencies": ["uni-scss"], |
|||
"encrypt": [], |
|||
"platforms": { |
|||
"cloud": { |
|||
"tcb": "y", |
|||
"aliyun": "y", |
|||
"alipay": "n" |
|||
}, |
|||
"client": { |
|||
"App": { |
|||
"app-vue": "y", |
|||
"app-nvue": "y", |
|||
"app-uvue": "y" |
|||
}, |
|||
"H5-mobile": { |
|||
"Safari": "y", |
|||
"Android Browser": "y", |
|||
"微信浏览器(Android)": "y", |
|||
"QQ浏览器(Android)": "y" |
|||
}, |
|||
"H5-pc": { |
|||
"Chrome": "y", |
|||
"IE": "y", |
|||
"Edge": "y", |
|||
"Firefox": "y", |
|||
"Safari": "y" |
|||
}, |
|||
"小程序": { |
|||
"微信": "y", |
|||
"阿里": "y", |
|||
"百度": "y", |
|||
"字节跳动": "y", |
|||
"QQ": "y", |
|||
"钉钉": "y", |
|||
"快手": "y", |
|||
"飞书": "y", |
|||
"京东": "y" |
|||
}, |
|||
"快应用": { |
|||
"华为": "y", |
|||
"联盟": "y" |
|||
}, |
|||
"Vue": { |
|||
"vue2": "y", |
|||
"vue3": "y" |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
@ -0,0 +1,8 @@ |
|||
## Icons 图标 |
|||
> **组件名：uni-icons** |
|||
> 代码块： `uIcons` |
|||
|
|||
用于展示 icons 图标 。 |
|||
|
|||
### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-icons) |
|||
#### 如使用过程中有任何问题，或者您对uni-ui有一些好的建议，欢迎加入 uni-ui 交流群：871950839 |
|||
@ -0,0 +1,8 @@ |
|||
## 1.0.3（2022-01-21） |
|||
- 优化 组件示例 |
|||
## 1.0.2（2021-11-22） |
|||
- 修复 / 符号在 vue 不同版本兼容问题引起的报错问题 |
|||
## 1.0.1（2021-11-22） |
|||
- 修复 vue3中scss语法兼容问题 |
|||
## 1.0.0（2021-11-18） |
|||
- init |
|||
@ -0,0 +1 @@ |
|||
@import './styles/index.scss'; |
|||
@ -0,0 +1,82 @@ |
|||
{ |
|||
"id": "uni-scss", |
|||
"displayName": "uni-scss 辅助样式", |
|||
"version": "1.0.3", |
|||
"description": "uni-sass是uni-ui提供的一套全局样式 ，通过一些简单的类名和sass变量，实现简单的页面布局操作，比如颜色、边距、圆角等。", |
|||
"keywords": [ |
|||
"uni-scss", |
|||
"uni-ui", |
|||
"辅助样式" |
|||
], |
|||
"repository": "https://github.com/dcloudio/uni-ui", |
|||
"engines": { |
|||
"HBuilderX": "^3.1.0" |
|||
}, |
|||
"dcloudext": { |
|||
"category": [ |
|||
"JS SDK", |
|||
"通用 SDK" |
|||
], |
|||
"sale": { |
|||
"regular": { |
|||
"price": "0.00" |
|||
}, |
|||
"sourcecode": { |
|||
"price": "0.00" |
|||
} |
|||
}, |
|||
"contact": { |
|||
"qq": "" |
|||
}, |
|||
"declaration": { |
|||
"ads": "无", |
|||
"data": "无", |
|||
"permissions": "无" |
|||
}, |
|||
"npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui" |
|||
}, |
|||
"uni_modules": { |
|||
"dependencies": [], |
|||
"encrypt": [], |
|||
"platforms": { |
|||
"cloud": { |
|||
"tcb": "y", |
|||
"aliyun": "y" |
|||
}, |
|||
"client": { |
|||
"App": { |
|||
"app-vue": "y", |
|||
"app-nvue": "u" |
|||
}, |
|||
"H5-mobile": { |
|||
"Safari": "y", |
|||
"Android Browser": "y", |
|||
"微信浏览器(Android)": "y", |
|||
"QQ浏览器(Android)": "y" |
|||
}, |
|||
"H5-pc": { |
|||
"Chrome": "y", |
|||
"IE": "y", |
|||
"Edge": "y", |
|||
"Firefox": "y", |
|||
"Safari": "y" |
|||
}, |
|||
"小程序": { |
|||
"微信": "y", |
|||
"阿里": "y", |
|||
"百度": "y", |
|||
"字节跳动": "y", |
|||
"QQ": "y" |
|||
}, |
|||
"快应用": { |
|||
"华为": "n", |
|||
"联盟": "n" |
|||
}, |
|||
"Vue": { |
|||
"vue2": "y", |
|||
"vue3": "y" |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
@ -0,0 +1,4 @@ |
|||
`uni-sass` 是 `uni-ui`提供的一套全局样式 ，通过一些简单的类名和`sass`变量，实现简单的页面布局操作，比如颜色、边距、圆角等。 |
|||
|
|||
### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-sass) |
|||
#### 如使用过程中有任何问题，或者您对uni-ui有一些好的建议，欢迎加入 uni-ui 交流群：871950839 |
|||
@ -0,0 +1,7 @@ |
|||
@import './setting/_variables.scss'; |
|||
@import './setting/_border.scss'; |
|||
@import './setting/_color.scss'; |
|||
@import './setting/_space.scss'; |
|||
@import './setting/_radius.scss'; |
|||
@import './setting/_text.scss'; |
|||
@import './setting/_styles.scss'; |
|||
@ -0,0 +1,3 @@ |
|||
.uni-border { |
|||
border: 1px $uni-border-1 solid; |
|||
} |
|||
@ -0,0 +1,66 @@ |
|||
|
|||
// TODO 暂时不需要 class ，需要用户使用变量实现 ，如果使用类名其实并不推荐 |
|||
// @mixin get-styles($k,$c) { |
|||
// @if $k == size or $k == weight{ |
|||
// font-#{$k}:#{$c} |
|||
// }@else{ |
|||
// #{$k}:#{$c} |
|||
// } |
|||
// } |
|||
$uni-ui-color:( |
|||
// 主色 |
|||
primary: $uni-primary, |
|||
primary-disable: $uni-primary-disable, |
|||
primary-light: $uni-primary-light, |
|||
// 辅助色 |
|||
success: $uni-success, |
|||
success-disable: $uni-success-disable, |
|||
success-light: $uni-success-light, |
|||
warning: $uni-warning, |
|||
warning-disable: $uni-warning-disable, |
|||
warning-light: $uni-warning-light, |
|||
error: $uni-error, |
|||
error-disable: $uni-error-disable, |
|||
error-light: $uni-error-light, |
|||
info: $uni-info, |
|||
info-disable: $uni-info-disable, |
|||
info-light: $uni-info-light, |
|||
// 中性色 |
|||
main-color: $uni-main-color, |
|||
base-color: $uni-base-color, |
|||
secondary-color: $uni-secondary-color, |
|||
extra-color: $uni-extra-color, |
|||
// 背景色 |
|||
bg-color: $uni-bg-color, |
|||
// 边框颜色 |
|||
border-1: $uni-border-1, |
|||
border-2: $uni-border-2, |
|||
border-3: $uni-border-3, |
|||
border-4: $uni-border-4, |
|||
// 黑色 |
|||
black:$uni-black, |
|||
// 白色 |
|||
white:$uni-white, |
|||
// 透明 |
|||
transparent:$uni-transparent |
|||
) !default; |
|||
@each $key, $child in $uni-ui-color { |
|||
.uni-#{"" + $key} { |
|||
color: $child; |
|||
} |
|||
.uni-#{"" + $key}-bg { |
|||
background-color: $child; |
|||
} |
|||
} |
|||
.uni-shadow-sm { |
|||
box-shadow: $uni-shadow-sm; |
|||
} |
|||
.uni-shadow-base { |
|||
box-shadow: $uni-shadow-base; |
|||
} |
|||
.uni-shadow-lg { |
|||
box-shadow: $uni-shadow-lg; |
|||
} |
|||
.uni-mask { |
|||
background-color:$uni-mask; |
|||
} |
|||
@ -0,0 +1,55 @@ |
|||
@mixin radius($r,$d:null ,$important: false){ |
|||
$radius-value:map-get($uni-radius, $r) if($important, !important, null); |
|||
// Key exists within the $uni-radius variable |
|||
@if (map-has-key($uni-radius, $r) and $d){ |
|||
@if $d == t { |
|||
border-top-left-radius:$radius-value; |
|||
border-top-right-radius:$radius-value; |
|||
}@else if $d == r { |
|||
border-top-right-radius:$radius-value; |
|||
border-bottom-right-radius:$radius-value; |
|||
}@else if $d == b { |
|||
border-bottom-left-radius:$radius-value; |
|||
border-bottom-right-radius:$radius-value; |
|||
}@else if $d == l { |
|||
border-top-left-radius:$radius-value; |
|||
border-bottom-left-radius:$radius-value; |
|||
}@else if $d == tl { |
|||
border-top-left-radius:$radius-value; |
|||
}@else if $d == tr { |
|||
border-top-right-radius:$radius-value; |
|||
}@else if $d == br { |
|||
border-bottom-right-radius:$radius-value; |
|||
}@else if $d == bl { |
|||
border-bottom-left-radius:$radius-value; |
|||
} |
|||
}@else{ |
|||
border-radius:$radius-value; |
|||
} |
|||
} |
|||
|
|||
@each $key, $child in $uni-radius { |
|||
@if($key){ |
|||
.uni-radius-#{"" + $key} { |
|||
@include radius($key) |
|||
} |
|||
}@else{ |
|||
.uni-radius { |
|||
@include radius($key) |
|||
} |
|||
} |
|||
} |
|||
|
|||
@each $direction in t, r, b, l,tl, tr, br, bl { |
|||
@each $key, $child in $uni-radius { |
|||
@if($key){ |
|||
.uni-radius-#{"" + $direction}-#{"" + $key} { |
|||
@include radius($key,$direction,false) |
|||
} |
|||
}@else{ |
|||
.uni-radius-#{$direction} { |
|||
@include radius($key,$direction,false) |
|||
} |
|||
} |
|||
} |
|||
} |
|||
@ -0,0 +1,56 @@ |
|||
|
|||
@mixin fn($space,$direction,$size,$n) { |
|||
@if $n { |
|||
#{$space}-#{$direction}: #{$size*$uni-space-root}px |
|||
} @else { |
|||
#{$space}-#{$direction}: #{-$size*$uni-space-root}px |
|||
} |
|||
} |
|||
@mixin get-styles($direction,$i,$space,$n){ |
|||
@if $direction == t { |
|||
@include fn($space, top,$i,$n); |
|||
} |
|||
@if $direction == r { |
|||
@include fn($space, right,$i,$n); |
|||
} |
|||
@if $direction == b { |
|||
@include fn($space, bottom,$i,$n); |
|||
} |
|||
@if $direction == l { |
|||
@include fn($space, left,$i,$n); |
|||
} |
|||
@if $direction == x { |
|||
@include fn($space, left,$i,$n); |
|||
@include fn($space, right,$i,$n); |
|||
} |
|||
@if $direction == y { |
|||
@include fn($space, top,$i,$n); |
|||
@include fn($space, bottom,$i,$n); |
|||
} |
|||
@if $direction == a { |
|||
@if $n { |
|||
#{$space}:#{$i*$uni-space-root}px; |
|||
} @else { |
|||
#{$space}:#{-$i*$uni-space-root}px; |
|||
} |
|||
} |
|||
} |
|||
|
|||
@each $orientation in m,p { |
|||
$space: margin; |
|||
@if $orientation == m { |
|||
$space: margin; |
|||
} @else { |
|||
$space: padding; |
|||
} |
|||
@for $i from 0 through 16 { |
|||
@each $direction in t, r, b, l, x, y, a { |
|||
.uni-#{$orientation}#{$direction}-#{$i} { |
|||
@include get-styles($direction,$i,$space,true); |
|||
} |
|||
.uni-#{$orientation}#{$direction}-n#{$i} { |
|||
@include get-styles($direction,$i,$space,false); |
|||
} |
|||
} |
|||
} |
|||
} |
|||
@ -0,0 +1,167 @@ |
|||
/* #ifndef APP-NVUE */ |
|||
|
|||
$-color-white:#fff; |
|||
$-color-black:#000; |
|||
@mixin base-style($color) { |
|||
color: #fff; |
|||
background-color: $color; |
|||
border-color: mix($-color-black, $color, 8%); |
|||
&:not([hover-class]):active { |
|||
background: mix($-color-black, $color, 10%); |
|||
border-color: mix($-color-black, $color, 20%); |
|||
color: $-color-white; |
|||
outline: none; |
|||
} |
|||
} |
|||
@mixin is-color($color) { |
|||
@include base-style($color); |
|||
&[loading] { |
|||
@include base-style($color); |
|||
&::before { |
|||
margin-right:5px; |
|||
} |
|||
} |
|||
&[disabled] { |
|||
&, |
|||
&[loading], |
|||
&:not([hover-class]):active { |
|||
color: $-color-white; |
|||
border-color: mix(darken($color,10%), $-color-white); |
|||
background-color: mix($color, $-color-white); |
|||
} |
|||
} |
|||
|
|||
} |
|||
@mixin base-plain-style($color) { |
|||
color:$color; |
|||
background-color: mix($-color-white, $color, 90%); |
|||
border-color: mix($-color-white, $color, 70%); |
|||
&:not([hover-class]):active { |
|||
background: mix($-color-white, $color, 80%); |
|||
color: $color; |
|||
outline: none; |
|||
border-color: mix($-color-white, $color, 50%); |
|||
} |
|||
} |
|||
@mixin is-plain($color){ |
|||
&[plain] { |
|||
@include base-plain-style($color); |
|||
&[loading] { |
|||
@include base-plain-style($color); |
|||
&::before { |
|||
margin-right:5px; |
|||
} |
|||
} |
|||
&[disabled] { |
|||
&, |
|||
&:active { |
|||
color: mix($-color-white, $color, 40%); |
|||
background-color: mix($-color-white, $color, 90%); |
|||
border-color: mix($-color-white, $color, 80%); |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
|
|||
.uni-btn { |
|||
margin: 5px; |
|||
color: #393939; |
|||
border:1px solid #ccc; |
|||
font-size: 16px; |
|||
font-weight: 200; |
|||
background-color: #F9F9F9; |
|||
// TODO 暂时处理边框隐藏一边的问题 |
|||
overflow: visible; |
|||
&::after{ |
|||
border: none; |
|||
} |
|||
|
|||
&:not([type]),&[type=default] { |
|||
color: #999; |
|||
&[loading] { |
|||
background: none; |
|||
&::before { |
|||
margin-right:5px; |
|||
} |
|||
} |
|||
|
|||
|
|||
|
|||
&[disabled]{ |
|||
color: mix($-color-white, #999, 60%); |
|||
&, |
|||
&[loading], |
|||
&:active { |
|||
color: mix($-color-white, #999, 60%); |
|||
background-color: mix($-color-white,$-color-black , 98%); |
|||
border-color: mix($-color-white, #999, 85%); |
|||
} |
|||
} |
|||
|
|||
&[plain] { |
|||
color: #999; |
|||
background: none; |
|||
border-color: $uni-border-1; |
|||
&:not([hover-class]):active { |
|||
background: none; |
|||
color: mix($-color-white, $-color-black, 80%); |
|||
border-color: mix($-color-white, $-color-black, 90%); |
|||
outline: none; |
|||
} |
|||
&[disabled]{ |
|||
&, |
|||
&[loading], |
|||
&:active { |
|||
background: none; |
|||
color: mix($-color-white, #999, 60%); |
|||
border-color: mix($-color-white, #999, 85%); |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
&:not([hover-class]):active { |
|||
color: mix($-color-white, $-color-black, 50%); |
|||
} |
|||
|
|||
&[size=mini] { |
|||
font-size: 16px; |
|||
font-weight: 200; |
|||
border-radius: 8px; |
|||
} |
|||
|
|||
|
|||
|
|||
&.uni-btn-small { |
|||
font-size: 14px; |
|||
} |
|||
&.uni-btn-mini { |
|||
font-size: 12px; |
|||
} |
|||
|
|||
&.uni-btn-radius { |
|||
border-radius: 999px; |
|||
} |
|||
&[type=primary] { |
|||
@include is-color($uni-primary); |
|||
@include is-plain($uni-primary) |
|||
} |
|||
&[type=success] { |
|||
@include is-color($uni-success); |
|||
@include is-plain($uni-success) |
|||
} |
|||
&[type=error] { |
|||
@include is-color($uni-error); |
|||
@include is-plain($uni-error) |
|||
} |
|||
&[type=warning] { |
|||
@include is-color($uni-warning); |
|||
@include is-plain($uni-warning) |
|||
} |
|||
&[type=info] { |
|||
@include is-color($uni-info); |
|||
@include is-plain($uni-info) |
|||
} |
|||
} |
|||
/* #endif */ |
|||
@ -0,0 +1,24 @@ |
|||
@mixin get-styles($k,$c) { |
|||
@if $k == size or $k == weight{ |
|||
font-#{$k}:#{$c} |
|||
}@else{ |
|||
#{$k}:#{$c} |
|||
} |
|||
} |
|||
|
|||
@each $key, $child in $uni-headings { |
|||
/* #ifndef APP-NVUE */ |
|||
.uni-#{$key} { |
|||
@each $k, $c in $child { |
|||
@include get-styles($k,$c) |
|||
} |
|||
} |
|||
/* #endif */ |
|||
/* #ifdef APP-NVUE */ |
|||
.container .uni-#{$key} { |
|||
@each $k, $c in $child { |
|||
@include get-styles($k,$c) |
|||
} |
|||
} |
|||
/* #endif */ |
|||
} |
|||
@ -0,0 +1,146 @@ |
|||
// @use "sass:math"; |
|||
@import '../tools/functions.scss'; |
|||
// 间距基础倍数 |
|||
$uni-space-root: 2 !default; |
|||
// 边框半径默认值 |
|||
$uni-radius-root:5px !default; |
|||
$uni-radius: () !default; |
|||
// 边框半径断点 |
|||
$uni-radius: map-deep-merge( |
|||
( |
|||
0: 0, |
|||
// TODO 当前版本暂时不支持 sm 属性 |
|||
// 'sm': math.div($uni-radius-root, 2), |
|||
null: $uni-radius-root, |
|||
'lg': $uni-radius-root * 2, |
|||
'xl': $uni-radius-root * 6, |
|||
'pill': 9999px, |
|||
'circle': 50% |
|||
), |
|||
$uni-radius |
|||
); |
|||
// 字体家族 |
|||
$body-font-family: 'Roboto', sans-serif !default; |
|||
// 文本 |
|||
$heading-font-family: $body-font-family !default; |
|||
$uni-headings: () !default; |
|||
$letterSpacing: -0.01562em; |
|||
$uni-headings: map-deep-merge( |
|||
( |
|||
'h1': ( |
|||
size: 32px, |
|||
weight: 300, |
|||
line-height: 50px, |
|||
// letter-spacing:-0.01562em |
|||
), |
|||
'h2': ( |
|||
size: 28px, |
|||
weight: 300, |
|||
line-height: 40px, |
|||
// letter-spacing: -0.00833em |
|||
), |
|||
'h3': ( |
|||
size: 24px, |
|||
weight: 400, |
|||
line-height: 32px, |
|||
// letter-spacing: normal |
|||
), |
|||
'h4': ( |
|||
size: 20px, |
|||
weight: 400, |
|||
line-height: 30px, |
|||
// letter-spacing: 0.00735em |
|||
), |
|||
'h5': ( |
|||
size: 16px, |
|||
weight: 400, |
|||
line-height: 24px, |
|||
// letter-spacing: normal |
|||
), |
|||
'h6': ( |
|||
size: 14px, |
|||
weight: 500, |
|||
line-height: 18px, |
|||
// letter-spacing: 0.0125em |
|||
), |
|||
'subtitle': ( |
|||
size: 12px, |
|||
weight: 400, |
|||
line-height: 20px, |
|||
// letter-spacing: 0.00937em |
|||
), |
|||
'body': ( |
|||
font-size: 14px, |
|||
font-weight: 400, |
|||
line-height: 22px, |
|||
// letter-spacing: 0.03125em |
|||
), |
|||
'caption': ( |
|||
'size': 12px, |
|||
'weight': 400, |
|||
'line-height': 20px, |
|||
// 'letter-spacing': 0.03333em, |
|||
// 'text-transform': false |
|||
) |
|||
), |
|||
$uni-headings |
|||
); |
|||
|
|||
|
|||
|
|||
// 主色 |
|||
$uni-primary: #2979ff !default; |
|||
$uni-primary-disable:lighten($uni-primary,20%) !default; |
|||
$uni-primary-light: lighten($uni-primary,25%) !default; |
|||
|
|||
// 辅助色 |
|||
// 除了主色外的场景色，需要在不同的场景中使用（例如危险色表示危险的操作）。 |
|||
$uni-success: #18bc37 !default; |
|||
$uni-success-disable:lighten($uni-success,20%) !default; |
|||
$uni-success-light: lighten($uni-success,25%) !default; |
|||
|
|||
$uni-warning: #f3a73f !default; |
|||
$uni-warning-disable:lighten($uni-warning,20%) !default; |
|||
$uni-warning-light: lighten($uni-warning,25%) !default; |
|||
|
|||
$uni-error: #e43d33 !default; |
|||
$uni-error-disable:lighten($uni-error,20%) !default; |
|||
$uni-error-light: lighten($uni-error,25%) !default; |
|||
|
|||
$uni-info: #8f939c !default; |
|||
$uni-info-disable:lighten($uni-info,20%) !default; |
|||
$uni-info-light: lighten($uni-info,25%) !default; |
|||
|
|||
// 中性色 |
|||
// 中性色用于文本、背景和边框颜色。通过运用不同的中性色，来表现层次结构。 |
|||
$uni-main-color: #3a3a3a !default; // 主要文字 |
|||
$uni-base-color: #6a6a6a !default; // 常规文字 |
|||
$uni-secondary-color: #909399 !default; // 次要文字 |
|||
$uni-extra-color: #c7c7c7 !default; // 辅助说明 |
|||
|
|||
// 边框颜色 |
|||
$uni-border-1: #F0F0F0 !default; |
|||
$uni-border-2: #EDEDED !default; |
|||
$uni-border-3: #DCDCDC !default; |
|||
$uni-border-4: #B9B9B9 !default; |
|||
|
|||
// 常规色 |
|||
$uni-black: #000000 !default; |
|||
$uni-white: #ffffff !default; |
|||
$uni-transparent: rgba($color: #000000, $alpha: 0) !default; |
|||
|
|||
// 背景色 |
|||
$uni-bg-color: #f7f7f7 !default; |
|||
|
|||
/* 水平间距 */ |
|||
$uni-spacing-sm: 8px !default; |
|||
$uni-spacing-base: 15px !default; |
|||
$uni-spacing-lg: 30px !default; |
|||
|
|||
// 阴影 |
|||
$uni-shadow-sm:0 0 5px rgba($color: #d8d8d8, $alpha: 0.5) !default; |
|||
$uni-shadow-base:0 1px 8px 1px rgba($color: #a5a5a5, $alpha: 0.2) !default; |
|||
$uni-shadow-lg:0px 1px 10px 2px rgba($color: #a5a4a4, $alpha: 0.5) !default; |
|||
|
|||
// 蒙版 |
|||
$uni-mask: rgba($color: #000000, $alpha: 0.4) !default; |
|||
@ -0,0 +1,19 @@ |
|||
// 合并 map |
|||
@function map-deep-merge($parent-map, $child-map){ |
|||
$result: $parent-map; |
|||
@each $key, $child in $child-map { |
|||
$parent-has-key: map-has-key($result, $key); |
|||
$parent-value: map-get($result, $key); |
|||
$parent-type: type-of($parent-value); |
|||
$child-type: type-of($child); |
|||
$parent-is-map: $parent-type == map; |
|||
$child-is-map: $child-type == map; |
|||
|
|||
@if (not $parent-has-key) or ($parent-type != $child-type) or (not ($parent-is-map and $child-is-map)){ |
|||
$result: map-merge($result, ( $key: $child )); |
|||
}@else { |
|||
$result: map-merge($result, ( $key: map-deep-merge($parent-value, $child) )); |
|||
} |
|||
} |
|||
@return $result; |
|||
}; |
|||
@ -0,0 +1,31 @@ |
|||
// 间距基础倍数 |
|||
$uni-space-root: 2; |
|||
// 边框半径默认值 |
|||
$uni-radius-root:5px; |
|||
// 主色 |
|||
$uni-primary: #2979ff; |
|||
// 辅助色 |
|||
$uni-success: #4cd964; |
|||
// 警告色 |
|||
$uni-warning: #f0ad4e; |
|||
// 错误色 |
|||
$uni-error: #dd524d; |
|||
// 描述色 |
|||
$uni-info: #909399; |
|||
// 中性色 |
|||
$uni-main-color: #303133; |
|||
$uni-base-color: #606266; |
|||
$uni-secondary-color: #909399; |
|||
$uni-extra-color: #C0C4CC; |
|||
// 背景色 |
|||
$uni-bg-color: #f5f5f5; |
|||
// 边框颜色 |
|||
$uni-border-1: #DCDFE6; |
|||
$uni-border-2: #E4E7ED; |
|||
$uni-border-3: #EBEEF5; |
|||
$uni-border-4: #F2F6FC; |
|||
|
|||
// 常规色 |
|||
$uni-black: #000000; |
|||
$uni-white: #ffffff; |
|||
$uni-transparent: rgba($color: #000000, $alpha: 0); |
|||
@ -0,0 +1,62 @@ |
|||
@import './styles/setting/_variables.scss'; |
|||
// 间距基础倍数 |
|||
$uni-space-root: 2; |
|||
// 边框半径默认值 |
|||
$uni-radius-root:5px; |
|||
|
|||
// 主色 |
|||
$uni-primary: #2979ff; |
|||
$uni-primary-disable:mix(#fff,$uni-primary,50%); |
|||
$uni-primary-light: mix(#fff,$uni-primary,80%); |
|||
|
|||
// 辅助色 |
|||
// 除了主色外的场景色，需要在不同的场景中使用（例如危险色表示危险的操作）。 |
|||
$uni-success: #18bc37; |
|||
$uni-success-disable:mix(#fff,$uni-success,50%); |
|||
$uni-success-light: mix(#fff,$uni-success,80%); |
|||
|
|||
$uni-warning: #f3a73f; |
|||
$uni-warning-disable:mix(#fff,$uni-warning,50%); |
|||
$uni-warning-light: mix(#fff,$uni-warning,80%); |
|||
|
|||
$uni-error: #e43d33; |
|||
$uni-error-disable:mix(#fff,$uni-error,50%); |
|||
$uni-error-light: mix(#fff,$uni-error,80%); |
|||
|
|||
$uni-info: #8f939c; |
|||
$uni-info-disable:mix(#fff,$uni-info,50%); |
|||
$uni-info-light: mix(#fff,$uni-info,80%); |
|||
|
|||
// 中性色 |
|||
// 中性色用于文本、背景和边框颜色。通过运用不同的中性色，来表现层次结构。 |
|||
$uni-main-color: #3a3a3a; // 主要文字 |
|||
$uni-base-color: #6a6a6a; // 常规文字 |
|||
$uni-secondary-color: #909399; // 次要文字 |
|||
$uni-extra-color: #c7c7c7; // 辅助说明 |
|||
|
|||
// 边框颜色 |
|||
$uni-border-1: #F0F0F0; |
|||
$uni-border-2: #EDEDED; |
|||
$uni-border-3: #DCDCDC; |
|||
$uni-border-4: #B9B9B9; |
|||
|
|||
// 常规色 |
|||
$uni-black: #000000; |
|||
$uni-white: #ffffff; |
|||
$uni-transparent: rgba($color: #000000, $alpha: 0); |
|||
|
|||
// 背景色 |
|||
$uni-bg-color: #f7f7f7; |
|||
|
|||
/* 水平间距 */ |
|||
$uni-spacing-sm: 8px; |
|||
$uni-spacing-base: 15px; |
|||
$uni-spacing-lg: 30px; |
|||
|
|||
// 阴影 |
|||
$uni-shadow-sm:0 0 5px rgba($color: #d8d8d8, $alpha: 0.5); |
|||
$uni-shadow-base:0 1px 8px 1px rgba($color: #a5a5a5, $alpha: 0.2); |
|||
$uni-shadow-lg:0px 1px 10px 2px rgba($color: #a5a4a4, $alpha: 0.5); |
|||
|
|||
// 蒙版 |
|||
$uni-mask: rgba($color: #000000, $alpha: 0.4); |
|||
@ -0,0 +1,25 @@ |
|||
中医针灸患者端静态页面及样式改造 |
|||
|
|||
1.首页调整 |
|||
（1）首页医院地址导航在小程序中打开样式 |
|||
（2）增加就诊须知折叠面板 |
|||
（3）增加医保定点标签 |
|||
（4）出诊医院列表样式调整 |
|||
|
|||
2.底部公共菜单增加“现场报道”入口 |
|||
|
|||
1.首页医院地址导航在小程序中打开调整 |
|||
2.首页医院列表部分样式调整 |
|||
|
|||
3.选择就诊人列表页面样式改造 |
|||
4.新增就诊人页面样式改造 |
|||
5.扫码报道页面 |
|||
6.确认报道页面 |
|||
7.确认报道空页面 |
|||
8.候诊方式页面 |
|||
9.个人中心页面样式改造 |
|||
11.就诊人列表页面 |
|||
12.就诊记录页面 |
|||
13.就诊详情页面样式改造 |
|||
14.候诊状态，所在床位弹窗 |
|||
|
|||
Loading…
Reference in new issue