Tabs Animated
Rust UI component that displays an animated tabs.
javascript
use leptos::prelude::*;
use leptos_meta::Stylesheet;
use crate::components::extensions::tabs_animated::{TabAnimatedButton, TabsAnimated};
#[component]
pub fn DemoTabsAnimated() -> impl IntoView {
view! {
<Stylesheet id="tabs_animated" href="/components/tabs_animated.css" />
<TabsAnimated>
<TabAnimatedButton class="active">Home</TabAnimatedButton>
<TabAnimatedButton>Interactions</TabAnimatedButton>
<TabAnimatedButton>Resources</TabAnimatedButton>
<TabAnimatedButton>Docs</TabAnimatedButton>
</TabsAnimated>
}
}
Installation
You can run either of the following commands:
# cargo install ui-cli --forceui add demo_tabs_animatedui add tabs_animatedUpdate the imports to match your project setup.
Copy and paste the following code into your project:
components/ui/tabs_animated.rs
use leptos::prelude::*;
use leptos_ui::{button, clx};
use crate::utilities::utils::Utils;
mod components {
use super::*;
clx! {TabsAnimated, div, "flex gap-2 p-1 w-fit bg-zinc-100 border border-zinc-300 rounded-[24px] shadow-md"}
button! {TabRoot,
"tab",
"p-[12px_16px] border-none bg-transparent rounded-[20px]",
"text-base text-[#71717a] cursor-pointer relative font-medium h-fit"
}
}
pub use components::*;
/*´:°•.°+.*•´.*:˚.°*.˚•´.°:°•.°•.*•´.*:˚.°*.˚•´.°:°•.°+.*•´.*:*/
/* ✨ FUNCTIONS ✨ */
/*.•°:°.´+˚.*°.˚:*.´•*.+°.•°:´*.´•*.•°.•°:°.´:•˚°.*°.˚:*.´+°.•*/
#[component]
pub fn TabAnimatedButton(
#[prop(into, optional)] class: Signal<String>,
children: Children,
) -> impl IntoView {
let random_transition_name = Utils::use_random_transition_name();
view! {
<TabRoot
class=class
style=random_transition_name
onclick="document.startViewTransition(() => {
document.querySelector('.tab.active').classList.remove('active');
this.classList.add('active');
})"
>
{children()}
</TabRoot>
}
}
Update the imports to match your project setup.
Usage
// Coming soon 🦀