Jigsaw七巧板 provides a set of web components based on Angular5+. The main purpose of Jigsaw is to help the application developers to construct complex & intensive interacting & user friendly web pages. Jigsaw is supporting the development of all applications of Big Data Product of ZTE.
Failed to load latest commit information.
.vscode 增加vscode配置 Jul 19, 2017
build [故障] 生成的live-demo在引用到AjaxInterceptor类时给的文件路径错误 (#732) Sep 16, 2018
docs use new api url of ued site (#659) Apr 25, 2018
e2e [破坏性修改] 分页组件现在不传入current、pageSize、total属性,改由一次性传入含pagingInfo的data Oct 11, 2018
src [新增] upload组件和upload指令在删除已上传条目时给出remove事件 Nov 9, 2018
.angular-cli.json DEMO: Graph province demo (#578) Mar 16, 2018
.editorconfig Merge branch 'dev' Mar 17, 2017
.gitignore rollback-gitignore Sep 1, 2017
.travis.yml 暂停e2e测试用例的执行 Oct 26, 2018
CHANGELOG.md pre-publish v1.2.0-beta2 (#791) Oct 31, 2018
CONTRIBUTING.md add-inside-npm-mirror-desc Dec 7, 2017
LICENSE 更新license Jun 9, 2017
README.md remove hiring info Dec 10, 2017
README.zh.md remove hiring info Dec 10, 2017
build-config.js add jigsaw-labs build Aug 29, 2017
comp-map.bmpr fixes #117 Aug 13, 2017
comp-map.png fixes #117 Aug 13, 2017
favicon.ico 添加install脚本 Apr 20, 2017
gulpfile.js test close watch (#48) Jun 24, 2017
karma.conf.js add-phantomjs-plugin Jun 21, 2017
package.json @angular/angular-cli version to 5.0.x May 11, 2018
protractor-config-for-components.js e2e: combo-select&table Apr 10, 2018
protractor-config-for-live-demo.js testcase timeout to 5min Dec 13, 2017
proxy-config.json add server side interceptor Oct 2, 2017
tsconfig.json 对齐ng4 Mar 25, 2017
tslint.json 添加三种预设颜色和三种预设尺寸 May 12, 2017



npm version Build Status Code Coverage Status Doc Coverage Status
component count directives count injectables count demo count e2e testcases count


Meaning Of Name

We name this suite of components from a puzzle game. The process of this game, during which the player combine the messy pieces into a picture in accordance with the established blueprint, is similar to the development process of modern web page. We use Jigsaw as this component set’s name, hoping to make web page developers to combine the messy pieces of functions into your web page, just like playing jigsaw puzzle.

The soul of Jigsaw is combination, and we are committed to develop combination to the extreme level.

When several components are sorted and arranged in a certain order, you can get an application page. This is a normal combination, which we definee as Level I combination. In this level, all the components are like atoms, which means they can only act what they were made.

But Jigsaw's components are no longer atoms, we made a secondary abstraction of the functionality of the components, while allowing parts of the components highly customizable, some component even fully customizable. Small to basic components like jigsaw-button, large to giant components such as jigsaw-table, almost every UI element you see can be combined with other components to change its default behavior, and therefor to enhance the capability of components. Atomic components are limited, but the combination can produce infinite possibilities. The customization mentioned here, in other words, is another form of combination, and we call this level of combination as Level II.

With Jigsaw, unleash your imagination!

Get started

A brand new start with Jigsaw

We strongly recommend to use Jigsaw Seed as the seed of all new projects. The specific steps are:

  1. Install or update nodejs, node 6.x.x and npm 3.x.x or later is required;
  2. Download or clone the source of Jigsaw Seed, assumed being saved to d:\jigsaw-seed;
  3. Install all dependencies by excuting the following script:
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                                              # optional, but strongly recommended
npm install
npm start
  • Attensions to the Chinese developers, do NOT use cnpm to install the dependencies, we are still looking for the reason.
  • Attensions to all ZTErs, you can use the npm mirror inside of ZTE for faster speed of installing, check this link for more details.
  1. Open http://localhost:4200 in your browser, your development environment is completed set up if you can see the welcome page;
  2. Afterwards you can directly run npm start in the d:\jigsaw-seed directory to start the development environment;
  3. Jigsaw has specifically done code optimization for the modern IDE, so that IDE can accurately prompt more information, saving your time of reading api document. We recommend using WebStorm as IDE.

Use Jigsaw with your developing project

See the specific process here

A bible for the beginners

Jigsaw Tourist is a tutorial dedication to the beginners, which shows how to use Jigsaw from scratch to build a simple application page. Click here, bravely take your first step in Jigsaw.

If there is any difficulty in getting started, please add Jigsaw's official WeChat, where you can join the SOS group and have a dialogue with our developers directly.

A advanced guide

Any Badge is a best practice of using Jigsaw and RDK to create a full featured web application. It is a very good choice to read the source code of Any Badge, which helps your to learn more about Jigsaw and RDK, after you finish reading the Tour of Heroes and the Jigsaw Tourist.

One More Star Please!

This is the best encouragement for us.

The status of all components


We believe that the following acts are doing contributions:

  • Quietly concern about Jigsaw;
  • Watch/star/fork it;
  • Reporting a bug or give us any suggestions by submitting an issue;
  • Write or translate the api documentation, or any articals about Jigsaw.
  • The more effective way to contribute is to push us PRs, all PRs are welcome and will be dealt with seriously;