# ArkTS-based Declarative Development Paradigm

- [Component Overview](ts-components-summary.md)
- Universal Component Information
  - Universal Events
    - [Click Event](ts-universal-events-click.md)
    - [Touch Event](ts-universal-events-touch.md)
    - [Show/Hide Event](ts-universal-events-show-hide.md)
    - [Drag/Drop Event](ts-universal-events-drag-drop.md)
    - [Key Event](ts-universal-events-key.md)
    - [Focus Event](ts-universal-focus-event.md)
    - [Mouse Event](ts-universal-mouse-key.md)
    - [Component Area Change Event](ts-universal-component-area-change-event.md)
    - [Visible Area Change Event](ts-universal-component-visible-area-change-event.md)
    - [Component Keyboard Shortcut Event](ts-universal-events-keyboardshortcut.md)
  - Universal Attributes
    - [Size](ts-universal-attributes-size.md)
    - [Location](ts-universal-attributes-location.md)
    - [Layout Constraints](ts-universal-attributes-layout-constraints.md)
    - [Flex Layout](ts-universal-attributes-flex-layout.md)
    - [Border](ts-universal-attributes-border.md)
    - [Border Image](ts-universal-attributes-border-image.md)
    - [Background](ts-universal-attributes-background.md)
    - [Opacity](ts-universal-attributes-opacity.md)
    - [Visibility](ts-universal-attributes-visibility.md)
    - [Enable/Disable](ts-universal-attributes-enable.md)
    - [Overlay](ts-universal-attributes-overlay.md)
    - [Z-order Control](ts-universal-attributes-z-order.md)
    - [Transformation](ts-universal-attributes-transformation.md)
    - [Image Effect Configuration](ts-universal-attributes-image-effect.md)
    - [Shape Clipping](ts-universal-attributes-sharp-clipping.md)
    - [Grid](ts-universal-attributes-grid.md)
    - [Gradient Color](ts-universal-attributes-gradient-color.md)
    - [Popup Control](ts-universal-attributes-popup.md)
    - [Menu Control](ts-universal-attributes-menu.md)
    - [Focus Control](ts-universal-attributes-focus.md)
    - [Hover Effect](ts-universal-attributes-hover-effect.md)
    - [Component ID](ts-universal-attributes-component-id.md)
    - [Polymorphic Style](ts-universal-attributes-polymorphic-style.md)
    - [restoreId](ts-universal-attributes-restoreId.md)
    - [Foreground Color](ts-universal-attributes-foreground-color.md)
    - [Foreground Blur](ts-universal-attributes-foreground-blur-style.md)
    - [Click Effect](ts-universal-attributes-click-effect.md)
    - [Accessibility](ts-universal-attributes-accessibility.md)
    - [Attribute Modifier](ts-universal-attributes-attribute-modifier.md)
    - [Outline](ts-universal-attributes-outline.md)
    - Touch Interactions
      - [Touch Target](ts-universal-attributes-touch-target.md)
      - [Hit Test Control](ts-universal-attributes-hit-test-behavior.md)
    - Transition
      - [Modal Transition](ts-universal-attributes-modal-transition.md)
      - [Sheet Transition](ts-universal-attributes-sheet-transition.md)
    - [Obscuring](ts-universal-attributes-obscured.md)
    - [Universal Text Attributes](ts-universal-attributes-text-style.md)
    - [Drag and Drop Control](ts-universal-attributes-drag-drop.md)
    - [Safe Area](ts-universal-attributes-expand-safe-area.md)
    - [Special Effect Drawing Combination](ts-universal-attributes-use-effect.md)
    - [Render Fit](ts-universal-attributes-renderfit.md)
    - [Event Monopolization](ts-universal-attributes-monopolize-events.md)
    - [Cursor Control](ts-universal-attributes-cursor.md)
  - Gesture Handling
    - [Gesture Binding Methods](ts-gesture-settings.md)
    - Basic Gestures
      - [TapGesture](ts-basic-gestures-tapgesture.md)
      - [LongPressGesture](ts-basic-gestures-longpressgesture.md)
      - [PanGesture](ts-basic-gestures-pangesture.md)
      - [PinchGesture](ts-basic-gestures-pinchgesture.md)
      - [RotationGesture](ts-basic-gestures-rotationgesture.md)
      - [SwipeGesture](ts-basic-gestures-swipegesture.md)
    - [Combined Gestures](ts-combined-gestures.md)
    - [Custom Gesture Judgment](ts-gesture-customize-judge.md)
- Basic Components
  - [AlphabetIndexer](ts-container-alphabet-indexer.md)
  - [Blank](ts-basic-components-blank.md)
  - [Button](ts-basic-components-button.md)
  - [CalendarPicker](ts-basic-components-calendarpicker.md)
  - [Checkbox](ts-basic-components-checkbox.md)
  - [CheckboxGroup](ts-basic-components-checkboxgroup.md)
  - [DataPanel](ts-basic-components-datapanel.md)
  - [DatePicker](ts-basic-components-datepicker.md)
  - [Divider](ts-basic-components-divider.md)
  - [FormComponent](ts-basic-components-formcomponent.md)
  - [Gauge](ts-basic-components-gauge.md)
  - [Image](ts-basic-components-image.md)
  - [ImageAnimator](ts-basic-components-imageanimator.md)
  - [ImageSpan](ts-basic-components-imagespan.md)
  - [LoadingProgress](ts-basic-components-loadingprogress.md)
  - [Marquee](ts-basic-components-marquee.md)
  - [Menu](ts-basic-components-menu.md)
  - [MenuItem](ts-basic-components-menuitem.md)
  - [MenuItemGroup](ts-basic-components-menuitemgroup.md)
  - [Navigation](ts-basic-components-navigation.md)
  - [NavRouter](ts-basic-components-navrouter.md)
  - [NavDestination](ts-basic-components-navdestination.md)
  - [PatternLock](ts-basic-components-patternlock.md)
  - [PluginComponent](ts-basic-components-plugincomponent.md)
  - [Progress](ts-basic-components-progress.md)
  - [QRCode](ts-basic-components-qrcode.md)
  - [Radio](ts-basic-components-radio.md)
  - [Rating](ts-basic-components-rating.md)
  - [RemoteWindow](ts-basic-components-remotewindow.md)
  - [RichEditor](ts-basic-components-richeditor.md)
  - [RichText](ts-basic-components-richtext.md)
  - [ScrollBar](ts-basic-components-scrollbar.md)
  - [Search](ts-basic-components-search.md)
  - [Select](ts-basic-components-select.md)
  - [Slider](ts-basic-components-slider.md)
  - [Span](ts-basic-components-span.md)
  - [Stepper](ts-basic-components-stepper.md)
  - [StepperItem](ts-basic-components-stepperitem.md)
  - [SymbolSpan](ts-basic-components-symbolSpan.md)
  - [Text](ts-basic-components-text.md)
  - [TextArea](ts-basic-components-textarea.md)
  - [TextClock](ts-basic-components-textclock.md)
  - [TextInput](ts-basic-components-textinput.md)
  - [TextPicker](ts-basic-components-textpicker.md)
  - [TextTimer](ts-basic-components-texttimer.md)
  - [TimePicker](ts-basic-components-timepicker.md)
  - [Toggle](ts-basic-components-toggle.md)
  - [Web](ts-basic-components-web.md)
  - [XComponent](ts-basic-components-xcomponent.md)
- Container Components
  - [Badge](ts-container-badge.md)
  - [Column](ts-container-column.md)
  - [ColumnSplit](ts-container-columnsplit.md)
  - [Counter](ts-container-counter.md)
  - [EffectComponent](ts-container-effectcomponent.md)
  - [Flex](ts-container-flex.md)
  - [FlowItem](ts-container-flowitem.md)
  - [FormLink](ts-container-formlink.md)
  - [GridCol](ts-container-gridcol.md)
  - [GridRow](ts-container-gridrow.md)
  - [Grid](ts-container-grid.md)
  - [GridItem](ts-container-griditem.md)
  - [Hyperlink](ts-container-hyperlink.md)
  - [List](ts-container-list.md)
  - [ListItem](ts-container-listitem.md)
  - [ListItemGroup](ts-container-listitemgroup.md)
  - [Navigator](ts-container-navigator.md)
  - [Panel](ts-container-panel.md)
  - [Refresh](ts-container-refresh.md)
  - [RelativeContainer](ts-container-relativecontainer.md)
  - [Row](ts-container-row.md)
  - [RowSplit](ts-container-rowsplit.md)
  - [Scroll](ts-container-scroll.md)
  - [SideBarContainer](ts-container-sidebarcontainer.md)
  - [Stack](ts-container-stack.md)
  - [Swiper](ts-container-swiper.md)
  - [Tabs](ts-container-tabs.md)
  - [TabContent](ts-container-tabcontent.md)
  - [UIExtensionComponent](ts-container-ui-extension-component.md)
  - [WaterFlow](ts-container-waterflow.md)
- Media Components
  - [Video](ts-media-components-video.md)
- Drawing Components
  - [Circle](ts-drawing-components-circle.md)
  - [Ellipse](ts-drawing-components-ellipse.md)
  - [Line](ts-drawing-components-line.md)
  - [Polyline](ts-drawing-components-polyline.md)
  - [Polygon](ts-drawing-components-polygon.md)
  - [Path](ts-drawing-components-path.md)
  - [Rect](ts-drawing-components-rect.md)
  - [Shape](ts-drawing-components-shape.md)
- Canvas Components
  - [Canvas](ts-components-canvas-canvas.md)
  - [CanvasGradient](ts-components-canvas-canvasgradient.md)
  - [CanvasPattern](ts-components-canvas-canvaspattern.md)
  - [CanvasRenderingContext2D](ts-canvasrenderingcontext2d.md)
  - [ImageBitmap](ts-components-canvas-imagebitmap.md)
  - [ImageData](ts-components-canvas-imagedata.md)
  - [Matrix2D](ts-components-canvas-matrix2d.md)
  - [OffscreenCanvas](ts-components-offscreencanvas.md)
  - [OffscreenCanvasRenderingContext2D](ts-offscreencanvasrenderingcontext2d.md)
  - [Path2D](ts-components-canvas-path2d.md)
- Advanced Components
  - [@ohos.advertising.AdComponent (Non-Full-Screen Ad Component)](../apis/js-apis-adcomponent.md)
  - [@ohos.advertising.AutoAdComponent (Carousel Ad Component)](../apis/js-apis-autoadcomponent.md)
  - [@ohos.arkui.advanced.Chip (Chip)](ts-composite-components-chip.md)
  - [@ohos.arkui.advanced.ComposeListItem (List)](ts-composite-components-composelistitem.md)
  - [@ohos.arkui.advanced.ComposeTitleBar (One- or Two-Row Title Bar with Profile Picture)](ts-composite-components-composetitlebar.md)
  - [@ohos.arkui.advanced.Counter (Counter)](ohos-arkui-advanced-counter.md)
  - [@ohos.arkui.advanced.Dialog (Dialog Box)](ts-composite-components-dialog.md)
  - [@ohos.arkui.advanced.EditableTitleBar (Editable Title Bar)](ts-composite-components-editabletitlebar.md)
  - [@ohos.arkui.advanced.Filter (Advanced Filter)](ts-composite-components-filter.md)
  - [@ohos.arkui.advanced.ProgressButton (Download Button with Progress Indicator)](ts-composite-components-progressbutton.md)
  - [@ohos.arkui.advanced.Popup (Popup)](ohos-arkui-advanced-popup.md)
  - [@ohos.arkui.advanced.SegmentButton (Segment Button)](ohos-arkui-advanced-segmentbutton.md)
  - [@ohos.arkui.advanced.SelectionMenu (Context Menu on Selection)](ts-composite-components-selectionmenu.md)
  - [@ohos.arkui.advanced.SelectTitleBar (Drop-down Title Bar)](ts-composite-components-selecttitlebar.md)
  - [@ohos.arkui.advanced.SplitLayout (Split Layout)](ts-composite-components-splitlayout.md)
  - [@ohos.arkui.advanced.SubHeader (Subheader)](ts-composite-components-subheader.md)
  - [@ohos.arkui.advanced.SwipeRefresher (Swipe Refresher)](ts-composite-components-swiperefresher.md)
  - [@ohos.arkui.advanced.TabTitleBar (Tab Title Bar)](ts-composite-components-tabtitlebar.md)
  - [@ohos.arkui.advanced.ToolBar (Toolbar)](ts-composite-components-toolbar.md)
  - [@ohos.arkui.advanced.TreeView (Tree View)](ts-composite-components-treeview.md)
  - [@ohos.multimedia.avCastPicker (AVCastPicker)](ohos-multimedia-avcastpicker.md)
- Security Components
  - [Security Component Universal Attributes](ts-securitycomponent-attributes.md)
  - [LocationButton](ts-security-components-locationbutton.md)
  - [PasteButton](ts-security-components-pastebutton.md)
  - [SaveButton](ts-security-components-savebutton.md)
- Animation
  - [Property Animation (animation)](ts-animatorproperty.md)
  - [Explicit Animation (animateTo)](ts-explicit-animation.md)
  - Transition Animation
    - [Page Transition (pageTransition)](ts-page-transition-animation.md)
    - [Component Transition (transition)](ts-transition-animation-component.md)
    - [Transition of Shared Elements (sharedTransition)](ts-transition-animation-shared-elements.md)
    - [Implicit Shared Element Transition (geometryTransition)](ts-transition-animation-geometrytransition.md)
  - [Motion Path Animation (motionPath)](ts-motion-path-animation.md)
  - [Particle Animation (Particle)](ts-particle-animation.md)
- Global UI Methods
  - Dialog Boxes
    - [Alert Dialog Box (AlertDialog)](ts-methods-alert-dialog-box.md)
    - [Action Sheet (ActionSheet)](ts-methods-action-sheet.md)
    - [Custom Dialog Box (CustomDialog)](ts-methods-custom-dialog-box.md)
    - [Calendar Picker Dialog Box (CalendarPickerDialog)](ts-methods-calendarpicker-dialog.md)
    - [Date Picker Dialog Box (DatePickerDialog)](ts-methods-datepicker-dialog.md)
    - [Time Picker Dialog Box (TimePickerDialog)](ts-methods-timepicker-dialog.md)
    - [Text Picker Dialog Box (TextPickerDialog)](ts-methods-textpicker-dialog.md)
  - [Menu](ts-methods-menu.md)
- [Custom Component Lifecycle](ts-custom-component-lifecycle.md)
- [Custom Component Built-in APIs](ts-custom-component-api.md)
- [State Management with Application-level Variables](ts-state-management.md)
- [Pixel Units](ts-pixel-units.md)
- [Enums](ts-appendix-enums.md)
- [Types](ts-types.md)
- Components No Longer Maintained
  - [AbilityComponent](ts-container-ability-component.md)
  - [GridContainer](ts-container-gridcontainer.md)
- APIs No Longer Maintained
  - [Click Control](ts-universal-attributes-click.md)