Sha256: a82694edace5033343b29ac59a61307394b2a32fbe2171777e8c88d2ba519756

Contents?: true

Size: 1.43 KB

Versions: 2096

Compression:

Stored size: 1.43 KB

Contents

Typeahead kit is data-driven. The minimum default fields are `label` and `value`.

This is an example of an option: `{ label: 'Windows', value: '#FFA500' }`

#### Rails: Default Options

You can also pass `default_options` which will populate the initial pill selections:

`default_options: [{ label: 'Windows', value: '#FFA500' }]`

#### Rails: Subscribing to JS Events

JavaScript events are triggered based on actions you take within the kit such as selection, removal and clearing.
This kit utilizes a default `id` prop named `react-select-input`. It is **highly advised** to send your own unique `id` prop when using this kit to ensure these events do not unintentionally affect other instances of the kit in the same view. The examples below will use the unique `id` prop named `typeahead-pills-example1`:

`pb-typeahead-kit-typeahead-pills-example1-result-option-select` event to perform custom work when an option is clicked.
`pb-typeahead-kit-typeahead-pills-example1-result-option-remove` event to perform custom work when a pill is clicked.
`pb-typeahead-kit-typeahead-pills-example1-result-option-clear` event to perform custom work when all pills are removed upon clicking the X.

#### Rails: Publishing JS Events

The same rule regarding the `id` prop applies to publishing JS events. The examples below will use the unique `id` prop named `typeahead-pills-example1`:

`pb-typeahead-kit-typeahead-pills-example1:clear` event to clear all options.

Version data entries

2,096 entries across 2,096 versions & 2 rubygems

Version Path
playbook_ui-10.16.0 app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills.md
playbook_ui-10.15.1 app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills.md
playbook_ui-10.15.1.pre.alpha.rubocop.deps app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills.md
playbook_ui-10.15.0 app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills.md
playbook_ui-10.14.1.pre.alpha2 app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills.md
playbook_ui-10.14.1.pre.alpha1 app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills.md
playbook_ui-10.14.0 app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills.md
playbook_ui-10.13.1 app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills.md
playbook_ui-10.13.0 app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills.md
playbook_ui-10.13.0.pre.node.update app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills.md
playbook_ui-10.12.0 app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills.md
playbook_ui-10.11.0 app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills.md
playbook_ui-10.10.0 app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills.md
playbook_ui-10.9.0 app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills.md
playbook_ui-10.8.1.pre.alpha.flexdeps app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills.md
playbook_ui-10.9.0.pre.alpha1 app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills.md
playbook_ui-10.8.0 app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills.md
playbook_ui-10.7.1 app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills.md
playbook_ui-10.7.0 app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills.md
playbook_ui-10.6.2.pre.alpha.dep app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills.md