Skip to content

Latest commit

 

History

History
176 lines (144 loc) · 21.5 KB

README.zh.md

File metadata and controls

176 lines (144 loc) · 21.5 KB

Jigsaw-七巧板

  • 桌面版 @rdkmaster/jigsaw              npm version Jigsaw
  • 移动版 @rdkmaster/jigsaw-mobile npm version Build Status
  • 图标库 @rdkmaster/icon-font         npm version 图标数
  • 在线IDE - 在线一键直接修改Jigsaw  Gitpod Ready-to-Code

Jigsaw的优势

Jigsaw是一套完整强大的Web组件集，当前的版本里包含了56个组件、7个容器、7个服务、9个指令，基本上覆盖了Web应用的方方面面。简单的说，其他组件集有的，Jigsaw都有，而且功能更强大性能更好。因此完全没有必要担心Jigsaw的功能缺失的问题。

Jigsaw拥有一个其他组件集所没有的能力：Jigsaw的应用一次开发就能同时支持多种Ux规范。

这是业界首创！点击这里了解更多。

可用清单

组件 / Components

# 名称 简述 链接
1 Alert 警示框 一个简单的对话框，通常用于告诉用户一些重要的东西，它还可以收集用户的选择。 Demo
2 Alphabetical Index 字母索引列表 一个可以将备选项按照字母进行索引的列表。 Demo
3 Alphabetical Index Select 字母索引下拉列表 一个可以将备选项按照字母进行索引的下拉列表。 Demo
4 Auto Input 提示输入框 一个全功能 Input 组件，附带一个提示可选值的下拉列表。 Demo
5 Breadcrumb 面包屑 一个轻量级导航器，可在用户浏览时自动跟踪。 Demo
6 Button 按钮 一个包含多种状态的按钮。 Demo
7 Button Bar 按钮栏 一个按钮栏，支持选择状态，单个或多个选择，它可以用作表单控件或导航器。 Demo
8 Cascade 级联选择 一个用于收集或者展示具有从属关系的数据的表单控件。 Demo
9 ChartIcon 图形化图标 一个用于将图标尺寸的小区域渲染成图形的情形，支持饼、线、柱子控件。 Demo
10 Checkbox 复选框 一个用于收集多项选择的表单控件。 Demo
11 Color Select 颜色选择器 一个提供了多种方法挑选颜色的表单控件。 Demo
12 Date Picker 日期选择 一个用于收集日期的表单控件。 Demo
13 Date Time (Single) 日期时间选择 一个用于收集日期时间的表单控件。 Demo
14 Date Time (Select) 日期时间选择 一个用于收集日期时间的表单控件，它以下拉的方式提供选择。 Demo
15 Date Time (Range) 日期时间范围 一个用于收集日期开始和结束日期时间的表单控件。 Demo
16 Date Time (Select) 日期时间范围 一个用于收集日期开始和结束日期时间的表单控件，它以下拉的方式提供选择。 Demo
17 Fish Bone 鱼骨图 鱼骨图通常用于以鱼骨的方式呈现具有从属关系的一些数据。 Demo
18 Graph 图形 以图形方式呈现任何数据，包括条形图，折线图，饼图，仪表等任何图形，基于 echarts 实现。 Demo
19 Header 标题 一个简单的组件，用于提示界面上某个区域的主题。 Demo
20 Icon 图标 一个字体图标，可作为链接按钮来用，支持Font-aweasome和Jigsaw内部图标库。 Demo
21 Input (Normal) 输入框 一个用于收集单行文本信息的表单控件。 Demo
22 Input (Search) 搜索框 一个用于按照文本模糊匹配的搜索框。 Demo
23 List Lite 简单列表 一个用于将一组数据以文本列表方式呈现的控件，支持单选和多选，支持主标题和副标题，支持图标。 Demo
24 List 列表 一个增强版的 List Lite 控件，支持以任何形式呈现一组数据。 Demo
25 Loading 加载中 显示一段简单的动画以缓解用户在等执行某些操作期间的焦虑感。 Demo
26 Menu 菜单 一个多级菜单控件，常常用于功能导航。 Demo
27 Notification 通知提醒框 在UI的角落里弹出一些不重要的消息，或收集一些不重要的用户选择。 Demo
28 Numeric Input 数字输入框 一个用于收集数字的表单控件，支持整数和浮点数。 Demo
29 Pagination 分页 一个用于将大量数据分成多个页面显示的控件，不仅可以与表格组件配合，还可以实现对任意数据的分页操作。 Demo
30 Progress Bar 进度条 一个水平进度条。 Demo
31 Progress Circle 圆形进度条 一个圆形进度条。 Demo
32 Progress Status 流程状态 一个流程状态组件，可用于显示流程里的各种状态。 Demo
33 Radio 单选框 一个用于收集单个选项的表单控件。 Demo
34 Rate 打分 一个用于打分的表单控件。 Demo
35 Scrollbar 滚动条 一个用于任意容器的自定义滚动条，基于 perfect scrollbar。 Demo
36 Select (Normal) 下拉选择 一个用于通过下拉列表来收集选项的表单控件。 Demo
37 Select (Group) 下拉分组选择 一个用于通过下拉列表来收集选项的表单控件，支持选项分组，常用于选项较复杂的场合。 Demo
38 Select (Collapse) 下拉折叠选择 一个用于通过下拉列表来收集选项的表单控件，支持折叠方式对选项分组，常用于选项较复杂的场合。 Demo
39 Signaling Chart 信令流程图 一个信令流程图。 Demo
40 Slider 滑动条 一个用于通过滑动收集数字信息的表单控件。 Demo
41 Steps 步骤条 显示一系列具有某些预定义状态的自定义步骤。 Demo
42 Switch 开关 一个用于收集 是/否 或 开/关 的表单控件。 Demo
43 Tab Bar 页签头 一个Tabs容器的页切换器。 Demo
44 Table 表格 一个非常非常强大的数据表。 Demo
45 Tag 标签 一个标签控件。 Demo
46 Textarea 多行文本框 一个用于收集多行文本的表单控件。 Demo
47 Tile Lite 平铺 一个通过水平平铺方式来显示数据的列表，List组件则是将数据垂直平铺。 Demo
48 Tile 平铺 一个增强版的 Tile 控件。 Demo
49 Time 时分秒选择 一个时间选择器，用于选择时分秒。 Demo
50 Time Section 时段选择器 一个时间规则选择器，可设置用于匹配时间的规则。 Demo
51 Toast 及时消息 一个用于在无侵入前提下提示及时消息的组件。 Demo
52 Transfer 穿梭选择 一个复杂选择器，用于大量条目的选择，支持分页。 Demo
53 Tree 树 以树的方式渲染一些具有从属关系的数据，基于 ztree。 Demo
54 Upload 上传组件 打开文件选择器挑选一些文件并上传到服务器。 Demo
55 Upload Result 上传结果 打开文件选择器挑选一些文件并上传到服务器。 Demo
56 Viewport 视口 表示一个抽象视图的一部分。 Demo

容器 / Containers

# 名称 简述 链接
1 Box 盒子布局器 基于 flex 的强大视图布局器，将视图抽象为水平和垂直Box，并以他们的相互组合来实现复杂视图的快速布局。 Demo
2 Editable Box 可编辑盒子 一个基于数据驱动的盒子布局器，更容易实现运行时动态布局编辑的效果。 Demo
3 Collapse 折叠 可以折叠或打开给定视图的容器。 Demo
4 Combo Select 组合框 一个可以隐藏任何给定视图的容器，用户可以向下拉以显示此视图。 Demo
5 Dialog 对话框 一个对话框组件，常常与 PopupService 配合弹出使用。 Demo
6 Drawer 抽屉 一个抽屉，常常用于收纳复杂视图。 Demo
7 Tabs 选项卡 一个多页折叠容器，可将多个视图叠加在一起。 Demo

服务 / Services

# 名称 简述 链接
1 Theme System 皮肤系统 Jigsaw提供了一套非常功能强大的皮肤系统，可以支持多种Ux规范的皮肤，支持深浅色系皮肤的在线热切换，支持局部区域内使用相反色系皮肤，同时还提供了一套css变量用于帮助应用创建支持上述各个功能的页面。 Demo
2 Data 前后端通信 Jigsaw封装了许多各式数据对象来帮助应用更容易的实现数据与控件之间的对接。 Demo
3 LoadingService 加载中服务 用于弹出和管理给定的 Loading 组件。 Demo
4 PopupService 弹出服务 弹出任意给定视图到UI的顶部，非常强大。 Demo
5 TimeService 时间相关功能 将时间宏（如now-1d）转换为实际值。 --
6 Translation 国际化 用于创建一个支持多语言的视图。 Demo
7 ChartIcon 图形化图标 将给定的简单数据渲染成一个小图标。 --

指令 / Directives

# 名称 简述 链接
1 Badge 多功能徽标 给任意视图添加徽标以抓取用户的注意力，支持多种形式的徽标。 Demo
2 Menu 菜单 给任意视图添加多级菜单功能，或者弹出一个上下文菜单。 Demo
3 Download Graphs 图形批量下载 给一个图形容器添加一个将容器内所有图形的截图下载的功能。 Demo
4 Drag and Drop 拖拽 赋予宿主视图支持鼠标拖拽的能力。 Demo
5 Float 任意视图下拉 在宿主附近以下拉的形式弹出任意给定的视图，支持多种下拉位置。 Demo
6 Movable 跟随鼠标移动 添加到任意视图上，让该视图可以被鼠标拖动并跟随鼠标移动的能力。 Demo
7 Tooltip 多功能提示 给任意视图添加一个上下文提示，支持富文本，支持交互。 Demo
8 Trusted HTML 富文本渲染器 与Angular的innerHtml指令功能相似，但不会删除给定的html片段中的敏感信息，支持交互。 Demo
9 Upload 上传 给任意视图添加文件上传的功能，需要与上传结果显示控件一起配合使用。 Demo

名字的内涵

Jigsaw原意是七巧板，一种拼图游戏。游戏的过程和现代web页面开发过程很类似，游戏者按照既定的蓝图将杂乱的碎片组合成一幅图，我们使用这个名字正是为了让web页面开发者能够像玩Jigsaw游戏一样，边玩边开发你的页面。

组合是Jigsaw的灵魂，我们致力于将组合做到极致。

把若干组件按照一定的顺序排列&布局之后可以得到一个应用页面，这是通常意义上的组合，我们将这个层次的组合称归之为Level I。Level I 的组合把组件当做原子，不可再拆分。

Jigsaw的组件不再是原子，它对组件的功能进行了二次抽象，同时，允许组件的局部高度定制化，甚至有的组件做到完全的可定制化。小到类似jigsaw-button这样的基础组件，大到jigsaw-table这样的巨无霸组件，你看到的几乎每个UI元素，都是可以与其他组件再组合来覆盖其默认行为。原子组件是有限的，组合才能产生无限的可能。这里提到的定制化，换句话说，就是另一种形式的组合，我们将这个层次的组合归为Level II。

用Jigsaw，尽情释放你的想象力吧！

用法

全新的开始

我们强烈推荐使用 Jigsaw Seed 来作为新工程的开始。具体步骤为：

  1. 如果未安装nodejs，或者nodejs低于6.x.x，npm版本低于3.x.x，请先安装nodejs。
  2. 下载或者clone Jigsaw Seed 的源码。假设保存到了 d:\jigsaw-seed。
  3. 下载依赖包，执行如下脚本（不能使用cnpm安装，会有问题，原因在这里）
cd d:\jigsaw-seed
npm config set registry=https://registry.npm.taobao.org/                 # for Chinese developers only
npm config set sass_binary_site https://npm.taobao.org/mirrors/node-sass # for Chinese developers only
npm install -g @angular/cli                                              # 强烈推荐，可选
npm install
npm start
  • 中国大陆的开发者请注意*：不要使用cnpm安装，会导致编译失败，原因在这里；
  • 中兴内网用户请注意：你可以使用中兴内网npm镜像来提升安装依赖包的速度，详情点击这里；
  1. 浏览器里打开 http://localhost:4200 如果看到欢迎页，表示你的开发环境搭建完毕。
  2. 后续直接在 d:\jigsaw-seed 目录下运行 npm start 命令就可以启动开发环境了。Jigsaw专门针对现代的IDE做了代码优化，让这些IDE可以精确提示更多的信息，节约你翻阅api文档的时间。我们推荐使用WebStorm作为IDE。

集成到已有工程中

具体过程请看这里

新手宝典

Jigsaw Tourist 是一个专门为新手准备的教学工程，它展示了从零开始如何使用jigsaw来构建一个难度中等的应用页面。单击这里，勇敢的迈出你在Jigsaw的第一步吧。

上手过程中有任何困难，请关注Jigsaw的官方微信公众号，在那里可以加入SOS群和我们开发者直接对话：

进阶学习

Any Badge是一个使用Jigsaw和RDK作为前后端框架来开发一个web应用的最佳实践。它介绍了如何使用Jigsaw和RDK来开发一个页面，这是在学习了Tour of Heroes和Jigsaw Tourist之后进阶学习Jigsaw的好途径。

求星星！

请随手赏个星星，这是对我们最好的鼓励！

参与贡献

我们认为如下的行为都是在做贡献：

  • 默默的关注；
  • watch/star/fork 这个工程；
  • 给我们提bug/需求/建议；
  • 给我们写写文档，写点小文章；
  • 更有效的是给我们推送PR，所有的PR我们都欢迎并会认真处理；
    • 请优先处理没有打 suspend 标签的issue；
    • 这里是一份简单的代码规范，请尽量遵守它；