Skip to content

Instantly share code, notes, and snippets.

Avatar
🎯
Focusing

Vladislav Kaufman faforty

🎯
Focusing
  • Accessible World Inc.
  • USA
View GitHub Profile
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 {