yellow

0.0.6 • Public • Published

yellow - 这是一个 Vue UI 组件

介绍

在公司项目中接触到了 elementUI ,觉得 elementUI 真的极大地方便了前端画面的开发,尤其是后台管理类项目。

用得越多,就对 UI 框架的开发越感兴趣,也越发好奇 elementUI 是怎么写的。

于是就想着自己也试着来写一个简易的 UI 框架体会一下。

开始使用

安装

1. 添加 CSS 样式

使用本框架前,请在 CSS 中开启 border-box 。

* { box-sizing: border-box}
*::before {box-sizing: border-box}
*::after {box-sizing: border-box}

IE 8 及以上浏览器支持该样式;

并将默认颜色等变量也写进去。

:root {
--button-color: #6e6d7a;
--button-height: 32px;
--font-size: 14px;
--button-bg: white;
--button-active-bg: #eee;
--border-radius: 8px;
--border-color: #E7E7E9;
--border-color-hover: #666;
}

IE 15 及以上浏览器支持该样式。

2. 安装 yellow

请在使用 vue-cli 来搭建的项目中使用该 package。 并使用 yarn 来安装。

yarn add yellow --save

3. 引入

  1. 在 main.js 中全局引入
import {Button, Icon, ButtonGroup} from 'yellow'
import 'yellow/dist/index.css'

Vue.component('y-button', Button);
Vue.component('y-icon', Icon);
Vue.component('y-button-group', ButtonGroup);
  1. 在组件中引入
<script>
import {Button, Icon, ButtonGroup} from 'yellow'
import 'yellow/dist/index.css'

export default {
  components: {
    'y-button': Button,
    'y-icon': Icon,
    'y-button-group': ButtonGroup
  },
}
</script>

文档

提问

变更记录

联系方式

贡献代码

Readme

Keywords

Package Sidebar

Install

npm i yellow

Weekly Downloads

1

Version

0.0.6

License

MIT

Unpacked Size

4.45 MB

Total Files

80

Last publish

Collaborators

  • nansenho