thepraandClaude Opus 5.5
483ed271e0
The styleguide loaded 42 images from picsum.photos and linked demo items to daisyui.com. It now uses six small SVG landscapes in wwwroot/imgs/styleguide/ (the diff demo greys one with the grayscale utility), and its demo links stay on /styleguide. It also gains a carousel demo with navigation and indicators. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01LsXgEaXee4GCU1hwYgPJXw
581 lines
24 KiB
Plaintext
581 lines
24 KiB
Plaintext
@implements IDisposable
|
|
|
|
@* Styleguide: the Data display components (Accordion, Aura, Avatar, Badge, Card, Carousel, Chat, Collapse, Countdown,
|
|
Diff, Hover 3D, Hover gallery, Kbd, List, Stat, Status, Table, Text rotate, Timeline). *@
|
|
<div class="grid gap-8 lg:grid-cols-2">
|
|
<section class="flex flex-col gap-3">
|
|
<h3 class="text-lg font-bold">DAccordion</h3>
|
|
<span class="text-sm opacity-60">Active: @accordionActive</span>
|
|
<DAccordion @bind-Active="accordionActive" Icon="DCollapseIcon.Arrow">
|
|
<DAccordionItem>
|
|
<Header>How do I create an account?</Header>
|
|
<ChildContent>Click the "Sign up" button and follow the steps.</ChildContent>
|
|
</DAccordionItem>
|
|
<DAccordionItem>
|
|
<Header>I forgot my password</Header>
|
|
<ChildContent>Use "Forgot password" on the login page.</ChildContent>
|
|
</DAccordionItem>
|
|
<DAccordionItem Disabled="true">
|
|
<Header>Disabled item</Header>
|
|
<ChildContent>Never shown.</ChildContent>
|
|
</DAccordionItem>
|
|
</DAccordion>
|
|
<span class="text-sm opacity-60">Joined, plus icon</span>
|
|
<DAccordion @bind-Active="joinedActive" Icon="DCollapseIcon.Plus" Joined="true" Class="w-full">
|
|
<DAccordionItem>
|
|
<Header>First</Header>
|
|
<ChildContent>Only one item is open at a time.</ChildContent>
|
|
</DAccordionItem>
|
|
<DAccordionItem>
|
|
<Header>Second</Header>
|
|
<ChildContent>Opening this one closes the first.</ChildContent>
|
|
</DAccordionItem>
|
|
<DAccordionItem>
|
|
<Header>Third</Header>
|
|
<ChildContent>Clicking an open item closes it.</ChildContent>
|
|
</DAccordionItem>
|
|
</DAccordion>
|
|
</section>
|
|
|
|
<section class="flex flex-col gap-3">
|
|
<h3 class="text-lg font-bold">DCollapse</h3>
|
|
<DCollapse @bind-IsOpen="collapseArrowOpen" Icon="DCollapseIcon.Arrow">
|
|
<Header>Arrow (open: @collapseArrowOpen)</Header>
|
|
<ChildContent>Click the header, or focus it and press Enter or Space.</ChildContent>
|
|
</DCollapse>
|
|
<DCollapse @bind-IsOpen="collapsePlusOpen" Icon="DCollapseIcon.Plus">
|
|
<Header>Plus (starts open)</Header>
|
|
<ChildContent>Bound with @@bind-IsOpen.</ChildContent>
|
|
</DCollapse>
|
|
<DCollapse>
|
|
<Header>No icon, closed</Header>
|
|
<ChildContent>Content.</ChildContent>
|
|
</DCollapse>
|
|
<DCollapse IsOpen="true" Disabled="true" Icon="DCollapseIcon.Arrow">
|
|
<Header>Disabled, open</Header>
|
|
<ChildContent>Can't be closed.</ChildContent>
|
|
</DCollapse>
|
|
</section>
|
|
|
|
<section class="flex flex-col gap-3">
|
|
<h3 class="text-lg font-bold">DAura</h3>
|
|
<div class="flex flex-wrap items-center gap-4">
|
|
@foreach (var variant in Enum.GetValues<DAuraVariant>())
|
|
{
|
|
<DAura Variant="variant" Color="DColor.Primary"><DButton>@variant</DButton></DAura>
|
|
}
|
|
</div>
|
|
<div class="flex flex-wrap items-center gap-4">
|
|
@foreach (var color in Enum.GetValues<DColor>().Skip(1))
|
|
{
|
|
<DAura Color="color"><DBadge Class="text-base-content">@color</DBadge></DAura>
|
|
}
|
|
</div>
|
|
<div class="flex flex-wrap items-center gap-4">
|
|
<DAura Size="DSize.Xs" Color="DColor.Accent"><DButton Size="DSize.Sm">Xs</DButton></DAura>
|
|
<DAura Size="DSize.Sm" Color="DColor.Accent"><DButton Size="DSize.Sm">Sm</DButton></DAura>
|
|
<DAura Color="DColor.Accent"><DButton Size="DSize.Sm">Md</DButton></DAura>
|
|
<DAura Size="DSize.Lg" Color="DColor.Accent"><DButton Size="DSize.Sm">Lg</DButton></DAura>
|
|
<DAura Size="DSize.Xl" Color="DColor.Accent"><DButton Size="DSize.Sm">Xl</DButton></DAura>
|
|
</div>
|
|
<DAura Variant="DAuraVariant.Rainbow" Class="duration-2000">
|
|
<DCard Class="bg-base-100"><p>A card with a rainbow aura, 2s loop (duration-2000).</p></DCard>
|
|
</DAura>
|
|
</section>
|
|
|
|
<section class="flex flex-col gap-3">
|
|
<h3 class="text-lg font-bold">DAvatar</h3>
|
|
<div class="flex flex-wrap items-center gap-4">
|
|
<DAvatar Src="imgs/styleguide/scene-1.svg" Alt="Avatar" Class="w-8 rounded-full" />
|
|
<DAvatar Src="imgs/styleguide/scene-1.svg" Alt="Avatar" Class="w-12 rounded-full" />
|
|
<DAvatar Src="imgs/styleguide/scene-1.svg" Alt="Avatar" Class="w-16 rounded-box" />
|
|
<DAvatar Src="imgs/styleguide/scene-1.svg" Alt="Avatar" Class="w-20 rounded-xl" />
|
|
</div>
|
|
<div class="flex flex-wrap items-center gap-4">
|
|
<DAvatar Src="imgs/styleguide/scene-2.svg" Alt="Squircle" Class="w-16 mask mask-squircle" />
|
|
<DAvatar Src="imgs/styleguide/scene-2.svg" Alt="Hexagon" Class="w-16 mask mask-hexagon" />
|
|
<DAvatar Src="imgs/styleguide/scene-2.svg" Alt="Triangle" Class="w-16 mask mask-triangle" />
|
|
<DAvatar Src="imgs/styleguide/scene-3.svg" Alt="Online" Status="DAvatarStatus.Online" Class="w-16 rounded-full" />
|
|
<DAvatar Src="imgs/styleguide/scene-4.svg" Alt="Offline" Status="DAvatarStatus.Offline" Class="w-16 rounded-full" />
|
|
</div>
|
|
<div class="flex flex-wrap items-center gap-4">
|
|
<DAvatar Placeholder="true" Class="bg-neutral text-neutral-content w-24 rounded-full"><span class="text-3xl">D</span></DAvatar>
|
|
<DAvatar Placeholder="true" Status="DAvatarStatus.Online" Class="bg-primary text-primary-content w-16 rounded-full"><span class="text-xl">AI</span></DAvatar>
|
|
<DAvatar Placeholder="true" Class="bg-secondary text-secondary-content w-12 mask mask-squircle"><span>MX</span></DAvatar>
|
|
<DAvatar Placeholder="true" Class="bg-accent text-accent-content w-8 rounded-full"><span class="text-xs">UI</span></DAvatar>
|
|
</div>
|
|
<DAvatarGroup Class="-space-x-6">
|
|
<DAvatar Src="imgs/styleguide/scene-3.svg" Alt="One" Class="w-12" />
|
|
<DAvatar Src="imgs/styleguide/scene-4.svg" Alt="Two" Class="w-12" />
|
|
<DAvatar Src="imgs/styleguide/scene-5.svg" Alt="Three" Class="w-12" />
|
|
<DAvatar Placeholder="true" Class="bg-neutral text-neutral-content w-12"><span>+99</span></DAvatar>
|
|
</DAvatarGroup>
|
|
</section>
|
|
|
|
<section class="flex flex-col gap-3">
|
|
<h3 class="text-lg font-bold">DBadge</h3>
|
|
<div class="flex flex-wrap items-center gap-2">
|
|
@foreach (var color in Enum.GetValues<DColor>())
|
|
{
|
|
<DBadge Color="color">@color</DBadge>
|
|
}
|
|
</div>
|
|
@foreach (var variant in Enum.GetValues<DBadgeVariant>().Skip(1))
|
|
{
|
|
<div class="flex flex-wrap items-center gap-2">
|
|
<span class="w-16 text-sm opacity-60">@variant</span>
|
|
@foreach (var color in Enum.GetValues<DColor>())
|
|
{
|
|
<DBadge Color="color" Variant="variant">@color</DBadge>
|
|
}
|
|
</div>
|
|
}
|
|
<div class="flex flex-wrap items-center gap-2">
|
|
<DBadge Size="DSize.Xs">Xs</DBadge>
|
|
<DBadge Size="DSize.Sm">Sm</DBadge>
|
|
<DBadge>Md</DBadge>
|
|
<DBadge Size="DSize.Lg">Lg</DBadge>
|
|
<DBadge Size="DSize.Xl">Xl</DBadge>
|
|
<DBadge Color="DColor.Primary" Size="DSize.Xs" />
|
|
<DBadge Color="DColor.Primary" Size="DSize.Sm" />
|
|
<DBadge Color="DColor.Primary" />
|
|
<DButton>Inbox <DBadge Size="DSize.Sm" Color="DColor.Secondary">+99</DBadge></DButton>
|
|
<span class="text-xl font-semibold">Heading <DBadge Color="DColor.Accent"><i class="ion-md-star"></i> new</DBadge></span>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="flex flex-col gap-3 lg:col-span-2">
|
|
<h3 class="text-lg font-bold">DCard</h3>
|
|
<div class="grid gap-4 md:grid-cols-3">
|
|
<DCard Class="bg-base-100" ActionsClass="justify-end">
|
|
<Figure><img src="imgs/styleguide/scene-4.svg" alt="Landscape" /></Figure>
|
|
<Heading>Default <DBadge Color="DColor.Secondary" Size="DSize.Sm">new</DBadge></Heading>
|
|
<ChildContent><p>Figure, heading, body and actions.</p></ChildContent>
|
|
<Actions><DButton Color="DColor.Primary">Buy now</DButton></Actions>
|
|
</DCard>
|
|
<DCard Variant="DCardVariant.Border" Class="bg-base-100">
|
|
<Heading>Border</Heading>
|
|
<ChildContent><p>card-border has no neo shadow.</p></ChildContent>
|
|
</DCard>
|
|
<DCard Variant="DCardVariant.Dash" Class="bg-base-100" FigureLast="true">
|
|
<Figure><img src="imgs/styleguide/scene-5.svg" alt="Landscape" /></Figure>
|
|
<Heading>Dash, figure last</Heading>
|
|
<ChildContent><p>The figure comes after the body.</p></ChildContent>
|
|
</DCard>
|
|
</div>
|
|
<div class="flex flex-wrap items-start gap-4">
|
|
@foreach (var size in new[] { DSize.Xs, DSize.Sm, DSize.Md, DSize.Lg, DSize.Xl })
|
|
{
|
|
<DCard Size="size" Class="bg-base-100 w-48">
|
|
<Heading>@size</Heading>
|
|
<ChildContent><p>Padding and text scale with the size.</p></ChildContent>
|
|
</DCard>
|
|
}
|
|
</div>
|
|
<div class="grid gap-4 md:grid-cols-2">
|
|
<DCard Side="true" Class="bg-base-100">
|
|
<Figure><img src="imgs/styleguide/scene-6.svg" alt="Portrait" /></Figure>
|
|
<Heading>Side</Heading>
|
|
<ChildContent><p>The figure sits beside the body.</p></ChildContent>
|
|
<Actions><DButton Size="DSize.Sm">Watch</DButton></Actions>
|
|
</DCard>
|
|
<DCard ImageFull="true" ActionsClass="justify-end">
|
|
<Figure><img src="imgs/styleguide/scene-1.svg" alt="Background" /></Figure>
|
|
<Heading>Image full</Heading>
|
|
<ChildContent><p>The figure is the background.</p></ChildContent>
|
|
<Actions><DButton Color="DColor.Primary" Size="DSize.Sm">Open</DButton></Actions>
|
|
</DCard>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="flex min-w-0 flex-col gap-3">
|
|
<h3 class="text-lg font-bold">DCarousel</h3>
|
|
@foreach (var snap in Enum.GetValues<DCarouselSnap>())
|
|
{
|
|
<span class="text-sm opacity-60">Snap @snap</span>
|
|
<DCarousel Snap="snap" Class="rounded-box w-full">
|
|
@foreach (var i in Enumerable.Range(1, 6))
|
|
{
|
|
<DCarouselItem><img src="imgs/styleguide/scene-@(i % 6 + 1).svg" alt="Slide @i" /></DCarouselItem>
|
|
}
|
|
</DCarousel>
|
|
}
|
|
<span class="text-sm opacity-60">ShowNavigation and ShowIndicators (links to the slides, no script)</span>
|
|
<DCarousel ShowNavigation="true" ShowIndicators="true" Class="rounded-box w-full h-48">
|
|
@foreach (var i in Enumerable.Range(1, 4))
|
|
{
|
|
<DCarouselItem Class="w-full"><img src="imgs/styleguide/scene-@(i % 6 + 1).svg" alt="Slide @i" class="w-full object-cover" /></DCarouselItem>
|
|
}
|
|
</DCarousel>
|
|
<span class="text-sm opacity-60">Full-width items, vertical</span>
|
|
<div class="flex gap-4">
|
|
<DCarousel Class="rounded-box h-40 w-1/2">
|
|
@foreach (var i in Enumerable.Range(1, 4))
|
|
{
|
|
<DCarouselItem Class="w-full"><img src="imgs/styleguide/scene-@(i % 6 + 1).svg" alt="Slide @i" class="w-full object-cover" /></DCarouselItem>
|
|
}
|
|
</DCarousel>
|
|
<DCarousel Direction="DDirection.Vertical" Class="rounded-box h-40 w-1/2">
|
|
@foreach (var i in Enumerable.Range(1, 4))
|
|
{
|
|
<DCarouselItem Class="h-full"><img src="imgs/styleguide/scene-@(i % 6 + 1).svg" alt="Slide @i" class="w-full object-cover" /></DCarouselItem>
|
|
}
|
|
</DCarousel>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="flex flex-col gap-3">
|
|
<h3 class="text-lg font-bold">DChat</h3>
|
|
<DChat>
|
|
<Avatar><div class="w-10 rounded-full"><img src="imgs/styleguide/scene-3.svg" alt="Obi-Wan" /></div></Avatar>
|
|
<Header>Obi-Wan Kenobi <time class="text-xs opacity-50">12:45</time></Header>
|
|
<ChildContent><DChatBubble>You were the Chosen One!</DChatBubble></ChildContent>
|
|
<Footer>Delivered</Footer>
|
|
</DChat>
|
|
<DChat Placement="DChatPlacement.End">
|
|
<Avatar><div class="w-10 rounded-full"><img src="imgs/styleguide/scene-1.svg" alt="Anakin" /></div></Avatar>
|
|
<Header>Anakin <time class="text-xs opacity-50">12:46</time></Header>
|
|
<ChildContent><DChatBubble Color="DColor.Primary">I hate you!</DChatBubble></ChildContent>
|
|
<Footer>Seen at 12:46</Footer>
|
|
</DChat>
|
|
@foreach (var color in Enum.GetValues<DColor>())
|
|
{
|
|
<DChat Placement="@((int)color % 2 == 0 ? DChatPlacement.Start : DChatPlacement.End)">
|
|
<DChatBubble Color="color">@color bubble</DChatBubble>
|
|
</DChat>
|
|
}
|
|
</section>
|
|
|
|
<section class="flex flex-col gap-3">
|
|
<h3 class="text-lg font-bold">DCountdown</h3>
|
|
<span class="font-mono text-4xl">
|
|
<DCountdown Value="hours" />:<DCountdown Value="minutes" Digits="2" />:<DCountdown Value="seconds" Digits="2" />
|
|
</span>
|
|
<div class="grid auto-cols-max grid-flow-col gap-5 text-center">
|
|
<div class="bg-neutral rounded-box text-neutral-content flex flex-col p-2">
|
|
<DCountdown Value="15" Class="font-mono text-5xl" /> days
|
|
</div>
|
|
<div class="bg-neutral rounded-box text-neutral-content flex flex-col p-2">
|
|
<DCountdown Value="hours" Class="font-mono text-5xl" /> hours
|
|
</div>
|
|
<div class="bg-neutral rounded-box text-neutral-content flex flex-col p-2">
|
|
<DCountdown Value="minutes" Class="font-mono text-5xl" /> min
|
|
</div>
|
|
<div class="bg-neutral rounded-box text-neutral-content flex flex-col p-2">
|
|
<DCountdown Value="seconds" Class="font-mono text-5xl" /> sec
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center gap-2">
|
|
<DButton Size="DSize.Sm" OnClick="() => counter = Math.Max(0, counter - 1)">-1</DButton>
|
|
<DCountdown Value="counter" Digits="3" Class="font-mono text-3xl" />
|
|
<DButton Size="DSize.Sm" OnClick="() => counter = Math.Min(999, counter + 1)">+1</DButton>
|
|
<DButton Size="DSize.Sm" OnClick="() => counter = Math.Min(999, counter + 100)">+100</DButton>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="flex flex-col gap-3">
|
|
<h3 class="text-lg font-bold">DDiff</h3>
|
|
<DDiff Class="rounded-box" Item1Alt="Colour photo" Item2Alt="Greyscale photo">
|
|
<Item1><img src="imgs/styleguide/scene-2.svg" alt="" /></Item1>
|
|
<Item2><img src="imgs/styleguide/scene-2.svg" class="grayscale" alt="" /></Item2>
|
|
</DDiff>
|
|
<DDiff AspectClass="aspect-[3/1]" Class="rounded-box" Item1Alt="Primary text" Item2Alt="Plain text">
|
|
<Item1><div class="bg-primary text-primary-content grid place-content-center text-6xl font-black">DAISY</div></Item1>
|
|
<Item2><div class="bg-base-200 grid place-content-center text-6xl font-black">DAISY</div></Item2>
|
|
</DDiff>
|
|
</section>
|
|
|
|
<section class="flex flex-col gap-3">
|
|
<h3 class="text-lg font-bold">DHover3D</h3>
|
|
<div class="flex flex-wrap items-center gap-6">
|
|
<DHover3D Class="my-4">
|
|
<figure class="max-w-60 rounded-2xl"><img src="imgs/styleguide/scene-4.svg" alt="Tilting card" /></figure>
|
|
</DHover3D>
|
|
<DHover3D Href="styleguide">
|
|
<div class="card bg-neutral text-neutral-content w-60">
|
|
<div class="card-body"><h2 class="card-title">As a link</h2><p>The whole card is the link.</p></div>
|
|
</div>
|
|
</DHover3D>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="flex flex-col gap-3">
|
|
<h3 class="text-lg font-bold">DHoverGallery</h3>
|
|
<div class="flex flex-wrap gap-4">
|
|
<DHoverGallery Images="galleryImages" Alt="Gallery photo" Class="rounded-box max-w-60" />
|
|
<DHoverGallery Class="rounded-box max-w-40">
|
|
<img src="imgs/styleguide/scene-5.svg" alt="First" />
|
|
<img src="imgs/styleguide/scene-6.svg" alt="Second" />
|
|
<img src="imgs/styleguide/scene-1.svg" alt="Third" />
|
|
</DHoverGallery>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="flex flex-col gap-3">
|
|
<h3 class="text-lg font-bold">DKbd</h3>
|
|
<div class="flex flex-wrap items-center gap-2">
|
|
<DKbd Size="DSize.Xs">Xs</DKbd>
|
|
<DKbd Size="DSize.Sm">Sm</DKbd>
|
|
<DKbd>Md</DKbd>
|
|
<DKbd Size="DSize.Lg">Lg</DKbd>
|
|
<DKbd Size="DSize.Xl">Xl</DKbd>
|
|
</div>
|
|
<div class="flex flex-wrap items-center gap-1">
|
|
<DKbd>ctrl</DKbd> + <DKbd>shift</DKbd> + <DKbd>del</DKbd>
|
|
<span class="ml-4">Press <DKbd Size="DSize.Sm">F</DKbd> to pay respects.</span>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="flex flex-col gap-3">
|
|
<h3 class="text-lg font-bold">DList</h3>
|
|
<DList Class="bg-base-100 rounded-box neo-raised">
|
|
<li class="p-4 pb-2 text-xs tracking-wide opacity-60">Most played songs this week</li>
|
|
@foreach (var i in Enumerable.Range(1, 3))
|
|
{
|
|
<DListRow>
|
|
<div><img class="rounded-box size-10" src="imgs/styleguide/scene-@(i % 6 + 1).svg" alt="Cover" /></div>
|
|
<div>
|
|
<div>Song @i</div>
|
|
<div class="text-xs font-semibold uppercase opacity-60">Artist @i</div>
|
|
</div>
|
|
<DButton Variant="DButtonVariant.Ghost" Shape="DButtonShape.Square"><i class="ion-md-play"></i></DButton>
|
|
<DButton Variant="DButtonVariant.Ghost" Shape="DButtonShape.Square"><i class="ion-md-heart"></i></DButton>
|
|
</DListRow>
|
|
}
|
|
<DListRow>
|
|
<div class="text-4xl font-thin tabular-nums opacity-30">04</div>
|
|
<div><img class="rounded-box size-10" src="imgs/styleguide/scene-6.svg" alt="Cover" /></div>
|
|
<div class="list-col-grow">
|
|
<div>list-col-grow</div>
|
|
<div class="text-xs font-semibold uppercase opacity-60">The third column fills the row</div>
|
|
</div>
|
|
<p class="list-col-wrap text-xs">list-col-wrap moves this paragraph to its own line under the row.</p>
|
|
<DButton Variant="DButtonVariant.Ghost" Shape="DButtonShape.Square"><i class="ion-md-play"></i></DButton>
|
|
</DListRow>
|
|
</DList>
|
|
</section>
|
|
|
|
<section class="flex min-w-0 flex-col gap-3">
|
|
<h3 class="text-lg font-bold">DStats</h3>
|
|
<DStats Class="w-full">
|
|
<DStat FigureClass="text-primary text-3xl" ValueClass="text-primary">
|
|
<Figure><i class="ion-md-heart"></i></Figure>
|
|
<Heading>Total likes</Heading>
|
|
<ChildContent>25.6K</ChildContent>
|
|
<Desc>21% more than last month</Desc>
|
|
</DStat>
|
|
<DStat FigureClass="text-secondary text-3xl" ValueClass="text-secondary">
|
|
<Figure><i class="ion-md-eye"></i></Figure>
|
|
<Heading>Page views</Heading>
|
|
<ChildContent>2.6M</ChildContent>
|
|
<Desc>↗︎ 14%</Desc>
|
|
</DStat>
|
|
<DStat>
|
|
<Figure><DAvatar Src="imgs/styleguide/scene-1.svg" Alt="User" Status="DAvatarStatus.Online" Class="w-14 rounded-full" /></Figure>
|
|
<Heading>Tasks done</Heading>
|
|
<ChildContent>86%</ChildContent>
|
|
<Desc>31 tasks remaining</Desc>
|
|
</DStat>
|
|
</DStats>
|
|
<div class="flex flex-wrap items-start gap-4">
|
|
<DStats Direction="DDirection.Vertical">
|
|
<DStat>
|
|
<Heading>Downloads</Heading>
|
|
<ChildContent>31K</ChildContent>
|
|
<Desc>Jan 1st - Feb 1st</Desc>
|
|
</DStat>
|
|
<DStat>
|
|
<Heading>New users</Heading>
|
|
<ChildContent>4,200</ChildContent>
|
|
<Desc>↗︎ 400 (22%)</Desc>
|
|
</DStat>
|
|
</DStats>
|
|
<DStats Class="bg-base-100">
|
|
<DStat>
|
|
<Heading>Account balance</Heading>
|
|
<ChildContent>$89,400</ChildContent>
|
|
<Actions><DButton Size="DSize.Xs" Color="DColor.Success">Add funds</DButton></Actions>
|
|
</DStat>
|
|
</DStats>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="flex flex-col gap-3">
|
|
<h3 class="text-lg font-bold">DStatus</h3>
|
|
<div class="flex flex-wrap items-center gap-3">
|
|
@foreach (var color in Enum.GetValues<DColor>())
|
|
{
|
|
<DStatus Color="color" aria-label="@color.ToString()" />
|
|
}
|
|
</div>
|
|
<div class="flex flex-wrap items-center gap-3">
|
|
<DStatus Size="DSize.Xs" aria-label="status" />
|
|
<DStatus Size="DSize.Sm" aria-label="status" />
|
|
<DStatus aria-label="status" />
|
|
<DStatus Size="DSize.Lg" aria-label="status" />
|
|
<DStatus Size="DSize.Xl" aria-label="status" />
|
|
</div>
|
|
<div class="flex flex-wrap items-center gap-6">
|
|
<span class="flex items-center gap-2"><DStatus Color="DColor.Success" Ping="true" aria-label="online" /> Online</span>
|
|
<span class="flex items-center gap-2"><DStatus Color="DColor.Error" Ping="true" Size="DSize.Lg" aria-label="error" /> Server down</span>
|
|
<span class="flex items-center gap-2"><DStatus Color="DColor.Info" Class="animate-bounce" aria-label="info" /> Bounce</span>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="flex min-w-0 flex-col gap-3 lg:col-span-2">
|
|
<h3 class="text-lg font-bold">DTable</h3>
|
|
<div class="grid gap-4 md:grid-cols-2">
|
|
<DTable Zebra="true">
|
|
<thead><tr><th></th><th>Name</th><th>Job</th><th>Colour</th></tr></thead>
|
|
<tbody>
|
|
@for (var i = 0; i < people.Length; i++)
|
|
{
|
|
<tr><th>@(i + 1)</th><td>@people[i].Name</td><td>@people[i].Job</td><td>@people[i].Colour</td></tr>
|
|
}
|
|
</tbody>
|
|
</DTable>
|
|
<DTable Size="DSize.Xs" PinRows="true" PinCols="true" WrapperClass="h-56">
|
|
<thead><tr><th></th><td>Name</td><td>Job</td><td>Colour</td><td>Company</td><td>Location</td><th></th></tr></thead>
|
|
<tbody>
|
|
@for (var i = 0; i < 12; i++)
|
|
{
|
|
var p = people[i % people.Length];
|
|
<tr><th>@(i + 1)</th><td>@p.Name</td><td>@p.Job</td><td>@p.Colour</td><td>Company @(i + 1)</td><td>City @(i + 1)</td><th>@(i + 1)</th></tr>
|
|
}
|
|
</tbody>
|
|
<tfoot><tr><th></th><td>Name</td><td>Job</td><td>Colour</td><td>Company</td><td>Location</td><th></th></tr></tfoot>
|
|
</DTable>
|
|
</div>
|
|
<div class="flex flex-wrap items-start gap-4">
|
|
@foreach (var size in new[] { DSize.Xs, DSize.Sm, DSize.Md, DSize.Lg, DSize.Xl })
|
|
{
|
|
<DTable Size="size" Scroll="false" Class="w-auto">
|
|
<thead><tr><th>@size</th><th>Job</th></tr></thead>
|
|
<tbody><tr><td>@people[0].Name</td><td>@people[0].Job</td></tr></tbody>
|
|
</DTable>
|
|
}
|
|
</div>
|
|
</section>
|
|
|
|
<section class="flex flex-col gap-3">
|
|
<h3 class="text-lg font-bold">DTextRotate</h3>
|
|
<div>Items: <DTextRotate Items="rotateWords" Class="font-bold" /></div>
|
|
<div>
|
|
Built for
|
|
<DTextRotate>
|
|
<span class="bg-primary text-primary-content px-2">designers</span>
|
|
<span class="bg-secondary text-secondary-content px-2">developers</span>
|
|
<span class="bg-accent text-accent-content px-2">managers</span>
|
|
</DTextRotate>
|
|
</div>
|
|
<DTextRotate Items="bigWords" Centered="true" Class="text-5xl font-black duration-6000" />
|
|
</section>
|
|
|
|
<section class="flex min-w-0 flex-col gap-3 lg:col-span-2">
|
|
<h3 class="text-lg font-bold">DTimeline</h3>
|
|
<span class="text-sm opacity-60">Horizontal, end boxes, primary line up to 2001</span>
|
|
<div class="overflow-x-auto">
|
|
<DTimeline>
|
|
@foreach (var i in Enumerable.Range(0, events.Length))
|
|
{
|
|
var done = i < 2;
|
|
<DTimelineItem EndBox="true" LineBeforeClass="@(i <= 2 && i > 0 ? "bg-primary" : null)" LineAfterClass="@(done ? "bg-primary" : null)">
|
|
<Start>@events[i].Year</Start>
|
|
<Middle><i class="@(i <= 2 ? "ion-md-checkmark-circle text-primary" : "ion-md-checkmark-circle") text-xl"></i></Middle>
|
|
<End>@events[i].Text</End>
|
|
</DTimelineItem>
|
|
}
|
|
</DTimeline>
|
|
</div>
|
|
<div class="grid gap-4 md:grid-cols-2">
|
|
<div>
|
|
<span class="text-sm opacity-60">Vertical, both sides, start boxes</span>
|
|
<DTimeline Direction="DDirection.Vertical">
|
|
@foreach (var i in Enumerable.Range(0, events.Length))
|
|
{
|
|
<DTimelineItem StartBox="@(i % 2 == 0)" EndBox="@(i % 2 == 1)">
|
|
<Start>@(i % 2 == 0 ? events[i].Text : events[i].Year)</Start>
|
|
<Middle><i class="ion-md-time text-xl"></i></Middle>
|
|
<End>@(i % 2 == 0 ? events[i].Year : events[i].Text)</End>
|
|
</DTimelineItem>
|
|
}
|
|
</DTimeline>
|
|
</div>
|
|
<div>
|
|
<span class="text-sm opacity-60">Vertical, compact, snap icon</span>
|
|
<DTimeline Direction="DDirection.Vertical" Compact="true" SnapIcon="true">
|
|
@foreach (var e in events)
|
|
{
|
|
<DTimelineItem EndClass="mb-6">
|
|
<Middle><i class="ion-md-checkmark-circle text-xl"></i></Middle>
|
|
<End>
|
|
<time class="font-mono italic">@e.Year</time>
|
|
<div class="text-lg font-black">@e.Text</div>
|
|
Every item sits on the same side; the icon aligns with the top of the text.
|
|
</End>
|
|
</DTimelineItem>
|
|
}
|
|
</DTimeline>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
|
|
@code {
|
|
int accordionActive;
|
|
int joinedActive = -1;
|
|
bool collapseArrowOpen;
|
|
bool collapsePlusOpen = true;
|
|
|
|
int hours = 10, minutes = 24, seconds = 59, counter = 42;
|
|
System.Threading.Timer timer;
|
|
|
|
readonly string[] galleryImages =
|
|
[
|
|
"imgs/styleguide/scene-5.svg",
|
|
"imgs/styleguide/scene-6.svg",
|
|
"imgs/styleguide/scene-1.svg",
|
|
"imgs/styleguide/scene-2.svg"
|
|
];
|
|
|
|
readonly string[] rotateWords = ["ONE", "TWO", "THREE"];
|
|
readonly string[] bigWords = ["DESIGN", "DEVELOP", "DEPLOY", "SCALE", "MAINTAIN", "REPEAT"];
|
|
|
|
readonly (string Name, string Job, string Colour)[] people =
|
|
[
|
|
("Cy Ganderton", "Quality Control Specialist", "Blue"),
|
|
("Hart Hagerty", "Desktop Support Technician", "Purple"),
|
|
("Brice Swyre", "Tax Accountant", "Red"),
|
|
("Marjy Ferencz", "Office Assistant I", "Crimson")
|
|
];
|
|
|
|
readonly (string Year, string Text)[] events =
|
|
[
|
|
("1984", "First Macintosh"),
|
|
("1998", "iMac"),
|
|
("2001", "iPod"),
|
|
("2007", "iPhone"),
|
|
("2015", "Apple Watch")
|
|
];
|
|
|
|
protected override void OnInitialized() =>
|
|
timer = new System.Threading.Timer(_ => InvokeAsync(() =>
|
|
{
|
|
Tick();
|
|
StateHasChanged();
|
|
}), null, 1000, 1000);
|
|
|
|
void Tick()
|
|
{
|
|
if (--seconds >= 0)
|
|
return;
|
|
seconds = 59;
|
|
if (--minutes >= 0)
|
|
return;
|
|
minutes = 59;
|
|
hours = hours == 0 ? 23 : hours - 1;
|
|
}
|
|
|
|
public void Dispose() => timer?.Dispose();
|
|
}
|