Mask
Rust UI component for a mask.
Mask Demo
use leptos::prelude::*;
use crate::components::ui::headings::H3;
use crate::components::ui::mask::{Mask, MaskSide, MaskWrapper};
#[component]
pub fn DemoMask() -> impl IntoView {
view! {
<MaskWrapper class="bg-neutral-300 dark:bg-neutral-700">
<H3>"Mask Demo"</H3>
<Mask side=MaskSide::Left />
<Mask side=MaskSide::Right />
</MaskWrapper>
}
}
Variants
1. Mask with vertical
Mask Vertical
use leptos::prelude::*;
use crate::components::ui::headings::H3;
use crate::components::ui::mask::{Mask, MaskSide, MaskWrapper};
#[component]
pub fn DemoMaskVertical() -> impl IntoView {
view! {
<MaskWrapper class="bg-neutral-300 dark:bg-neutral-500">
<H3 class="z-10">"Mask Vertical"</H3>
<Mask side=MaskSide::Top />
<Mask side=MaskSide::Bottom />
</MaskWrapper>
}
}
2. Mask with color
Color Mask
use leptos::prelude::*;
use crate::components::ui::headings::H3;
use crate::components::ui::mask::{Mask, MaskSide, MaskWrapper};
#[component]
pub fn DemoMaskColor() -> impl IntoView {
const CLASS_COLOR: &str = "from-sky-900 to-sky-500";
view! {
<MaskWrapper class="bg-sky-500">
<H3>"Color Mask"</H3>
<Mask side=MaskSide::Left class=CLASS_COLOR />
<Mask side=MaskSide::Right class=CLASS_COLOR />
</MaskWrapper>
}
}
Installation
You can run either of the following commands:
# cargo install ui-cli --forceui add demo_maskui add maskUpdate the imports to match your project setup.
Copy and paste the following code into your project:
components/ui/mask.rs
use leptos::prelude::*;
use tw_merge::*;
// TODO UI 🐛 : Fix MaskColor (-> demo)
#[component]
pub fn MaskWrapper(
#[prop(into, optional)] class: Signal<String>,
children: Children,
) -> impl IntoView {
let class = Memo::new(move |_| {
tw_merge!(
"flex justify-center items-center",
"relative w-full h-full",
"rounded-lg border",
"overflow-hidden",
"min-h-[300px]",
class()
)
});
view! { <div class=class>{children()}</div> }
}
/*´:°•.°+.*•´.*:˚.°*.˚•´.°:°•.°•.*•´.*:˚.°*.˚•´.°:°•.°+.*•´.*:*/
/* ✨ FUNCTIONS ✨ */
/*.•°:°.´+˚.*°.˚:*.´•*.+°.•°:´*.´•*.•°.•°:°.´:•˚°.*°.˚:*.´+°.•*/
#[derive(TwClass, Clone, Copy)]
#[tw(class = "absolute inset-y-0 pointer-events-none from-white dark:from-background")]
pub struct MaskClass {
pub side: MaskSide,
// TODO. Fix MaskColor
}
#[derive(TwVariant)]
pub enum MaskSide {
#[tw(default, class = "")]
Default,
#[tw(class = "left-0 w-1/3 bg-gradient-to-r")]
Left,
#[tw(class = "right-0 w-1/3 bg-gradient-to-l")]
Right,
#[tw(class = "top-0 w-full bg-gradient-to-b")]
Top,
#[tw(class = "bottom-0 w-full bg-gradient-to-t")]
Bottom,
}
#[derive(TwVariant)]
pub enum MaskColor {
#[tw(
default,
class = "from-pink-500 to-violet-500 dark:from-purple-700 dark:to-indigo-700"
)]
Pink,
}
#[component]
pub fn Mask(
#[prop(into, optional)] side: Signal<MaskSide>,
// #[prop(into, optional)] color: Signal<MaskColor>,
// TODO. └──> Not working properly, fix this later.
#[prop(into, optional)] class: Signal<String>,
) -> impl IntoView {
let class = Memo::new(move |_| {
let side = side.get();
let mask = MaskClass { side };
mask.with_class(class.get())
});
view! { <div class=class /> }
}
Update the imports to match your project setup.
Usage
// Coming soon 🦀