@rmwc/icon-button
Advanced tools
Comparing version 14.0.4 to 14.0.5
{ | ||
"name": "@rmwc/icon-button", | ||
"version": "14.0.4", | ||
"version": "14.0.5", | ||
"main": "./index.js", | ||
@@ -39,3 +39,2 @@ "types": "./index.d.ts", | ||
"peerDependencies": { | ||
"@material/icon-button": "^14.0.0", | ||
"react": ">=16.8.x", | ||
@@ -45,7 +44,8 @@ "react-dom": ">=16.8.x" | ||
"dependencies": { | ||
"@rmwc/base": "14.0.4", | ||
"@rmwc/icon": "14.0.4", | ||
"@rmwc/ripple": "14.0.4", | ||
"@rmwc/types": "14.0.4" | ||
"@material/icon-button": "^14.0.0", | ||
"@rmwc/base": "14.0.5", | ||
"@rmwc/icon": "14.0.5", | ||
"@rmwc/ripple": "14.0.5", | ||
"@rmwc/types": "14.0.5" | ||
} | ||
} |
162
README.md
# Icon Buttons | ||
> Icon buttons allow users to take actions, and make choices, with a single tap. | ||
Icon buttons allow users to take actions, and make choices, with a single tap. | ||
@@ -8,7 +8,7 @@ - Module **@rmwc/icon-button** | ||
- Using CSS Loader | ||
- import **'@rmwc/icon-button/styles';** | ||
- import '@rmwc/icon-button/styles'; | ||
- Or include stylesheets | ||
- **'@material/icon-button/dist/mdc.icon-button.css'**; | ||
- **'@rmwc/icon/icon.css'**; | ||
- **'@material/ripple/dist/mdc.ripple.css'**; | ||
- **'@material/icon-button/dist/mdc.icon-button.css'** | ||
- **'@rmwc/icon/icon.css'** | ||
- **'@material/ripple/dist/mdc.ripple.css'** | ||
- MDC Docs: [https://material.io/develop/web/components/buttons/icon-buttons/](https://material.io/develop/web/components/buttons/icon-buttons/) | ||
@@ -20,33 +20,18 @@ | ||
Default | ||
```jsx | ||
<> | ||
<IconButton icon="star" label="Rate this!" /> | ||
```js | ||
<IconButton icon="favorite" label="Favorite" disabled /> | ||
<\> | ||
<IconButton icon\="star" label\="Rate this!" /> | ||
<IconButton icon\="favorite" label\="Favorite" disabled /> | ||
<IconButton | ||
icon\="images/icons/twitter.png" | ||
aria-label\="Tweet it!" | ||
tag\="a" | ||
target\="\_blank" | ||
href\={\`https://twitter.com/intent/tweet?text=${encodeURIComponent( | ||
icon="images/icons/twitter.png" | ||
aria-label="Tweet it!" | ||
tag="a" | ||
target="_blank" | ||
href={`https://twitter.com/intent/tweet?text=${encodeURIComponent( | ||
'You should definitely be using RMWC for your next project! https://rmwc.io' | ||
)}\`} | ||
)}`} | ||
/> | ||
</\> | ||
</> | ||
``` | ||
@@ -58,111 +43,72 @@ | ||
Uncontrolled | ||
```js | ||
<\> | ||
<IconButton icon\="favorite\_border" onIcon\="favorite" /> | ||
<IconButton icon\="favorite" onIcon\="favorite" disabled /> | ||
</\> | ||
```jsx | ||
<> | ||
<IconButton icon="favorite_border" onIcon="favorite" /> | ||
<IconButton icon="favorite" onIcon="favorite" disabled /> | ||
</> | ||
``` | ||
Controlled | ||
```js | ||
```jsx | ||
function Controlled() { | ||
const \[isChecked, setIsChecked\] \= React.useState(false); | ||
const [isChecked, setIsChecked] = React.useState(false); | ||
return ( | ||
<\> | ||
<> | ||
<IconButton | ||
checked\={isChecked} | ||
onClick\={() \=> setIsChecked(!isChecked)} | ||
onIcon\="star" | ||
icon\="star\_border" | ||
checked={isChecked} | ||
onClick={() => setIsChecked(!isChecked)} | ||
onIcon="star" | ||
icon="star_border" | ||
/> | ||
<IconButton | ||
checked\={isChecked} | ||
onClick\={() \=> setIsChecked(!isChecked)} | ||
onIcon\="images/icons/twitter.png" | ||
icon\="images/icons/facebook.png" | ||
checked={isChecked} | ||
onClick={() => setIsChecked(!isChecked)} | ||
onIcon="images/icons/twitter.png" | ||
icon="images/icons/facebook.png" | ||
/> | ||
</\> | ||
</> | ||
); | ||
} | ||
``` | ||
Component as Icon | ||
```js | ||
```jsx | ||
<IconButton | ||
onIcon\={ | ||
onIcon={ | ||
<div | ||
style\={{ | ||
style={{ | ||
background: 'red', | ||
width: '24px', | ||
height: '24px' | ||
}} | ||
/> | ||
} | ||
icon\={ | ||
icon={ | ||
<div | ||
style\={{ | ||
style={{ | ||
background: 'green', | ||
width: '24px', | ||
height: '24px', | ||
borderRadius: '50%' | ||
}} | ||
/> | ||
} | ||
/> | ||
``` | ||
## IconButton | ||
An IconButton component that can also be used as a toggle. | ||
``` | ||
### Props | ||
## IconButton | ||
| Name | Type | Description | | ||
|------|------|-------------| | ||
| `checked` | `boolean` | Controls the on / off state of the a toggleable button. | | ||
| `disabled` | `boolean` | Makes the button disabled | | ||
| `foundationRef` | `Ref<MDCIconButtonToggleFoundation<>>` | Advanced: A reference to the MDCFoundation. Only for Toggleable buttons. | | ||
| `icon` | `IconPropT` | Icon for the button | | ||
| `label` | `string` | Apply an aria label. | | ||
| `onChange` | `(evt: IconButtonOnChangeEventT) => void` | An onChange callback that receives a custom event. evt.detail = { isOn: boolean } | | ||
| `onIcon` | `IconPropT` | If specified, renders a toggle with this icon as the on state. | | ||
| `ripple` | `RipplePropT` | Adds a ripple effect to the component | | ||
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
11101
112
+ Added@rmwc/base@14.0.5(transitive)
+ Added@rmwc/icon@14.0.5(transitive)
+ Added@rmwc/provider@14.0.5(transitive)
+ Added@rmwc/ripple@14.0.5(transitive)
+ Added@rmwc/types@14.0.5(transitive)
- Removed@rmwc/base@14.0.4(transitive)
- Removed@rmwc/icon@14.0.4(transitive)
- Removed@rmwc/provider@14.0.4(transitive)
- Removed@rmwc/ripple@14.0.4(transitive)
- Removed@rmwc/types@14.0.4(transitive)
Updated@rmwc/base@14.0.5
Updated@rmwc/icon@14.0.5
Updated@rmwc/ripple@14.0.5
Updated@rmwc/types@14.0.5