Gradient
Rust UI component that displays a gradient.
gradient
Meteor effect
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolore esse eu aliqua elit aliqua dolor consectetur officia labore pariatur in eiusmod cupidatat nulla et. Reprehenderit ex aliqua nisi est mollit minim ut.
use leptos::prelude::*;
use crate::components::extensions::gradient::{Gradient, GradientVariant};
use crate::components::extensions::meteor_effect::{MeteorEffect, Meteors};
use crate::components::ui::button::Button;
use crate::components::ui::card::Card;
#[component]
pub fn DemoGradient() -> impl IntoView {
view! {
<MeteorEffect>
<Gradient variant=GradientVariant::OrangeYellow />
<Card class="relative flex flex-col overflow-hidden">
<DemoContent />
<Meteors number=20 />
</Card>
</MeteorEffect>
}
}
/*´:°•.°+.*•´.*:˚.°*.˚•´.°:°•.°•.*•´.*:˚.°*.˚•´.°:°•.°+.*•´.*:*/
/* ✨ FUNCTIONS ✨ */
/*.•°:°.´+˚.*°.˚:*.´•*.+°.•°:´*.´•*.•°.•°:°.´:•˚°.*°.˚:*.´+°.•*/
#[component]
pub fn DemoContent() -> impl IntoView {
view! {
<div>
<p class="relative z-20 mb-4 text-xl font-bold text-white">Meteor effect</p>
<p class="relative z-20 mb-4 text-base font-normal text-slate-500">
{"Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolore esse eu aliqua elit aliqua dolor consectetur officia labore pariatur in eiusmod cupidatat nulla et. Reprehenderit ex aliqua nisi est mollit minim ut."}
</p>
<Button>Explore</Button>
</div>
}
}
Installation
You can run either of the following commands:
# cargo install ui-cli --forceui add demo_gradientui add gradientUpdate the imports to match your project setup.
Copy and paste the following code into your project:
components/ui/gradient.rs
use leptos::prelude::*;
use tw_merge::*;
#[derive(TwClass, Clone, Copy)]
#[tw(
class = "absolute inset-0 w-full h-full bg-gradient-to-r rounded-full transform blur-3xl scale-[0.80]"
)]
pub struct GradientClass {
pub variant: GradientVariant,
}
#[derive(TwVariant)]
pub enum GradientVariant {
#[tw(default, class = "")]
Default,
#[tw(class = "from-blue-500 to-teal-500")]
BlueTeal,
#[tw(class = "from-yellow-500 to-orange-500")]
YellowOrange,
#[tw(class = "from-orange-500 to-yellow-500")]
OrangeYellow,
}
#[component]
pub fn Gradient(
#[prop(into, optional)] variant: Signal<GradientVariant>,
#[prop(into, optional)] class: Signal<String>,
) -> impl IntoView {
let class = Memo::new(move |_| {
let gradient = GradientClass {
variant: variant.get(),
};
gradient.with_class(class.get())
});
view! { <div class=class /> }
}
Update the imports to match your project setup.
Usage
// Coming soon 🦀