cla-picker-group

The Picker Group component.

Built using the Ionic Framework Radio / Radio Group for reference.

Currently cla-picker and cla-picker-group components must be used with each other, with the pickers being nested in the group.

When the multiselectable attribute is set to true a more than one cla-picker can be selected. Otherwise only a single option can be selected.

Single select cla-picker-group:

<cla-picker-group multiselectable="false">
  <cla-item orientate="horizontal">
    <cla-label hidden="true">Hide</cla-label>
    <cla-picker id="no-card-shadow" value="0" pickername="card_shadow">
      <svg xmlns="http://www.w3.org/2000/svg" width="50" height="35"><g id="border" fill="none" fill-rule="evenodd" stroke-width="2"><path d="M1 1h43v28H1z"></path></g></svg>
    </cla-picker>
  </cla-item>
  <cla-item orientate="horizontal">
    <cla-label hidden="true">Show</cla-label>
    <cla-picker disabled="true" id="no-card-shadow" value="1" pickername="card_shadow">
        <svg xmlns="http://www.w3.org/2000/svg" width="50" height="35"><g id="border" fill="none" fill-rule="evenodd"><path d="M6.8 29l5 5-5-5zm3.96 0l5 5-5-5zm3.96 0l5 5-5-5zm3.96 0l5 5-5-5zm3.95 0l5 5-5-5zm3.96 0l5 5-5-5zm3.95 0l5 5-5-5zm3.96 0l5 5-5-5zm3.96 0l5 5-5-5zm3.95 0l5 5-5-5zM44 26.63l5 5-5-5zm0-3.95l5 5-5-5zm0-3.96l5 5-5-5zm0-3.96l5 5-5-5zm0-3.95l5 5-5-5zm0-3.96l5 5-5-5zM6 32.15L7.85 34 6 32.15zM47.1 6L49 7.9 47.1 6z"></path><path stroke-width="2" d="M1 1h43v28H1z"></path><path stroke-width="2" d="M6 29v5h43.13V6H44"></path></g></svg>
    </cla-picker>
  </cla-item>
</cla-picker-group>

Properties

Property Attribute Description Type Default
multiselectable multiselectable Can more than one picker option be selected? boolean false

Built with StencilJS

UI Components