@gfazioli/mantine-flip 2.5.1 → 2.5.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 +3 -19
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,8 +1,6 @@
|
|
|
1
1
|
# Mantine Flip Component
|
|
2
2
|
|
|
3
|
-
https://github.com/user-attachments/assets/
|
|
4
|
-
|
|
5
|
-
---
|
|
3
|
+
<img width="2752" height="1536" alt="Mantine Flip" src="https://github.com/user-attachments/assets/81a00eee-c1f2-40f1-8ad4-4357619cf855" />
|
|
6
4
|
|
|
7
5
|
<div align="center">
|
|
8
6
|
|
|
@@ -82,24 +80,10 @@ function Demo() {
|
|
|
82
80
|
As you can see, the `Flip` component wraps two children, which are the two views that you want to flip between.
|
|
83
81
|
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.
|
|
84
82
|
|
|
85
|
-
## Props
|
|
86
|
-
|
|
87
|
-
| Prop | Type | Default | Description |
|
|
88
|
-
| ---- | ---- | ------- | ----------- |
|
|
89
|
-
| perspective | string | 1000px | The perspective property defines how far the object is away from the user. |
|
|
90
|
-
| duration | number | .8 | The duration in seconds of the flip animation. |
|
|
91
|
-
| easing | string | ease-in-out | The easing function to be used for the flip animation. |
|
|
92
|
-
| flipped | boolean | false | The initial state of the controlled Flip component. |
|
|
93
|
-
| defaultFlipped | boolean | false | The default state of the uncontrolled flip component. |
|
|
94
|
-
| direction | 'horizontal' or 'vertical' | 'horizontal' | The direction of the flip animation. |
|
|
95
|
-
| directionFlipIn | 'negative' or 'positive' | 'negative' | The direction of the flip animation when flipping in. |
|
|
96
|
-
| directionFlipOut | 'negative' or 'positive' | 'positive' | The direction of the flip animation when flipping out. |
|
|
97
|
-
| onChange | (flipped: boolean) => void | - | Callback to be called when the flip state changes. |
|
|
98
|
-
| onBack | () => void | - | Callback to be called when the flip state changes to false. |
|
|
99
|
-
| onFront | () => void | - | Callback to be called when the flip state changes to true. |
|
|
100
|
-
|
|
101
83
|
<div align="center">
|
|
102
84
|
|
|
103
85
|
[](https://www.star-history.com/#gfazioli/mantine-flip&Timeline)
|
|
104
86
|
|
|
105
87
|
</div>
|
|
88
|
+
|
|
89
|
+
https://github.com/user-attachments/assets/cc968450-9d8c-4b16-be58-a6766597742e
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@gfazioli/mantine-flip",
|
|
3
|
-
"version": "2.5.
|
|
3
|
+
"version": "2.5.3",
|
|
4
4
|
"description": "Flip component is a wrapper for any component that can be flipped. It is used to create cards, flip boxes and more.",
|
|
5
5
|
"homepage": "https://gfazioli.github.io/mantine-flip/",
|
|
6
6
|
"packageManager": "yarn@4.0.1",
|