The WYSIWYG designer comes with more than 80 components to fully meet your needs for building basic pages. This topic describes the default components of the WYSIWYG designer.

Layout components

The layout components include a 24-grid system component.

  • Grid Ratio

    By default, the system splits the 24-grid component with a ratio of 12:12. You can also set the grids to other common ratios or customize a ratio. When customizing a ratio, make sure that the sum of grids in the ratio is 24. The system splits the layout based on the grid ratio that you set.

  • Horizontal Arrangement
    This parameter specifies the arrangement of grids in the parent node.

  • Vertical Arrangement
    This parameter specifies the vertical alignment mode of sub-elements.

  • Grid Gutter
    Grids are usually separated by gutters. You can set this parameter to specify the width of the gutter.

  • Block Container

    A block container component can be used as the parent component of certain components. It is similar to the div container in HTML.

Basic components

All basic components support common property settings related to components.

  • Text
    • Text
    • Paragrap
      • Component Size

        This parameter specifies the size of text in a paragraph.

      • Paragraph Display Method

        A paragraph is used to distinguish short text from long text. The line spacing of short text is smaller (usually fewer than three lines).

  • Media
    • Video
      • Video Url: specifies the URL of the video to be played.
      • Thumbnail Url: specifies the URL of the video thumbnail.
      • Enable Automatic Playback: specifies whether to automatically play the video after the component is loaded.
    • Image

      Image Url: specifies the URL of the image to be displayed. You can upload an image.

  • Icon
    • Icon Size

      This parameter specifies the display size of the icon.

    • Icon Type

      This parameter specifies the type of the icon.

  • Button

    For more information about the button properties, see Button documentation.

  • Link
    • Link Text: specifies the displayed text of the link.
    • Link Url: specifies the URL to be jumped to.
    • Link Property: specifies whether to open the link in the current window or in a new window.

Form components

Forms can be classified into in-line forms, horizontal forms, and vertical forms.

For more information about how to upload images and attachments, see Upload.

For more information about how to filter data, see Search.

For more information about the input box, see Input.

Chart components

  • Data table
    Parameter Description
    Data Source The API address to which a request is sent.
    Request Method The request method. Valid values: Get, Post, Put, and Delete.
    Search Parameters The requested parameter.
    Response Data Processing Function The function that processes data returned by the API.
    Table Columns The column to be displayed in the data table.
    Table Size The size of the table.
    Show Table Border Specifies whether to display the table borders.
    Show Table Header Specifies whether to display the table header.

    For paged data tables, you can also specify the number of records that are displayed on each page.

  • Excel table
    Parameter Description
    Data Source The API address to which a request is sent.
    Request Method The request method. Valid values: Get, Post, Put, and Delete.
    Search Parameters The requested parameter.
    Response Data Processing Function The function that processes data returned by the API.
    Data The data to be displayed in the Excel table.
  • Line chart
    Parameter Description
    Data Source The API address to which a request is sent.
    Request Method The request method. Valid values: Get, Post, Put, and Delete.
    Search Parameters The requested parameter.
    Response Data Processing Function The function that processes data returned by the API.
    Chart Configuration The code used to configure the chart.
    Show Chart Title Specifies whether to display the chart title.
    Chart Title The chart title to be displayed.
    Chart Data The data to be displayed on the chart.
    X-axis Field The name of the field to be displayed on the X axis in the returned data.
    Y-axis Field The name of the field to be displayed on the Y axis in the returned data.
    Note You can configure components in a column chart, bar chart, area chart, pie chart, map, word cloud, or scatter chart in the same way as configuring a line chart.

Advanced components

All advanced components support common property settings related to components.

  • Selection-oriented components include Select, Checkbox, CascadeSelect, Radio, Range, Switch, and Rating.
  • Tab: This component is used to switch between tasks, views, and modes. It is used for global navigation and allows you to view and switch between global features. For more information, see Tab.
  • Slider: This component is used to horizontally display various content on the page as slides. For more information, see Slider.
  • Step: This component is used for display by default. For an upper-layer component, you can modify the value of the current parameter to set the current step number. You can also set the click event on each node to customize a callback. For more information, see Step.
  • Progress: This component is used to display the current progress of your operation. For more information, see Progress.
  • Menu: You can select a menu as required. For more information, see Menu.
  • Nav: This component consists of the top navigation and side navigation. The top navigation provides global categories and features, while the side navigation provides a multi-level structure to display and arrange website architectures. For more information, see Nav.