KFlowUI - Flow UI Design based on Vue Cli

Related tags

KFlowUI
Overview

KFlowUI - Flow UI Design based on Vue Cli

Project Structure

- build # 脚手架(The scaffold)
  config.js # 组件库配置文件(Component library configuration file)
- examples
  - docs # 在线演示文档(VuePress)
  index.js # Vue Cli Lib 打包入口(Packaging entrance)
- lib # 打包ump文件(Package the UMP file)
- packages
  - common-theme # 通用主题(Common theme)
  - {themeName}-theme
    index.scss # 全局scss 由脚本生成(Global SCSS generated by the script)
    {ComponentScss}.scss
  - {ComponentName}
    - src # 组件Source(Component source)
      index.vue # 组件(Component)
    index.js # 组件入口(Component entry)
  index.js # 所有组件入口 由脚本生成(All component entries, generated by scripts)
components.json # 组件目录(Component directory)
vue.config.js # Vue cli 配置(Vue cli config)

脚本命令

npm run pub # 打包推送到npm(Pack and push to NPM)
npm run docs:dev # 开发文档模式(Run as development document mode)
npm run bin:new componentName chineseName #新建组件(Create new component)
npm run bin:rm componentName #移除组件并重新定制入口(Remove the component and re-customize the entry)
npm run bin:entry # 定制入口(Custom entry)

Flow UI Design (Vue 2.0+)

Documents

中文官方文档 (Chinese Doc)

How to use

  1. install via npm
yarn add KFlowUIdesign # recommend
npm i KFlowUIdesign
  1. import (vue entry main.js)
import Vue from "vue";
import KFlowUI from "KFlowUIdesign";
import "KFlowUIdesign/lib/index.css";

Vue.use(KFlowUI);
  1. sample example
<fv-button>Hello Vue Flow UI!fv-button>
  1. about Fabric UI

Our project have many using cases contains Microsoft's Fabric UI, such as icons and shadows, for more details you can click here to get more information.

Here is the icon using sample.

">
<i class="ms-Icon ms-Icon--AADLogo">i>

In particular, if you're using a component of Flow UI Vue Design and it contains a prop that support icon, you only need to type the icon's name in prop.

Mobile UI Components based on Vue & WeUI

Be Cool with [email protected]^2.3.0 and WeUI. Live Demo >> Sponsors 我们的产品 Requirements 暂未适配 [email protected],请注意。 [email protected]^2.3.0(for .sync modifier) [email protected]^2.0 [email protected]^7.6

Airyland 17.5k Jul 22, 2021
Flexbox based responsive fraction grid system

vue-fraction-grid Flexbox based responsive fraction grid system for Vue.js Live Demo and Full Documentation <container> <grid vertical="middle" :rwd

Bartłomiej Kozal 88 May 7, 2021
Grace - Design System For Vue Applications

Grace - Design System For Vue Applications

Trendyol Open Source 135 Jul 25, 2021
Default layout or create custom layouts for the pages of your Vue.js SPA (Multiple layouts)

vue-extend-layout A simple extend the default layout or create custom layouts for your SPA Vue.js, using dynamic import component. For vue-extend-layo

Alan Ktquez 132 May 20, 2021
UI Component Library Base on Vue.js(2.x) and Bulma

Attention I'm very sorry about the lack of concern about this library Recently. So busy in doing other things and I have no time to maintain it. I wil

Chenz 1.6k Jul 23, 2021
Vue smarter layout components. Based on css flexbox. Support responsive design, server side render. 5 KB gzipped.

vue-colrow Smarter layout components. Based on css flexbox. Support responsive design, server side render. 3 KB gzipped. Document. It also has a React

Xinxin 6 Apr 21, 2021
A pure vue responsive masonry layout without direct dom manipulation and ssr support.

vue-masonry-wall A pure vue responsive masonry implementation without direct dom manipulation, ssr friendly with lazy appending. I created this becaus

Fuxing Loh 117 Jul 22, 2021
LayoutDesigner(svg editor) 基于 vue3.0 开发的,可以自定义拖入的图形,实现拖拽绘制设备layout

LayoutDesigner(svg editor) 基于 vue3.0 开发的,可以自定义拖入的图形,实现拖拽绘制设备layout

YRK 3 May 17, 2021
A simple Vue blog template that displays posts from any WordPress REST API endpoint.

WP Vue This is just a simple Vue application (scaffolded using the Vue CLI) that pulls posts from a WordPress REST API endpoint. Clone or fork this su

Alex MacArthur 437 Jul 13, 2021
A Vue plugin to quickly generate a webapplication layout.

vue-ads-layout This is a vue component library to create a default web application layout. You can create a toolbar, footer, left and right drawers. A

Arne De Smedt 29 Nov 30, 2020
A pure vue native horizontal list implementation for mobile/touch and responsive web.

?? You might want to use Vue Horizontal instead! Vue Horizontal is another take on the horizontal layout written by me with an ultra simple implementa

Fuxing Loh 115 Jul 19, 2021
Material web components for Vue.js

If you're looking for vue-mdl, check the mdl branch. To learn about what's happening, check #139 Vue Material Components web Material Components Web f

Eduardo San Martin Morote 1.2k Jul 24, 2021
Responsive grid system based on Bootstrap for Vue

Vue Grid Responsive Responsive grid system based on Bootstrap for Vue. • • Installation NPM vue 2.0 npm i vue-grid-responsive // OR yarn add vue-grid-

André Lins 17 Jun 20, 2021
🍬 🙈 Vue.js utility component to show and hide components based on breakpoints

vue-breakpoints Vue.js utility component to show and hide components based on breakpoints ?? Demo ?? Install npm i vue-breakpoints yarn add vue-breakp

Jakub 181 Jun 26, 2021