Jigsaw七巧板 provides a set of web components based on Angular5/8/9+. 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.





GitHub Stars



Last Commit

3d ago






Size (min+gzip)




Type Definitions







  • For the desktop: @rdkmaster/jigsaw      npm version Jigsaw
  • For mobile: @rdkmaster/jigsaw-mobile npm version Build Status
  • Font Icons: @rdkmaster/icon-font          npm version Amount
  • Online IDE: Edit Jigsaw in one click          Gitpod Ready-to-Code


Why Jigsaw?

Jigsaw is a complete and powerful Web components set. The current version contains 50 components, 6 containers, 6 services, and 9 directives, basically covering all aspects of Web applications. Simply put, Jigsaw has almost all the functions of other component sets, and Jigsaw is more powerful and has better performance. Therefore, there is no need to worry about the lack of functionality with Jigsaw.

Jigsaw has an ability that other component sets do not have: Jigsaw’s application can support multiple Ux specifications at the same time in one development. Click here to learn more about it.

List of Availables


1AlertA simple dialog that usually used to tell the users something important, and it can also collect choice of the users.Demo
2Auto InputA full-featured Input component with a drop-down list of suggested optional values.Demo
3BreadcrumbA lightweight navigator which can automaticly trace while the users are browsing.Demo
4ButtonA button with multiple states.Demo
5Button BarA button bar which supports selection status, single or multiple selection, it can be used as a form control or a navigator.Demo
6CascadeA form control for collecting or presenting data with subordinate relationships.Demo
7CheckboxA form control for collecting multi choices.Demo
8Color SelectA form control that provides multiple ways to pick colors.Demo
9Date PickerA form control used to collect dates.Demo
10Date Time (Single)A form control for collecting date and time.Demo
11Date Time (Select)A form control used to collect date and time, it provides choices in a drop-down manner.Demo
12Date Time (Range)A form control used to collect the start and end value, including date and time.Demo
13Date Time (Select)A form control used to collect the start and end value, including date and time, it provides choices in a drop-down manner.Demo
14Fish BoneA Fishbone graph are often used to present some data with subordinate relationships in the form of fish bones.Demo
15GraphRender any data graphically, including any graphics such as bar charts, line charts, pie charts, gauge, and more, powered by echarts.Demo
16HeaderA simple component used to prompt the topic of a certain area on the UI.Demo
17IconA font icon, which can be used as a link button, supports Font-aweasome and Jigsaw's internal icon libraries.Demo
18Input (Normal)A form control used to collect a single line of text.Demo
19Input (Search)A search box for fuzzy matching according to text.Demo
20List LiteA control for presenting a group of data in a text list, supports single selection and multiple selection, supports main title and subtitle, and supports icons.Demo
21ListAn enhanced version of the List Lite control that supports the presentation of a set of data in any form.Demo
22LoadingDisplays an animation to ease the user's anxiety during waiting for certain operations.Demo
23MenuA multi-level menu control, which is often used for navigation.Demo
24NotificationInforms some unimportant message in the corner of the UI, or to collect some unimportant choice of the users.Demo
25Numeric InputA form control for collecting numbers without typing, supports floats and integers.Demo
26PaginationA control used to divide a large amount of data into multiple pages for display, not only can cooperate with the table component, but also can realize the paging operation of any data.Demo
27Progress BarA horizontal progress bar.Demo
28Progress CircleA circular progress bar.Demo
29RadioA form control for collecting single choices.Demo
30RateA form control for the users to give his/her score of something.Demo
31ScrollbarA custom scrollbar to any container, powered by perfect scrollbar.Demo
32Select (Normal)A form control for collecting the choice(s) by dropping down a list.Demo
33Select (Group)A form control used to collect options through a drop-down list, supports option grouping, and is often used in situations where options are more complex.Demo
34Select (Collapse)A form control used to collect options through a drop-down list. It supports folding to group options. It is often used in situations where options are more complicated.Demo
35Signaling ChartA signaling flow chart.Demo
36SliderA form control for collecting numerical info by sliding.Demo
37StepsDisplays a series of custom steps which have some predefined states.Demo
38SwitchA form control for collection yes/no or on/off choices.Demo
39Tab BarA tab switcher for the Tabs container.Demo
40TableA very very powerful data grid.Demo
41TagA tag control.Demo
42TextareaA form control for collecting multi lines of text.Demo
43Tile LiteA list that displays data by horizontal tiling, and the List component tiling data vertically.Demo
44TileAn enhanced version of the Tile control.Demo
45TimeA time selector for selecting hours, minutes and seconds.Demo
46Time SectionA time rule selector, you can set the rule for matching time.Demo
47TransferA complex selector, used to select a large number of entries, supports paging.Demo
48TreeRenders some data with subordinate relationships as a tree, powered by ztree.Demo
49Upload ResultOpens a file explorer to select one or more files and upload to the sever.Demo
50ViewportRepresents part of an abstract view.Demo


1BoxA powerful view layout based on flex, which abstracts the view into horizontal and vertical boxes, and uses their mutual combination to quickly make the layout of complex views.Demo
2CollapseA container which can fold or open the given view.Demo
3Combo SelectA container that can hide any given view, which the user can pull down to display this view.Demo
4DialogA dialog box component which is often used in conjunction with PopupService.Demo
5DrawerA drawer, which is often used to show/hide complex views.Demo
6TabsA multi-view folding container with tabs, which can overlay multiple views together.Demo


1DataJigsaw encapsulates many kinds of data objects to help applications more easily to feed data to all the controls.Demo
2LoadingServicePopups up and manages Loading component.Demo
3PopupServicePopups any given view to the top of the UI, very powerful.Demo
4TimeServiceTranslate time macros like now-1d to real values.--
5TranslationUsed to create a view that supports multiple languages.Demo
6ChartIconRender simple data to tiny charts.--


1BadgeAdd a badge to any view to grab the user's attention, and support multiple forms of badge.Demo
2MenuAdd multi-level menu function to any view, or popup a context menu.Demo
3Download GraphsAdd a function of downloading screenshots of all the graphics in the host container.Demo
4Drag and DropMakes the host draggable and droppable.Demo
5FloatDrop down any given view near the host, many positions supported.Demo
6MovableThe ability to add to any view so that the view can be dragged by the mouse and follow the movement of the mouse.Demo
7TooltipAdd a context prompt to any view, support rich text, and support interaction.Demo
8Trusted HTMLSimilar to Angular's innerHtml directive, without sanitizing the given trusted html, support interaction.Demo
9UploadAdding the file upload function to any view, needs to be used in conjunction with the upload result control.Demo

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=                 # for Chinese developers only
npm config set sass_binary_site # 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 because of this issue.
  • 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.


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;

Rate & Review

Great Documentation0
Easy to Use0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Unwelcoming Community0