Skip to main content

Styles field

Setting type styles : Dùng để xuất ra một trường cho phép chọn styles cho element

Setting​

Field controls có 1 số loại type cho các css properties variables như: Name | Description color | Dùng cho field color đơn như color, background-color, border-color slider | Dùng cho field slider như border-width, font-size, letter-spacing, line-height, opacity, z-index number | Dùng cho field number như width, height, margin, padding, border-radius, border-width select | Dùng cho field select như font-weight buttonGroup | Dùng cho field buttonGroup như text-align, text-decoration, font-style, border-style shadow | Dùng cho field shadow như text-shadow, box-shadow gradient | Dùng cho field gradient như background-gradient font-family | Dùng cho field font-family image | Dùng cho field image như background-image video | Dùng cho field video như background-video

Include - Exclude​

Include - exclude (Incorporate) dùng để chọn các style cụ thể mà bạn muốn hiển thị hoặc ẩn đi Incorporate có 2 trường là include và exclude. Mỗi trường này sẽ chứa một mảng các style mà bạn muốn hiển thị hoặc ẩn đi Các element trong mảng có dạng fieldset.field Ví dụ: typography.color, spacing.padding Với field là * thì apply cho tất cả field trong fieldset đó, với field là tên cụ thể thì chỉ apply cho riêng field đó

{
  id: 'styles',
  type: 'styles',
  label: 'Styles',
  include: ['typography.color', 'spacing.padding'],
  exclude: ['effect.*', 'border.border-width'],
  default: {},
},

Khi truy cập giá trị styles dữ liệu được trả về dưới dạng :

{settings.styles}

Output

{
  normal: {
    typography: {
      color: {
        desktop: '#2r2r2r2',
      }
    },
    spacing: {
      padding: {
        desktop: {
          top: {
            value: 12,
            unit: 'px',
          },
          left: {
            value: 12,
            unit: 'px',
          },
          right: {
            value: 12,
            unit: 'px',
          },
          bottom: {
            value: 12,
            unit: 'px',
          }
        }
      }
    }
  }
}