Hilink UI component library

Preface


With the rise of intelligent IOT , The connection of things has become a general trend , Each major manufacturer is launching its own Internet of things platform, creating an Internet of things ecosystem and seizing the market , This framework is based on Huawei hilink platform UI A set of front ends developed according to design standards UI frame , Although I say hilink The platform has its own drag and drop development tools , But it is difficult to meet the customization needs of various customers , Using this framework, you can customize the development based on customer needs hilink application .

Description document address

demo

gitee

Development of guidelines


install


npm install hilink-ui frame

npm install hi-link-ui
 Copy code 

introduce hilink-ui


stay main.js In the following configuration

import Vue from 'vue'
import HiLinkUI from 'hi-link-ui'
import 'hi-link-ui/packages/style/index.scss'
import App from './App.vue'
Vue.use(HiLinkUI);
Vue.config.productionTip = false
new Vue({
render: h => h(App),
}).$mount('#app')
 Copy code 

Topic switching


hilink The platform supports theme switching according to whether the dark mode of the mobile phone is enabled , Call... At the switch this.$switchTheme() function

this.$switchTheme('dark');// Switch to dark mode 
this.$switchTheme('light');// Switch to normal mode 
 Copy code 

color


Status text color


Normal mode status text color

 Text color in normal mode

Dark mode status text color

 Status text color in dark mode

The framework has made theme switching adaptation , Directly use the following css To the corresponding text

.hi-color-1
.hi-color-2
.hi-color-3
.hi-color-4
.hi-color-5
.hi-color-6
.hi-color-7
.hi-color-8
.hi-color-9
.hi-color-10
.hi-color-11
 Copy code 

text color


Normal mode text color

 Normal mode text color

Color mode text color

 Dark mode text color

The framework has made theme switching adaptation , Directly use the following css To the corresponding text

/* ================== text color ==================== */
/* First level text color */
.text-color-one {
@include text_color_one($text-color-one-light);
}
/* Secondary text color */
.text-color-two {
@include text_color_two($text-color-two-light);
}
/* Level 3 text color */
.text-color-three {
@include text_color_three($text-color-three-light);
}
/* Pop up text color */
.text-color-dialog{
@include text_color_one($text-color-one-light);
}
/* ================== Control common color ==================== */
/* Control highlight color 、 Highlight state click effect color */
.widget-bg-highlight,.widget-bg-highlight-click{
@include widget_bg_highlight($widget-bg-highlight-light)
}
/* Control background color */
.widget-bg{
@include widget_bg($widget-bg-light);
}
/* ================== Button color ==================== */
.hi-btn-color-red{
color: #e64548;
}
.hi-btn-color-blue{
color: #3f97e9;
}
 Copy code 

Components


layout Layout


This component uses flex Layout

Basic layout


Foundation fence layout

 Basic layout

span Is the proportion of columns

<hi-row >
<hi-col :span="1" >
<hi-card style="background-color: #e40079;"></hi-card>
</hi-col>
<hi-col :span="1">
<hi-card style="background-color: #262626;"></hi-card>
</hi-col>
<hi-col :span="1">
<hi-card style="background-color: #e40079;"></hi-card>
</hi-col>
</hi-row>
 Copy code 

Column spacing


There is a gap between the columns

 Column spacing

padding Is the spacing between fences , The type could be Number and String,Number The unit of time is px,String It depends on the unit of the incoming data

<hi-row :padding="8">
<hi-col :span="1">
<hi-card></hi-card>
</hi-col>
<hi-col :span="1">
<hi-card></hi-card>
</hi-col>
</hi-row>
<hi-row :padding="8">
<hi-col :span="1">
<hi-card ></hi-card>
</hi-col>
<hi-col :span="1">
<hi-card></hi-card>
</hi-col>
</hi-row>
 Copy code 

Mixed mode


Fields of different grid layouts can be grouped together

 Mixed mode

<hi-row :padding="8">
<hi-col :span="1"><hi-card></hi-card></hi-col>
<hi-col :span="1"><hi-card></hi-card></hi-col>
</hi-row>
<hi-row :padding="8">
<hi-col :span="1"><hi-card ></hi-card></hi-col>
<hi-col :span="1"><hi-card></hi-card></hi-col>
</hi-row>
<hi-row :padding="8">
<hi-col :span="1"><hi-card ></hi-card></hi-col>
<hi-col :span="1"><hi-card></hi-card></hi-col>
<hi-col :span="1"><hi-card></hi-card></hi-col>
</hi-row>
 Copy code 

Row Attributes


Parameters explain type Optional value The default value is
padding Set internal fence spacing [String,Number] -- 0
tag Custom element tags String -- div
is-vertical-line Whether to display fence border Boolean -- false

Col Attributes


Parameters explain type Optional value The default value is
span stay row Proportion weight in Number -- 1
tag Custom element tags String -- div

Card card


Card style control

Usage mode


The card control is automatically rounded , Meet the requirements of design documents , And can pass through padding Custom inner margin , adopt height Definition height

 Card usage

<hi-card padding="1rem" height="auto">
<span> Content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content </span>
</hi-card>
<hi-card padding="1rem" height="4rem">
<span> Content content content content content content content content content content </span>
</hi-card>
 Copy code 

Card Attributes


Parameters explain type Optional value The default value is
padding Set the inside margin of the card [Number,String] -- 0
height Set the card height [Number,String] -- 4rem

Dialog Popup


Usage mode


Dialog Pop up a custom pop-up box

 Custom pop ups

<template>
<hi-card >
<hi-row class="item2" :padding="0">
<hi-col :span="1">
<div class="item1-div">
<div class="text-color-one model-title-main-size" @click="showDialog = true">
Tips
</div>
</div>
</hi-col>
<hi-col :span="1">
<img src="/img/appoint_on.png" class="item-logo">
</hi-col>
</hi-row>
</hi-card>
<hi-dialog
:visible="showDialog"
:bottom="16"
title=" reminder " @openDialog="openDialog">
<div slot="dialog-body">
After the function is turned on , The purifier will also detect when the power supply is turned off PM2.5 value , The detection process will be accompanied by a slight wind
</div>
<div slot="dialog-foot">
<hi-row is-vertical-line :padding="0">
<hi-col :span="1" class="hi-btn-color-blue">
<span @click="showDialog = false"> Cancel </span>
</hi-col>
<hi-col :span="1" class="hi-btn-color-blue">
Confirm start
</hi-col>
</hi-row>
</div>
</hi-dialog>
</template>
<script>
export default {
data(){
showDialog:false
}
}
</script>
 Copy code 

Dialog Attributes


Parameters explain type Optional value The default value is
title title String -- ''
visible Whether or not shown Boolean -- false
bottom Distance from the bottom (px) Number -- null
top Distance from the top (px) Number -- null

Dropdown The drop-down menu


Usage mode


 How to use the drop-down menu

<template>
<hi-card>
<hi-dropdown :list="dropdownList" v-model="id">
<span slot="content">
<hi-row class="item2" :padding="0">
<hi-col :span="1">
<div class="item2-div">
<div class="text-color-one model-title-main-size"> The wind speed </div>
<div class="text-color-two model-title-subtitle-size">{{getName(this.id)}}</div>
</div>
</hi-col>
<hi-col :span="1">
<img src="/img/appoint_on.png" class="item-logo">
</hi-col>
</hi-row>
</span>
</hi-dropdown>
</hi-card>
</template>
<script>
export default {
data(){
return{
id:1,
dropdownList:[
{
id:0,
name:' The first one is '
},
{
id:1,
name:' The second item '
},
{
id:2,
name:' The third one '
},
{
id:3,
name:' Item four '
},
{
id:4,
name:' Item 5 '
},
{
id:5,
name:' Item 6 '
}
]
}
},
methods:{
getName(id){
for (let i = 0; i < this.dropdownList.length; i++) {
if (id == this.dropdownList[i].id){return this.dropdownList[i].name}
}
}
}
}
</script>
 Copy code 

Dropdown Attributes


Parameters explain type Optional value The default value is
v-model Binding value Boolean / String / Number -- --
list Selection list Array -- []

Header Head bar


Usage mode


 How to use the header bar

<template>
<hi-header back more :style="{marginTop:statusBarHeight+'px'} " @toBack="toBack" @toMore="toMore">
<span slot="title"> Siemens test box </span>
</hi-header>
</template>
<script>
export default {
data(){
return{
statusBarHeight:0
}
},
mounted(){
if (window.hilink){
window.getStatusBarHeight = res => {
console.log(res)
let data = JSON.parse(res);
this.statusBarHeight = data.statusBarHeight;
}
window.hilink.getStatusBarHeight('getStatusBarHeight');
window.hilink.setTitleVisible(false);
}
},
methods:{
toBack(){
console.log('toBack')
},
toMore(){
console.log('toMore')
}
}
}
</script>
 Copy code 

Header Attributes


Parameters explain type Optional value The default value is
back Whether to display the return button Boolean -- true
more Whether to display more buttons Boolean -- true

Header Events


Event name explain Callback Arguments
toBack Click the back button to listen --
toMore Click More button to listen --

Loading Load box


Usage mode


 How to use the load box

call load.close() Method can close the load box

export default {
mounted(){
let load = this.$loading({
msg:' Loading ...'
})
setTimeout(()=>{
load.close();
},1000)
}
}
 Copy code 

Loading Options


Parameters explain type Optional value The default value is
msg Load box prompt content String -- ''

MessageBox Message box


Confirm Confirmation box


 Confirmation box

export default {
mounted(){
this.$messageBox.confirm({
title:' Power prompt ',
msg:" Low power , In order not to affect the use , Please charge the equipment in time !",
confirmText:" Charge immediately ",
confirmColor:"red"
}).then((res)=>{
console.log(" Click on the confirmation ");
},(err)=>{
console.log(" Click Cancel ");
})
}
}
 Copy code 

Confirm Options


Parameters explain type Optional value The default value is
title Confirmation box title String -- ''
msg Confirm the contents of the box String -- ''
confirmText Confirm button text String -- confirm
cancelText Cancel button text String -- Cancel
confirmColor Confirm the text color of the button String -- ''
cancelColor Cancel button text color String -- ''

TimePicker Date selection pop-up box


Usage mode


 Date selection pop-up box

<template>
<div>
<hi-card >
<hi-row class="item2" :padding="0">
<hi-col :span="1">
<div class="item1-div">
<div class="text-color-one model-title-main-size" @click="showTimeDialog = true">{{ time?time:' Time ' }}</div>
</div>
</hi-col>
<hi-col :span="1">
<img src="/img/appoint_on.png" class="item-logo">
</hi-col>
</hi-row>
</hi-card>
<hi-time-picker :visible="showTimeDialog" title=" Setup time " @confirm="timeConfirm" v-model="time">
</hi-time-picker>
</div>
</template>
<script>
export default {
data(){
return{
time:'03:30',
showTimeDialog:false
}
},
methods:{
timeConfirm(type,val){
this.showTimeDialog = false
}
}
}
</script>
 Copy code 

TimePicker Attributes


Parameters explain type Optional value The default value is
title Date selection pop-up title String -- ''
visible Date selection pop-up switch Boolean -- false
v-model Binding value Boolean / String / Number -- --

TimePicker Events


Event name explain Callback Arguments
confirm Get the pop-up button and click listen type:'success' Success button ,'confirm' Cancel button ;val: Return value

Product Product display


Usage mode

 Product display

<template>
<hi-product
class="logo"
:bigUrl="'/img/ic_public_default.png'"
:miniUrl="'/img/logo-supor.png'"></hi-product>
</template>
 Copy code 

Product Attributes


Parameters explain type Optional value The default value is
bigUrl Product photo address String -- ''
miniUrl Brand image address String -- ''
black Whether the picture is dark Boolean -- false

Progress slider


Usage mode


 slider

<template>
<hi-card>
<hi-row>
<hi-col :span="1">
<div class="item3-div">
<div class="text-color-one model-title-main-size"> brightness </div>
<div class="text-color-two model-title-subtitle-size" style="margin-top: 0.125rem">{{progressVal*10}}%</div>
</div>
</hi-col>
<hi-col :span="4">
<div style="padding-right: 1rem;">
<hi-progress class="item3-rang" :min="0" :max="10" v-model="progressVal"></hi-progress>
</div>
</hi-col>
</hi-row>
</hi-card>
</template>
<script>
export default {
data(){
return{
progressVal:3
}
}
}
</script>
 Copy code 

Progress Attributes


Parameters explain type Optional value The default value is
v-model Binding value Boolean / String / Number -- --
min minimum value Number -- 0
max Maximum Number -- 0

Swipe Wheel planting


Usage mode


 Wheel planting

<template>
<hi-card :height="95">
<hi-swipe :height="70">
<div slot="swipe-item">
<div class="swipe-item" v-for="(item,index) in 3" :key="index">
<hi-row
:padding="0"
is-vertical-line
style="margin-top: 1rem;">
<hi-col :span="1" v-for="(item1,index1) in 3" :key="index1">
<div class="model-content-title-size text-color-one"> title </div>
<div class="model-title-subtitle-size text-color-two"> Subtitle </div>
</hi-col>
</hi-row>
</div>
</div>
</hi-swipe>
</hi-card>
</template>
 Copy code 

Swipe Attributes


Parameters explain type Optional value The default value is
height Control height (px) Number -- 200

Switch switch


Usage mode


 switch

<template>
<hi-card>
<hi-row>
<hi-col :span="1" style="margin-top: 1.25rem;margin-left: 1rem;">
<hi-switch v-model="switchState" @change="switchChange"></hi-switch>
</hi-col>
<hi-col :span="1" style="margin-top: 1.25rem;margin-right: 1rem;">
<hi-switch
v-model="switchState1"
no-color="red"></hi-switch>
</hi-col>
</hi-row>
</hi-card>
</template>
<script>
export default {
data(){
return{
switchState:false,
switchState1:false,
}
},
methods:{
switchChange(val){
console.log(val)
}
}
}
</script>
 Copy code 

Switch Attributes


Parameters explain type Optional value The default value is
no-color Open status background color String -- Follow the system
off-color Off state background color String -- Follow the system
v-model Binding value Boolean / String / Number -- --

Switch Events


Event name explain Callback Arguments
change Monitor the switching state val: Switch state

Toast Prompt box


Warning tips


 Warning tips

export default {
mounted(){
this.$toast({
msg:' abnormal '
})
}
}
 Copy code 

Toast Options


Parameters explain type Optional value The default value is
msg Prompt content String -- --
Please bring the original link to reprint ,thank
Similar articles

2021-06-05

2021-06-06

2021-06-06

2021-06-10

2021-06-17

2021-07-19

2021-07-30