YaoDocs

外观

导航栏

样式修改 ​

文档：https://baidu.github.io/amis/zh-CN/style/index

  • 使用 css helper,引用方式：https://unpkg.com/amis@latest/sdk/sdk.css
  • 使用 className,大部分 amis 组件都有 className 或者 xxxClassName 的配置
  • 使用 xxClassname,
  • 在 page 下可以设置 cssVars 属性，通过它来动态修改 amis 内的 css 变量。
json
{
  "type": "page",
  "cssVars": {
    "--text-color": "#CD3632",
    "--primary": "#CD3632",
    "--primary-onHover": "#F23F3A",
    "--primary-onActive": "#BB312D"
  },
  "body": {
    "type": "form",
    "body": [
      {
        "type": "input-text",
        "label": "文本",
        "name": "text"
      },
      {
        "type": "input-password",
        "label": "密码",
        "name": "password"
      }
    ]
  }
}
  • 使用wrapperCustomStyle,如果在一个控件上配置这个参数，它会在 index.html 上自动生成一个 style 节点，并且在这个配置中的样式只能针对这个控件以及它的下面级别的元素,防止 css 污染。
json
{
  "wrapperCustomStyle": {
    ".cxd-Page-aside": {
      "min-width": "250px",
      "width": "auto"
    }
  }
}

比如表单可以很细致的配置外观。

json
{
  "type": "form",
  "id": "u:b0a15c69803d",
  "title": "表单",
  "mode": "flex",
  "labelAlign": "left",
  "dsType": "api",
  "feat": "Insert",
  "body": [
    {
      "type": "radios",
      "label": "单选框",
      "name": "radios",
      "options": [
        {
          "label": "选项A",
          "value": "A"
        },
        {
          "label": "选项B",
          "value": "B"
        }
      ],
      "row": 0,
      "id": "u:c18c333018dd",
      "inputClassName": "p-t-xs b-danger",
      "staticClassName": "m-r-none",
      "className": "m-t-xs",
      "itemClassName": "r-2x b-success text-success",
      "labelClassName": "text-warning",
      "colSize": "1/3"
    },
    {
      "type": "input-date",
      "label": "日期",
      "name": "date",
      "row": 0,
      "id": "u:e5996b390245",
      "inputClassName": "text-success",
      "labelClassName": "b-danger",
      "className": "b-warning r-2x",
      "embed": false,
      "colSize": "1/3"
    }
  ],
  "actions": [
    {
      "type": "button",
      "label": "提交",
      "onEvent": {
        "click": {
          "actions": [
            {
              "actionType": "submit",
              "componentId": "u:b0a15c69803d"
            }
          ]
        }
      },
      "level": "primary",
      "id": "u:dc9aaac3cf7f"
    }
  ],
  "resetAfterSubmit": true,
  "themeCss": {
    "panelClassName": {
      "border:default": {
        "top-border-style": "var(--borders-style-2)",
        "left-border-style": "var(--borders-style-2)",
        "right-border-style": "var(--borders-style-2)",
        "bottom-border-style": "var(--borders-style-2)"
      },
      "radius:default": {
        "top-right-border-radius": "var(--borders-radius-3)",
        "top-left-border-radius": "var(--borders-radius-4)"
      },
      "background:default": "#e1e4d5"
    },
    "bodyControlClassName": {
      "padding-and-margin:default": {
        "paddingTop": "var(--sizes-size-7)"
      }
    },
    "actionsControlClassName": {
      "border:default": {
        "top-border-style": "var(--borders-style-2)",
        "left-border-style": "var(--borders-style-2)",
        "right-border-style": "var(--borders-style-2)",
        "bottom-border-style": "var(--borders-style-2)",
        "top-border-color": "var(--colors-brand-6)",
        "left-border-color": "var(--colors-brand-6)",
        "right-border-color": "var(--colors-brand-6)",
        "bottom-border-color": "var(--colors-brand-6)"
      }
    },
    "headerControlClassName": {
      "border:default": {
        "top-border-style": "var(--borders-style-3)",
        "left-border-style": "var(--borders-style-3)",
        "right-border-style": "var(--borders-style-3)",
        "bottom-border-style": "var(--borders-style-3)"
      },
      "padding-and-margin:default": {
        "paddingTop": "var(--sizes-size-4)",
        "paddingRight": "var(--sizes-size-4)",
        "paddingBottom": "var(--sizes-size-4)",
        "paddingLeft": "var(--sizes-size-4)"
      },
      "background:default": "var(--colors-neutral-text-6)"
    }
  },
  "affixFooter": true,
  "wrapWithPanel": true,
  "className": "text-info text-xs font-thin",
  "panelClassName": "text-dark text-muted text-base font-normal r",
  "bodyClassName": "b-danger",
  "actionsClassName": "text-base",
  "wrapperCustomStyle": {
    "root": {
      "text-align": "right"
    }
  }
}