600 West

Ampselector: Tab Panels 

<amp-selector id="" class="flex flex-wrap" role="tablist" on="select:AMP.setState({selectedTab: event.targetOption})" [selected]="">
    <button class="button _secondary ma300 " option="a" selected>
        Tab One
    </button>

    <div id="" class=" db order-1 pa300 w-100p" role="tabpanel">
        <p id="" class="">
            Tab One content woo hoo wow
        </p>

    </div>

    <button class="button _secondary ma300 " option="b">
        Tab Two
    </button>

    <div id="" class=" db order-1 pa300 w-100p" role="tabpanel">
        <p id="" class="">
            Tab Two content woo hoo wow
        </p>

    </div>

    <button class="button _secondary ma300 " option="c">
        Tab three
    </button>

    <div id="" class=" db order-1 pa300 w-100p" role="tabpanel">
        <p id="" class="">
            Tab three content woo hoo wow
        </p>

    </div>

</amp-selector>

<amp-state id="State">
    <script type="application/json">
        {
            selectedTab:
        }
    </script>
</amp-state>
 
<amp-selector
    id="{{id}}"
    class="{{modifier}}"
    {{#if role}}role="{{role}}"{{/if}}
    {{#if selectorlayout}}layout="{{selectorlayout}}"{{/if}}
    {{#if name}}name="{{name}}"{{/if}}
    {{#if on}}on="{{on}}"{{/if}}
    {{#if multiple}}multiple{{/if}}
    {{#if selected}}[selected]="{{statevalue}}"{{/if}}
>
    {{> @children}}
</amp-selector>

{{#if state}}
    <amp-state id="{{id}}State">
        <script type="application/json">
            {
                {{state}}: {{statevalue}}
            }
        </script>
    </amp-state>
{{/if}}
 
{
  "id": null,
  "modifier": "flex flex-wrap",
  "style": null,
  "role": "tablist",
  "selectorlayout": null,
  "on": "select:AMP.setState({selectedTab: event.targetOption})",
  "state": "selectedTab",
  "statevalue": null,
  "multiple": null,
  "selected": true,
  "children": [
    {
      "component": "button",
      "context": {
        "modifier": "_secondary ma300",
        "text": "Tab One",
        "option": "a",
        "selected": true
      }
    },
    {
      "component": "div",
      "context": {
        "role": "tabpanel",
        "modifier": "db order-1 pa300 w-100p",
        "children": [
          {
            "component": "p",
            "context": {
              "text": "Tab One content woo hoo wow"
            }
          }
        ]
      }
    },
    {
      "component": "button",
      "context": {
        "modifier": "_secondary ma300",
        "text": "Tab Two",
        "option": "b"
      }
    },
    {
      "component": "div",
      "context": {
        "role": "tabpanel",
        "modifier": "db order-1 pa300 w-100p",
        "children": [
          {
            "component": "p",
            "context": {
              "text": "Tab Two content woo hoo wow"
            }
          }
        ]
      }
    },
    {
      "component": "button",
      "context": {
        "modifier": "_secondary ma300",
        "text": "Tab three",
        "option": "c"
      }
    },
    {
      "component": "div",
      "context": {
        "role": "tabpanel",
        "modifier": "db order-1 pa300 w-100p",
        "children": [
          {
            "component": "p",
            "context": {
              "text": "Tab three content woo hoo wow"
            }
          }
        ]
      }
    }
  ],
  "layout": "container"
}
  • Content: 
    amp-selector {
    [role="tabpanel"] {
        display: none;
    }
    [selected] + [role="tabpanel"] {
        display: block;
    }
}
  • URL: /components/raw/ampselector/AMPSelector.scss
  • Filesystem Path: components/molecules/AMPSelector/AMPSelector.scss
  • Size: 137 Bytes

AMPSelector

Represents a control that presents a menu of options and lets the user choose from it.

More information can be found in the AMP documentation.

Required Script

<script async custom-element="amp-selector" src="https://cdn.ampproject.org/v0/amp-selector-0.1.js"></script>

Best Practices

The AMP selector is a control that presents a list of options and lets the user choose one or many options; the contents of the options aren’t just limited to text.

  • An amp-selector can contain any arbitrary HTML elements or AMP components (e.g., amp-carousel, amp-img, etc.).
  • An amp-selector cannot contain any nested amp-selector controls.
  • Selectable options can be set by adding the option attribute to the element and assigning a value to the attribute (e.g., <li option='value'></li>).
  • Disabled options can be set by adding the disabled attribute to the element (e.g., <li option='d' disabled></li>).
  • Preselected options can be set by adding the selected attribute to the element (e.g., <li option='b' selected></li>).
  • To allow for multiple selections, add the multiple attribute to the amp-selector element. By default, the amp-selector allows for one selection at a time.
  • To disable the entire amp-selector, add the disabled attribute to the amp-selector element.
  • When an amp-selector contains a name attribute and the amp-selector is inside a form tag, if a submit event occurs on the form, the amp-selectorbehaves like a radio-button/checkbox group and submits the selected values (the ones assigned to the option) against the name of the amp-selector.

Accessibility

AMPSelector is accessible by keyboard and screenreader users according to WCAG 2.0 guidelines.