Skip to content
This repository has been archived by the owner on Jan 13, 2025. It is now read-only.

Commit

Permalink
docs(icon-button): Update demo and guidelines links (#2902)
Browse files Browse the repository at this point in the history
  • Loading branch information
kfranqueiro authored Jun 7, 2018
1 parent 1667059 commit 5568e96
Show file tree
Hide file tree
Showing 2 changed files with 10 additions and 10 deletions.
16 changes: 8 additions & 8 deletions packages/mdc-icon-button/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -21,10 +21,10 @@ Icon buttons allow users to take actions, and make choices, with a single tap.

<ul class="icon-list">
<li class="icon-list-item icon-list-item--spec">
<a href="https://material.io/design/components/buttons.html#toggle-button">Material Design guidelines: Toggle buttons</a>
<a href="https://material.io/go/design-buttons#toggle-button">Material Design guidelines: Toggle buttons</a>
</li>
<li class="icon-list-item icon-list-item--link">
<a href="https://material-components.github.io/material-components-web-catalog/#/component/icon-toggle">Demo</a>
<a href="https://material-components.github.io/material-components-web-catalog/#/component/icon-button">Demo</a>
</li>
</ul>

Expand Down Expand Up @@ -53,7 +53,7 @@ npm install @material/icon-button
```
### JavaScript Instantiation

The icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.
The icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.
See [MDC Ripple](../mdc-ripple) for details.

```js
Expand All @@ -69,8 +69,8 @@ iconButtonRipple.unbounded = true;

### Icon Button Toggle

The icon button can be used to toggle between an on and off icon. To style an icon button as an icon button toggle, add the
`data-toggle-on` and `data-toggle-off` attributes to the `mdc-icon-button` element. Then instantiate an `MDCIconButtonToggle` on the root element.
The icon button can be used to toggle between an on and off icon. To style an icon button as an icon button toggle, add the
`data-toggle-on` and `data-toggle-off` attributes to the `mdc-icon-button` element. Then instantiate an `MDCIconButtonToggle` on the root element.

```html
<button id="add-to-favorites"
Expand All @@ -93,17 +93,17 @@ var toggleButton = new mdc.iconButton.MDCIconButtonToggle(document.getElementByI
Note the use of `data-toggle-*` properties in the above examples. When an MDCIconButtonToggle
instance is toggled, it looks at these data attributes to determine how to update the element. This is what
allows MDCIconButtonToggle to be so flexible. The `data-toggle-on-*` properties will be used when the is
MDCIconButtonToggle is toggled on, and vice versa for `data-toggle-off-*`.
MDCIconButtonToggle is toggled on, and vice versa for `data-toggle-off-*`.

Attribute | Description
--- | ---
`data-toggle-<TOGGLE STATE>-label` | The value to apply to the element's "aria-label" attribute.
`data-toggle-<TOGGLE STATE>-content` | The text content to set on the element. Note that if an inner icon is used, the text content will be set on that element instead.
`data-toggle-<TOGGLE STATE>-class` | A CSS class to apply to the icon element. The same rules regarding inner icon elements described for `content` apply here as well.

### Icons
### Icons

The icon button can be used with a standard icon library or an `svg`. The icon button toggle should only be used with
The icon button can be used with a standard icon library or an `svg`. The icon button toggle should only be used with
an standard icon library. We recommend you use [Material Icons](https://material.io/tools/icons) from Google Fonts.

### Disabled
Expand Down
4 changes: 2 additions & 2 deletions packages/mdc-icon-toggle/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -29,10 +29,10 @@ designed to work with any icon set.

<ul class="icon-list">
<li class="icon-list-item icon-list-item--spec">
<a href="https://material.io/go/design-buttons#buttons-toggle-buttons">Material Design guidelines: Toggle buttons</a>
<a href="https://material.io/go/design-buttons#toggle-button">Material Design guidelines: Toggle buttons</a>
</li>
<li class="icon-list-item icon-list-item--link">
<a href="https://material-components.github.io/material-components-web-catalog/#/component/icon-toggle">Demo</a>
<a href="https://material-components.github.io/material-components-web-catalog/#/component/icon-button">Demo (for Icon Button)</a>
</li>
</ul>

Expand Down

0 comments on commit 5568e96

Please sign in to comment.