Skip to content
master
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
css
 
 
 
 
 
 
src
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

YU.CSS.UI

纯CSS通用UI模块和组件

使用文档 | 完整示例 | 官方网站

yu.css.ui 纯CSS通用UI模块和组件 yu.css.ui 只写CSS样式和HTML示例,不包含任何JavaScript脚本,在javascript,jquery, vue, react, angular, webpack, npm 下都可以快速使用。只要添加一些简单的脚本逻辑,就可以形成完整的组件。

原则

  • 不包含任何JavaScript脚本
  • 通过className可以显示和控制组件的所有状态
  • 一个组件只有一个顶级命名空间,即yu-xxx
  • 每个组件css都可以独立拆分直接使用,不需要额外引入重置样式或者变量

v2.0.0版本修改了目录结构

  • src 是项目scss源码
  • css 是scss未压缩编译结果,用于开发测试
  • dist 是css压缩结果,用于生产
  • example 是项目示例代码

一、npm 引入 推荐

npm install --save yu.css.ui

引入所有组件样式

方式一: 在js中

//commonjs
require('yu.css.ui/dist/index.css')

// es6
import 'yu.css.ui/dist/index.css'

方式二: 在scss中

引入编译后的css文件

@import '~yu.css.ui/dist/index.css'

引入scss源码,效果和引入编译后的css文件相同 (优点:可以通过变量声明前置,覆盖默认变量)

/* 改变主题色 */
$primary: #67C23A;

@import '~yu.css.ui/src/index'

引入单个或多个组件样式

选择性引入,避免引入不使用的组件,减少css打包体积

注意:选择性引入时,请不要忘记引入字体图标

方式一: 在js中

  import 'yu.css.ui/dist/iconfont/iconfont.css'

  import 'yu.css.ui/dist/component/button.css'

  import 'yu.css.ui/dist/component/radio.css'

  // ...

方式二: 在scss中

  @import '~yu.css.ui/dist/iconfont/iconfont.css'

  @import '~yu.css.ui/dist/component/button.css'

  @import '~yu.css.ui/dist/component/radio.css'

  // ...

二、使用CDN引入

目前可以通过 unpkg.com/yu.css.ui 获取到最新版本的资源,在页面上引入 css 文件即可开始使用。

三、不引入,直接复制使用

每个组件下面都会有CSS和HTML,点击复制即可使用

按钮 复制按钮HTML

<button class="yu-button primary">按钮</button>

复制按钮CSS

css代码