Full-screen switch allows you to switch between icons and background styles, and allows you to customize background display and concealment. You can flexibly switch between full-screen and small-screen displays. This topic describes the configuration items of the full screen switch.

Parameter

  • Search for Configurations: In the right-side panel of Canvas Editor, click the Settings tab, and click Search for Configurations in the upper-right corner. Enter the required configuration item in the search box, and click the search icon to quickly locate the configuration item. Fuzzy match is supported. For more information, see Search for widget configuration items.
  • Size: indicates the size of a widget, including its pixel width and height. You can click the Proportional resizing icon to proportionally adjust the width and height of a widget. After you click this icon again, you can adjust the width and height as needed.
  • Position: the position of a widget, which is indicated by pixel X and Y coordinates. X-coordinate indicates the pixel distance between the upper-left corner of the widget and the left border of the canvas. Y-coordinate indicates the pixel distance between the upper-left corner of the widget and the upper border of the canvas.
  • Rotation Angle: the angle of a rotation that uses the center point of a widget as the rotation point. The unit is degrees (°). You can use one of the following methods to control the rotation angle of a widget:
    • Directly enter the degrees in the Rotation Angle spin box or click the plus sign (+) or minus sign (-) to increase or decrease the value in the Rotation Angle spin box.
    • Drag the black dot in the Rotation control icon icon.
    • Click the Horizontal flip icon to horizontally flip a widget.
    • Click the Vertical flip icon to vertically flip a widget.
  • Opacity: the opacity of a widget. Valid values: 0 and 1. If this parameter is set to 0, the widget is hidden. If this parameter is set to 1, the widget is completely displayed. Default value: 1.
  • Enter: the icon to enter the full screen mode. If you want to use an image on a remote server, enter the URL of the image in the upper-right corner. Click Preview in the upper-right corner to preview the image style. Click Change in the dotted line box below the image input box to change the image design asset.Style settings of a full screen switch
  • Exit: the icon to exit the full screen mode. If you want to use an image on a remote server, enter the URL of the image in the upper-right corner. Click Preview in the upper-right corner to preview the image style. Click Change in the dotted line box below the image input box to change the image design asset.
  • Background Color: the background color of the icons. For more information, see Color picker.
  • Border Radius: the shape of the background. Default value: 50%, which indicates that the background is a circle. If you set the value to 0%, the background is a square.
    Note If the widget is not a square, the background is an ellipse when you set Border Radius to 50%.
  • Show Background Image: If you turn on the switch, the background always shows. If you turn off the switch, the background shows only when you move the pointer over the full screen switch.
Note You can view the style of the full screen switch only on the preview or publish page.
Preview of a full screen switch

Data

This widget does not support data configuration.

Interaction

This component does not need to configure interactive events.

Configure interactions in Blueprint Editor

  1. In Canvas Editor, right-click a widget in the Layer panel and select Add to Blueprint Editor.
  2. Click the Blueprint Editor icon icon in the upper-left corner of the page.
  3. In the blueprint editor, click Full Screen Switch in the Added Nodes pane. You can configure the widget parameters on the canvas. Events and actions supported by a button
    • Event
      Event Description
      On entering the full screen mode This event is triggered when you enter the full screen mode and does not need parameter input.
      On exiting the full screen mode This event is triggered when you exit the full screen mode and does not need parameter input.
    • Action
      Action Description
      Enter Full Screen Mode This action enters the full screen mode and does not need parameter input.
      On exiting the full screen mode This action enters the full screen mode and does not need parameter input.
      Update Widget Configurations Style configurations of widgets are dynamically updated. Before this action is executed, you must click the widget in Canvas Editor, click the Settings tab in the right-side panel, and click Copy Configurations to... to obtain widget configurations. After that, change the style field for the data processing node in Blueprint Editor.
      Show A widget is shown without the need to specify parameters.
      Hide A widget is hidden without the need to specify parameters.
      Hide/Show A widget is hidden or shown.
      Move A widget is moved to a specified location. The following example shows the reference data.
          {
            // The positioning type. to indicates absolute positioning, whereas by indicates relative positioning. The default value is to. 
              "positionType": "to",
            // The location, which is indicated by the x and y coordinates. 
            "attr": {
              "x": 0,
              "y": 0
            },
            // The animation type. 
            "animation": {
              "enable": false,
              // The duration in which animation is displayed. 
              "animationDuration": 1000,
              // The animation curve, which can be set to linear|easeInOutQuad|easeInOutExpo. 
              "animationEasing": "linear"
            }
          }