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.
|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 with multiple states.||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||Checkbox||A form control for collecting multi choices.||Demo|
|8||Color Select||A form control that provides multiple ways to pick colors.||Demo|
|9||Date Picker||A form control used to collect dates.||Demo|
|10||Date Time (Single)||A form control for collecting date and time.||Demo|
|11||Date Time (Select)||A form control used to collect date and time, it provides choices in a drop-down manner.||Demo|
|12||Date Time (Range)||A form control used to collect the start and end value, including date and time.||Demo|
|13||Date 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|
|14||Fish Bone||A Fishbone graph are often used to present some data with subordinate relationships in the form of fish bones.||Demo|
|15||Graph||Render any data graphically, including any graphics such as bar charts, line charts, pie charts, gauge, and more, powered by echarts.||Demo|
|16||Header||A simple component used to prompt the topic of a certain area on the UI.||Demo|
|17||Icon||A font icon, which can be used as a link button, supports Font-aweasome and Jigsaw's internal icon libraries.||Demo|
|18||Input (Normal)||A form control used to collect a single line of text.||Demo|
|19||Input (Search)||A search box for fuzzy matching according to text.||Demo|
|20||List Lite||A 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|
|21||List||An enhanced version of the List Lite control that supports the presentation of a set of data in any form.||Demo|
|22||Loading||Displays an animation to ease the user's anxiety during waiting for certain operations.||Demo|
|23||Menu||A multi-level menu control, which is often used for navigation.||Demo|
|24||Notification||Informs some unimportant message in the corner of the UI, or to collect some unimportant choice of the users.||Demo|
|25||Numeric Input||A form control for collecting numbers without typing, supports floats and integers.||Demo|
|26||Pagination||A 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|
|27||Progress Bar||A horizontal progress bar.||Demo|
|28||Progress Circle||A circular progress bar.||Demo|
|29||Radio||A form control for collecting single choices.||Demo|
|30||Rate||A form control for the users to give his/her score of something.||Demo|
|31||Scrollbar||A custom scrollbar to any container, powered by perfect scrollbar.||Demo|
|32||Select (Normal)||A form control for collecting the choice(s) by dropping down a list.||Demo|
|33||Select (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|
|34||Select (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|
|35||Signaling Chart||A signaling flow chart.||Demo|
|36||Slider||A form control for collecting numerical info by sliding.||Demo|
|37||Steps||Displays a series of custom steps which have some predefined states.||Demo|
|38||Switch||A form control for collection yes/no or on/off choices.||Demo|
|39||Tab Bar||A tab switcher for the Tabs container.||Demo|
|40||Table||A very very powerful data grid.||Demo|
|41||Tag||A tag control.||Demo|
|42||Textarea||A form control for collecting multi lines of text.||Demo|
|43||Tile Lite||A list that displays data by horizontal tiling, and the List component tiling data vertically.||Demo|
|44||Tile||An enhanced version of the Tile control.||Demo|
|45||Time||A time selector for selecting hours, minutes and seconds.||Demo|
|46||Time Section||A time rule selector, you can set the rule for matching time.||Demo|
|47||Transfer||A complex selector, used to select a large number of entries, supports paging.||Demo|
|48||Tree||Renders some data with subordinate relationships as a tree, powered by ztree.||Demo|
|49||Upload Result||Opens a file explorer to select one or more files and upload to the sever.||Demo|
|50||Viewport||Represents part of an abstract view.||Demo|
|1||Box||A 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|
|2||Collapse||A container which can fold or open the given view.||Demo|
|3||Combo Select||A container that can hide any given view, which the user can pull down to display this view.||Demo|
|4||Dialog||A dialog box component which is often used in conjunction with PopupService.||Demo|
|5||Drawer||A drawer, which is often used to show/hide complex views.||Demo|
|6||Tabs||A multi-view folding container with tabs, which can overlay multiple views together.||Demo|
|1||Data||Jigsaw encapsulates many kinds of data objects to help applications more easily to feed data to all the controls.||Demo|
|2||LoadingService||Popups up and manages Loading component.||Demo|
|3||PopupService||Popups any given view to the top of the UI, very powerful.||Demo|
|4||TimeService||Translate time macros like ||--|
|5||Translation||Used to create a view that supports multiple languages.||Demo|
|6||ChartIcon||Render simple data to tiny charts.||--|
|1||Badge||Add a badge to any view to grab the user's attention, and support multiple forms of badge.||Demo|
|2||Menu||Add multi-level menu function to any view, or popup a context menu.||Demo|
|3||Download Graphs||Add a function of downloading screenshots of all the graphics in the host container.||Demo|
|4||Drag and Drop||Makes the host draggable and droppable.||Demo|
|5||Float||Drop down any given view near the host, many positions supported.||Demo|
|6||Movable||The ability to add to any view so that the view can be dragged by the mouse and follow the movement of the mouse.||Demo|
|7||Tooltip||Add a context prompt to any view, support rich text, and support interaction.||Demo|
|8||Trusted HTML||Similar to Angular's innerHtml directive, without sanitizing the given trusted html, support interaction.||Demo|
|9||Upload||Adding the file upload function to any view, needs to be used in conjunction with the upload result control.||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:
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
cnpmto install the dependencies because of this issue.
http://localhost:4200in your browser, your development environment is completed set up if you can see the welcome page;
npm startin the
d:\jigsaw-seeddirectory to start the development environment;
See the specific process here
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: