View ui-input-group
<div class="form-group"> | |
<div class="ui-input-group"> | |
<input type="text" class="form-control"> | |
<div class="ui-input-group__btn ui-input-group__btn--right"> | |
<div class="text-color--gray ui-input-group__btn__hight">кг</div> | |
</div> | |
</div> | |
</div> |
View webpack.config.js
var webpack = require('webpack'), | |
path = require('path'), | |
progressBarPlugin = require('progress-bar-webpack-plugin'), | |
ExtractTextPlugin = require('extract-text-webpack-plugin'); | |
const FgYellow = '\x1b[33m' | |
console.log(FgYellow, 'Run build uiKit...') | |
var extractCSS = new ExtractTextPlugin('/css/uiKit.css'); |
View dropdown.js
<template> | |
<div :class="{ 'ui-dropdown': true, 'ui-dropdown--open': opened}"> | |
<div class="ui-dropdown__content"> | |
<div style="cursor: pointer;z-index: 2;position: relative;" @click="open"> | |
<slot></slot> | |
</div> | |
<div :class="{ 'ui-dropdown__overlay': true, 'ui-dropdown__overlay--list': true, 'ui-animation-zoom enter': opened }"> | |
<slot name="list"></slot> | |
</div> | |
</div> |
View Route.js
import Vue from 'vue' | |
import Router from 'vue-router' | |
Vue.use(Router) | |
export default new Router({ | |
mode: 'hash', | |
routes: [{ | |
name: 'home', | |
path: '', |
View Enter Animate
.enter { | |
transition: all 0.3s cubic-bezier(0.35, 0, 0.25, 1); | |
animation-duration: 0.3s; | |
animation-name: mdp-animation-bounce; | |
} |
View ui-toggleBox
<div class="ui-toggleBox"> | |
<input id="ui-toggleBox-1" type="checkbox" class="ui-toggleBox__field"> | |
<label for="ui-toggleBox-1" class="ui-toggleBox__label">Требования к разгрузке</label> | |
</div> |
View ui-kit@1.0
<div class="container"> | |
<div class="row"> | |
<div class="col-md-12"> | |
<div class="form-group"> | |
</div> | |
</div> | |
<div class="col-md-6"> |
View ui-tabs
<ui-tabs align="top" :active="$route.name" :percent="50" :indicator-height="6" :indicator-border="false" class="b-platform-head-tabs" @change="activeTab"> | |
<ui-tab v-for="(tab, index) in getTabs" | |
:name="tab.name" | |
:disabled="getCountedSteps() < index" | |
v-show="tabPage == tab.page"> | |
<router-link :to="{ name: getCountedSteps() < index ? false : tab.name}"> | |
{{ tab.title }} | |
</router-link> | |
</ui-tab> | |
<div slot="contents"> |
View tp-head-step
<template> | |
<router-link tag="div" :to="link" class="tp-head-step"> | |
<ui-progress-bar :animate="{ progress: progress }" :size="size" :style="{margin: '0 auto 20px'}"> | |
<div class="tp-head-step__info"> | |
<span>{{ currentStep }}/{{ maxSteps }}</span> | |
</div> | |
</ui-progress-bar> | |
<div :class="['tp-head-step__left-link', {'tp-head-step__left-link--active': isActive, 'tp-head-step__left-link--disabled': !isActive ? isDisabled : false }]">Продукт<br> и поставка</div> | |
</router-link> | |
</template> |
View ui-comment.vue
<template> | |
<ui-label :filled="filled" :label-show="true"> | |
<template slot="label"><slot></slot></template> | |
<textarea class="form-control ui-comment-field" v-model="message"></textarea> | |
</ui-label> | |
</template> | |
<script> | |
import uiLabel from './ui-label.vue'; | |
export default { |
OlderNewer