{"id":29926566,"url":"https://github.com/ecomfe/rider-ui","last_synced_at":"2025-08-02T12:42:15.084Z","repository":{"id":14526812,"uuid":"17241178","full_name":"ecomfe/rider-ui","owner":"ecomfe","description":"基于 rider 的 UI 样式库，用于快速构建移动应用界面","archived":false,"fork":false,"pushed_at":"2014-06-27T09:15:53.000Z","size":388,"stargazers_count":9,"open_issues_count":0,"forks_count":1,"subscribers_count":6,"default_branch":"master","last_synced_at":"2025-07-25T21:07:55.489Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ecomfe.png","metadata":{"files":{"readme":"README.md","changelog":"History.md","contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2014-02-27T07:56:22.000Z","updated_at":"2021-07-20T07:27:23.000Z","dependencies_parsed_at":"2022-09-03T19:01:34.136Z","dependency_job_id":null,"html_url":"https://github.com/ecomfe/rider-ui","commit_stats":null,"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"purl":"pkg:github/ecomfe/rider-ui","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ecomfe%2Frider-ui","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ecomfe%2Frider-ui/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ecomfe%2Frider-ui/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ecomfe%2Frider-ui/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ecomfe","download_url":"https://codeload.github.com/ecomfe/rider-ui/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ecomfe%2Frider-ui/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":268392118,"owners_count":24243297,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-08-02T02:00:12.353Z","response_time":74,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-08-02T12:42:01.754Z","updated_at":"2025-08-02T12:42:15.030Z","avatar_url":"https://github.com/ecomfe.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"rider-ui\n===\n\n基于 [`rider`](https://github.com/ecomfe/rider) 的 UI 样式库，用于快速构建移动应用界面。\n\n## 安装与配置\n\n在 [`edp`](https://github.com/ecomfe/edp) 中，推荐使用 [`edpx-mobile`](https://github.com/ecomfe/edpx-mobile) 来自动生成包含 `rider-ui` 的项目。\n\n如需 **手动安装**，执行：\n\n    npm install rider-ui --save\n\n在 `stylus` 配置引入 `rider` 之后使用 `rider-ui` 插件：\n\n```javascript\nvar epr = require('edp-provider-rider');\nvar riderUI = require('rider-ui');\n\nfunction stylusConfig(style) {\n    style.use(epr.plugin());\n    style.use(riderUI());\n}\n```\n\n*注：请确保 edp-provider-rider 的版本与 package.json 中的配置相符。*\n\n## 文档\n\n### Hello World\n\n以 `默认主题` 为例，在主样式文件中引入：\n\n```styl\n@require 'rider-ui/default'\n```\n\n之后会生成该主题预定好的样式，包含 *样式初始化* 与 *控件样式*。\n\n在 `html` 中直接写预定样式：\n\n```html\n\u003cnav class=\"ui-bar\" data-ui=\"primary header static\"\u003e\n    \u003ca href=\"#\" class=\"ui-btn\" data-ui=\"primary\"\u003e返回\u003c/a\u003e\n    \u003ch1 data-ui=\"title\"\u003eHello World\u003c/h1\u003e\n    \u003ca href=\"#\" class=\"ui-btn\" data-ui=\"primary\"\u003e关于\u003c/a\u003e\n\u003c/nav\u003e\n```\n\n### 结构\n\n`rider-ui` 目录结构如下：\n\n    rider-ui\n        core        // 核心部分，是生成 UI 的 Mixin，不会向页面输出样式\n        default     // 默认主题，通过调用核心部分的 Mixin 生成样式\n\n在真实项目中，推荐采用自定义项目主题的方式开发，`default` 主题即为自定义主题的示例。\n\n### API\n\n当前版本提供了 **按钮**、**按钮组**、**工具栏**、**内容** 四个 UI 组件。\n\n#### 配置与全局方法\n\n```styl\n// UI 状态的前缀\n$-ui-attr ?= 'data-ui'\n// 使用图标字体时，定义的图标前缀\n$-ui-icon-prefix ?= 'icon-'\n```\n\n在引入 rider-ui 之前定义配置可生效，比如：\n\n```\n$-ui-attr = 'data-rider'\n@require 'rider-ui/default'\n\n// 配置后：\u003ca href=\"#\" class=\"ui-btn\" data-rider=\"active\"\u003eHi\u003c/a\u003e\n```\n\n##### +ui-set-type($ui-type)\n\n*类型：block mixin*\n\n增加指定类型的按钮样式。\n\n+ $ui-type `{string}` 样式类型\n\n#### 按钮(btn)\n\nclass: `ui-btn`\n\n一个生成按钮样式的示例：\n\n```styl\n// 引入 core\n@require 'rider-ui/core/btn'\n\n// $ui-size 等参数本例中省略，可参考 default 主题\n\n.ui-btn\n    // 默认尺寸与样式\n    ui-btn-base()\n    ui-btn-size($ui-size)\n    ui-btn-style($ui-colors)\n\n    // 定义一个类型为 clear 的样式\n    +ui-btn-set-type('clear')\n        ui-btn-style($ui-colors-clear)\n```\n\n在 html 中这样使用样式：\n\n```html\n\u003ca href=\"#\" class=\"ui-btn\"\u003e默认样式\u003c/a\u003e\n\u003ca href=\"#\" class=\"ui-btn\" data-ui=\"clear\"\u003eClear样式\u003c/a\u003e\n```\n\n##### +ui-btn-set-active()\n\n*类型：block mixin*\n\n增加 `active` 状态样式。\n\n##### +ui-btn-set-disabled()\n\n*类型：block mixin*\n\n增加 `disabled` 状态样式。\n\n##### ui-btn-size($ui-size)\n\n*类型：mixin*\n\n设置按钮尺寸。\n\n+ $ui-size `{object}`\n    + .height `{unit}` 高度\n    + .padding `{unit}` 内边距\n    + .font-size `{unit}` 文字大小\n    + .border-width `{unit}` 边框尺寸\n\n##### ui-btn-icon($ui-size)\n\n*类型：mixin*\n\n设置按钮中的图标尺寸，参数参考 `ui-btn-size()`。\n\n##### ui-btn-style($ui-colors, $ui-active-colors = null)\n\n*类型：mixin*\n\n设置按钮颜色相关样式。\n\n+ $ui-colors `{object}`\n    + .bg `{rgba}` 背景颜色\n    + .border `{rgba}` 边框颜色\n    + .text `{rgba}` 文字颜色\n\n##### ui-btn-base()\n\n*类型：mixin*\n\n设置按钮基础样式。\n\n#### 按钮组(btns)\n\nclass: `ui-btns`\n\n##### ui-btns-base()\n\n*类型：mixin*\n\n设置按钮组基础样式。\n\n#### 工具栏(bar)\n\nclass: `ui-bar`\n\n##### ui-bar-style($ui-colors)\n\n*类型：mixin*\n\n设置工具栏颜色相关样式。\n\n+ $ui-colors `{object}`\n    + .bg `{rgba}` 背景颜色\n    + .border `{rgba}` 边框颜色\n    + .text `{rgba}` 文字颜色\n\n##### ui-bar-base($ui-base, $ui-default-colors, $ui-btn-size)\n\n*类型：mixin*\n\n设置工具栏基础样式。\n\n+ $ui-base `{object}`\n    + .height `{unit}` 高度\n    + .padding `{unit}` 内边距\n    + .font-size `{unit}` 文字大小\n    + .border-width `{unit}` 边框尺寸\n    + .z-index `{unit}` 工具栏的层级\n    + .title-z-index `{unit}` 标题的层级\n    + .btn-z-index `{unit}` 按钮的层级\n+ $ui-default-colors `{object}` 默认颜色方案，参考 `ui-bar-style()` 文档\n+ $ui-btn-size `{object}` 工具栏按钮尺寸，参考 `ui-btn-style()` 文档\n\n#### 内容(content)\n\nclass: `ui-content`\n\n##### ui-content($ui-font-size, $ui-line-height, $ui-heading-ratio)\n\n*类型：mixin*\n\n设置排版样式，行距采用 **垂直的旋律** 排版。\n\n+ $ui-font-size `{unit}` 字体大小\n+ $ui-line-height `{unit}` 行高\n+ $ui-heading-ratio `{array}` 长度为6的数组，值为 `h1` 到 `h6` 字体相对普通文本的倍数\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fecomfe%2Frider-ui","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fecomfe%2Frider-ui","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fecomfe%2Frider-ui/lists"}