wangfukang
3 years ago
14 changed files with 1469 additions and 82 deletions
Binary file not shown.
@ -0,0 +1,23 @@ |
|||
## 1.2.5（2023-03-29） |
|||
- 新增 pattern.icon 属性，可自定义图标 |
|||
## 1.2.4（2022-09-07） |
|||
小程序端由于 style 使用了对象导致报错，[详情](https://ask.dcloud.net.cn/question/152790?item_id=211778&rf=false) |
|||
## 1.2.3（2022-09-05） |
|||
- 修复 nvue 环境下，具有 tabBar 时，fab 组件下部位置无法正常获取 --window-bottom 的bug，详见：[https://ask.dcloud.net.cn/question/110638?notification_id=826310](https://ask.dcloud.net.cn/question/110638?notification_id=826310) |
|||
## 1.2.2（2021-12-29） |
|||
- 更新 组件依赖 |
|||
## 1.2.1（2021-11-19） |
|||
- 修复 阴影颜色不正确的bug |
|||
## 1.2.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-fab](https://uniapp.dcloud.io/component/uniui/uni-fab) |
|||
## 1.1.1（2021-11-09） |
|||
- 新增 提供组件设计资源，组件样式调整 |
|||
## 1.1.0（2021-07-30） |
|||
- 组件兼容 vue3，如何创建vue3项目，详见 [uni-app 项目支持 vue3 介绍](https://ask.dcloud.net.cn/article/37834) |
|||
## 1.0.7（2021-05-12） |
|||
- 新增 组件示例地址 |
|||
## 1.0.6（2021-02-05） |
|||
- 调整为uni_modules目录规范 |
|||
- 优化 按钮背景色调整 |
|||
- 优化 兼容pc端 |
|||
@ -0,0 +1,491 @@ |
|||
<template> |
|||
<view class="uni-cursor-point"> |
|||
<view v-if="popMenu && (leftBottom||rightBottom||leftTop||rightTop) && content.length > 0" :class="{ |
|||
'uni-fab--leftBottom': leftBottom, |
|||
'uni-fab--rightBottom': rightBottom, |
|||
'uni-fab--leftTop': leftTop, |
|||
'uni-fab--rightTop': rightTop |
|||
}" class="uni-fab" |
|||
:style="nvueBottom" |
|||
> |
|||
<view :class="{ |
|||
'uni-fab__content--left': horizontal === 'left', |
|||
'uni-fab__content--right': horizontal === 'right', |
|||
'uni-fab__content--flexDirection': direction === 'vertical', |
|||
'uni-fab__content--flexDirectionStart': flexDirectionStart, |
|||
'uni-fab__content--flexDirectionEnd': flexDirectionEnd, |
|||
'uni-fab__content--other-platform': !isAndroidNvue |
|||
}" :style="{ width: boxWidth, height: boxHeight, backgroundColor: styles.backgroundColor }" |
|||
class="uni-fab__content" elevation="5"> |
|||
<view v-if="flexDirectionStart || horizontalLeft" class="uni-fab__item uni-fab__item--first" /> |
|||
<view v-for="(item, index) in content" :key="index" :class="{ 'uni-fab__item--active': isShow }" |
|||
class="uni-fab__item" @click="_onItemClick(index, item)"> |
|||
<image :src="item.active ? item.selectedIconPath : item.iconPath" class="uni-fab__item-image" |
|||
mode="aspectFit" /> |
|||
<text class="uni-fab__item-text" |
|||
:style="{ color: item.active ? styles.selectedColor : styles.color }">{{ item.text }}</text> |
|||
</view> |
|||
<view v-if="flexDirectionEnd || horizontalRight" class="uni-fab__item uni-fab__item--first" /> |
|||
</view> |
|||
</view> |
|||
<view :class="{ |
|||
'uni-fab__circle--leftBottom': leftBottom, |
|||
'uni-fab__circle--rightBottom': rightBottom, |
|||
'uni-fab__circle--leftTop': leftTop, |
|||
'uni-fab__circle--rightTop': rightTop, |
|||
'uni-fab__content--other-platform': !isAndroidNvue |
|||
}" class="uni-fab__circle uni-fab__plus" :style="{ 'background-color': styles.buttonColor, 'bottom': nvueBottom }" @click="_onClick"> |
|||
<uni-icons class="fab-circle-icon" :type="styles.icon" :color="styles.iconColor" size="32" |
|||
:class="{'uni-fab__plus--active': isShow && content.length > 0}"></uni-icons> |
|||
<!-- <view class="fab-circle-v" :class="{'uni-fab__plus--active': isShow && content.length > 0}"></view> |
|||
<view class="fab-circle-h" :class="{'uni-fab__plus--active': isShow && content.length > 0}"></view> --> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
let platform = 'other' |
|||
// #ifdef APP-NVUE |
|||
platform = uni.getSystemInfoSync().platform |
|||
// #endif |
|||
|
|||
/** |
|||
* Fab 悬浮按钮 |
|||
* @description 点击可展开一个图形按钮菜单 |
|||
* @tutorial https://ext.dcloud.net.cn/plugin?id=144 |
|||
* @property {Object} pattern 可选样式配置项 |
|||
* @property {Object} horizontal = [left | right] 水平对齐方式 |
|||
* @value left 左对齐 |
|||
* @value right 右对齐 |
|||
* @property {Object} vertical = [bottom | top] 垂直对齐方式 |
|||
* @value bottom 下对齐 |
|||
* @value top 上对齐 |
|||
* @property {Object} direction = [horizontal | vertical] 展开菜单显示方式 |
|||
* @value horizontal 水平显示 |
|||
* @value vertical 垂直显示 |
|||
* @property {Array} content 展开菜单内容配置项 |
|||
* @property {Boolean} popMenu 是否使用弹出菜单 |
|||
* @event {Function} trigger 展开菜单点击事件，返回点击信息 |
|||
* @event {Function} fabClick 悬浮按钮点击事件 |
|||
*/ |
|||
export default { |
|||
name: 'UniFab', |
|||
emits: ['fabClick', 'trigger'], |
|||
props: { |
|||
pattern: { |
|||
type: Object, |
|||
default () { |
|||
return {} |
|||
} |
|||
}, |
|||
horizontal: { |
|||
type: String, |
|||
default: 'left' |
|||
}, |
|||
vertical: { |
|||
type: String, |
|||
default: 'bottom' |
|||
}, |
|||
direction: { |
|||
type: String, |
|||
default: 'horizontal' |
|||
}, |
|||
content: { |
|||
type: Array, |
|||
default () { |
|||
return [] |
|||
} |
|||
}, |
|||
show: { |
|||
type: Boolean, |
|||
default: false |
|||
}, |
|||
popMenu: { |
|||
type: Boolean, |
|||
default: true |
|||
} |
|||
}, |
|||
data() { |
|||
return { |
|||
fabShow: false, |
|||
isShow: false, |
|||
isAndroidNvue: platform === 'android', |
|||
styles: { |
|||
color: '#3c3e49', |
|||
selectedColor: '#007AFF', |
|||
backgroundColor: '#fff', |
|||
buttonColor: '#007AFF', |
|||
iconColor: '#fff', |
|||
icon: 'plusempty' |
|||
} |
|||
} |
|||
}, |
|||
computed: { |
|||
contentWidth(e) { |
|||
return (this.content.length + 1) * 55 + 15 + 'px' |
|||
}, |
|||
contentWidthMin() { |
|||
return '55px' |
|||
}, |
|||
// 动态计算宽度 |
|||
boxWidth() { |
|||
return this.getPosition(3, 'horizontal') |
|||
}, |
|||
// 动态计算高度 |
|||
boxHeight() { |
|||
return this.getPosition(3, 'vertical') |
|||
}, |
|||
// 计算左下位置 |
|||
leftBottom() { |
|||
return this.getPosition(0, 'left', 'bottom') |
|||
}, |
|||
// 计算右下位置 |
|||
rightBottom() { |
|||
return this.getPosition(0, 'right', 'bottom') |
|||
}, |
|||
// 计算左上位置 |
|||
leftTop() { |
|||
return this.getPosition(0, 'left', 'top') |
|||
}, |
|||
rightTop() { |
|||
return this.getPosition(0, 'right', 'top') |
|||
}, |
|||
flexDirectionStart() { |
|||
return this.getPosition(1, 'vertical', 'top') |
|||
}, |
|||
flexDirectionEnd() { |
|||
return this.getPosition(1, 'vertical', 'bottom') |
|||
}, |
|||
horizontalLeft() { |
|||
return this.getPosition(2, 'horizontal', 'left') |
|||
}, |
|||
horizontalRight() { |
|||
return this.getPosition(2, 'horizontal', 'right') |
|||
}, |
|||
// 计算 nvue bottom |
|||
nvueBottom() { |
|||
const safeBottom = uni.getSystemInfoSync().windowBottom; |
|||
// #ifdef APP-NVUE |
|||
return 30 + safeBottom |
|||
// #endif |
|||
// #ifndef APP-NVUE |
|||
return 30 |
|||
// #endif |
|||
} |
|||
}, |
|||
watch: { |
|||
pattern: { |
|||
handler(val, oldVal) { |
|||
this.styles = Object.assign({}, this.styles, val) |
|||
}, |
|||
deep: true |
|||
} |
|||
}, |
|||
created() { |
|||
this.isShow = this.show |
|||
if (this.top === 0) { |
|||
this.fabShow = true |
|||
} |
|||
// 初始化样式 |
|||
this.styles = Object.assign({}, this.styles, this.pattern) |
|||
}, |
|||
methods: { |
|||
_onClick() { |
|||
this.$emit('fabClick') |
|||
if (!this.popMenu) { |
|||
return |
|||
} |
|||
this.isShow = !this.isShow |
|||
}, |
|||
open() { |
|||
this.isShow = true |
|||
}, |
|||
close() { |
|||
this.isShow = false |
|||
}, |
|||
/** |
|||
* 按钮点击事件 |
|||
*/ |
|||
_onItemClick(index, item) { |
|||
if (!this.isShow) { |
|||
return |
|||
} |
|||
this.$emit('trigger', { |
|||
index, |
|||
item |
|||
}) |
|||
}, |
|||
/** |
|||
* 获取 位置信息 |
|||
*/ |
|||
getPosition(types, paramA, paramB) { |
|||
if (types === 0) { |
|||
return this.horizontal === paramA && this.vertical === paramB |
|||
} else if (types === 1) { |
|||
return this.direction === paramA && this.vertical === paramB |
|||
} else if (types === 2) { |
|||
return this.direction === paramA && this.horizontal === paramB |
|||
} else { |
|||
return this.isShow && this.direction === paramA ? this.contentWidth : this.contentWidthMin |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" > |
|||
$uni-shadow-base:0 1px 5px 2px rgba($color: #000000, $alpha: 0.3) !default; |
|||
|
|||
.uni-fab { |
|||
position: fixed; |
|||
/* #ifndef APP-NVUE */ |
|||
display: flex; |
|||
/* #endif */ |
|||
justify-content: center; |
|||
align-items: center; |
|||
z-index: 10; |
|||
border-radius: 45px; |
|||
box-shadow: $uni-shadow-base; |
|||
} |
|||
|
|||
.uni-cursor-point { |
|||
/* #ifdef H5 */ |
|||
cursor: pointer; |
|||
/* #endif */ |
|||
} |
|||
|
|||
.uni-fab--active { |
|||
opacity: 1; |
|||
} |
|||
|
|||
.uni-fab--leftBottom { |
|||
left: 15px; |
|||
bottom: 30px; |
|||
/* #ifdef H5 */ |
|||
left: calc(15px + var(--window-left)); |
|||
bottom: calc(30px + var(--window-bottom)); |
|||
/* #endif */ |
|||
// padding: 10px; |
|||
} |
|||
|
|||
.uni-fab--leftTop { |
|||
left: 15px; |
|||
top: 30px; |
|||
/* #ifdef H5 */ |
|||
left: calc(15px + var(--window-left)); |
|||
top: calc(30px + var(--window-top)); |
|||
/* #endif */ |
|||
// padding: 10px; |
|||
} |
|||
|
|||
.uni-fab--rightBottom { |
|||
right: 15px; |
|||
bottom: 30px; |
|||
/* #ifdef H5 */ |
|||
right: calc(15px + var(--window-right)); |
|||
bottom: calc(30px + var(--window-bottom)); |
|||
/* #endif */ |
|||
// padding: 10px; |
|||
} |
|||
|
|||
.uni-fab--rightTop { |
|||
right: 15px; |
|||
top: 30px; |
|||
/* #ifdef H5 */ |
|||
right: calc(15px + var(--window-right)); |
|||
top: calc(30px + var(--window-top)); |
|||
/* #endif */ |
|||
// padding: 10px; |
|||
} |
|||
|
|||
.uni-fab__circle { |
|||
position: fixed; |
|||
/* #ifndef APP-NVUE */ |
|||
display: flex; |
|||
/* #endif */ |
|||
justify-content: center; |
|||
align-items: center; |
|||
width: 55px; |
|||
height: 55px; |
|||
background-color: #3c3e49; |
|||
border-radius: 45px; |
|||
z-index: 11; |
|||
// box-shadow: $uni-shadow-base; |
|||
} |
|||
|
|||
.uni-fab__circle--leftBottom { |
|||
left: 15px; |
|||
bottom: 30px; |
|||
/* #ifdef H5 */ |
|||
left: calc(15px + var(--window-left)); |
|||
bottom: calc(30px + var(--window-bottom)); |
|||
/* #endif */ |
|||
} |
|||
|
|||
.uni-fab__circle--leftTop { |
|||
left: 15px; |
|||
top: 30px; |
|||
/* #ifdef H5 */ |
|||
left: calc(15px + var(--window-left)); |
|||
top: calc(30px + var(--window-top)); |
|||
/* #endif */ |
|||
} |
|||
|
|||
.uni-fab__circle--rightBottom { |
|||
right: 15px; |
|||
bottom: 30px; |
|||
/* #ifdef H5 */ |
|||
right: calc(15px + var(--window-right)); |
|||
bottom: calc(30px + var(--window-bottom)); |
|||
/* #endif */ |
|||
} |
|||
|
|||
.uni-fab__circle--rightTop { |
|||
right: 15px; |
|||
top: 30px; |
|||
/* #ifdef H5 */ |
|||
right: calc(15px + var(--window-right)); |
|||
top: calc(30px + var(--window-top)); |
|||
/* #endif */ |
|||
} |
|||
|
|||
.uni-fab__circle--left { |
|||
left: 0; |
|||
} |
|||
|
|||
.uni-fab__circle--right { |
|||
right: 0; |
|||
} |
|||
|
|||
.uni-fab__circle--top { |
|||
top: 0; |
|||
} |
|||
|
|||
.uni-fab__circle--bottom { |
|||
bottom: 0; |
|||
} |
|||
|
|||
.uni-fab__plus { |
|||
font-weight: bold; |
|||
} |
|||
|
|||
// .fab-circle-v { |
|||
// position: absolute; |
|||
// width: 2px; |
|||
// height: 24px; |
|||
// left: 0; |
|||
// top: 0; |
|||
// right: 0; |
|||
// bottom: 0; |
|||
// /* #ifndef APP-NVUE */ |
|||
// margin: auto; |
|||
// /* #endif */ |
|||
// background-color: white; |
|||
// transform: rotate(0deg); |
|||
// transition: transform 0.3s; |
|||
// } |
|||
|
|||
// .fab-circle-h { |
|||
// position: absolute; |
|||
// width: 24px; |
|||
// height: 2px; |
|||
// left: 0; |
|||
// top: 0; |
|||
// right: 0; |
|||
// bottom: 0; |
|||
// /* #ifndef APP-NVUE */ |
|||
// margin: auto; |
|||
// /* #endif */ |
|||
// background-color: white; |
|||
// transform: rotate(0deg); |
|||
// transition: transform 0.3s; |
|||
// } |
|||
|
|||
.fab-circle-icon { |
|||
transform: rotate(0deg); |
|||
transition: transform 0.3s; |
|||
font-weight: 200; |
|||
} |
|||
|
|||
.uni-fab__plus--active { |
|||
transform: rotate(135deg); |
|||
} |
|||
|
|||
.uni-fab__content { |
|||
/* #ifndef APP-NVUE */ |
|||
box-sizing: border-box; |
|||
display: flex; |
|||
/* #endif */ |
|||
flex-direction: row; |
|||
border-radius: 55px; |
|||
overflow: hidden; |
|||
transition-property: width, height; |
|||
transition-duration: 0.2s; |
|||
width: 55px; |
|||
border-color: #DDDDDD; |
|||
border-width: 1rpx; |
|||
border-style: solid; |
|||
} |
|||
|
|||
.uni-fab__content--other-platform { |
|||
border-width: 0px; |
|||
box-shadow: $uni-shadow-base; |
|||
} |
|||
|
|||
.uni-fab__content--left { |
|||
justify-content: flex-start; |
|||
} |
|||
|
|||
.uni-fab__content--right { |
|||
justify-content: flex-end; |
|||
} |
|||
|
|||
.uni-fab__content--flexDirection { |
|||
flex-direction: column; |
|||
justify-content: flex-end; |
|||
} |
|||
|
|||
.uni-fab__content--flexDirectionStart { |
|||
flex-direction: column; |
|||
justify-content: flex-start; |
|||
} |
|||
|
|||
.uni-fab__content--flexDirectionEnd { |
|||
flex-direction: column; |
|||
justify-content: flex-end; |
|||
} |
|||
|
|||
.uni-fab__item { |
|||
/* #ifndef APP-NVUE */ |
|||
display: flex; |
|||
/* #endif */ |
|||
flex-direction: column; |
|||
justify-content: center; |
|||
align-items: center; |
|||
width: 55px; |
|||
height: 55px; |
|||
opacity: 0; |
|||
transition: opacity 0.2s; |
|||
} |
|||
|
|||
.uni-fab__item--active { |
|||
opacity: 1; |
|||
} |
|||
|
|||
.uni-fab__item-image { |
|||
width: 20px; |
|||
height: 20px; |
|||
margin-bottom: 4px; |
|||
} |
|||
|
|||
.uni-fab__item-text { |
|||
color: #FFFFFF; |
|||
font-size: 12px; |
|||
line-height: 12px; |
|||
margin-top: 2px; |
|||
} |
|||
|
|||
.uni-fab__item--first { |
|||
width: 55px; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,84 @@ |
|||
{ |
|||
"id": "uni-fab", |
|||
"displayName": "uni-fab 悬浮按钮", |
|||
"version": "1.2.5", |
|||
"description": "悬浮按钮 fab button ，点击可展开一个图标按钮菜单。", |
|||
"keywords": [ |
|||
"uni-ui", |
|||
"uniui", |
|||
"按钮", |
|||
"悬浮按钮", |
|||
"fab" |
|||
], |
|||
"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,9 @@ |
|||
## Fab 悬浮按钮 |
|||
> **组件名：uni-fab** |
|||
> 代码块： `uFab` |
|||
|
|||
|
|||
点击可展开一个图形按钮菜单 |
|||
|
|||
### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-fab) |
|||
#### 如使用过程中有任何问题，或者您对uni-ui有一些好的建议，欢迎加入 uni-ui 交流群：871950839 |
|||
@ -0,0 +1,89 @@ |
|||
<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} 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: Object, |
|||
default: 24 |
|||
}, |
|||
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 { |
|||
if (typeof this.size == 'string') { |
|||
return '' + this.size |
|||
} |
|||
const size = this.size as number |
|||
return this.getFontSize(size) |
|||
}, |
|||
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> |
|||
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)
|
|||
Binary file not shown.
Binary file not shown.
Loading…
Reference in new issue