- For the desktop: @rdkmaster/jigsaw
- For mobile: @rdkmaster/jigsaw-mobile
| # | Name | Description | Link |
|---|---|---|---|
| 1 | Alert | A simple dialog that usually used to tell the users something important, and it can also collect choice of the users. | Demo |
| 2 | Auto Input | A full-featured Input component with a drop-down list of suggested optional values. | Demo |
| 3 | Breadcrumb | A lightweight navigator which can automaticly trace while the users are browsing. | Demo |
| 4 | Button | A button. | Demo |
| 5 | Button Bar | A button bar which supports selection status, single or multiple selection, it can be used as a form control or a navigator. | Demo |
| 6 | Cascade | A form control for collecting or presenting data with subordinate relationships. | Demo |
| 7 | Check Box | A form control for collecting multi choices. | Demo |
| 8 | Fish Bone | A Fishbone graph are often used to present some data with subordinate relationships in the form of fish bones. | Demo |
| 9 | Graph | Render any data graphically, including any graphics such as bar charts, line charts, pie charts, gauge, and more, powered by echarts. | Demo |
| 10 | Icon | A font icon, tells something graphicly or can be a simple link button. | Demo |
| 11 | Input | A form control for collecting some text. | Demo |
| 12 | List Lite | Presents a set of data as a text based list, supports single and multiple selection. | Demo |
| 13 | List | Presents a set of data as a fully customized list. | Demo |
| 14 | Loading | Displays an animation to ease the user's anxiety during waiting for certain operations. | Demo |
| 15 | Notification | Informs some unimportant message in the corner of the UI, or to collect some unimportant choice of the users. | Demo |
| 16 | Numeric Input | A form control for collecting numbers without typing, supports floats and integers. | Demo |
| 17 | Pagination | A control for dividing large amounts of data into multiple pages. | Demo |
| 18 | Radio Group | A form control for collecting single choices. | Demo |
| 19 | Range Time | A form control for collecting a start and an end of date time. | Demo |
| 20 | Rate | A form control for the users to give his/her score of something. | Demo |
| 21 | Scrollbar | A custom scrollbar to any container, powered by perfect scrollbar. | Demo |
| 22 | Select | A form control for collecting the choice(s) by dropping down a list. | Demo |
| 23 | Slider | A form control for collecting numerical info by sliding. | Demo |
| 24 | Steps | Displays a series of custom steps which have some predefined states. | Demo |
| 25 | Switch | A form control for collection yes/no on/off choices. | Demo |
| 26 | Table | A very very powerful data grid. | Demo |
| 27 | Tag | A tag control. | Demo |
| 28 | Textarea | A form control for collecting multi lines of text. | Demo |
| 29 | Tile | Renders a list of data by tiling. | Demo |
| 30 | TileLite | To show a list of data by tiling. | Demo |
| 31 | Time | A form control for collecting a date time. | Demo |
| 32 | Tooltip | A customized tooltip. | Demo |
| 33 | Tree | Renders some data with subordinate relationships as a tree, powered by ztree. | Demo |
| 34 | Upload | Opens a file explorer to select one or more files and upload to the sever. | Demo |
| 35 | Viewport | Represents part of an abstract view. | Demo |
| # | Name | Description | Link |
|---|---|---|---|
| 1 | Collapse | A container which can fold or open the given view. | Demo |
| 2 | Combo Select | A container that can hide any given view, which the user can pull down to display this view. | Demo |
| 3 | Dialog | A container that presents any given view as a dialog. | Demo |
| 4 | Drawer | A container that can hide any given view, the user can slide to open this view. | Demo |
| 5 | Tab | Stack multiple views in the same area and display only one of them at the same time. | Demo |
| # | Name | Description | Link |
|---|---|---|---|
| 1 | Translation | Used to create a view that supports multiple languages. | Demo |
| 2 | TimeService | Translate time macros like now-1d to real values. |
-- |
| 3 | PopupService | Popups any given view to the top of the UI, very powerful | Demo |
| 4 | LoadingService | Popups up Loading component. | Demo |
| 5 | ChartIconFactory | Render simple data to tiny charts. | -- |
| # | Name | Description | Link |
|---|---|---|---|
| 1 | Float | Drop down any given view near the host, many positions supported. | Demo |
| 2 | Trusted Html | Similar to Angular's innerHtml directive, without sanitizing the given trusted html | Demo |
| 3 | Draggable | Makes the host draggable and droppable. | Demo |
| 4 | Upload | Give the host the ability to support uploading files. | Demo |
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!
We strongly recommend to use Jigsaw Seed as the seed of all new projects. The specific steps are:
- Install or update nodejs, node 6.x.x and npm 3.x.x or later is required;
- Download or clone the source of Jigsaw Seed, assumed being saved to
d:\jigsaw-seed; - 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
cnpmto 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.
- Open
http://localhost:4200in your browser, your development environment is completed set up if you can see the welcome page; - Afterwards you can directly run
npm startin thed:\jigsaw-seeddirectory to start the development environment; - 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.
See the specific process here
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.
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.
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;
- Give priority to the issues without a
suspendtag; - This is a simple code specification, please try to follow it;
- Give priority to the issues without a