卡片組件以一定的界面樣式展示常用數據。例如展示設備屬性數據或接口返回的數值型數據。下文介紹組件的詳細配置方法。

步驟一：添加組件

  1. 創建Web應用。具體操作，請參見創建Web應用。
  2. 在Web應用編輯器中，單擊最左側的組件圖標組件。
  3. 在畫布左側組件列表上方，輸入卡片，找到該組件，然后將組件拖拽到中間畫布。

    有關組件添加的更多信息，請參見添加組件。

    卡片組件

步驟二：配置數據源

  1. 在Web應用編輯器右側樣式中，單擊展示數據后的配置數據源。
  2. 在數據源配置頁面，選擇數據源類型，完成配置。
    可選數據類型有設備、接口、應用推送。
    說明 接口或設備數據源返回的數據類型必須為單精度數字、雙精度數字、整數。
    數據源配置
  3. 單擊確定。

步驟三：配置樣式

  1. 在右側樣式中，設置卡片標題、數據單位、背景樣式和邊框樣式。
    樣式中有多個配置項支持配置數據源，可選設備、接口、應用推送。其中，填充顏色和邊框顏色僅支持配置接口和應用推送數據源。

    不同配置項支持的數據格式不同，數據源返回數據需與要求的數據格式保持一致。

    配置項數據格式
    填充顏色、邊框顏色RGB顏色的JSON格式。 
    {
  "r": 255,
  "g": 255,
  "b": 255
}

    或者

    {
  "r": 255,
  "g": 255,
  "b": 255,
  "a":0
}
    說明 其中a表示顏色透明度，取值范圍為0~100。
    邊框粗細整數，取值范圍為0~1000。
    邊框樣式 整數，取值范圍為0~2。

    對應線樣式的映射關系為（同下拉列表順序）：

    • 實線：0
    • 虛線：1
    • 點線：2
  2. 調整組件在頁面中的最終位置。有關組件通用樣式配置的更多信息，請參見樣式配置。

步驟四：配置交互動作

  1. 選中組件的交互頁簽，配置事件和交互動作。具體操作請參見交互配置。
    例如，點擊組件，執行動作打開鏈接，即配置鏈接打開方式，展示鏈接的內容。
  2. 單擊頁面右上方的預覽，預覽和調試組件展示的數據和效果。