Jigsaw-七巧板

• For the desktop: @rdkmaster/jigsaw     
• For mobile: @rdkmaster/jigsaw-mobile
• Font Icons: @rdkmaster/icon-font          
• Online IDE: Edit Jigsaw in one click          

README中文版

Why Jigsaw?

Jigsaw is a complete and powerful Web components set. The current version contains 56 components, 7 containers, 7 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

Components

# | 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 | Alphabetical Index | A list that can be indexed alphabetically. | Demo 3 | Alphabetical Index Select | A drop-down list that can be indexed alphabetically. | Demo 4 | Auto Input | A full-featured Input component with a drop-down list of suggested optional values. | Demo 5 | Breadcrumb | A lightweight navigator which can automaticly trace while the users are browsing. | Demo 6 | Button | A button with multiple states. | Demo 7 | 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 8 | Cascade | A form control for collecting or presenting data with subordinate relationships. | Demo 9 | ChartIcon | A componnet for rendering a small area into charts, supporting pie, line, and bar charts. | Demo 10 | Checkbox | A form control for collecting multi choices. | Demo 11 | Color Select | A form control that provides multiple ways to pick colors. | Demo 12 | Date Picker | A form control used to collect dates. | Demo 13 | Date Time (Single) | A form control for collecting date and time. | Demo 14 | Date Time (Select) | A form control used to collect date and time, it provides choices in a drop-down manner. | Demo 15 | Date Time (Range) | A form control used to collect the start and end value, including date and time. | Demo 16 | 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 17 | Fish Bone | A Fishbone graph are often used to present some data with subordinate relationships in the form of fish bones. | Demo 18 | Graph | Render any data graphically, including any graphics such as bar charts, line charts, pie charts, gauge, and more, powered by echarts. | Demo 19 | Header | A simple component used to prompt the topic of a certain area on the UI. | Demo 20 | Icon | A font icon, which can be used as a link button, supports Font-aweasome and Jigsaw's internal icon libraries. | Demo 21 | Input (Normal) | A form control used to collect a single line of text. | Demo 22 | Input (Search) | A search box for fuzzy matching according to text. | Demo 23 | 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 24 | List | An enhanced version of the List Lite control that supports the presentation of a set of data in any form. | Demo 25 | Loading | Displays an animation to ease the user's anxiety during waiting for certain operations. | Demo 26 | Menu | A multi-level menu control, which is often used for navigation. | Demo 27 | Notification | Informs some unimportant message in the corner of the UI, or to collect some unimportant choice of the users. | Demo 28 | Numeric Input | A form control for collecting numbers without typing, supports floats and integers. | Demo 29 | 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 30 | Progress Bar | A horizontal progress bar. | Demo 31 | Progress Circle | A circular progress bar. | Demo 32 | Progress Status | A process status component which can be used to display various states in the process. | Demo 33 | Radio | A form control for collecting single choices. | Demo 34 | Rate | A form control for the users to give his/her score of something. | Demo 35 | Scrollbar | A custom scrollbar to any container, powered by perfect scrollbar. | Demo 36 | Select (Normal) | A form control for collecting the choice(s) by dropping down a list. | Demo 37 | 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 38 | 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 39 | Signaling Chart | A signaling flow chart. | Demo 40 | Slider | A form control for collecting numerical info by sliding. | Demo 41 | Steps | Displays a series of custom steps which have some predefined states. | Demo 42 | Switch | A form control for collection yes/no or on/off choices. | Demo 43 | Tab Bar | A tab switcher for the