mirror of
https://github.com/bitwarden/browser
synced 2026-02-07 20:24:01 +00:00
110 lines
2.0 KiB
Plaintext
110 lines
2.0 KiB
Plaintext
import { Meta, Primary, Controls, Canvas } from "@storybook/addon-docs";
|
|
|
|
import * as stories from "./chip-select.stories";
|
|
|
|
<Meta of={stories} />
|
|
|
|
```ts
|
|
import { ChipSelectComponent } from "@bitwarden/components";
|
|
```
|
|
|
|
# Chip Select
|
|
|
|
`<bit-chip-select>` is a select element that is commonly used to filter items in lists or tables.
|
|
|
|
<Canvas of={stories.Default} />
|
|
|
|
## Options
|
|
|
|
Options are passed to the select via an `options` input.
|
|
|
|
```ts
|
|
@Component({
|
|
selector: `
|
|
<bit-chip-select options=[options]></bit-chip-select>
|
|
`,
|
|
})
|
|
class MyComponent {
|
|
protected options = [
|
|
{
|
|
label: "Foo",
|
|
value: "foo",
|
|
icon: "bwi-folder",
|
|
},
|
|
{
|
|
label: "Bar",
|
|
value: "bar",
|
|
icon: "bwi-exclamation-triangle tw-text-danger",
|
|
},
|
|
{
|
|
label: "Baz",
|
|
value: "baz",
|
|
disabled: true,
|
|
},
|
|
];
|
|
}
|
|
```
|
|
|
|
### Option Trees
|
|
|
|
Nested trees of options are also supported by passing an array of options to `children`.
|
|
|
|
```ts
|
|
const options = [
|
|
{
|
|
label: "Foo0",
|
|
value: "foo0",
|
|
icon: "bwi-folder",
|
|
children: [
|
|
{
|
|
label: "Foo1",
|
|
value: "foo1",
|
|
icon: "bwi-folder",
|
|
children: [
|
|
{
|
|
label: "Foo2",
|
|
value: "foo2",
|
|
icon: "bwi-folder",
|
|
children: [
|
|
{
|
|
label: "Foo3",
|
|
value: "foo3",
|
|
},
|
|
],
|
|
},
|
|
],
|
|
},
|
|
],
|
|
},
|
|
{
|
|
label: "Bar",
|
|
value: "bar",
|
|
icon: "bwi-folder",
|
|
},
|
|
{
|
|
label: "Baz",
|
|
value: "baz",
|
|
icon: "bwi-folder",
|
|
},
|
|
];
|
|
```
|
|
|
|
<Canvas of={stories.NestedOptions} />
|
|
|
|
## Placeholder Content
|
|
|
|
Placeholder content is shown when no item is selected.
|
|
|
|
```html
|
|
<bit-chip-select placeholderText="Foo" placeholderIcon="bwi-key"> </bit-chip-select>
|
|
```
|
|
|
|
## Reading the current value
|
|
|
|
The component implements `ControlValueAccessor`, so the current selected value can be read via
|
|
`ngModel` or `[formControlName]`.
|
|
|
|
```html
|
|
<bit-chip-select [(ngModel)]="..."></bit-chip-select>
|
|
```
|