Skip to main content

Element config

Config tên, các trường dữ liệu cho người dùng có thể nhập

Chi tiết các trường dữ liệu​

  1. type Có 3 loại element là element và wrapper

element: là loại element nhỏ nhất không chứa element khác

wrapper: là loại element có chứa children là 1 element khác Xem chi tiết hơn

group: là loại chỉ có duy nhất file config.ts, là element gộp của element và wrapper

  1. label là tên của element
  2. labelSync là trường đặc biệt sync với trường trong schema dành cho text khi muốn hiển thị tại sidebar của editor
  3. icon chọn các icon tại polaris icon hoặc icon của mình
  4. categories là các danh mục của element
  5. schema là lược đồ dữ liệu khi người dùng nhập và in ra phía template

Chú ý ElementsEntity ta có 3 loại tương ứng như trên​

element: ElementsEntity.DynamicElement

wrapper: ElementsEntity.WrapperElement

group: ElementsEntity.GroupElement

Ví dụ​

import { ElementsEntity } from "@xobuilder/entities";

export const config: Omit<ElementsEntity.DynamicElement, 'id' | 'template'> = {
  type: "element",
  label: "Heading",
  labelSync: 'element.settings.title',
  icon: "AccessibilityMajor",
  categories: ["basic"],
  schema: [
    {
      id: "title",
      type: "text",
      label: "Heading text1",
      default: "This is your heading text",
    },
    {
      // Đối với những dữ liệu liên quan tới việc cần compile lại code liquid thì giá trị của id phải có $ đằng trước
      id: "$collection",
      type: "collection",
      label: "Collection",
      default: "best-seller",
    }
  ],
};