Skip to content

docs(chips): Update OVERVIEW.md with more info. #2341

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 15 additions & 5 deletions src/lib/chips/OVERVIEW.md
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
`<md-chip-list>` displays a list of values as individual chips.
`<md-chip-list>` displays a list of values as individual, keyboard accessible, chips.

<!-- example(chips-overview) -->

Expand All @@ -16,15 +16,25 @@ _Note: chips are still early in their development and more features are being ac
By default, `<md-chip>` has Material Design styles applied. For a chip with no styles applied,
use `<md-basic-chip>`. You can then customize the chip appearance by adding your own CSS.

_Hint: `<md-basic-chip>` receives the `md-basic-chip` CSS class in addition to the `md-chip` class._

### Selection
Chips can be selected via the `selected` property. Selection can be disabled by setting
`selectable` to `false` on the `<md-chip-list>`.
`selectable` to `false` on the `<md-chip-list>`.

Selection emits the `(select)` output while deselecting emits the `(deselect)` output. Both outputs
receive a ChipEvent object with a structure of `{ chip: alteredChip }`.

### Disabled chips
Individual chips may be disabled by applying the `disabled` attribute to the chip. When disabled,
chips are neither selectable nor focusable. Currently, disabled chips receive no special styling.

### Keyboard interation
Users can move through the chips using the arrow keys and select them with the space.
### Keyboard interaction
Users can move through the chips using the arrow keys and select/deselect them with the space. Chips
also gain focus when clicked, ensuring keyboard navigation starts at the appropriate chip.


### Theming
The color of an `<md-chip>` can be changed by using the `color` property. By default, chips
The selected color of an `<md-chip>` can be changed by using the `color` property. By default, chips
use a neutral background color based on the current theme (light or dark). This can be changed to
`'primary'`, `'accent'`, or `'warn'`.