as
Description
The HTML element to render.
Type
keyof ReactDOM
Leave Yamada UI a star
StarSlide
is a component that shows or hides an element from the corners of the page.
Description
The HTML element to render.
Type
keyof ReactDOM
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"
Description
Custom delay
definition for enter
and exit
.
Type
number | MotionLifecycleProps<number>
Description
Custom duration
definition for enter
and exit
.
Type
number | MotionLifecycleProps<number>
Description
Custom enter
.
Type
any
Description
Custom exit
.
A target to animate to when this component is removed from the tree.
This component **must** be the first animatable child of an AnimatePresence
to enable this exit animation.
This limitation exists because React doesn't allow components to defer unmounting until after
an animation is complete. Once this limitation is fixed, the AnimatePresence
component will be unnecessary.
``jsx
import { AnimatePresence, motion } from 'framer-motion'
export const MyComponent = ({ isVisible }) => {
return (
<AnimatePresence>
{isVisible && (
<motion.div
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
exit={{ opacity: 0 }}
/>
)}
</AnimatePresence>
)
}
``
Type
any
Description
Custom initial
.
Properties, variant label or array of variant labels to start in.
Set to false
to initialise with the values in animate
(disabling the mount animation)
``jsx
// As values
<motion.div initial={{ opacity: 1 }} />
// As variant
<motion.div initial="visible" variants={variants} />
// Multiple variants
<motion.div initial={["visible", "active"]} variants={variants} />
// As false (disable mount animation)
<motion.div initial={false} animate={{ opacity: 0 }} />
``
Type
any
Description
Show the component. triggers when enter or exit states.
Deprecated
Use open
instead.
Type
boolean
Description
Show the component. triggers when enter or exit states.
Type
boolean
Description
The placement of the slide.
Type
UIValue<"bottom" | "left" | "right" | "top">
Default
'right'
Description
The size of the Slide.
Type
string
Description
Custom transition
definition for enter
and exit
.
Type
MotionLifecycleProps<Transition$1>
Description
Custom transitionEnd
definition for enter
and exit
.
Type
MotionLifecycleProps<MakeCustomValueType<TargetProperties>>
Description
If true
, the element will unmount when isOpen={false}
and animation is done.
Type
boolean
Description
The variant of the Slide.
Type
string
Edit this page on GitHub