mirror of
https://github.com/bitwarden/browser
synced 2026-02-08 20:50:28 +00:00
5eb8d7b181
* rearrange button docs * Enhance avatar docs * Enhance badge docs * Enhance banner docs * add util to format args for snippets * update banner snippets * WIP * bind boolean args so they work correctly in Storybook * simplify button stories * Update callout docs * use title component for checkbox docs * use title and description component for chip select docs * update color password story docs * update disclosure docs * add import to icon docs * updated icon-button docs * update link docs * Update prgress docs * updated search field docs * remove html type definitions * add import for progress * updated toast docs * remove example from docs. format args for snippet * Update badges docs * handle array arg values correctly * Update badges list docs * fix dupe key error from taost story * remove unnecessary typeof check * remove banner usage example * add breadcrumbs import statement and jsdoc * add color password import statement * fixing type mismaches * fix typos * Add missing generics to format function * fix typo * update callout icon spacing to match Figma * add back max width container
109 lines
1.9 KiB
Plaintext
109 lines
1.9 KiB
Plaintext
import { Meta, Primary, Controls, Canvas, Title, Description } from "@storybook/addon-docs";
|
|
|
|
import * as stories from "./chip-select.stories";
|
|
|
|
<Meta of={stories} />
|
|
|
|
```ts
|
|
import { ChipSelectComponent } from "@bitwarden/components";
|
|
```
|
|
|
|
<Title />
|
|
<Description />
|
|
|
|
<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>
|
|
```
|