【Journey of HarmonyOS Next】ArkTS-based Development (3) -> JS-Compatible Web Development (4) -> Common Components (1)

The List component is used to display a list of items with the same width, suitable for presenting consecutive data. To create a List component, add it to the hml file in the pages/index directory and style it using CSS. The List component has subcomponents such as List Item and List Item Group, which can be used to implement list grouping functions. The scrollbar property can be set to ON to generate a scrollbar on the right side of the screen. The indexer property can be set to display an index bar at the right edge of the list. The List component also supports list folding and expansion using the groupcollapse and groupexpand events. In a scenario example, the List component is used to search for contacts based on an alphabetical index. The Dialog component is used to create custom pop-up windows, which can be triggered by a Button component. The Dialog component supports only certain attributes and styles, and does not support dynamic updates or focusable and click-effect attributes. Finally, the Form component is a form container that supports the submission and reset of Input component content, and can be styled and customized using various attributes and events.