-
Notifications
You must be signed in to change notification settings - Fork 2.1k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(chips): Baseline chip and chip set (#2083)
BREAKING CHANGE: A new package `mdc-chip` has been added.
- Loading branch information
1 parent
3bb4382
commit 17c6c51
Showing
26 changed files
with
1,010 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,84 @@ | ||
| <!DOCTYPE html> | ||
| <!-- | ||
| Copyright 2016 Google Inc. All rights reserved. | ||
| Licensed under the Apache License, Version 2.0 (the "License"); | ||
| you may not use this file except in compliance with the License. | ||
| You may obtain a copy of the License at | ||
| https://www.apache.org/licenses/LICENSE-2.0 | ||
| Unless required by applicable law or agreed to in writing, software | ||
| distributed under the License is distributed on an "AS IS" BASIS, | ||
| WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. | ||
| See the License for the specific language governing permissions and | ||
| limitations under the License | ||
| --> | ||
| <html> | ||
| <head> | ||
| <meta charset="utf-8"> | ||
| <title>Chips - Material Components Catalog</title> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1"> | ||
| <link rel="icon" type="image/png" href="/images/logo_components_color_2x_web_48dp.png"> | ||
| <link rel="stylesheet" href="/assets/chips.css"> | ||
| <script src="/ready.js"></script> | ||
| <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto+Mono"> | ||
| <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500"> | ||
| <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"> | ||
| </head> | ||
| <body class="mdc-typography"> | ||
| <header class="mdc-toolbar mdc-toolbar--fixed"> | ||
| <div class="mdc-toolbar__row"> | ||
| <section class="mdc-toolbar__section mdc-toolbar__section--align-start"> | ||
| <span class="catalog-back"> | ||
| <a href="/" class="mdc-toolbar__menu-icon"><i class="material-icons"></i></a> | ||
| </span> | ||
| <span class="mdc-toolbar__title catalog-title">Chips</span> | ||
| </section> | ||
| </div> | ||
| </header> | ||
|
|
||
| <main class="mdc-toolbar-fixed-adjust"> | ||
| <section class="hero"> | ||
| <div class="mdc-chip-set"> | ||
| <div class="demo-chip mdc-chip"> | ||
| <div class="mdc-chip__text">Chip One</div> | ||
| </div> | ||
| <div class="demo-chip mdc-chip"> | ||
| <div class="mdc-chip__text">Chip Two</div> | ||
| </div> | ||
| <div class="demo-chip mdc-chip"> | ||
| <div class="mdc-chip__text">Chip Three</div> | ||
| </div> | ||
| <div class="demo-chip mdc-chip"> | ||
| <div class="mdc-chip__text">Chip Four</div> | ||
| </div> | ||
| </div> | ||
| </section> | ||
|
|
||
| <section class="example"> | ||
| <div class="mdc-chip-set"> | ||
| <div class="demo-chip mdc-chip"> | ||
| <div class="mdc-chip__text">Add to Calendar</div> | ||
| </div> | ||
| <div class="demo-chip mdc-chip"> | ||
| <div class="mdc-chip__text">Bookmark</div> | ||
| </div> | ||
| <div class="demo-chip mdc-chip"> | ||
| <div class="mdc-chip__text">Set Alarm</div> | ||
| </div> | ||
| <div class="demo-chip mdc-chip"> | ||
| <div class="mdc-chip__text">Get Directions</div> | ||
| </div> | ||
| </div> | ||
| </section> | ||
| </main> | ||
|
|
||
| <script src="/assets/material-components-web.js" async></script> | ||
| <script> | ||
| demoReady(function() { | ||
| var chipSets = document.querySelectorAll('.mdc-chip-set'); | ||
| [].forEach.call(chipSets, function(chipSet) { | ||
| mdc.chips.MDCChipSet.attachTo(chipSet); | ||
| }); | ||
| }); | ||
| </script> | ||
| </body> | ||
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,18 @@ | ||
| // | ||
| // Copyright 2017 Google Inc. All Rights Reserved. | ||
| // | ||
| // Licensed under the Apache License, Version 2.0 (the "License"); | ||
| // you may not use this file except in compliance with the License. | ||
| // You may obtain a copy of the License at | ||
| // | ||
| // http://www.apache.org/licenses/LICENSE-2.0 | ||
| // | ||
| // Unless required by applicable law or agreed to in writing, software | ||
| // distributed under the License is distributed on an "AS IS" BASIS, | ||
| // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. | ||
| // See the License for the specific language governing permissions and | ||
| // limitations under the License. | ||
| // | ||
|
|
||
| @import "./common"; | ||
| @import "../packages/mdc-chips/mdc-chips"; |
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,105 @@ | ||
| <!--docs: | ||
| title: "Chips" | ||
| layout: detail | ||
| section: components | ||
| excerpt: "Chips are compact elements that represent an attribute, text, entity, or action." | ||
| iconId: chip | ||
| path: /catalog/chips/ | ||
| --> | ||
|
|
||
| # Chips | ||
|
|
||
| <!--<div class="article__asset"> | ||
| <a class="article__asset-link" | ||
| href="https://material-components-web.appspot.com/chips.html"> | ||
| <img src="{{ site.rootpath }}/images/mdc_web_screenshots/chips.png" width="363" alt="Chips screenshot"> | ||
| </a> | ||
| </div>--> | ||
|
|
||
| Chips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. | ||
|
|
||
| ## Design & API Documentation | ||
|
|
||
| <ul class="icon-list"> | ||
| <li class="icon-list-item icon-list-item--spec"> | ||
| <a href="https://material.io/guidelines/components/chips.html">Material Design guidelines: Chips</a> | ||
| </li> | ||
| <li class="icon-list-item icon-list-item--link"> | ||
| <a href="https://material-components-web.appspot.com/chips.html">Demo</a> | ||
| </li> | ||
| </ul> | ||
|
|
||
| ## Installation | ||
| ``` | ||
| npm install --save @material/chips | ||
| ``` | ||
|
|
||
| ## Usage | ||
|
|
||
| ### HTML Structure | ||
|
|
||
| ```html | ||
| <div class="mdc-chip-set"> | ||
| <div class="mdc-chip"> | ||
| <div class="mdc-chip__text">Chip content</div> | ||
| </div> | ||
| <div class="mdc-chip"> | ||
| <div class="mdc-chip__text">Chip content</div> | ||
| </div> | ||
| <div class="mdc-chip"> | ||
| <div class="mdc-chip__text">Chip content</div> | ||
| </div> | ||
| </div> | ||
| ``` | ||
|
|
||
| ### CSS Classes | ||
|
|
||
| CSS Class | Description | ||
| --- | --- | ||
| `mdc-chip` | Mandatory. | ||
| `mdc-chip__text` | Mandatory. Indicates the text content of the chip. | ||
| `mdc-chip-set` | Mandatory. Indicates the set that the chip belongs to. | ||
|
|
||
| ### `MDCChip` and `MDCChipSet` | ||
|
|
||
| The MDC Chips module is comprised of two JavaScript classes: | ||
| * `MDCChip` defines the behavior of a single chip | ||
| * `MDCChipSet` defines the behavior of chips within a specific set. For example, chips in an entry chip set behave differently from those in a filter chip set. | ||
|
|
||
| To use the `MDCChip` and `MDCChipSet` classes, [import](../../docs/importing-js.md) both classes from `@material/chips`. | ||
|
|
||
| #### `MDCChip` | ||
|
|
||
| Property | Value Type | Description | ||
| --- | --- | --- | ||
| `ripple` | `MDCRipple` | The `MDCRipple` instance for the root element that `MDCChip` initializes | ||
|
|
||
| #### `MDCChipSet` | ||
|
|
||
| Property | Value Type | Description | ||
| --- | --- | --- | ||
| `chips` | Array<`MDCChip`> | An array of the `MDCChip` objects that represent chips in the set | ||
|
|
||
| ### Adapters: `MDCChipAdapter` and `MDCChipSetAdapter` | ||
|
|
||
| #### `MDCChipAdapter` | ||
|
|
||
| Method Signature | Description | ||
| --- | --- | ||
| `registerInteractionHandler(evtType: string, handler: EventListener) => void` | Registers an event listener on the root element | ||
| `deregisterInteractionHandler(evtType: string, handler: EventListener) => void` | Deregisters an event listener on the root element | ||
| `notifyInteraction() => void` | Emits a custom event "MDCChip:interaction" denoting the chip has been interacted with, which bubbles to the parent `mdc-chip-set` element | ||
|
|
||
| #### `MDCChipSetAdapter` | ||
|
|
||
| Method Signature | Description | ||
| --- | --- | ||
| `hasClass(className: string) => boolean` | Returns whether the chip set element has the given class | ||
|
|
||
| ### Foundations: `MDCChipFoundation` and `MDCChipSetFoundation` | ||
|
|
||
| #### `MDCChipFoundation` | ||
| None yet, coming soon. | ||
|
|
||
| #### `MDCChipSetFoundation` | ||
| None yet, coming soon. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,38 @@ | ||
| /** | ||
| * @license | ||
| * Copyright 2017 Google Inc. All Rights Reserved. | ||
| * | ||
| * Licensed under the Apache License, Version 2.0 (the "License"); | ||
| * you may not use this file except in compliance with the License. | ||
| * You may obtain a copy of the License at | ||
| * | ||
| * http://www.apache.org/licenses/LICENSE-2.0 | ||
| * | ||
| * Unless required by applicable law or agreed to in writing, software | ||
| * distributed under the License is distributed on an "AS IS" BASIS, | ||
| * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. | ||
| * See the License for the specific language governing permissions and | ||
| * limitations under the License. | ||
| */ | ||
|
|
||
| /* eslint no-unused-vars: [2, {"args": "none"}] */ | ||
|
|
||
| /** | ||
| * Adapter for MDC Chip Set. | ||
| * | ||
| * Defines the shape of the adapter expected by the foundation. Implement this | ||
| * adapter to integrate the Chip Set into your framework. See | ||
| * https://github.com/material-components/material-components-web/blob/master/docs/authoring-components.md | ||
| * for more information. | ||
| * | ||
| * @record | ||
| */ | ||
| class MDCChipSetAdapter { | ||
| /** | ||
| * Returns true if the root element contains the given class name. | ||
| * @param {string} className | ||
| */ | ||
| hasClass(className) {} | ||
| } | ||
|
|
||
| export default MDCChipSetAdapter; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,23 @@ | ||
| /** | ||
| * @license | ||
| * Copyright 2016 Google Inc. All Rights Reserved. | ||
| * | ||
| * Licensed under the Apache License, Version 2.0 (the "License"); | ||
| * you may not use this file except in compliance with the License. | ||
| * You may obtain a copy of the License at | ||
| * | ||
| * http://www.apache.org/licenses/LICENSE-2.0 | ||
| * | ||
| * Unless required by applicable law or agreed to in writing, software | ||
| * distributed under the License is distributed on an "AS IS" BASIS, | ||
| * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. | ||
| * See the License for the specific language governing permissions and | ||
| * limitations under the License. | ||
| */ | ||
|
|
||
| /** @enum {string} */ | ||
| const strings = { | ||
| CHIP_SELECTOR: '.mdc-chip', | ||
| }; | ||
|
|
||
| export {strings}; |
Oops, something went wrong.