koi-ticker-boards

Chart style

The Koi Flip List simulates a multi-winner prize draw.

Style Panel

• Search Configuration: Click the Search configuration items icon in the upper-right corner of the Style panel. In the Search Configuration panel, enter the name of the configuration items that you want to search for and locate the configuration items. Fuzzy match is supported. For more information, see Search configuration items.

  • Size: the width and height of the widget. Unit: pixels.

  • Positioning: the x-axis and y-axis of the component. Unit: pixels. 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.

  • Rotate: The widget is rotated around the center of the widget. Unit: degrees.

    • 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.

    • Click the icon to flip the widget style.

    • Click the icon to flip the widget style.

  • Opacity: Valid values: 0 to 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.

• Global Settings: the global layout of the Koi Flip List, including the number of horizontal and vertical items and the row spacing. Unit: pixels.

• Prefix: the prefix content displayed before each list item.

  Metric	description
  Width	The width of the prefix area. Unit: px.
  Spacing	The horizontal spacing between the prefix and adjacent content. Unit: px.
  Content Type	The content type of the prefix. Valid values: Text and Image.
  Text Content	The text content of the prefix. Available only when Text is selected for Content Type.
  Text Settings	The font settings of the prefix text, including font style, weight, size, and color. Available only when Content Type is set to Text.
  Shadow	The text shadow style, including horizontal and vertical offset, blur radius, and shadow color. Available only when Content Type is set to Text.
  Image	The image to use as the prefix. To use a remote image, enter its URL. Click Preview to preview the image. Click Change below the image box to replace it. For more information, see Use the interface. Available only when Content Type is set to Image.
  Dimensions	The width and height of the image. Unit: px.
  Fillet	The border radius of the image. Unit: pixels. A value of 0 produces square corners. Higher values produce larger rounded corners.

• Flower Name: the display name shown on each flip card.

  Metric	description
  Width	The overall width of the flower name area. Unit: px.
  Spacing	The horizontal spacing between the flower name and adjacent content. Unit: px.
  Pre-award copywriting	The placeholder text displayed before the draw begins.
  Text Settings	The font settings for the flower name text, including font style, weight, size, and color.
  Shadow	The shadow style of the flower name text, including horizontal and vertical offset, blur radius, and shadow color.

• Labor Number: the employee number section of the Koi Flip List.

  Metric	description
  Number of bits	The number of digits in the employee number.
  Allow Scrolling Numbers	The allowed scrolling numbers, separated by commas. Click the or icon to add or remove a number series. Click the or icon to reorder number series. Click the icon to duplicate a number series.
  Time Interval	The minimum and maximum scrolling time interval. Unit: ms.
  Text Settings	The font settings for the employee number, including font style, weight, size, and color.

• Suffix: the suffix content displayed after each list item.

  Metric	description
  Width	The width of the suffix area. Unit: px.
  Spacing	The horizontal spacing between the suffix and adjacent content. Unit: px.
  Content Type	The content type of the suffix. Valid values: Text and Image.
  Text Content	The text content of the suffix. Available only when Content Type is set to Text.
  Text Settings	The font settings for the suffix text, including font style, weight, size, and color. Available only when Content Type is set to Text.
  Shadow	The text shadow style, including horizontal and vertical offset, blur radius, and shadow color. Available only when Content Type is set to Text.
  Image	The image to use as the suffix. To use a remote image, enter its URL. Click Preview to preview the image. Click Change below the image box to replace it. For more information, see Use the interface. Available only when Content Type is set to Image.
  Dimensions	The width and height of the image. Unit: px.
  Fillet	The border radius of the image. Unit: pixels. A value of 0 produces square corners. Higher values produce larger rounded corners.

Data Sources panel

Advanced Panel

This component has no event configuration.

Blueprint Interaction

1. Click the icon in the upper-left corner to go to the Blueprint page.

2. On the Layer Nodes tab, add the widget to the main canvas.

3. View blueprint configuration parameters.

   • Event

     Event	Description
     When the data interface request is completed	Triggered after a data interface request is completed and filtered. The event carries the processed JSON data. For data examples, see the Data Response Result section on the Data Source tab in the canvas editor.

   • Action

     Action	Description
     Import data	Imports pre-formatted data into the widget for redrawing without re-requesting the server. See the data example below. [ { "id": "000000", "name": "Koi" } ]
     Request Data Interface	Requests server data again using parameters from an upstream data processing node or layer node. For example, if the API data source is https://api.test and the passed data is { id: '1'}, the final request URL becomes https://api.test?id=1.
     Stop a password change task	Stops scrolling at a specified digit position. See the data example below. { "index": 1 // The index number of digits, starting from the highest digit. 0 is the starting number. }
     Publish List	Publishes the list. No parameters required.
     Start tumbling	Starts the number scrolling animation. No parameters required.
     Clear Status	Clears all widget states. No parameters required.
     Move	Moves the widget to a specified location. See the data example below. { // 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 animation delay. Unit: milliseconds. "animationDuration": 1000, // The animation curve, which can be set to linear|easeInOutQuad|easeInOutExpo. "animationEasing": "linear" } }
     Switch Display /Display	Toggles widget visibility. No parameters required.
     Display	Shows the widget. See the data example below. { "animationType": "",// The animation method. Valid value: fade. If you do not specify this parameter, no animation is generated. "animationDuration": 1000,// The animation delay. Unit: ms. "animationEasing": ""// animation curve }
     Hide	Hides the widget. See the data example below. { "animationType": "",// The animation method. Valid value: fade. If you do not specify this parameter, no animation is generated. "animationDuration": 1000,// The animation delay. Unit: ms. "animationEasing": ""// animation curve }
     Update component configurations	Dynamically updates widget style configurations. In the Style panel, click Copy Configuration to Clipboard to obtain the configuration data, then modify the style field in the data processing node of Blueprint Editor.