• 快速入门
  • 字体图标
  • 自定义主题
  • 过渡动画说明
  • Github
  • 基础
  • Button 按钮
  • Option 选项
  • CascaderOption 级联选项
  • DatePickerOption 日期选项
  • 表单
  • Radio 单选框
  • Checkbox 多选框
  • Input 输入框
  • Counter 计数器
  • Select 选择器
  • Cascader 级联选择器
  • Switch 开关
  • Slider 滑块
  • DatePicker 日期选择器
  • FileList 上传文件列表
  • Rate 评分
  • Field 表单字段
  • 数据
  • Table 表格
  • Tag 标签
  • Progress 进度条
  • Pagination 分页
  • Badge 标记
  • 提示
  • Alert 警告
  • Loading 加载
  • Message 消息提示
  • Notification 通知
  • Dialog 对话框
  • Tooltip 文字提示
  • 导航
  • Tabs 标签菜单
  • Breadcrumb 面包屑
  • steps 步骤条
  • Collapse 折叠面板

安装

yu.css.ui 纯CSS通用UI模块和组件

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

原则

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

一、npm 引入
推荐

引入所有组件样式

方式一: 在js中

方式二: 在scss中

引入编译后的css文件

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

引入单个或多个组件样式

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

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

方式一: 在js中

方式二: 在scss中

二、使用CDN引入

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

三、下载项目并本地引入

项目地址 点击

v1.1.6 直接下载地址 点击

引入方式基本同上面的npm,需要注意的依然是字体图标iconfont的引用路径

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

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

复制按钮HTML

查看代码 复制

复制按钮CSS

查看代码 复制

快速上手:Hello World

最终结果