Use to show a placeholder while content is loading.
use yew::prelude::*;
use crate::components::ui::skeleton::Skeleton;
#[function_component]
pub fn SkeletonDemo() -> Html {
html! {
<div class="flex items-center space-x-4">
<Skeleton class="h-12 w-12 rounded-full" />
<div class="space-y-2">
<Skeleton class="h-4 w-[250px]" />
<Skeleton class="h-4 w-[200px]" />
</div>
</div>
}
}
use yew::prelude::*;
use crate::components::ui::skeleton::Skeleton;
#[function_component]
pub fn SkeletonDemo() -> Html {
html! {
<div class="flex items-center space-x-4">
<Skeleton class="h-12 w-12 rounded-full" />
<div class="space-y-2">
<Skeleton class="h-4 w-[250px]" />
<Skeleton class="h-4 w-[200px]" />
</div>
</div>
}
}
The CLI is not yet available. For now, manually copy the component source into your project.
rust-shadcn-ui add skeleton
use yew::prelude::*;
use crate::components::ui::skeleton::{Skeleton};
#[component]
fn Usage() -> impl IntoView {
view! {
<Skeleton class="w-[100px] h-[20px] rounded-full" />
}
}
use yew::prelude::*;
use crate::components::ui::skeleton::Skeleton;
#[function_component]
pub fn SkeletonCard() -> Html {
html! {
<div class="flex flex-col space-y-3">
<Skeleton class="h-[125px] w-[250px] rounded-xl" />
<div class="space-y-2">
<Skeleton class="h-4 w-[250px]" />
<Skeleton class="h-4 w-[200px]" />
</div>
</div>
}
}
use yew::prelude::*;
use crate::components::ui::skeleton::Skeleton;
#[function_component]
pub fn SkeletonCard() -> Html {
html! {
<div class="flex flex-col space-y-3">
<Skeleton class="h-[125px] w-[250px] rounded-xl" />
<div class="space-y-2">
<Skeleton class="h-4 w-[250px]" />
<Skeleton class="h-4 w-[200px]" />
</div>
</div>
}
}