cla-picker

The Picker 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 buttons being nested in the group.

For icons - either include an icon id to user the picker with the cla-icon component or nest the icon image within the component.

<cla-picker-group multiselectable="false">
  <cla-item>
    <cla-label hidden="true">Hide</cla-label>
    <cla-picker pickername="card_shadow" id="no-card-shadow" value="0" iconid="glyphicons-basic-44-user-group"></cla-picker>
  </cla-item>
  <cla-item>
    <cla-label hidden="true">Show</cla-label>
    <cla-picker pickername="card_shadow" id="card-shadow" value="1">
        <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
block block if 'block="true"', 'block' or 'block="block"' (i.e. true) the picker will display as a block (<cla-item> orientate property must be set to 'vertical') boolean false
checked checked If true, the picker is selected. boolean false
disabled disabled If true, the user cannot interact with the picker. boolean false
displayinput displayinput If 'true', the picker will show the input (checkbox if multiselectable, radio if not) boolean false
iconid iconid cla-icon id e.g. glyphicons-basic-158-thumbnails-small string undefined
image image SVG image code string undefined
name name The element name submitted to the form string undefined
pickerLabelText picker-label-text The picker item text. string undefined
showlabeltext showlabeltext If 'true', the picker label text will be shown boolean true
value value Select input value any undefined

Events

Event Description Type
claPickerBlur Emitted when the picker loses focus. CustomEvent<void>
claPickerDeselect Emitted when the selected picker is clicked. CustomEvent<any>
claPickerDidLoad Emitted when the picker loads. CustomEvent<any>
claPickerFocus Emitted when the picker has focus. CustomEvent<void>
claPickerSelect Emitted when the picker is clicked. CustomEvent<any>

Slots

Slot Description
Slot for icon if not using the <cla-icon>

Dependencies

Depends on

Graph

graph TD;
  cla-picker --> cla-icon
  style cla-picker fill:#f9f,stroke:#333,stroke-width:4px

Built with StencilJS

UI Components