跳到主要内容

自定义样式

该功能提供了 对卡片样式进行可视化配置 的能力，在不需要对卡片源码进行修改的前提下，通过数据配置，即可完成自定义样式修改。

功能组件​

在魔方后台，提供了自定义样式的功能组件，可直接录入配置信息。

数据定义​

通过功能组件进行配置后，会生成以下数据结构示例。

示例
{
  "customData": {
    "timeRangeType": "0",
    "bizType": "0",
    "class": ".cube-box",
    "platform": "all",
    "cityValue": []
  },
  "data": {
    "style": "margin:100px",
    "customTheme": [
      {
        "title": "卡片背景色",
        "useGradient": true,
        "cssvar": "--card-item-background",
        "cssval": "rgb(174, 43, 43)"
      },
      {
        "title": "标题栏背景色",
        "useGradient": true,
        "cssvar": "--title-bg-color",
        "cssval": "linear-gradient(180deg, rgb(0, 0, 0) 0.00%,rgba(183, 80, 174, 0.15) 100.00%)"
      },
      {
        "title": "按钮背景色",
        "useGradient": true,
        "cssvar": "--btn-color",
        "cssval": "linear-gradient(90deg, rgb(0, 0, 0) 0.00%,rgba(87, 65, 85, 0.92) 100.00%)"
      },
      {
        "title": "文字颜色",
        "useGradient": false,
        "cssvar": "--txt-color",
        "cssval": "rgb(206, 69, 69)"
      },
      {
        "title": "标题颜色",
        "useGradient": false,
        "cssvar": "--card-title-color",
        "cssval": "rgb(242, 73, 73)"
      },
      {
        "title": "副标题颜色",
        "useGradient": false,
        "cssvar": "--card-subtitle-color",
        "cssval": "rgb(191, 39, 39)"
      }
    ]
  }
}
字段名类型说明
customData.classstring卡片外层的自定义类名 （通常需要对卡片样式覆盖使用）
data.stylestring自定义内联样式
data.customTheme{title: string; useGradient: boolean; cssvar: string; cssval: string}[]自定义卡片主题色集合
data.customTheme[number].titlestring颜色变量标题（仅后台消费该字段）
data.customTheme[number].useGradientboolean是否支持渐变色 （仅后台消费该字段）
data.customTheme[number].cssvarstringcss 变量属性名
data.customTheme[number].cssvalstringcss 变量属性值

FAQ​

为什么在一些卡片中自定义样式中颜色配置不生效？

并非所有卡片都继承了这些变量，所以在一些卡片中自定义样式的颜色选择配置并不生效。