@rmwc/badge
Advanced tools
@rmwc/badge - npm Package Compare versions
Comparing version 14.0.4 to 14.0.5
| { | ||
| "name": "@rmwc/badge", | ||
| "version": "14.0.4", | ||
| "version": "14.0.5", | ||
| "main": "./index.js", | ||
@@ -44,5 +44,5 @@ "types": "./index.d.ts", | ||
| "dependencies": { | ||
| "@rmwc/base": "14.0.4", | ||
| "@rmwc/types": "14.0.4" | ||
| "@rmwc/base": "14.0.5", | ||
| "@rmwc/types": "14.0.5" | ||
| } | ||
| } |
257
README.md
@@ -1,4 +0,4 @@ | ||
| # Badges`RMWC ADDON` | ||
| # Badges `RMWC ADDON` | ||
| > Badges are small status descriptors for UI elements. A badge consists of a small circle, typically containing a number or other short set of characters, that appears in proximity to another object. | ||
| Badges are small status descriptors for UI elements. A badge consists of a small circle, typically containing a number or other short set of characters, that appears in proximity to another object. | ||
@@ -8,55 +8,29 @@ - Module **@rmwc/badge** | ||
| - Using CSS Loader | ||
| - import **'@rmwc/badge/styles';** | ||
| - import '@rmwc/badge/styles'; | ||
| - Or include stylesheets | ||
| - **'@rmwc/badge/badge.css'**; | ||
| - **'@rmwc/badge/badge.css'** | ||
| Basic | ||
| ```js | ||
| <Badge align\="inline" /> | ||
| ```jsx | ||
| <Badge align="inline" /> | ||
| ``` | ||
| Labels | ||
| ```js | ||
| <\> | ||
| <Badge align\="inline" label\={20} /> | ||
| <Badge align\="inline" label\="99+" /> | ||
| <Badge align\="inline" label\="New" /> | ||
| </\> | ||
| ```jsx | ||
| <> | ||
| <Badge align="inline" label={20} /> | ||
| <Badge align="inline" label="99+" /> | ||
| <Badge align="inline" label="New" /> | ||
| </> | ||
| ``` | ||
| Theming | ||
| ```js | ||
| <\> | ||
| <Badge theme\={\['primaryBg', 'onPrimary'\]} align\="inline" /> | ||
| <Badge style\={{ background: 'hotpink' }} align\="inline" /> | ||
| ```jsx | ||
| <> | ||
| <Badge theme={['primaryBg', 'onPrimary']} align="inline" /> | ||
| <Badge style={{ background: 'hotpink' }} align="inline" /> | ||
| <Badge | ||
| theme\={\['secondaryBg', 'onSecondary'\]} | ||
| align\="inline" | ||
| label\="Theme" | ||
| theme={['secondaryBg', 'onSecondary']} | ||
| align="inline" | ||
| label="Theme" | ||
| /> | ||
| </\> | ||
| </> | ||
| ``` | ||
@@ -70,89 +44,48 @@ | ||
| ```js | ||
| <\> | ||
| <BadgeAnchor\> | ||
| <Button raised label\="Button" /> | ||
| ```jsx | ||
| <> | ||
| <BadgeAnchor> | ||
| <Button raised label="Button" /> | ||
| <Badge /> | ||
| </BadgeAnchor> | ||
| </BadgeAnchor\> | ||
| <BadgeAnchor\> | ||
| <BadgeAnchor> | ||
| <Button | ||
| raised | ||
| label\="Button" | ||
| theme\={\['secondaryBg', 'onSecondary'\]} | ||
| label="Button" | ||
| theme={['secondaryBg', 'onSecondary']} | ||
| /> | ||
| <Badge style\={{ background: 'hotpink' }} label\="Hello" /> | ||
| </BadgeAnchor\> | ||
| </\> | ||
| <Badge style={{ background: 'hotpink' }} label="Hello" /> | ||
| </BadgeAnchor> | ||
| </> | ||
| ``` | ||
| ```js | ||
| <BadgeAnchor\> | ||
| <IconButton icon\="notifications" /> | ||
| <Badge inset\="0.75rem" /> | ||
| </BadgeAnchor\> | ||
| ```jsx | ||
| <BadgeAnchor> | ||
| <IconButton icon="notifications" /> | ||
| <Badge inset="0.75rem" /> | ||
| </BadgeAnchor> | ||
| ``` | ||
| ```js | ||
| <\> | ||
| <BadgeAnchor\> | ||
| ```jsx | ||
| <> | ||
| <BadgeAnchor> | ||
| <Avatar | ||
| src\="images/avatars/ironman.png" | ||
| size\="large" | ||
| name\="Tony Stark" | ||
| src="images/avatars/ironman.png" | ||
| size="large" | ||
| name="Tony Stark" | ||
| /> | ||
| <Badge inset="5px" /> | ||
| </BadgeAnchor> | ||
| <Badge inset\="5px" /> | ||
| </BadgeAnchor\> | ||
| <BadgeAnchor\> | ||
| <BadgeAnchor> | ||
| <Avatar | ||
| src\="images/avatars/blackwidow.png" | ||
| size\="large" | ||
| name\="Natalia Alianovna Romanova" | ||
| src="images/avatars/blackwidow.png" | ||
| size="large" | ||
| name="Natalia Alianovna Romanova" | ||
| square | ||
| /> | ||
| <Badge /> | ||
| </BadgeAnchor\> | ||
| </\> | ||
| </BadgeAnchor> | ||
| </> | ||
| ``` | ||
@@ -164,25 +97,14 @@ | ||
| ```js | ||
| ```jsx | ||
| <> | ||
| <BadgeAnchor> | ||
| <Button raised label="Align Start" /> | ||
| <Badge align="start" /> | ||
| </BadgeAnchor> | ||
| <\> | ||
| <BadgeAnchor\> | ||
| <Button raised label\="Align Start" /> | ||
| <Badge align\="start" /> | ||
| </BadgeAnchor\> | ||
| <BadgeAnchor\> | ||
| <Button raised label\="Align End" /> | ||
| <Badge align\="end" /> | ||
| </BadgeAnchor\> | ||
| </\> | ||
| <BadgeAnchor> | ||
| <Button raised label="Align End" /> | ||
| <Badge align="end" /> | ||
| </BadgeAnchor> | ||
| </> | ||
| ``` | ||
@@ -194,59 +116,50 @@ | ||
| ```js | ||
| ```jsx | ||
| function Example() { | ||
| const [label, setLabel] = React.useState(undefined); | ||
| const \[label, setLabel\] \= React.useState(undefined); | ||
| React.useEffect(() \=> { | ||
| const timeout \= setTimeout(() \=> { | ||
| React.useEffect(() => { | ||
| const timeout = setTimeout(() => { | ||
| switch (label) { | ||
| case '99+': | ||
| setLabel(undefined); | ||
| break; | ||
| case '': | ||
| setLabel('99+'); | ||
| break; | ||
| case undefined: | ||
| setLabel(''); | ||
| break; | ||
| } | ||
| }, 1800); | ||
| return () \=> clearTimeout(timeout); | ||
| return () => clearTimeout(timeout); | ||
| }, [label]); | ||
| }, \[label\]); | ||
| return ( | ||
| <BadgeAnchor> | ||
| <Button raised label="Button" /> | ||
| <Badge label={label} exited={label === undefined} /> | ||
| </BadgeAnchor> | ||
| ); | ||
| } | ||
| ``` | ||
| <BadgeAnchor\> | ||
| ## Badge | ||
| A Badge component for indicating alerts or counts. | ||
| <Button raised label\="Button" /> | ||
| ### Props | ||
| <Badge label\={label} exited\={label \=== undefined} /> | ||
| | Name | Type | Description | | ||
| |------|------|-------------| | ||
| | `align` | `"end" \| "start" \| "inline"` | How to align the badge. | | ||
| | `exited` | `boolean` | Animates the badge out of view. When this class is removed, the badge will return to view. | | ||
| | `inset` | `string \| number` | A value to inset the badge alignment by, useful for positioning the badge on different shaped components. | | ||
| | `label` | `ReactNode` | A label or count for the badge. | | ||
| </BadgeAnchor\> | ||
| ); | ||
| ## BadgeAnchor | ||
| An anchor component for badges. | ||
| } | ||
| ``` | ||
| ## Badge | ||
| ## BadgeAnchor |
No alert changes
Improved metrics
- Total package byte prevSize
8926
4.13%Worsened metrics
- Number of lines in readme file
162
-34.94%Dependency changes
+ Added
@rmwc/base@14.0.5(transitive)+ Added
@rmwc/types@14.0.5(transitive)- Removed
@rmwc/base@14.0.4(transitive)- Removed
@rmwc/types@14.0.4(transitive)Updated
@rmwc/base@14.0.5Updated
@rmwc/types@14.0.5