基于 rider 的 UI 样式库,用于快速构建移动应用界面
Switch branches/tags
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
demo
lib
.editorconfig
.gitignore
.npmignore
History.md
README.md
package.json

README.md

rider-ui

基于 rider 的 UI 样式库,用于快速构建移动应用界面。

安装与配置

edp 中,推荐使用 edpx-mobile 来自动生成包含 rider-ui 的项目。

如需 手动安装,执行:

npm install rider-ui --save

stylus 配置引入 rider 之后使用 rider-ui 插件:

var epr = require('edp-provider-rider');
var riderUI = require('rider-ui');

function stylusConfig(style) {
    style.use(epr.plugin());
    style.use(riderUI());
}

注:请确保 edp-provider-rider 的版本与 package.json 中的配置相符。

文档

Hello World

默认主题 为例,在主样式文件中引入:

@require 'rider-ui/default'

之后会生成该主题预定好的样式,包含 样式初始化控件样式

html 中直接写预定样式:

<nav class="ui-bar" data-ui="primary header static">
    <a href="#" class="ui-btn" data-ui="primary">返回</a>
    <h1 data-ui="title">Hello World</h1>
    <a href="#" class="ui-btn" data-ui="primary">关于</a>
</nav>

结构

rider-ui 目录结构如下:

rider-ui
    core        // 核心部分,是生成 UI 的 Mixin,不会向页面输出样式
    default     // 默认主题,通过调用核心部分的 Mixin 生成样式

在真实项目中,推荐采用自定义项目主题的方式开发,default 主题即为自定义主题的示例。

API

当前版本提供了 按钮按钮组工具栏内容 四个 UI 组件。

配置与全局方法

// UI 状态的前缀
$-ui-attr ?= 'data-ui'
// 使用图标字体时,定义的图标前缀
$-ui-icon-prefix ?= 'icon-'

在引入 rider-ui 之前定义配置可生效,比如:

$-ui-attr = 'data-rider'
@require 'rider-ui/default'

// 配置后:<a href="#" class="ui-btn" data-rider="active">Hi</a>
+ui-set-type($ui-type)

类型:block mixin

增加指定类型的按钮样式。

  • $ui-type {string} 样式类型

按钮(btn)

class: ui-btn

一个生成按钮样式的示例:

// 引入 core
@require 'rider-ui/core/btn'

// $ui-size 等参数本例中省略,可参考 default 主题

.ui-btn
    // 默认尺寸与样式
    ui-btn-base()
    ui-btn-size($ui-size)
    ui-btn-style($ui-colors)

    // 定义一个类型为 clear 的样式
    +ui-btn-set-type('clear')
        ui-btn-style($ui-colors-clear)

在 html 中这样使用样式:

<a href="#" class="ui-btn">默认样式</a>
<a href="#" class="ui-btn" data-ui="clear">Clear样式</a>
+ui-btn-set-active()

类型:block mixin

增加 active 状态样式。

+ui-btn-set-disabled()

类型:block mixin

增加 disabled 状态样式。

ui-btn-size($ui-size)

类型:mixin

设置按钮尺寸。

  • $ui-size {object}
    • .height {unit} 高度
    • .padding {unit} 内边距
    • .font-size {unit} 文字大小
    • .border-width {unit} 边框尺寸
ui-btn-icon($ui-size)

类型:mixin

设置按钮中的图标尺寸,参数参考 ui-btn-size()

ui-btn-style($ui-colors, $ui-active-colors = null)

类型:mixin

设置按钮颜色相关样式。

  • $ui-colors {object}
    • .bg {rgba} 背景颜色
    • .border {rgba} 边框颜色
    • .text {rgba} 文字颜色
ui-btn-base()

类型:mixin

设置按钮基础样式。

按钮组(btns)

class: ui-btns

ui-btns-base()

类型:mixin

设置按钮组基础样式。

工具栏(bar)

class: ui-bar

ui-bar-style($ui-colors)

类型:mixin

设置工具栏颜色相关样式。

  • $ui-colors {object}
    • .bg {rgba} 背景颜色
    • .border {rgba} 边框颜色
    • .text {rgba} 文字颜色
ui-bar-base($ui-base, $ui-default-colors, $ui-btn-size)

类型:mixin

设置工具栏基础样式。

  • $ui-base {object}
    • .height {unit} 高度
    • .padding {unit} 内边距
    • .font-size {unit} 文字大小
    • .border-width {unit} 边框尺寸
    • .z-index {unit} 工具栏的层级
    • .title-z-index {unit} 标题的层级
    • .btn-z-index {unit} 按钮的层级
  • $ui-default-colors {object} 默认颜色方案,参考 ui-bar-style() 文档
  • $ui-btn-size {object} 工具栏按钮尺寸,参考 ui-btn-style() 文档

内容(content)

class: ui-content

ui-content($ui-font-size, $ui-line-height, $ui-heading-ratio)

类型:mixin

设置排版样式,行距采用 垂直的旋律 排版。

  • $ui-font-size {unit} 字体大小
  • $ui-line-height {unit} 行高
  • $ui-heading-ratio {array} 长度为6的数组,值为 h1h6 字体相对普通文本的倍数