1# Component Overview 2 3 4## Rows and Columns 5 6- [Column](ts-container-column.md) 7 8 A container that lays out child components vertically. 9- [ColumnSplit](ts-container-columnsplit.md) 10 11 A container that lays out child components vertically and inserts a horizontal divider between every two child components. 12- [Row](ts-container-row.md) 13 14 A container that lays out child components horizontally. 15- [RowSplit](ts-container-rowsplit.md) 16 17 A container that lays out child components horizontally and inserts a vertical divider between every two child components. 18- [SideBarContainer](ts-container-sidebarcontainer.md) 19 20 A container that contains a sidebar and content area as its child components. The sidebar is the first child component and can be shown or hidden as needed. The content area is the second child component. 21 22 23## Stack, Flex, and Grid 24 25- [Stack](ts-container-stack.md) 26 27 A container where child components are successively stacked and the latter one overwrites the previous one. 28- [Flex](ts-container-flex.md) 29 30 A container that allows for flexible layout of child components. 31- [GridContainer](ts-container-gridcontainer.md) 32 33 A container that lays out components vertically and is used only in the grid layout. 34- [GridRow](ts-container-gridrow.md) 35 36 A container that is used in a grid layout, together with its child component **\<GridCol>**. 37- [GridCol](ts-container-gridcol.md) 38 39 A container that must be used as a child component of the **\<GridRow>** container. 40- [RelativeContainer](ts-container-relativecontainer.md) 41 42 A container that is used for element alignment in complex scenarios. 43 44 45## List and Grid 46 47- [List](ts-container-list.md) 48 49 A container that presents a series of list items arranged in a column with the same width. It supports presentations of the same type of data in a multiple and coherent row style, for example, images or text. 50- [ListItem](ts-container-listitem.md) 51 52 A component that displays a specific item in the list and that must be used together with **\<List>**. 53- [ListItemGroup](ts-container-listitemgroup.md) 54 55 A component that displays list item groups and that must be used together with **\<List>**. 56- [Grid](ts-container-grid.md) 57 58 A container that consists of cells formed by rows and columns. You can specify the cells where items are located to form various layouts. 59- [GridItem](ts-container-griditem.md) 60 61 A container that provides a single item in a grid. 62 63 64## Scroll and Swipe 65 66- [Scroll](ts-container-scroll.md) 67 68 A container that scrolls the content when the layout size of a component exceeds the size of its parent component. 69- [Swiper](ts-container-swiper.md) 70 71 A container that is able to display child components in looping mode. 72- [WaterFlow](ts-container-waterflow.md) 73 74 A container that consists of cells formed by rows and columns and arranges items of different sizes from top to bottom according to the preset rules. 75- [FlowItem](ts-container-flowitem.md) 76 77 A child component of the **\<WaterFlow>** container that is used to display specific items in the container layout. 78 79 80## Navigation 81 82- [Navigator](ts-container-navigator.md) 83 84 A container that provides redirection. 85- [Navigation](ts-basic-components-navigation.md) 86 87 A container that typically functions as the root container of a page and displays the title bar, toolbar, and navigation bar based on the attribute settings. 88- [NavRouter](ts-basic-components-navrouter.md) 89 90 A container that provides default logic for click response processing, eliminating the need for manual logic definition. 91- [NavDestination](ts-basic-components-navdestination.md) 92 93 A child component of the **\<NavRouter>** component that represents a destination in the navigation area. 94- [Stepper](ts-basic-components-stepper.md) 95 96 A component that provides a step navigator. 97- [StepperItem](ts-basic-components-stepperitem.md) 98 99 A child component of the **\<Stepper>** component. 100- [Tabs](ts-container-tabs.md) 101 102 A container that allows users to switch between content views through tabs. 103- [TabContent](ts-container-tabcontent.md) 104 105 A component that corresponds to the content view on a tab page and is used only in the **\<Tabs>** component. 106 107 108## Button and Selection 109 110- [Button](ts-basic-components-button.md) 111 112 A component that is used to create different types of buttons. 113- [Toggle](ts-basic-components-toggle.md) 114 115 A component that provides a clickable element in the check box, button, or switch type. 116- [Checkbox](ts-basic-components-checkbox.md) 117 118 A component that is used to enable or disable an option. 119- [CheckboxGroup](ts-basic-components-checkboxgroup.md) 120 121 A component that is used to select or deselect all check boxes in a group. 122- [CalendarPicker](ts-basic-components-calendarpicker.md) 123 124 A component that provides a drop-down calendar for users to select a date. 125- [DatePicker](ts-basic-components-datepicker.md) 126 127 A component that allows users to select a date from the given range. 128- [TextPicker](ts-basic-components-textpicker.md) 129 130 A component that allows users to scroll to select text. 131- [TimePicker](ts-basic-components-timepicker.md) 132 133 A component that allows users to select a time from the given range through scrolling. 134- [Radio](ts-basic-components-radio.md) 135 136 A component that allows users to select from a set of mutually exclusive options. 137- [Rating](ts-basic-components-rating.md) 138 139 A component that provides a rating bar. 140- [Select](ts-basic-components-select.md) 141 142 A component that provides a drop-down list box to allow user to select among multiple options. 143- [Slider](ts-basic-components-slider.md) 144 145 A component that is used to quickly adjust settings, such as the volume and brightness. 146- [Counter](ts-container-counter.md) 147 148 A component that provides an operation to increase or decrease the number. 149 150 151## Text and Input 152 153- [Text](ts-basic-components-text.md) 154 155 A component that is used to display a piece of textual information. 156- [Span](ts-basic-components-span.md) 157 158 A component that is used to display inline text in the **\<Text>** component. 159- [Search](ts-basic-components-search.md) 160 161 A component that provides an area for users to enter search queries. 162- [TextArea](ts-basic-components-textarea.md) 163 164 A component that provides multi-line text input and automatically wraps text so that each line does not have more than the width of the component. 165- [TextInput](ts-basic-components-textinput.md) 166 167 A component that provides single-line text input. 168- [PatternLock](ts-basic-components-patternlock.md) 169 170 A component that allows users to use a pattern password for authentication. It enters the input state once a finger is pressed against it, and exits the input state and completes the input once the finger leaves the screen. 171- [RichText](ts-basic-components-richtext.md) 172 173 A component that parses and displays HTML text. 174- [RichEditor](ts-basic-components-richeditor.md) 175 176 A component that supports interactive text editing and mixture of text and imagery. 177 178## Image, Video, and Media 179 180- [Image](ts-basic-components-image.md) 181 182 A component that is used to render and display local and online images. 183- [ImageAnimator](ts-basic-components-imageanimator.md) 184 185 A component that enables images to be played frame by frame. The list of images to be played as well as the duration of each image can be configured. 186- [Video](ts-media-components-video.md) 187 188 A component that is used to play a video and control its playback. 189- [PluginComponent](ts-basic-components-plugincomponent.md) 190 191 A component that allows the UI provided by an external application to be displayed in the application. 192- [XComponent](ts-basic-components-xcomponent.md) 193 194 A component that can accept and display the EGL/OpenGL ES and media data input. 195 196 197## Information Display 198 199- [DataPanel](ts-basic-components-datapanel.md) 200 201 A component that displays proportions in a chart. 202- [Gauge](ts-basic-components-gauge.md) 203 204 A component that is used to display data in a ring chart. 205- [LoadingProgress](ts-basic-components-loadingprogress.md) 206 207 A component that is used to create a loading animation. 208- [Marquee](ts-basic-components-marquee.md) 209 210 A component that is used to display a scrolling piece of text. The text is scrolled only when its width exceeds the width of the **\<Marquee>** component. 211- [Progress](ts-basic-components-progress.md) 212 213 A component that is used to provide a progress indicator that displays the progress of content loading or an operation. 214- [QRCode](ts-basic-components-qrcode.md) 215 216 A component that is used to display a QR code. 217- [TextClock](ts-basic-components-textclock.md) 218 219 A component that displays the current system time in text format for different time zones. The time is accurate to seconds. 220- [TextTimer](ts-basic-components-texttimer.md) 221 222 A component that displays timing information and is controlled in text format. 223 224 225## Blank and Divider 226 227- [Blank](ts-basic-components-blank.md) 228 229 A component that is able to automatically fill the empty spaces in the container along the main axis. It is valid only when the parent component is **\<Row>** or **\<Column>**. 230- [Divider](ts-basic-components-divider.md) 231 232 A component that is used to separate content blocks and elements. 233 234 235## Canvas and Graphics Drawing 236 237- [Canvas](ts-components-canvas-canvas.md) 238 239 A component that is used to customize drawings. 240- [Circle](ts-drawing-components-circle.md) 241 242 A component that is used to draw a circle. 243- [Ellipse](ts-drawing-components-ellipse.md) 244 245 A component that is used to draw an ellipse. 246- [Line](ts-drawing-components-line.md) 247 248 A component that is used to draw a straight line. 249- [Polyline](ts-drawing-components-polyline.md) 250 251 A component that is used to draw a polyline. 252- [Polygon](ts-drawing-components-polygon.md) 253 254 A component that is used to draw a polygon. 255- [Path](ts-drawing-components-path.md) 256 257 A component that is used to define a closed shape. 258- [Rect](ts-drawing-components-rect.md) 259 260 A component that is used to draw a rectangle. 261- [Shape](ts-drawing-components-shape.md) 262 263 A parent component of the drawing components. The attributes provided by this component are universal attributes supported by all the drawing components. 264 265 266## Web 267 268- [Web](ts-basic-components-web.md) 269 270 A component that is used to display web pages. 271 272 273## Miscellaneous 274 275- [ScrollBar](ts-basic-components-scrollbar.md) 276 277 A component that is used together with scrollable components, such as **\<List>**, **\<Grid>**, and **\<Scroll>**. 278 279- [Badge](ts-container-badge.md) 280 281 A container that can be attached to another component for tagging. 282 283- [AlphabetIndexer](ts-container-alphabet-indexer.md) 284 285 A component that can create a logically indexed array of items in a container for instant location. 286 287- [Panel](ts-container-panel.md) 288 289 A container that presents lightweight content with flexible sizes. 290 291- [Refresh](ts-container-refresh.md) 292 293 A container that provides the pull-to-refresh feature. 294 295- [AbilityComponent](ts-container-ability-component.md) 296 297 A container that is used for independently displaying an ability. 298 299- [RemoteWindow](ts-basic-components-remotewindow.md) 300 301 A component that is used to control the application window, providing the component animator and application window linkage animator during application startup and exit. 302 303- [FormComponent](ts-basic-components-formcomponent.md) 304 305 A component that is used to display widgets. 306 307- [FormLink](ts-container-formlink.md) 308 309 A component that provides interactions with static widgets. 310 311- [Hyperlink](ts-container-hyperlink.md) 312 313 A component that implements a link from a location in the component to another location. 314 315- [Menu](ts-basic-components-menu.md) 316 317 A component that is used to present a vertical list of items to the user. 318 319- [MenuItem](ts-basic-components-menuitem.md) 320 321 A component that is used to represent an item in a menu. 322 323- [MenuItemGroup](ts-basic-components-menuitemgroup.md) 324 325 A component that is used to represent a group of menu items. 326 327- [UIExtensionComponent](ts-container-ui-extension-component.md) 328 329 A component that is used to embed UIs provided by other applications in the local application UI. 330 331- [LocationButton](ts-security-components-locationbutton.md) 332 333 A component that is used to obtain temporary precise location permission from the user by their touching the component, eliminating the need for a permission request dialog box. 334- [PasteButton](ts-security-components-pastebutton.md) 335 336 A component that is used to obtain temporary pasteboard permission from the user by their touching the component, eliminating the need for a permission request dialog box. 337- [SaveButton](ts-security-components-savebutton.md) 338 339 A component that is used to obtain temporary storage permission from the user by their touching the component, eliminating the need for a permission request dialog box. 340