Struct leptos::AnimatedShowProps

pub struct AnimatedShowProps {
    pub children: ChildrenFn,
    pub when: MaybeSignal<bool>,
    pub show_class: &'static str,
    pub hide_class: &'static str,
    pub hide_delay: Duration,
}

Props for the AnimatedShow component.

A component that will show its children when the when condition is true. Additionally, you need to specify a hide_delay. If the when condition changes to false, the unmounting of the children will be delayed by the specified Duration. If you provide the optional show_class and hide_class, you can create very easy mount / unmount animations.

let show = create_rw_signal(false);

view! {
    <div
        class="hover-me"
        on:mouseenter=move |_| show.set(true)
        on:mouseleave=move |_| show.set(false)
    >
        "Hover Me"
    </div>

    <AnimatedShow
       when=show
       show_class="fade-in-1000"
       hide_class="fade-out-1000"
       hide_delay=Duration::from_millis(1000)
    >
       <div class="here-i-am">
           "Here I Am!"
       </div>
    </AnimatedShow>
}

Required Props

• children: ChildrenFn
  • The components Show wraps
• when: impl Into<MaybeSignal<bool>>
  • If the component should show or not
• hide_delay: Duration
  • The timeout after which the component will be unmounted if when == false

Optional Props

• show_class: [&'static str]
  • Optional CSS class to apply if when == true
• hide_class: [&'static str]
  • Optional CSS class to apply if when == false

Fields

children: ChildrenFn

The components Show wraps

when: MaybeSignal<bool>

If the component should show or not

show_class: &'static str

Optional CSS class to apply if when == true

hide_class: &'static str

Optional CSS class to apply if when == false

hide_delay: Duration

The timeout after which the component will be unmounted if when == false

Implementations

impl AnimatedShowProps

pub fn builder() -> AnimatedShowPropsBuilder<((), (), (), (), ())>

Create a builder for building AnimatedShowProps. On the builder, call .children(...), .when(...), .show_class(...)(optional), .hide_class(...)(optional), .hide_delay(...) to set the values of the fields. Finally, call .build() to create the instance of AnimatedShowProps.

Trait Implementations

impl IntoView for AnimatedShowProps

fn into_view(self) -> View

Converts the value into View.