Section

Collection Anchor Nav

2 个模板实例,15 个 section 配置,1 类 block。

真实模板变体

Schema

{
  "name": "Collection Anchor Nav",
  "tag": "section",
  "class": "section",
  "settings": [
    {
      "type": "text",
      "id": "section_id",
      "label": "Section ID",
      "default": "collection-anchor-navigation"
    },
    {
      "type": "text",
      "id": "aria_label",
      "label": "ARIA label",
      "default": "Collection navigation"
    },
    {
      "type": "checkbox",
      "id": "enable_sticky",
      "label": "Enable sticky behavior",
      "default": true
    },
    {
      "type": "range",
      "id": "max_width",
      "label": "Max width",
      "min": 960,
      "max": 1800,
      "step": 10,
      "default": 1310,
      "unit": "px"
    },
    {
      "type": "range",
      "id": "padding_top",
      "label": "Padding top",
      "min": 0,
      "max": 160,
      "step": 4,
      "default": 68,
      "unit": "px"
    },
    {
      "type": "range",
      "id": "padding_bottom",
      "label": "Padding bottom",
      "min": 0,
      "max": 200,
      "step": 4,
      "default": 140,
      "unit": "px"
    },
    {
      "type": "range",
      "id": "button_min_width",
      "label": "Button min width",
      "min": 80,
      "max": 220,
      "step": 4,
      "default": 144,
      "unit": "px"
    },
    {
      "type": "range",
      "id": "button_height",
      "label": "Button height",
      "min": 36,
      "max": 72,
      "step": 2,
      "default": 52,
      "unit": "px"
    },
    {
      "type": "range",
      "id": "button_gap",
      "label": "Button gap",
      "min": 4,
      "max": 40,
      "step": 2,
      "default": 22,
      "unit": "px"
    },
    {
      "type": "color",
      "id": "background_color",
      "label": "Background",
      "default": "#f5f5f5"
    },
    {
      "type": "color",
      "id": "active_background",
      "label": "Active background",
      "default": "#111111"
    },
    {
      "type": "color",
      "id": "active_text_color",
      "label": "Active text",
      "default": "#ffffff"
    },
    {
      "type": "color",
      "id": "inactive_background",
      "label": "Inactive background",
      "default": "#ececec"
    },
    {
      "type": "color",
      "id": "inactive_text_color",
      "label": "Inactive text",
      "default": "#9a9a9a"
    },
    {
      "type": "color",
      "id": "divider_color",
      "label": "Divider",
      "default": "#e2e2e2"
    }
  ],
  "blocks": [
    {
      "type": "nav_item",
      "name": "Navigation item",
      "settings": [
        {
          "type": "text",
          "id": "title",
          "label": "Title",
          "default": "All Product"
        },
        {
          "type": "url",
          "id": "link",
          "label": "Link"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "Collection Anchor Nav",
      "blocks": [
        {
          "type": "nav_item",
          "settings": {
            "title": "All Product",
            "link": "#all-product"
          }
        },
        {
          "type": "nav_item",
          "settings": {
            "title": "Accessory",
            "link": "#accessory"
          }
        },
        {
          "type": "nav_item",
          "settings": {
            "title": "Comparison",
            "link": "#comparison"
          }
        }
      ]
    }
  ]
}