Sha256: a82694edace5033343b29ac59a61307394b2a32fbe2171777e8c88d2ba519756

Contents?: true

Size: 1.43 KB

Versions: 2037

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,037 entries across 2,037 versions & 2 rubygems

Version Path
playbook_ui_docs-14.11.0.pre.rc.11 app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills.md
playbook_ui-14.11.0.pre.rc.11 app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills.md
playbook_ui_docs-14.11.0.pre.rc.10 app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills.md
playbook_ui-14.11.0.pre.rc.10 app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills.md
playbook_ui_docs-14.10.0.pre.alpha.play1662cssbargraph5214 app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills.md
playbook_ui-14.10.0.pre.alpha.play1662cssbargraph5214 app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills.md
playbook_ui_docs-14.10.0.pre.alpha.play1662cssbargraph5213 app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills.md
playbook_ui-14.10.0.pre.alpha.play1662cssbargraph5213 app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills.md
playbook_ui_docs-14.10.0.pre.alpha.play1662cssbargraph5210 app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills.md
playbook_ui-14.10.0.pre.alpha.play1662cssbargraph5210 app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills.md
playbook_ui_docs-14.10.0.pre.alpha.play1662cssbargraph5208 app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills.md
playbook_ui-14.10.0.pre.alpha.play1662cssbargraph5208 app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills.md
playbook_ui_docs-14.10.0.pre.alpha.play1662cssbargraph5207 app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills.md
playbook_ui-14.10.0.pre.alpha.play1662cssbargraph5207 app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills.md
playbook_ui_docs-14.10.0.pre.alpha.play16825206 app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills.md
playbook_ui-14.10.0.pre.alpha.play16825206 app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills.md
playbook_ui_docs-14.10.0.pre.alpha.play1662cssbargraph5204 app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills.md
playbook_ui-14.10.0.pre.alpha.play1662cssbargraph5204 app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills.md
playbook_ui_docs-14.10.0.pre.alpha.play1662cssbargraph5201 app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills.md
playbook_ui-14.10.0.pre.alpha.play1662cssbargraph5201 app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills.md