UI Components

A complete list of all UI components in Yao DSLs.

**Note:** This document is a work in progress, some links may not work as expected.

## View Components

Components that are used to display data or interact with the user, can be used to Table Widgets.

| Component                          | Description                                                                      |
| ---------------------------------- | -------------------------------------------------------------------------------- |
| [A](ui-components/a)               | A link that shows a tooltip with the destination URL on hover and opens the link |
| [Checkbox](ui-components/checkbox) | A checkbox for selecting or deselecting an option                                |
| [Color](ui-components/color)       | A color picker for selecting a color                                             |
| [Image](ui-components/image)       | An image element for displaying images                                           |
| [Switch](ui-components/switch)     | A switch for toggling between two states                                         |
| [Tag](ui-components/tag)           | A tag for categorizing or labeling content                                       |
| [Text](ui-components/text)         | A text element for displaying text                                               |
| [Tooltip](ui-components/tooltip)   | A tooltip that shows additional information on hover                             |

## Edit Components

Components that are used to edit data or interact with the user, can be used to Form Widget.

| Component                                     | Description                                                             |
| --------------------------------------------- | ----------------------------------------------------------------------- |
| [Autocomplete](ui-components/autocomplete)    | An input field with a dropdown list for selecting an option from a list |
| [Cascader](ui-components/cascader)            | A cascading dropdown list for selecting an option from a hierarchy      |
| [CheckboxGroup](ui-components/checkbox-group) | A group of checkboxes for selecting multiple options                    |
| [CodeEditor](ui-components/code-editor)       | A code editor for editing code                                          |
| [ColorPicker](ui-components/color-picker)     | A color picker for selecting a color                                    |
| [Divider](ui-components/divider)              | A horizontal line to separate content                                   |
| [FlowBuilder](ui-components/flow-builder)     | A flow builder for creating workflows                                   |
| [FormBuilder](ui-components/form-builder)     | A form builder for creating forms                                       |
| [Frame](ui-components/frame)                  | A frame for displaying content in a bordered box                        |
| [Input](ui-components/input)                  | An input field for entering text                                        |
| [InputNumber](ui-components/input-number)     | An input field for entering numbers                                     |
| [List](ui-components/list)                    | A list for displaying data                                              |
| [Password](ui-components/password)            | An input field for entering passwords                                   |
| [Placement](ui-components/placement)          | A placement for positioning elements                                    |
| [Select](ui-components/select)                | A dropdown list for selecting an option from a list                     |
| [TextArea](ui-components/text-area)           | A text area for entering multiple lines of text                         |
| [Text](ui-components/text)                    | A text element for displaying text                                      |
| [TimePicker](ui-components/time-picker)       | A time picker for selecting a time                                      |
| [Tree](ui-components/tree)                    | A tree for displaying hierarchical data                                 |
| [Upload](ui-components/upload)                | An upload component for uploading files                                 |
| [WangEditor](ui-components/wang-editor)       | A WYSIWYG editor for editing text                                       |
| [Table](ui-components/table)                  | A table reference for displaying data                                   |

## Chart Components

Components that are used to visualize data in various chart formats, can be used to Chart and Dashboard widgets.

| Component                                 | Description                           |
| ----------------------------------------- | ------------------------------------- |
| [Bar](ui-components/bar)                  | A bar chart                           |
| [Line](ui-components/line)                | A line chart                          |
| [Funnel](ui-components/funnel)            | A funnel chart                        |
| [LineBar](ui-components/line-bar)         | A line and bar chart                  |
| [Number](ui-components/number)            | A number chart                        |
| [NumberChart](ui-components/number-chart) | A number chart with a title and value |
| [Pie](ui-components/pie)                  | A pie chart                           |
| [Table](ui-components/table)              | A table display in chart format       |