# ArkUI

- [Introduction to ArkUI](../ui/arkui-overview.md)
- UI Development (ArkTS-based Declarative Development Paradigm)
  - [UI Development (ArkTS-based Declarative Development Paradigm) Overview](../ui/arkts-ui-development-overview.md)
  - Layout Development
    - [Layout Overview](../ui/arkts-layout-development-overview.md)
    - Building a Layout
      - [Linear Layout (Row/Column)](../ui/arkts-layout-development-linear.md)
      - [Stack Layout (Stack)](../ui/arkts-layout-development-stack-layout.md)
      - [Flex Layout (Flex)](../ui/arkts-layout-development-flex-layout.md)
      - [Relative Layout (RelativeContainer)](../ui/arkts-layout-development-relative-layout.md)
      - [Responsive Grid Layout (GridRow/GridCol)](../ui/arkts-layout-development-grid-layout.md)
      - [MediaQuery (@ohos.mediaquery)](../ui/arkts-layout-development-media-query.md)
      - [Creating a List (List)](../ui/arkts-layout-development-create-list.md)
      - [Creating a Grid (Grid/GridItem)](../ui/arkts-layout-development-create-grid.md)
      - [Creating a Swiper (Swiper)](../ui/arkts-layout-development-create-looping.md)
  - Adding a Component
    - Adding a Common Component
      - [Button](../ui/arkts-common-components-button.md)
      - [Radio Button (Radio)](../ui/arkts-common-components-radio-button.md)
      - [Toggle](../ui/arkts-common-components-switch.md)
      - [Progress Indicator (Progress)](../ui/arkts-common-components-progress-indicator.md)
      - [Text Display (Text/Span)](../ui/arkts-common-components-text-display.md)
      - [Text Input (TextInput/TextArea)](../ui/arkts-common-components-text-input.md)
      - [Displaying Images (Image)](../ui/arkts-graphics-display.md)
      - [Custom Dialog Box (CustomDialog)](../ui/arkts-common-components-custom-dialog.md)
      - [Video Playback (Video)](../ui/arkts-common-components-video-player.md)
      - [XComponent](../ui/arkts-common-components-xcomponent.md)
    - Adding a Popup and Menu
      - [Popup](../ui/arkts-popup-and-menu-components-popup.md)
      - [Menu](../ui/arkts-popup-and-menu-components-menu.md)
  - Setting Page Routing and Component Navigation
    - Navigation
      - [Navigation](../ui/arkts-navigation-navigation.md)
      - [Tabs](../ui/arkts-navigation-tabs.md)
    - [Page Routing (@ohos.router)](../ui/arkts-routing.md)
  - Using Graphics
    - [Drawing Geometric Shapes (Shape)](../ui/arkts-geometric-shape-drawing.md)
    - [Drawing Custom Graphics on the Canvas (Canvas)](../ui/arkts-drawing-customization-on-canvas.md)
  - Using Animation
    - [Animation Overview](../ui/arkts-animation.md)
    - Property Animation
      - [Property Animation Overview](../ui/arkts-attribute-animation-overview.md)
      - [Property Animation APIs](../ui/arkts-attribute-animation-apis.md)
      - [Custom Property Animation](../ui/arkts-custom-attribute-animation.md)
    - Transition Animation
      - [Transition Animation Overview](../ui/arkts-transition-overview.md)
      - [Enter/Exit Transition](../ui/arkts-enter-exit-transition.md)
      - [Navigation Transition](../ui/arkts-navigation-transition.md)
      - [Modal Transition](../ui/arkts-modal-transition.md)
      - [Shared Element Transition](../ui/arkts-shared-element-transition.md)
      - [Page Transition Animation (Not Recommended)](../ui/arkts-page-transition-animation.md)
    - [Component Animation](../ui/arkts-component-animation.md)
    - Animation Curve
      - [Animation Curve Overview](../ui/arkts-curve-overview.md)
      - [Traditional Curve](../ui/arkts-traditional-curve.md)
      - [Spring Curve](../ui/arkts-spring-curve.md)
    - [Animation Smoothing](../ui/arkts-animation-smoothing.md)
    - Animation Effects
      - [Blur Effect](../ui/arkts-blur-effect.md)
      - [Shadow Effect](../ui/arkts-shadow-effect.md)
      - [Color Effect](../ui/arkts-color-effect.md)
  - Using Interaction Events
    - [Interaction Event Overview](../ui/arkts-event-overview.md)
    - Universal Events
      - [Touchscreen Event](../ui/arkts-common-events-touch-screen-event.md)
      - [Keyboard and Mouse Event](../ui/arkts-common-events-device-input-event.md)
      - [Focus Event](../ui/arkts-common-events-focus-event.md)
    - Gesture Events
      - [Gesture Binding](../ui/arkts-gesture-events-binding.md)
      - [Single Gesture](../ui/arkts-gesture-events-single-gesture.md)
      - [Combined Gestures](../ui/arkts-gesture-events-combined-gestures.md)
- UI Development with JavaScript-compatible Web-like Development Paradigm
  - [UI Development with JavaScript-compatible Web-like Development Paradigm Overview](../ui/ui-js-overview.md)
  - Framework Overview
    - [File Organization](../ui/js-framework-file.md)
    - ["js" Tag](../ui/js-framework-js-tag.md)
    - [app.js](../ui/js-framework-js-file.md)
    - Syntax
      - [HML](../ui/js-framework-syntax-hml.md)
      - [CSS](../ui/js-framework-syntax-css.md)
      - [JavaScript](../ui/js-framework-syntax-js.md)
    - [Lifecycle](../ui/js-framework-lifecycle.md)
    - [Resource Limitations and Access](../ui/js-framework-resource-restriction.md)
    - [Multi-Language Capability](../ui/js-framework-multiple-languages.md)
  - Building the UI
    - [Component Overview](../ui/ui-js-building-ui-component.md)
    - Building a Layout
      - [Layout Description](../ui/ui-js-building-ui-layout-intro.md)
      - [Adding Title and Paragraph Text](../ui/ui-js-building-ui-layout-text.md)
      - [Adding an Image](../ui/ui-js-building-ui-layout-image.md)
      - [Adding a Comment](../ui/ui-js-building-ui-layout-comment.md)
      - [Adding a Container](../ui/ui-js-building-ui-layout-external-container.md)
    - [Adding Interactions](../ui/ui-js-building-ui-interactions.md)
    - [Developing Animations](../ui/ui-js-building-ui-animation.md)
    - [Defining Gesture Events](../ui/ui-js-building-ui-event.md)
    - [Defining Page Routes](../ui/ui-js-building-ui-routes.md)
  - Common Component Development Guidelines
    - Container Component Development
      - [List Development](../ui/ui-js-components-list.md)
      - [Dialog Development](../ui/ui-js-components-dialog.md)
      - [Form Development](../ui/ui-js-components-form.md)
      - [Stepper Development](../ui/ui-js-components-stepper.md)
      - [Tabs Development](../ui/ui-js-component-tabs.md)
      - [Swiper Development](../ui/ui-js-components-swiper.md)
    - Basic Component Development
      - [Text Development](../ui/ui-js-components-text.md)
      - [Input Development](../ui/ui-js-components-input.md)
      - [Button Development](../ui/ui-js-components-button.md)
      - [Picker Development](../ui/ui-js-components-picker.md)
      - [Image Development](../ui/ui-js-components-images.md)
      - [Image-animator Development](../ui/ui-js-components-image-animator.md)
      - [Rating Development](../ui/ui-js-components-rating.md)
      - [Slider Development](../ui/ui-js-components-slider.md)
      - [Chart Development](../ui/ui-js-components-chart.md)
      - [Switch Development](../ui/ui-js-components-switch.md)
      - [Toolbar Development](../ui/ui-js-components-toolbar.md)
      - [Menu Development](../ui/ui-js-components-menu.md)
      - [Marquee Development](../ui/ui-js-components-marquee.md)
      - [Qrcode Development](../ui/ui-js-components-qrcode.md)
      - [Search Development](../ui/ui-js-components-search.md)
    - Canvas Development
      - [Canvas](../ui/ui-js-components-canvas.md)
      - [CanvasRenderingContext2D](../ui/ui-js-components-canvasrenderingcontext2d.md)
      - [Path2D](../ui/ui-js-components-path2d.md)
      - [OffscreenCanvasRenderingContext2D](../ui/ui-js-components-offscreencanvas.md)
    - [Grid-container Development](../ui/ui-js-components-grid.md)
    - SVG Development
      - [Basics](../ui/ui-js-components-svg-overview.md)
      - [Graph Drawing](../ui/ui-js-components-svg-graphics.md)
      - [Path Drawing](../ui/ui-js-components-svg-path.md)
      - [Text Drawing](../ui/ui-js-components-svg-text.md)
  - Animation Development Guidelines
    - CSS Animation
      - [Defining Attribute Style Animations](../ui/ui-js-animate-attribute-style.md)
      - [Defining Animations with the transform Attribute](../ui/ui-js-animate-transform.md)
      - [Defining Animations with the background-position Attribute](../ui/ui-js-animate-background-position-style.md)
      - [Defining Animations for SVG Components](../ui/ui-js-animate-svg.md)
    - JavaScript Animation
      - [Component Animation](../ui/ui-js-animate-component.md)
      - Interpolator Animation
        - [Animation Effect](../ui/ui-js-animate-dynamic-effects.md)
        - [Animation Frame](../ui/ui-js-animate-frame.md)
  - [Custom Components](../ui/ui-js-custom-components.md)
- Window Manager
  - [Window Overview](../windowmanager/window-overview.md)
  - [Application Window Development (Stage Model)](../windowmanager/application-window-stage.md)
  - [Application Window Development (FA Model)](../windowmanager/application-window-fa.md)