@gfazioli/mantine-rings-progress 0.1.1 → 0.1.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +8 -6
- package/package.json +5 -2
package/README.md
CHANGED
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
# Mantine Rings Progress Component
|
|
2
2
|
|
|
3
3
|
<p align="center">
|
|
4
|
-
<img alt="" src="https://github.com/gfazioli/mantine-rings-progress/assets/432181/
|
|
4
|
+
<img alt="" src="https://github.com/gfazioli/mantine-rings-progress/assets/432181/d3752711-6bae-43bc-9f8c-8e5c7bfc21ba">
|
|
5
|
+
|
|
5
6
|
</p>
|
|
6
7
|
|
|
7
8
|
---
|
|
@@ -22,8 +23,7 @@
|
|
|
22
23
|
## Overview
|
|
23
24
|
|
|
24
25
|
This component is created on top of the [Mantine](https://mantine.dev/) library.
|
|
25
|
-
|
|
26
|
-
Essentially, when switching between views, the component will handle the flip animation.
|
|
26
|
+
Display progress with animated rings like the Apple Watch activity app.
|
|
27
27
|
|
|
28
28
|
## Installation
|
|
29
29
|
|
|
@@ -35,6 +35,11 @@ or
|
|
|
35
35
|
```sh
|
|
36
36
|
yarn add @gfazioli/mantine-rings-progress
|
|
37
37
|
```
|
|
38
|
+
After installation import package styles at the root of your application:
|
|
39
|
+
|
|
40
|
+
```tsx
|
|
41
|
+
import '@gfazioli/mantine-rings-progress/styles.css';
|
|
42
|
+
```
|
|
38
43
|
|
|
39
44
|
## Usage
|
|
40
45
|
|
|
@@ -61,9 +66,6 @@ function Demo() {
|
|
|
61
66
|
}
|
|
62
67
|
```
|
|
63
68
|
|
|
64
|
-
As you can see, the `Flip` component wraps two children, which are the two views that you want to flip between.
|
|
65
|
-
The `Flip.Target` component is used to define the trigger for the flip animation. It can be any component, such as a button, or a link, or even a div.
|
|
66
|
-
|
|
67
69
|
## Props
|
|
68
70
|
|
|
69
71
|
| Name | Type | Description |
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@gfazioli/mantine-rings-progress",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.3",
|
|
4
4
|
"description": "Rings Progress component for Mantine",
|
|
5
5
|
"homepage": "https://gfazioli.github.io/mantine-rings-progress/",
|
|
6
6
|
"packageManager": "yarn@4.0.1",
|
|
@@ -34,7 +34,10 @@
|
|
|
34
34
|
"./styles.css": "./dist/styles.css",
|
|
35
35
|
"./styles.layer.css": "./dist/styles.layer.css"
|
|
36
36
|
},
|
|
37
|
-
"repository":
|
|
37
|
+
"repository": {
|
|
38
|
+
"type": "git",
|
|
39
|
+
"url": "https://github.com/gfazioli/mantine-rings-progress.git"
|
|
40
|
+
},
|
|
38
41
|
"workspaces": [
|
|
39
42
|
"docs"
|
|
40
43
|
],
|