from
RequiredDescription
Passing React elements to "from" is required.
Type
ReactElement<any, string | JSXElementConstructor<any>>Airy
Airy is a component that provides a smooth animation to switch between two elements.
Props
AiryProps
to
RequiredDescription
Passing React elements to "to" is required.
Type
ReactElement<any, string | JSXElementConstructor<any>>as
Description
The HTML element to render.
Type
"symbol" | "object" | "clipPath" | "filter" | "g" | "marker" | "mask" | "p" | "text" | "style" | "animate" | "button" | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | ... 149 more ... | "textPath"colorScheme
Description
The visual color appearance of the component.
Type
"blackAlpha" | "whiteAlpha" | "amber" | "blue" | "info" | "link" | "primary" | "cyan" | "emerald" | "flashy" | "fuchsia" | "gray" | "green" | "success" | "indigo" | "lime" | "neutral" | "orange" | "warning" | "pink" | "purple" | "red" | "danger" | "rose" | "sky" | "teal" | "violet" | "secondary" | "yellow"defaultValue
Description
You can set the initial state.
Type
AiryIdentDefault
'from'delay
Description
The animation delay.
Type
numberDefault
0disabled
Description
If true, the component is disabled.
Type
booleanDefault
falseduration
Description
The animation duration.
Type
numberDefault
0.2isDisabled
DeprecatedDescription
If true, the component is disabled.
Deprecated
Use disabled instead.
Type
booleanDefault
falseisReadOnly
DeprecatedDescription
If true, the component is readonly.
Deprecated
Use readOnly instead.
Type
booleanDefault
falseonChange
Description
This is a callback function that is called when the animation state changes.
Type
(value: AiryIdent) => voidreadOnly
Description
If true, the component is readonly.
Type
booleanDefault
falsesize
Description
The size of the Airy.
Type
stringvalue
Description
Use this when you want to control the animation from outside the component.
Type
AiryIdentvariant
Description
The variant of the Airy.
Type
stringEdit this page on GitHub