Add D-prefixed Blazor wrappers for every daisyUI 5 component
Components/Daisy/ wraps all 69 components in daisyUI's llms.txt, grouped by daisyUI's categories (Actions, DataDisplay, Navigation, Feedback, DataInput, Layout, Mockup), with part components where daisyUI has repeating parts (DTab, DMenuItem, DTimelineItem, ...). - Each enum maps to whole literal class names in a switch, so Tailwind's scanner generates them. Nothing is concatenated. - Value-holding fields derive from DInputBase<TValue>, Blazor's InputBase, so @bind-Value and EditForm validation work. Invalid fields get the component's *-error class. - Open and active state lives in C# (@bind-IsOpen, @bind-Active) and is rendered with daisyUI's *-open modifiers. DDropdown adds an outside-click layer and Escape. No component uses JS interop. - The one exception is DCalendar, which wraps the Cally web component, vendored as wwwroot/vendor/cally.js (0.9.2, MIT). /styleguide (not linked) renders every component in all its colours, sizes and states, with a theme and hue picker that previews without saving. neo.css follows what the styleguide showed: - select keeps daisyUI's arrow; - skeleton-text isn't sunk; - the phone mockup and dock are raised; - active menu items and OTP digits are inset; - a joined accordion is raised as one block. The primary, secondary and accent colours are deeper, so they still read as text. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01LsXgEaXee4GCU1hwYgPJXw
This commit is contained in:
thepraandClaude Opus 5.5 committed
1 parent
8e03d12a3e
commit
90e4b9200c
127 files changed
+6962
-17
No files matched your search
@@ -0,0 +1,224 @@
|
||||
@* Styleguide: the Actions components (Button, Dropdown, FAB, Modal, Swap, Theme controller). *@
|
||||
<div class="grid gap-8 lg:grid-cols-2">
|
||||
<section class="flex flex-col gap-3 lg:col-span-2">
|
||||
<h3 class="text-lg font-bold">DButton</h3>
|
||||
<div class="flex flex-wrap items-center gap-2">
|
||||
@foreach (var color in Enum.GetValues<DColor>())
|
||||
{
|
||||
<DButton Color="color">@color</DButton>
|
||||
}
|
||||
</div>
|
||||
@foreach (var variant in Enum.GetValues<DButtonVariant>().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>())
|
||||
{
|
||||
<DButton Color="color" Variant="variant">@color</DButton>
|
||||
}
|
||||
</div>
|
||||
}
|
||||
<div class="flex flex-wrap items-center gap-2">
|
||||
<DButton Size="DSize.Xs">Xs</DButton>
|
||||
<DButton Size="DSize.Sm">Sm</DButton>
|
||||
<DButton>Md</DButton>
|
||||
<DButton Size="DSize.Lg">Lg</DButton>
|
||||
<DButton Size="DSize.Xl">Xl</DButton>
|
||||
</div>
|
||||
<div class="flex flex-wrap items-center gap-2">
|
||||
<DButton Shape="DButtonShape.Wide" Color="DColor.Primary">Wide</DButton>
|
||||
<DButton Shape="DButtonShape.Square"><i class="ion-md-heart"></i></DButton>
|
||||
<DButton Shape="DButtonShape.Circle" Color="DColor.Secondary"><i class="ion-md-add"></i></DButton>
|
||||
<DButton Shape="DButtonShape.Circle" Size="DSize.Sm"><i class="ion-md-close"></i></DButton>
|
||||
<DButton Color="DColor.Accent"><i class="ion-md-mail"></i> With icon</DButton>
|
||||
</div>
|
||||
<DButton Shape="DButtonShape.Block">Block</DButton>
|
||||
<div class="flex flex-wrap items-center gap-2">
|
||||
<DButton Active="true">Active</DButton>
|
||||
<DButton Active="true" Color="DColor.Primary">Active primary</DButton>
|
||||
<DButton Disabled="true">Disabled</DButton>
|
||||
<DButton Disabled="true" Color="DColor.Primary">Disabled primary</DButton>
|
||||
<DButton Href="#">Link button</DButton>
|
||||
<DButton Href="#" Disabled="true">Disabled link</DButton>
|
||||
<DButton Color="DColor.Info" OnClick="() => buttonClicks++">Clicked @buttonClicks times</DButton>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="flex flex-col gap-3">
|
||||
<h3 class="text-lg font-bold">DDropdown</h3>
|
||||
<div class="flex flex-wrap items-start gap-2">
|
||||
<DDropdown @bind-IsOpen="dropdownOpen" CloseOnContentClick="true" TriggerClass="btn" ContentClass="w-52 rounded-box p-2">
|
||||
<Trigger>Menu (@(dropdownOpen ? "open" : "closed"))</Trigger>
|
||||
<ChildContent>
|
||||
<ul class="menu w-full p-0">
|
||||
<li><a><i class="ion-md-person"></i> Profile</a></li>
|
||||
<li><a><i class="ion-md-settings"></i> Settings</a></li>
|
||||
<li><a><i class="ion-md-home"></i> Home</a></li>
|
||||
</ul>
|
||||
</ChildContent>
|
||||
</DDropdown>
|
||||
<DDropdown Align="DDropdownAlign.End" TriggerClass="btn btn-primary" ContentClass="w-52 rounded-box p-4">
|
||||
<Trigger>Align end</Trigger>
|
||||
<ChildContent>Any content: press Escape or click outside to close.</ChildContent>
|
||||
</DDropdown>
|
||||
<DDropdown Hover="true" TriggerClass="btn btn-ghost" ContentClass="w-40 rounded-box p-2">
|
||||
<Trigger>Hover</Trigger>
|
||||
<ChildContent>
|
||||
<ul class="menu w-full p-0">
|
||||
<li><a>One</a></li>
|
||||
<li><a>Two</a></li>
|
||||
</ul>
|
||||
</ChildContent>
|
||||
</DDropdown>
|
||||
</div>
|
||||
<div class="flex flex-wrap items-center gap-2 pt-24">
|
||||
<DDropdown Placement="DDropdownPlacement.Top" TriggerClass="btn btn-sm" ContentClass="w-32 rounded-box p-2">
|
||||
<Trigger>Top</Trigger>
|
||||
<ChildContent>Above</ChildContent>
|
||||
</DDropdown>
|
||||
<DDropdown Placement="DDropdownPlacement.Right" TriggerClass="btn btn-sm" ContentClass="w-32 rounded-box p-2">
|
||||
<Trigger>Right</Trigger>
|
||||
<ChildContent>Beside</ChildContent>
|
||||
</DDropdown>
|
||||
<DDropdown Placement="DDropdownPlacement.Left" Align="DDropdownAlign.End" TriggerClass="btn btn-sm"
|
||||
ContentClass="w-32 rounded-box p-2" class="ml-auto">
|
||||
<Trigger>Left</Trigger>
|
||||
<ChildContent>Beside</ChildContent>
|
||||
</DDropdown>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="flex flex-col gap-3">
|
||||
<h3 class="text-lg font-bold">DModal</h3>
|
||||
<div class="flex flex-wrap items-center gap-2">
|
||||
@foreach (var placement in Enum.GetValues<DModalPlacement>())
|
||||
{
|
||||
<DButton OnClick="() => OpenModal(placement)">@placement</DButton>
|
||||
}
|
||||
<DButton Color="DColor.Warning" OnClick="() => strictModalOpen = true">No backdrop close</DButton>
|
||||
</div>
|
||||
<p class="text-sm opacity-60">Escape and a click outside close the first modal; the second closes only from its buttons or Escape.</p>
|
||||
<DModal @bind-IsOpen="modalOpen" Placement="modalPlacement">
|
||||
<Heading>Hello from @modalPlacement</Heading>
|
||||
<ChildContent>
|
||||
<p class="py-4">Press Escape or click outside to close.</p>
|
||||
</ChildContent>
|
||||
<Actions>
|
||||
<DButton OnClick="() => modalOpen = false">Close</DButton>
|
||||
</Actions>
|
||||
</DModal>
|
||||
<DModal @bind-IsOpen="strictModalOpen" CloseOnBackdrop="false" BoxClass="w-11/12 max-w-3xl">
|
||||
<Heading>Confirm</Heading>
|
||||
<ChildContent>
|
||||
<p class="py-4">A wider box (BoxClass) that ignores clicks on the backdrop.</p>
|
||||
</ChildContent>
|
||||
<Actions>
|
||||
<DButton Variant="DButtonVariant.Ghost" OnClick="() => strictModalOpen = false">Cancel</DButton>
|
||||
<DButton Color="DColor.Primary" OnClick="() => strictModalOpen = false">OK</DButton>
|
||||
</Actions>
|
||||
</DModal>
|
||||
</section>
|
||||
|
||||
<section class="flex flex-col gap-3">
|
||||
<h3 class="text-lg font-bold">DSwap</h3>
|
||||
<div class="flex flex-wrap items-center gap-6 text-4xl">
|
||||
<DSwap @bind-Active="swapVolume" LabelText="mute">
|
||||
<On><i class="ion-md-volume-high"></i></On>
|
||||
<Off><i class="ion-md-volume-off"></i></Off>
|
||||
</DSwap>
|
||||
<DSwap @bind-Active="swapTheme" Effect="DSwapEffect.Rotate" LabelText="dark mode">
|
||||
<On><i class="ion-md-sunny"></i></On>
|
||||
<Off><i class="ion-md-moon"></i></Off>
|
||||
</DSwap>
|
||||
<DSwap Effect="DSwapEffect.Rotate" class="btn btn-circle" LabelText="menu">
|
||||
<On><i class="ion-md-close"></i></On>
|
||||
<Off><i class="ion-md-menu"></i></Off>
|
||||
</DSwap>
|
||||
<DSwap Effect="DSwapEffect.Flip" class="text-5xl">
|
||||
<On>😈</On>
|
||||
<Off>😇</Off>
|
||||
</DSwap>
|
||||
<DSwap class="text-base font-bold">
|
||||
<On>ON</On>
|
||||
<Off>OFF</Off>
|
||||
</DSwap>
|
||||
<DSwap Active="true" Disabled="true" class="text-base">
|
||||
<On>Disabled on</On>
|
||||
<Off>Disabled off</Off>
|
||||
</DSwap>
|
||||
</div>
|
||||
<p class="text-sm opacity-60">Volume: @(swapVolume ? "on" : "off"), sun: @(swapTheme ? "on" : "off")</p>
|
||||
</section>
|
||||
|
||||
<section class="flex flex-col gap-3">
|
||||
<h3 class="text-lg font-bold">DFab</h3>
|
||||
<p class="text-sm opacity-60">Click or focus the button; these boxes contain the fixed FABs (transform-gpu).</p>
|
||||
<div class="grid grid-cols-2 gap-3">
|
||||
<div class="relative h-80 transform-gpu overflow-hidden rounded-box bg-base-200">
|
||||
<DFab LabelText="Actions">
|
||||
<Trigger><i class="ion-md-add text-xl"></i></Trigger>
|
||||
<Close>Close <span class="btn btn-circle btn-lg btn-error"><i class="ion-md-close"></i></span></Close>
|
||||
<ChildContent>
|
||||
<div>Camera <DButton Size="DSize.Lg" Shape="DButtonShape.Circle"><i class="ion-md-camera"></i></DButton></div>
|
||||
<div>Image <DButton Size="DSize.Lg" Shape="DButtonShape.Circle"><i class="ion-md-image"></i></DButton></div>
|
||||
<div>Mic <DButton Size="DSize.Lg" Shape="DButtonShape.Circle"><i class="ion-md-mic"></i></DButton></div>
|
||||
</ChildContent>
|
||||
</DFab>
|
||||
</div>
|
||||
<div class="relative h-80 transform-gpu overflow-hidden rounded-box bg-base-200">
|
||||
<DFab Flower="true" Color="DColor.Secondary" LabelText="Actions">
|
||||
<Trigger><i class="ion-md-add text-xl"></i></Trigger>
|
||||
<MainAction>
|
||||
<DButton Size="DSize.Lg" Shape="DButtonShape.Circle" Color="DColor.Accent"><i class="ion-md-create"></i></DButton>
|
||||
</MainAction>
|
||||
<ChildContent>
|
||||
<div class="tooltip tooltip-left" data-tip="Camera">
|
||||
<DButton Size="DSize.Lg" Shape="DButtonShape.Circle"><i class="ion-md-camera"></i></DButton>
|
||||
</div>
|
||||
<div class="tooltip tooltip-left" data-tip="Image">
|
||||
<DButton Size="DSize.Lg" Shape="DButtonShape.Circle"><i class="ion-md-image"></i></DButton>
|
||||
</div>
|
||||
<div class="tooltip tooltip-left" data-tip="Mic">
|
||||
<DButton Size="DSize.Lg" Shape="DButtonShape.Circle"><i class="ion-md-mic"></i></DButton>
|
||||
</div>
|
||||
</ChildContent>
|
||||
</DFab>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="flex flex-col gap-3">
|
||||
<h3 class="text-lg font-bold">DThemeController</h3>
|
||||
<p class="text-sm opacity-60">Overrides the app theme while checked.</p>
|
||||
<label class="flex items-center gap-2">
|
||||
<i class="ion-md-sunny"></i>
|
||||
<DThemeController Value="neo-dark" @bind-Checked="themeToggle" class="toggle" aria-label="dark theme" />
|
||||
<i class="ion-md-moon"></i>
|
||||
</label>
|
||||
<div class="join">
|
||||
<DThemeController Radio="true" Value="neo-light" name="styleguide-theme" class="btn join-item" aria-label="neo-light"
|
||||
Checked="@(themeRadio == "neo-light")" CheckedChanged="@(() => themeRadio = "neo-light")" />
|
||||
<DThemeController Radio="true" Value="neo-dark" name="styleguide-theme" class="btn join-item" aria-label="neo-dark"
|
||||
Checked="@(themeRadio == "neo-dark")" CheckedChanged="@(() => themeRadio = "neo-dark")" />
|
||||
<DButton class="join-item" OnClick="() => themeRadio = null">Reset</DButton>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
@code {
|
||||
int buttonClicks;
|
||||
bool dropdownOpen;
|
||||
bool modalOpen;
|
||||
bool strictModalOpen;
|
||||
DModalPlacement modalPlacement;
|
||||
bool swapVolume = true;
|
||||
bool swapTheme;
|
||||
bool themeToggle;
|
||||
string themeRadio;
|
||||
|
||||
void OpenModal(DModalPlacement placement)
|
||||
{
|
||||
modalPlacement = placement;
|
||||
modalOpen = true;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,573 @@
|
||||
@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="https://picsum.photos/seed/av1/96/96" Alt="Avatar" Class="w-8 rounded-full" />
|
||||
<DAvatar Src="https://picsum.photos/seed/av1/96/96" Alt="Avatar" Class="w-12 rounded-full" />
|
||||
<DAvatar Src="https://picsum.photos/seed/av1/96/96" Alt="Avatar" Class="w-16 rounded-box" />
|
||||
<DAvatar Src="https://picsum.photos/seed/av1/96/96" Alt="Avatar" Class="w-20 rounded-xl" />
|
||||
</div>
|
||||
<div class="flex flex-wrap items-center gap-4">
|
||||
<DAvatar Src="https://picsum.photos/seed/av2/96/96" Alt="Squircle" Class="w-16 mask mask-squircle" />
|
||||
<DAvatar Src="https://picsum.photos/seed/av2/96/96" Alt="Hexagon" Class="w-16 mask mask-hexagon" />
|
||||
<DAvatar Src="https://picsum.photos/seed/av2/96/96" Alt="Triangle" Class="w-16 mask mask-triangle" />
|
||||
<DAvatar Src="https://picsum.photos/seed/av3/96/96" Alt="Online" Status="DAvatarStatus.Online" Class="w-16 rounded-full" />
|
||||
<DAvatar Src="https://picsum.photos/seed/av4/96/96" 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="https://picsum.photos/seed/g1/96/96" Alt="One" Class="w-12" />
|
||||
<DAvatar Src="https://picsum.photos/seed/g2/96/96" Alt="Two" Class="w-12" />
|
||||
<DAvatar Src="https://picsum.photos/seed/g3/96/96" 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="https://picsum.photos/seed/card1/600/300" 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="https://picsum.photos/seed/card2/600/300" 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="https://picsum.photos/seed/card3/200/300" 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="https://picsum.photos/seed/card4/600/400" 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="https://picsum.photos/seed/car@(i)/200/140" alt="Slide @i" /></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="https://picsum.photos/seed/full@(i)/400/160" 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="https://picsum.photos/seed/vert@(i)/400/160" 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="https://picsum.photos/seed/obi/80/80" 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="https://picsum.photos/seed/ani/80/80" 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="https://picsum.photos/id/1015/800/450" alt="" /></Item1>
|
||||
<Item2><img src="https://picsum.photos/id/1015/800/450?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="https://picsum.photos/seed/h3d/480/300" alt="Tilting card" /></figure>
|
||||
</DHover3D>
|
||||
<DHover3D Href="https://daisyui.com/components/hover-3d/" target="_blank" rel="noopener">
|
||||
<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="https://picsum.photos/seed/hgx1/300/400" alt="First" />
|
||||
<img src="https://picsum.photos/seed/hgx2/300/400" alt="Second" />
|
||||
<img src="https://picsum.photos/seed/hgx3/300/400" 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="https://picsum.photos/seed/song@(i)/80/80" 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="https://picsum.photos/seed/song4/80/80" 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="https://picsum.photos/seed/stat/96/96" 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 =
|
||||
[
|
||||
"https://picsum.photos/seed/hg1/300/400",
|
||||
"https://picsum.photos/seed/hg2/300/400",
|
||||
"https://picsum.photos/seed/hg3/300/400",
|
||||
"https://picsum.photos/seed/hg4/300/400"
|
||||
];
|
||||
|
||||
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();
|
||||
}
|
||||
@@ -0,0 +1,380 @@
|
||||
@using System.ComponentModel.DataAnnotations
|
||||
|
||||
@* Styleguide: the Data input components (Input, Select, Textarea, Checkbox, Toggle, Radio, Range, Rating, Filter, OTP,
|
||||
File input, Fieldset, Label, Validator, Calendar). Everything sits in one EditForm with DataAnnotations: submit it
|
||||
empty to see input-error and the validator hints. novalidate leaves the checking to Blazor. *@
|
||||
<EditForm Model="model" OnValidSubmit="() => Submitted(true)" OnInvalidSubmit="() => Submitted(false)" novalidate>
|
||||
<DataAnnotationsValidator />
|
||||
<div class="grid gap-8 lg:grid-cols-2">
|
||||
<section class="flex flex-col gap-3 lg:col-span-2">
|
||||
<h3 class="text-lg font-bold">DInput</h3>
|
||||
<div class="flex flex-wrap items-center gap-2">
|
||||
@foreach (var color in Enum.GetValues<DColor>())
|
||||
{
|
||||
<DInput @bind-Value="text" Color="color" placeholder="@color.ToString()" class="w-36" />
|
||||
}
|
||||
</div>
|
||||
<div class="flex flex-wrap items-center gap-2">
|
||||
<DInput @bind-Value="text" Size="DSize.Xs" placeholder="Xs" class="w-28" />
|
||||
<DInput @bind-Value="text" Size="DSize.Sm" placeholder="Sm" class="w-28" />
|
||||
<DInput @bind-Value="text" placeholder="Md" class="w-28" />
|
||||
<DInput @bind-Value="text" Size="DSize.Lg" placeholder="Lg" class="w-28" />
|
||||
<DInput @bind-Value="text" Size="DSize.Xl" placeholder="Xl" class="w-28" />
|
||||
</div>
|
||||
<div class="flex flex-wrap items-center gap-2">
|
||||
<DInput @bind-Value="text" Ghost="true" placeholder="Ghost" />
|
||||
<DInput @bind-Value="text" disabled placeholder="Disabled" />
|
||||
<DInput @bind-Value="search" Immediate="true" placeholder="Search">
|
||||
<Prefix><i class="ion-md-search opacity-50"></i></Prefix>
|
||||
<Suffix><kbd class="kbd kbd-sm">⌘</kbd><kbd class="kbd kbd-sm">K</kbd></Suffix>
|
||||
</DInput>
|
||||
<DInput @bind-Value="site" Color="DColor.Primary">
|
||||
<Prefix><DLabel>https://</DLabel></Prefix>
|
||||
<Suffix><DLabel>.com</DLabel></Suffix>
|
||||
</DInput>
|
||||
</div>
|
||||
<p class="text-sm opacity-60">Immediate search: "@search", text: "@text"</p>
|
||||
<div class="flex flex-col">
|
||||
<DInput @bind-Value="model.Name" Validator="true" placeholder="Name (required)" class="w-full max-w-xs" />
|
||||
<DValidatorHint>Name is required</DValidatorHint>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="flex flex-col gap-3">
|
||||
<h3 class="text-lg font-bold">DSelect</h3>
|
||||
<div class="flex flex-wrap items-center gap-2">
|
||||
@foreach (var color in Enum.GetValues<DColor>())
|
||||
{
|
||||
<DSelect @bind-Value="language" Color="color" class="w-36">
|
||||
<option value="C#">C# (@color)</option>
|
||||
<option value="F#">F#</option>
|
||||
<option value="TypeScript">TypeScript</option>
|
||||
</DSelect>
|
||||
}
|
||||
</div>
|
||||
<div class="flex flex-wrap items-center gap-2">
|
||||
<DSelect @bind-Value="language" Size="DSize.Xs" class="w-28"><option>C#</option><option>F#</option></DSelect>
|
||||
<DSelect @bind-Value="language" Size="DSize.Sm" class="w-28"><option>C#</option><option>F#</option></DSelect>
|
||||
<DSelect @bind-Value="language" class="w-28"><option>C#</option><option>F#</option></DSelect>
|
||||
<DSelect @bind-Value="language" Size="DSize.Lg" class="w-28"><option>C#</option><option>F#</option></DSelect>
|
||||
<DSelect @bind-Value="language" Size="DSize.Xl" class="w-28"><option>C#</option><option>F#</option></DSelect>
|
||||
</div>
|
||||
<div class="flex flex-wrap items-center gap-2">
|
||||
<DSelect @bind-Value="language" Ghost="true" class="w-36"><option>C#</option><option>F#</option></DSelect>
|
||||
<DSelect @bind-Value="language" disabled class="w-36"><option>C#</option><option>F#</option></DSelect>
|
||||
<DSelect @bind-Value="language" class="w-48">
|
||||
<Prefix><DLabel>Type</DLabel></Prefix>
|
||||
<ChildContent><option>C#</option><option>F#</option></ChildContent>
|
||||
</DSelect>
|
||||
</div>
|
||||
<div class="flex flex-col">
|
||||
<DSelect @bind-Value="model.Language" Validator="true" class="w-full max-w-xs">
|
||||
<option value="">Pick a language (required)</option>
|
||||
<option>C#</option>
|
||||
<option>F#</option>
|
||||
</DSelect>
|
||||
<DValidatorHint>Pick one</DValidatorHint>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="flex flex-col gap-3">
|
||||
<h3 class="text-lg font-bold">DTextarea</h3>
|
||||
<div class="grid grid-cols-3 gap-2">
|
||||
@foreach (var color in Enum.GetValues<DColor>())
|
||||
{
|
||||
<DTextarea @bind-Value="bio" Color="color" placeholder="@color.ToString()" class="min-h-0 h-12" />
|
||||
}
|
||||
</div>
|
||||
<div class="flex flex-wrap items-start gap-2">
|
||||
<DTextarea @bind-Value="bio" Size="DSize.Xs" placeholder="Xs" class="w-24" />
|
||||
<DTextarea @bind-Value="bio" Size="DSize.Sm" placeholder="Sm" class="w-24" />
|
||||
<DTextarea @bind-Value="bio" placeholder="Md" class="w-24" />
|
||||
<DTextarea @bind-Value="bio" Size="DSize.Lg" placeholder="Lg" class="w-24" />
|
||||
<DTextarea @bind-Value="bio" Size="DSize.Xl" placeholder="Xl" class="w-24" />
|
||||
</div>
|
||||
<div class="flex flex-wrap items-start gap-2">
|
||||
<DTextarea @bind-Value="bio" Ghost="true" placeholder="Ghost" />
|
||||
<DTextarea @bind-Value="bio" disabled placeholder="Disabled" />
|
||||
</div>
|
||||
<div class="flex flex-col">
|
||||
<DTextarea @bind-Value="model.Bio" Immediate="true" Validator="true" placeholder="Bio, 10 to 140 characters" class="w-full" />
|
||||
<DValidatorHint>Between 10 and 140 characters</DValidatorHint>
|
||||
<span class="text-sm opacity-60">@(model.Bio?.Length ?? 0)/140</span>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="flex flex-col gap-3">
|
||||
<h3 class="text-lg font-bold">DCheckbox</h3>
|
||||
<div class="flex flex-wrap items-center gap-2">
|
||||
@foreach (var color in Enum.GetValues<DColor>())
|
||||
{
|
||||
<DCheckbox @bind-Value="check" Color="color" title="@color.ToString()" />
|
||||
}
|
||||
</div>
|
||||
<div class="flex flex-wrap items-center gap-2">
|
||||
<DCheckbox @bind-Value="check" Size="DSize.Xs" />
|
||||
<DCheckbox @bind-Value="check" Size="DSize.Sm" />
|
||||
<DCheckbox @bind-Value="check" />
|
||||
<DCheckbox @bind-Value="check" Size="DSize.Lg" />
|
||||
<DCheckbox @bind-Value="check" Size="DSize.Xl" />
|
||||
<DCheckbox @bind-Value="check" disabled />
|
||||
</div>
|
||||
<DCheckbox @bind-Value="check" Color="DColor.Primary" LabelText="@($"Checked: {check}")" />
|
||||
<DCheckbox @bind-Value="model.Terms" LabelText="I accept the terms (must be checked)" />
|
||||
<ValidationMessage For="() => model.Terms" class="text-error text-xs" />
|
||||
</section>
|
||||
|
||||
<section class="flex flex-col gap-3">
|
||||
<h3 class="text-lg font-bold">DToggle</h3>
|
||||
<div class="flex flex-wrap items-center gap-2">
|
||||
@foreach (var color in Enum.GetValues<DColor>())
|
||||
{
|
||||
<DToggle @bind-Value="toggle" Color="color" title="@color.ToString()" />
|
||||
}
|
||||
</div>
|
||||
<div class="flex flex-wrap items-center gap-2">
|
||||
<DToggle @bind-Value="toggle" Size="DSize.Xs" />
|
||||
<DToggle @bind-Value="toggle" Size="DSize.Sm" />
|
||||
<DToggle @bind-Value="toggle" />
|
||||
<DToggle @bind-Value="toggle" Size="DSize.Lg" />
|
||||
<DToggle @bind-Value="toggle" Size="DSize.Xl" />
|
||||
<DToggle @bind-Value="toggle" disabled />
|
||||
</div>
|
||||
<div class="flex flex-wrap items-center gap-4">
|
||||
<DToggle @bind-Value="toggle" Size="DSize.Lg">
|
||||
<CheckedIcon><i class="ion-md-checkmark"></i></CheckedIcon>
|
||||
<UncheckedIcon><i class="ion-md-close"></i></UncheckedIcon>
|
||||
</DToggle>
|
||||
<DToggle @bind-Value="toggle" Color="DColor.Success" Size="DSize.Lg">
|
||||
<CheckedIcon><i class="ion-md-sunny"></i></CheckedIcon>
|
||||
<UncheckedIcon><i class="ion-md-moon"></i></UncheckedIcon>
|
||||
</DToggle>
|
||||
<DToggle @bind-Value="toggle" Color="DColor.Accent" LabelText="With icons and a label">
|
||||
<CheckedIcon><i class="ion-md-volume-high"></i></CheckedIcon>
|
||||
<UncheckedIcon><i class="ion-md-volume-off"></i></UncheckedIcon>
|
||||
</DToggle>
|
||||
</div>
|
||||
<DToggle @bind-Value="model.Notifications" Color="DColor.Primary" LabelText="Notifications" />
|
||||
</section>
|
||||
|
||||
<section class="flex flex-col gap-3">
|
||||
<h3 class="text-lg font-bold">DRadioGroup / DRadio</h3>
|
||||
<DRadioGroup @bind-Value="radioColor" class="flex flex-wrap items-center gap-2" aria-label="Colors">
|
||||
@foreach (var color in Enum.GetValues<DColor>())
|
||||
{
|
||||
<DRadio Value="color" Color="color" title="@color.ToString()" />
|
||||
}
|
||||
</DRadioGroup>
|
||||
<p class="text-sm opacity-60">Picked: @radioColor</p>
|
||||
<DRadioGroup @bind-Value="radioSize" class="flex flex-wrap items-center gap-2" aria-label="Sizes">
|
||||
@foreach (var size in sizes)
|
||||
{
|
||||
<DRadio Value="size" Size="size" Color="DColor.Secondary" />
|
||||
}
|
||||
</DRadioGroup>
|
||||
<DRadioGroup @bind-Value="disabledPick" class="flex flex-wrap items-center gap-2" aria-label="Disabled">
|
||||
<DRadio Value="1" Disabled="true" LabelText="Disabled, checked" />
|
||||
<DRadio Value="2" Disabled="true" LabelText="Disabled" />
|
||||
</DRadioGroup>
|
||||
<DRadioGroup @bind-Value="model.Plan" class="flex flex-col gap-1" aria-label="Plan">
|
||||
@foreach (var plan in plans)
|
||||
{
|
||||
<DRadio Value="plan" LabelText="@plan" Color="DColor.Primary" />
|
||||
}
|
||||
</DRadioGroup>
|
||||
<ValidationMessage For="() => model.Plan" class="text-error text-xs" />
|
||||
</section>
|
||||
|
||||
<section class="flex flex-col gap-3">
|
||||
<h3 class="text-lg font-bold">DRange</h3>
|
||||
@foreach (var color in Enum.GetValues<DColor>())
|
||||
{
|
||||
<DRange @bind-Value="volume" Color="color" Immediate="true" title="@color.ToString()" />
|
||||
}
|
||||
<p class="text-sm opacity-60">Value: @volume</p>
|
||||
<DRange @bind-Value="volume" Size="DSize.Xs" />
|
||||
<DRange @bind-Value="volume" Size="DSize.Sm" />
|
||||
<DRange @bind-Value="volume" Size="DSize.Lg" />
|
||||
<DRange @bind-Value="volume" Size="DSize.Xl" />
|
||||
<div class="w-full max-w-xs">
|
||||
<DRange @bind-Value="steps" Step="25" Color="DColor.Accent" />
|
||||
<div class="mt-2 flex justify-between px-2.5 text-xs"><span>|</span><span>|</span><span>|</span><span>|</span><span>|</span></div>
|
||||
</div>
|
||||
<div class="flex items-center gap-4">
|
||||
<DRange @bind-Value="volume" Direction="DDirection.Vertical" Immediate="true" Color="DColor.Primary" />
|
||||
<DRange @bind-Value="volume" disabled />
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="flex flex-col gap-3">
|
||||
<h3 class="text-lg font-bold">DRating</h3>
|
||||
<div class="flex flex-wrap items-center gap-4">
|
||||
<DRating @bind-Value="model.Stars" />
|
||||
<span class="text-sm opacity-60">@model.Stars stars (1 to 5)</span>
|
||||
</div>
|
||||
<ValidationMessage For="() => model.Stars" class="text-error text-xs" />
|
||||
<DRating @bind-Value="stars" Mask="DRatingMask.Star2" ItemClass="bg-orange-400" />
|
||||
<DRating @bind-Value="stars" Mask="DRatingMask.Heart" ItemClass="bg-red-400" UnitText="heart" class="gap-1" />
|
||||
<div class="flex flex-wrap items-center gap-4">
|
||||
<DRating @bind-Value="stars" Size="DSize.Xs" />
|
||||
<DRating @bind-Value="stars" Size="DSize.Sm" />
|
||||
<DRating @bind-Value="stars" />
|
||||
<DRating @bind-Value="stars" Size="DSize.Lg" />
|
||||
<DRating @bind-Value="stars" Size="DSize.Xl" />
|
||||
</div>
|
||||
<div class="flex flex-wrap items-center gap-4">
|
||||
<DRating @bind-Value="halfStars" Half="true" Clearable="true" Mask="DRatingMask.Star2" Size="DSize.Lg" ItemClass="bg-green-500" />
|
||||
<span class="text-sm opacity-60">@(halfStars / 2.0) stars (clearable)</span>
|
||||
</div>
|
||||
<div class="flex flex-wrap items-center gap-4">
|
||||
<DRating @bind-Value="stars" Static="true" />
|
||||
<DRating @bind-Value="stars" Disabled="true" Mask="DRatingMask.Diamond" Count="3" />
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="flex flex-col gap-3">
|
||||
<h3 class="text-lg font-bold">DFilter</h3>
|
||||
<DFilter @bind-Value="framework" Options="frameworks" />
|
||||
<DFilter @bind-Value="filterColor" Options="@(Enum.GetValues<DColor>().Skip(1).Cast<DColor?>())" TextOf="c => c?.ToString()" Size="DSize.Sm" />
|
||||
<p class="text-sm opacity-60">Picked: @(framework ?? "none"), @(filterColor?.ToString() ?? "none")</p>
|
||||
</section>
|
||||
|
||||
<section class="flex flex-col gap-3">
|
||||
<h3 class="text-lg font-bold">DOtp</h3>
|
||||
<div class="flex flex-col">
|
||||
<DOtp @bind-Value="model.Code" Immediate="true" />
|
||||
<ValidationMessage For="() => model.Code" class="text-error text-xs" />
|
||||
</div>
|
||||
<DOtp @bind-Value="otp" Length="4" Joined="true" Color="DColor.Primary" />
|
||||
<div class="flex flex-wrap items-center gap-2">
|
||||
@foreach (var color in Enum.GetValues<DColor>().Skip(1))
|
||||
{
|
||||
<DOtp @bind-Value="otp" Length="4" Color="color" Size="DSize.Xs" title="@color.ToString()" />
|
||||
}
|
||||
</div>
|
||||
<div class="flex flex-wrap items-end gap-2">
|
||||
@foreach (var size in sizes)
|
||||
{
|
||||
<DOtp @bind-Value="otp" Length="4" Size="size" />
|
||||
}
|
||||
</div>
|
||||
<DOtp @bind-Value="otp" Length="4" disabled />
|
||||
</section>
|
||||
|
||||
<section class="flex flex-col gap-3">
|
||||
<h3 class="text-lg font-bold">DFileInput</h3>
|
||||
<div class="flex flex-col gap-2">
|
||||
@foreach (var color in Enum.GetValues<DColor>())
|
||||
{
|
||||
<DFileInput Color="color" title="@color.ToString()" />
|
||||
}
|
||||
</div>
|
||||
<DFileInput Size="DSize.Xs" />
|
||||
<DFileInput Size="DSize.Sm" />
|
||||
<DFileInput Size="DSize.Lg" />
|
||||
<DFileInput Size="DSize.Xl" />
|
||||
<DFileInput Ghost="true" />
|
||||
<DFileInput disabled />
|
||||
<DFileInput Multiple="true" Accept="image/*" Color="DColor.Primary" OnChange="OnFiles" />
|
||||
<p class="text-sm opacity-60">Picked: @(files.Count == 0 ? "nothing" : string.Join(", ", files))</p>
|
||||
</section>
|
||||
|
||||
<section class="flex flex-col gap-3">
|
||||
<h3 class="text-lg font-bold">DFieldset / DLabel</h3>
|
||||
<DFieldset class="bg-base-200 border-base-300 rounded-box w-xs border p-4">
|
||||
<Legend>Page details</Legend>
|
||||
<ChildContent>
|
||||
<DLabel>Title</DLabel>
|
||||
<DInput @bind-Value="text" placeholder="My awesome page" />
|
||||
<DLabel>Slug</DLabel>
|
||||
<DInput @bind-Value="site" placeholder="my-awesome-page" />
|
||||
</ChildContent>
|
||||
<Description>You can edit these later</Description>
|
||||
</DFieldset>
|
||||
<DFieldset disabled>
|
||||
<Legend>Disabled fieldset</Legend>
|
||||
<ChildContent><DInput @bind-Value="text" placeholder="Can't type here" /></ChildContent>
|
||||
</DFieldset>
|
||||
<DLabel Floating="true" Text="Your email">
|
||||
<DInput @bind-Value="email" placeholder="mail@site.com" />
|
||||
</DLabel>
|
||||
<DLabel Floating="true" Text="Notes">
|
||||
<DTextarea @bind-Value="bio" placeholder="Notes" />
|
||||
</DLabel>
|
||||
</section>
|
||||
|
||||
<section class="flex flex-col gap-3">
|
||||
<h3 class="text-lg font-bold">DValidator / DValidatorHint</h3>
|
||||
<p class="text-sm opacity-60">Native rules, checked by the browser once you've edited the field.</p>
|
||||
<div class="flex flex-col">
|
||||
<DInput @bind-Value="email" Type="email" Validator="true" required="true" placeholder="mail@site.com" />
|
||||
<DValidatorHint>Enter a valid email address</DValidatorHint>
|
||||
</div>
|
||||
<div class="flex flex-col">
|
||||
<DInput @bind-Value="username" Validator="true" required="true" pattern="[A-Za-z][A-Za-z0-9\-]*" minlength="3"
|
||||
maxlength="30" placeholder="Username" title="Only letters, numbers or dash" />
|
||||
<DValidatorHint Compact="true">Must be 3 to 30 letters, numbers or dashes (Compact: no space while valid)</DValidatorHint>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="flex flex-col gap-3">
|
||||
<h3 class="text-lg font-bold">DCalendar</h3>
|
||||
<DCalendar @bind-Value="model.Date" Min="today.AddDays(-30)" Max="today.AddMonths(3)"
|
||||
class="bg-base-100 border-base-300 rounded-box border shadow-lg" />
|
||||
<p class="text-sm opacity-60">Picked: @(model.Date?.ToString("yyyy-MM-dd") ?? "nothing") (from 30 days ago to 3 months ahead)</p>
|
||||
<DButton Size="DSize.Sm" OnClick="() => model.Date = today" class="self-start">Today</DButton>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<div class="mt-8 flex items-center gap-4">
|
||||
<DButton Type="submit" Color="DColor.Primary">Validate the form</DButton>
|
||||
<span class="text-sm opacity-60">@submitResult</span>
|
||||
</div>
|
||||
</EditForm>
|
||||
|
||||
@code {
|
||||
class DemoModel
|
||||
{
|
||||
[Required] public string Name { get; set; }
|
||||
[Required] public string Language { get; set; }
|
||||
[Required, StringLength(140, MinimumLength = 10)] public string Bio { get; set; }
|
||||
[Range(typeof(bool), "true", "true", ErrorMessage = "Accept the terms")] public bool Terms { get; set; }
|
||||
public bool Notifications { get; set; } = true;
|
||||
[Required] public string Plan { get; set; }
|
||||
[Range(1, 5, ErrorMessage = "Rate from 1 to 5 stars")] public int Stars { get; set; }
|
||||
[Required, RegularExpression("[0-9]{6}", ErrorMessage = "Enter the 6 digits")] public string Code { get; set; }
|
||||
public DateOnly? Date { get; set; }
|
||||
}
|
||||
|
||||
readonly DemoModel model = new();
|
||||
readonly DSize[] sizes = { DSize.Xs, DSize.Sm, DSize.Md, DSize.Lg, DSize.Xl };
|
||||
readonly string[] plans = { "Free", "Pro", "Team" };
|
||||
readonly string[] frameworks = { "Blazor", "Svelte", "Vue", "React" };
|
||||
readonly DateOnly today = DateOnly.FromDateTime(DateTime.Today);
|
||||
|
||||
string submitResult;
|
||||
int disabledPick = 1;
|
||||
string text;
|
||||
string search;
|
||||
string site;
|
||||
string email;
|
||||
string username;
|
||||
string language = "C#";
|
||||
string bio;
|
||||
bool check = true;
|
||||
bool toggle = true;
|
||||
DColor radioColor = DColor.Primary;
|
||||
DSize radioSize = DSize.Md;
|
||||
int volume = 40;
|
||||
int steps = 25;
|
||||
int stars = 3;
|
||||
int halfStars = 7;
|
||||
string framework;
|
||||
DColor? filterColor;
|
||||
string otp;
|
||||
List<string> files = new();
|
||||
|
||||
void Submitted(bool valid) => submitResult = valid ? "Valid" : "Invalid: see the messages above";
|
||||
|
||||
void OnFiles(InputFileChangeEventArgs e) => files = e.GetMultipleFiles(e.FileCount).Select(f => f.Name).ToList();
|
||||
}
|
||||
@@ -0,0 +1,236 @@
|
||||
@* Styleguide: every Feedback component (Components/Daisy/Feedback) with its main variants. *@
|
||||
<div class="grid gap-8 lg:grid-cols-2">
|
||||
<section class="flex flex-col gap-3">
|
||||
<h3 class="text-lg font-bold">DAlert</h3>
|
||||
<DAlert><Icon><i class="ion-md-information-circle text-xl"></i></Icon><ChildContent>Default alert</ChildContent></DAlert>
|
||||
@foreach (var (color, icon) in alertColors)
|
||||
{
|
||||
<DAlert Color="color"><Icon><i class="@icon text-xl"></i></Icon><ChildContent>@color alert</ChildContent></DAlert>
|
||||
}
|
||||
@foreach (var variant in new[] { DAlertVariant.Soft, DAlertVariant.Outline, DAlertVariant.Dash })
|
||||
{
|
||||
<div class="grid gap-2 sm:grid-cols-2">
|
||||
<DAlert Variant="variant">@variant</DAlert>
|
||||
@foreach (var (color, _) in alertColors)
|
||||
{
|
||||
<DAlert Variant="variant" Color="color">@variant @color</DAlert>
|
||||
}
|
||||
</div>
|
||||
}
|
||||
<DAlert Direction="DDirection.Vertical" Color="DAlertColor.Info">
|
||||
<Icon><i class="ion-md-information-circle text-xl"></i></Icon>
|
||||
<ChildContent>Vertical, with actions</ChildContent>
|
||||
<Actions><DButton Size="DSize.Sm">Deny</DButton><DButton Size="DSize.Sm" Color="DColor.Primary">Accept</DButton></Actions>
|
||||
</DAlert>
|
||||
@if (alertDismissed)
|
||||
{
|
||||
<DButton Size="DSize.Sm" class="self-start" OnClick="() => alertDismissed = false">Bring the alert back</DButton>
|
||||
}
|
||||
else
|
||||
{
|
||||
<DAlert Responsive="true">
|
||||
<Icon><i class="ion-md-notifications text-xl"></i></Icon>
|
||||
<ChildContent>
|
||||
<h4 class="font-bold">Responsive, with a heading</h4>
|
||||
<div class="text-xs">Vertical below sm, horizontal above. Dismiss me.</div>
|
||||
</ChildContent>
|
||||
<Actions><DButton Size="DSize.Sm" OnClick="() => alertDismissed = true">Dismiss</DButton></Actions>
|
||||
</DAlert>
|
||||
}
|
||||
</section>
|
||||
|
||||
<section class="flex flex-col gap-3">
|
||||
<h3 class="text-lg font-bold">DLoading</h3>
|
||||
<div class="flex flex-wrap items-center gap-4">
|
||||
@foreach (var variant in Enum.GetValues<DLoadingVariant>())
|
||||
{
|
||||
<DLoading Variant="variant" Size="DSize.Lg" title="@variant.ToString()" />
|
||||
}
|
||||
</div>
|
||||
<div class="flex flex-wrap items-center gap-4">
|
||||
@foreach (var size in new[] { DSize.Xs, DSize.Sm, DSize.Md, DSize.Lg, DSize.Xl })
|
||||
{
|
||||
<DLoading Variant="DLoadingVariant.Dots" Size="size" />
|
||||
}
|
||||
</div>
|
||||
<div class="flex flex-wrap items-center gap-4">
|
||||
@foreach (var color in colors)
|
||||
{
|
||||
<DLoading Variant="DLoadingVariant.Ring" Color="color" title="@color.ToString()" />
|
||||
}
|
||||
</div>
|
||||
<DButton class="self-start" Disabled="true"><DLoading Size="DSize.Sm" /> Loading in a button</DButton>
|
||||
</section>
|
||||
|
||||
<section class="flex flex-col gap-3">
|
||||
<h3 class="text-lg font-bold">DProgress</h3>
|
||||
<div class="flex flex-wrap items-center gap-2">
|
||||
<DButton Size="DSize.Sm" OnClick="() => progress = Math.Max(0, progress - 10)">−10</DButton>
|
||||
<DButton Size="DSize.Sm" OnClick="() => progress = Math.Min(100, progress + 10)">+10</DButton>
|
||||
<span class="text-sm">@progress%</span>
|
||||
</div>
|
||||
<DProgress Value="progress" />
|
||||
@for (var i = 0; i < colors.Length; i++)
|
||||
{
|
||||
<DProgress Value="10 + i * 12" Color="colors[i]" title="@colors[i].ToString()" />
|
||||
}
|
||||
<p class="text-xs opacity-60">Indeterminate (Value null)</p>
|
||||
<DProgress Color="DColor.Primary" />
|
||||
<DProgress Value="0.25" Max="1" Color="DColor.Accent" class="w-56" />
|
||||
</section>
|
||||
|
||||
<section class="flex flex-col gap-3">
|
||||
<h3 class="text-lg font-bold">DRadialProgress</h3>
|
||||
<div class="flex flex-wrap items-center gap-4">
|
||||
<DRadialProgress Value="progress" Color="DColor.Primary" />
|
||||
@foreach (var value in new[] { 0, 20, 60, 80, 100 })
|
||||
{
|
||||
<DRadialProgress Value="value" />
|
||||
}
|
||||
</div>
|
||||
<div class="flex flex-wrap items-center gap-4">
|
||||
@foreach (var color in colors)
|
||||
{
|
||||
<DRadialProgress Value="70" Color="color" Diameter="3.5rem" title="@color.ToString()" />
|
||||
}
|
||||
</div>
|
||||
<div class="flex flex-wrap items-center gap-4">
|
||||
<DRadialProgress Value="progress" Diameter="8rem" Thickness="2px" />
|
||||
<DRadialProgress Value="progress" Diameter="8rem" Thickness="1.5rem" Color="DColor.Secondary" />
|
||||
<DRadialProgress Value="progress" class="border-4 border-primary bg-primary text-primary-content" />
|
||||
<DRadialProgress Value="3" Max="4"><i class="ion-md-star text-2xl"></i></DRadialProgress>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="flex flex-col gap-3">
|
||||
<h3 class="text-lg font-bold">DSkeleton</h3>
|
||||
<div class="flex w-64 flex-col gap-4">
|
||||
<div class="flex items-center gap-4">
|
||||
<DSkeleton class="h-16 w-16 shrink-0 rounded-full" />
|
||||
<div class="flex flex-col gap-4">
|
||||
<DSkeleton class="h-4 w-20" />
|
||||
<DSkeleton class="h-4 w-28" />
|
||||
</div>
|
||||
</div>
|
||||
<DSkeleton class="h-32 w-full" />
|
||||
</div>
|
||||
<DSkeleton IsText="true">Loading data, please wait…</DSkeleton>
|
||||
</section>
|
||||
|
||||
<section class="flex flex-col gap-3">
|
||||
<h3 class="text-lg font-bold">DToast</h3>
|
||||
<p class="text-xs opacity-60">Previews pinned with class="absolute" inside a box</p>
|
||||
<div class="relative h-48 overflow-hidden rounded-box border border-base-300">
|
||||
<DToast Horizontal="DToastHorizontal.Start" Vertical="DToastVertical.Top" class="absolute">
|
||||
<DAlert Color="DAlertColor.Info">Top start</DAlert>
|
||||
</DToast>
|
||||
<DToast Horizontal="DToastHorizontal.Center" Vertical="DToastVertical.Middle" class="absolute">
|
||||
<DAlert Color="DAlertColor.Success">Middle center</DAlert>
|
||||
</DToast>
|
||||
<DToast class="absolute">
|
||||
<DAlert Color="DAlertColor.Warning">Bottom end (default)</DAlert>
|
||||
<DAlert Color="DAlertColor.Error">Stacked</DAlert>
|
||||
</DToast>
|
||||
</div>
|
||||
<div class="flex flex-wrap items-center gap-2">
|
||||
<div class="join">
|
||||
@foreach (var horizontal in Enum.GetValues<DToastHorizontal>())
|
||||
{
|
||||
<DButton Size="DSize.Sm" class="join-item" Active="toastHorizontal == horizontal" OnClick="() => toastHorizontal = horizontal">@horizontal</DButton>
|
||||
}
|
||||
</div>
|
||||
<div class="join">
|
||||
@foreach (var vertical in Enum.GetValues<DToastVertical>())
|
||||
{
|
||||
<DButton Size="DSize.Sm" class="join-item" Active="toastVertical == vertical" OnClick="() => toastVertical = vertical">@vertical</DButton>
|
||||
}
|
||||
</div>
|
||||
<DButton Size="DSize.Sm" Color="DColor.Primary" OnClick="ShowToast">Show a toast</DButton>
|
||||
</div>
|
||||
<DToast Horizontal="toastHorizontal" Vertical="toastVertical" class="z-50">
|
||||
@foreach (var toast in toasts)
|
||||
{
|
||||
<DAlert @key="toast.Id" Color="toast.Color">
|
||||
<ChildContent>Toast #@toast.Id, gone in 3 s</ChildContent>
|
||||
<Actions><DButton Size="DSize.Xs" Variant="DButtonVariant.Ghost" aria-label="Close" OnClick="() => toasts.Remove(toast)"><i class="ion-md-close"></i></DButton></Actions>
|
||||
</DAlert>
|
||||
}
|
||||
</DToast>
|
||||
</section>
|
||||
|
||||
<section class="flex flex-col gap-3">
|
||||
<h3 class="text-lg font-bold">DTooltip</h3>
|
||||
<div class="flex flex-wrap items-center gap-4 py-8">
|
||||
@foreach (var placement in Enum.GetValues<DTooltipPlacement>())
|
||||
{
|
||||
<DTooltip Tip="@placement.ToString()" Placement="placement">
|
||||
<DButton Size="DSize.Sm">@placement</DButton>
|
||||
</DTooltip>
|
||||
}
|
||||
</div>
|
||||
<div class="flex flex-wrap items-center gap-4 pt-8">
|
||||
@foreach (var color in colors)
|
||||
{
|
||||
<DTooltip Tip="@color.ToString()" Color="color" IsOpen="tooltipsOpen">
|
||||
<DButton Size="DSize.Sm" Color="color">@color</DButton>
|
||||
</DTooltip>
|
||||
}
|
||||
</div>
|
||||
<label class="flex items-center gap-2 text-sm">
|
||||
<input type="checkbox" class="checkbox checkbox-sm" @bind="tooltipsOpen" /> Force the colour tooltips open (IsOpen)
|
||||
</label>
|
||||
<div class="flex flex-wrap items-center gap-4 pt-10">
|
||||
@foreach (var align in Enum.GetValues<DTooltipAlign>())
|
||||
{
|
||||
<DTooltip Tip="@($"Aligned {align}, a longer tip")" Align="align" IsOpen="true">
|
||||
<DButton Size="DSize.Sm" class="w-28">@align</DButton>
|
||||
</DTooltip>
|
||||
}
|
||||
</div>
|
||||
<div class="pt-16">
|
||||
<DTooltip Color="DColor.Accent">
|
||||
<TipContent>
|
||||
<div class="flex items-center gap-2"><i class="ion-md-heart text-error"></i> <b>TipContent</b> markup</div>
|
||||
</TipContent>
|
||||
<ChildContent><DButton Size="DSize.Sm">Hover for markup</DButton></ChildContent>
|
||||
</DTooltip>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
@code {
|
||||
static readonly DColor[] colors =
|
||||
{
|
||||
DColor.Neutral, DColor.Primary, DColor.Secondary, DColor.Accent, DColor.Info, DColor.Success, DColor.Warning, DColor.Error
|
||||
};
|
||||
|
||||
static readonly (DAlertColor Color, string Icon)[] alertColors =
|
||||
{
|
||||
(DAlertColor.Info, "ion-md-information-circle"),
|
||||
(DAlertColor.Success, "ion-md-checkmark-circle"),
|
||||
(DAlertColor.Warning, "ion-md-warning"),
|
||||
(DAlertColor.Error, "ion-md-close-circle")
|
||||
};
|
||||
|
||||
static readonly DAlertColor[] toastColors = { DAlertColor.Info, DAlertColor.Success, DAlertColor.Warning, DAlertColor.Error };
|
||||
|
||||
record Toast(int Id, DAlertColor Color);
|
||||
|
||||
readonly List<Toast> toasts = new();
|
||||
DToastHorizontal toastHorizontal;
|
||||
DToastVertical toastVertical;
|
||||
int toastCount;
|
||||
|
||||
bool alertDismissed;
|
||||
int progress = 40;
|
||||
bool tooltipsOpen;
|
||||
|
||||
// Blazor renders once the handler yields (toast shown) and again when it completes (toast gone).
|
||||
async Task ShowToast()
|
||||
{
|
||||
var toast = new Toast(++toastCount, toastColors[toastCount % toastColors.Length]);
|
||||
toasts.Add(toast);
|
||||
await Task.Delay(3000);
|
||||
toasts.Remove(toast);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,222 @@
|
||||
@* Styleguide: the Layout components (Divider, Drawer, Footer, Hero, Indicator, Join, Mask, Stack). *@
|
||||
<div class="grid gap-8 lg:grid-cols-2">
|
||||
<section class="flex flex-col gap-3">
|
||||
<h3 class="text-lg font-bold">DDivider</h3>
|
||||
<div class="flex flex-col">
|
||||
<div class="rounded-box bg-base-200 p-3">Above</div>
|
||||
<DDivider>OR</DDivider>
|
||||
<div class="rounded-box bg-base-200 p-3">Below</div>
|
||||
<DDivider />
|
||||
@foreach (var color in Enum.GetValues<DColor>().Skip(1))
|
||||
{
|
||||
<DDivider Color="color">@color</DDivider>
|
||||
}
|
||||
<DDivider Placement="DDividerPlacement.Start">Start</DDivider>
|
||||
<DDivider Placement="DDividerPlacement.End" Direction="DDividerDirection.Vertical">End (vertical)</DDivider>
|
||||
</div>
|
||||
<div class="flex h-24">
|
||||
<div class="grid grow place-items-center rounded-box bg-base-200">Left</div>
|
||||
<DDivider Direction="DDividerDirection.Horizontal" Color="DColor.Primary">OR</DDivider>
|
||||
<div class="grid grow place-items-center rounded-box bg-base-200">Right</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="flex flex-col gap-3">
|
||||
<h3 class="text-lg font-bold">DDrawer</h3>
|
||||
<div class="flex flex-wrap items-center gap-2">
|
||||
<DButton OnClick="() => drawerOpen = true">Open (@(drawerOpen ? "open" : "closed"))</DButton>
|
||||
<label class="flex items-center gap-2 text-sm"><input type="checkbox" class="toggle toggle-sm" @bind="drawerEnd" /> End</label>
|
||||
</div>
|
||||
<p class="text-sm opacity-60">The box contains the fixed side (transform-gpu); the overlay, Escape and the side's buttons close it.</p>
|
||||
<div class="h-72 transform-gpu overflow-hidden rounded-box bg-base-200">
|
||||
<DDrawer @bind-IsOpen="drawerOpen" End="drawerEnd" ToggleId="styleguide-drawer" class="h-full"
|
||||
ContentClass="flex flex-col items-center justify-center gap-2">
|
||||
<ChildContent>
|
||||
<p>Page content</p>
|
||||
<label for="styleguide-drawer" class="btn btn-primary drawer-button">Open with a label</label>
|
||||
</ChildContent>
|
||||
<Side>
|
||||
<ul class="menu min-h-full w-56 bg-base-100 p-4">
|
||||
<li><button type="button" @onclick="() => drawerOpen = false"><i class="ion-md-home"></i> Home</button></li>
|
||||
<li><button type="button" @onclick="() => drawerOpen = false"><i class="ion-md-settings"></i> Settings</button></li>
|
||||
</ul>
|
||||
</Side>
|
||||
</DDrawer>
|
||||
</div>
|
||||
<p class="text-sm opacity-60">OpenFrom="Lg": always open beside the content from lg up.</p>
|
||||
<div class="h-48 transform-gpu overflow-hidden rounded-box bg-base-200">
|
||||
<DDrawer @bind-IsOpen="drawerLgOpen" OpenFrom="DDrawerOpenFrom.Lg" class="h-full" ContentClass="p-4">
|
||||
<ChildContent>
|
||||
<DButton Size="DSize.Sm" class="lg:hidden" OnClick="() => drawerLgOpen = true">Open</DButton>
|
||||
<p>Content</p>
|
||||
</ChildContent>
|
||||
<Side>
|
||||
<ul class="menu min-h-full w-40 bg-base-100 p-2">
|
||||
<li><a>Item 1</a></li>
|
||||
<li><a>Item 2</a></li>
|
||||
</ul>
|
||||
</Side>
|
||||
</DDrawer>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="flex flex-col gap-3 lg:col-span-2">
|
||||
<h3 class="text-lg font-bold">DFooter</h3>
|
||||
<DFooter Direction="DFooterDirection.HorizontalFromSm" class="rounded-box bg-base-200 p-10">
|
||||
<aside>
|
||||
<i class="ion-md-code-working text-4xl"></i>
|
||||
<p>decePub<br />Responsive: a row from sm up</p>
|
||||
</aside>
|
||||
<DFooterNav>
|
||||
<Heading>Services</Heading>
|
||||
<ChildContent>
|
||||
<a class="link link-hover">Branding</a>
|
||||
<a class="link link-hover">Design</a>
|
||||
</ChildContent>
|
||||
</DFooterNav>
|
||||
<DFooterNav>
|
||||
<Heading>Company</Heading>
|
||||
<ChildContent>
|
||||
<a class="link link-hover">About us</a>
|
||||
<a class="link link-hover">Contact</a>
|
||||
</ChildContent>
|
||||
</DFooterNav>
|
||||
</DFooter>
|
||||
<DFooter Center="true" Direction="DFooterDirection.Horizontal" class="rounded-box bg-base-200 p-6">
|
||||
<DFooterNav class="grid-flow-col gap-4">
|
||||
<a class="link link-hover">About</a>
|
||||
<a class="link link-hover">Contact</a>
|
||||
<a class="link link-hover">Jobs</a>
|
||||
</DFooterNav>
|
||||
<aside><p>Centered, horizontal</p></aside>
|
||||
</DFooter>
|
||||
</section>
|
||||
|
||||
<section class="flex flex-col gap-3">
|
||||
<h3 class="text-lg font-bold">DHero</h3>
|
||||
<DHero class="rounded-box bg-base-200" ContentClass="text-center">
|
||||
<div class="max-w-md">
|
||||
<h1 class="text-3xl font-bold">Hello there</h1>
|
||||
<p class="py-4">A centered hero.</p>
|
||||
<DButton Color="DColor.Primary">Get started</DButton>
|
||||
</div>
|
||||
</DHero>
|
||||
<DHero BackgroundImage="https://picsum.photos/seed/hero/800/400" Overlay="true" class="min-h-64 rounded-box overflow-hidden"
|
||||
ContentClass="text-neutral-content text-center">
|
||||
<div class="max-w-md">
|
||||
<h1 class="text-3xl font-bold">With an overlay</h1>
|
||||
<p class="py-4">Background image and hero-overlay.</p>
|
||||
</div>
|
||||
</DHero>
|
||||
<DHero class="rounded-box bg-base-200" ContentClass="flex-col lg:flex-row">
|
||||
<img src="https://picsum.photos/seed/figure/200/260" class="max-w-32 rounded-lg shadow-2xl" alt="" />
|
||||
<div>
|
||||
<h1 class="text-2xl font-bold">With a figure</h1>
|
||||
<p class="py-2">Column on small screens, row from lg up.</p>
|
||||
</div>
|
||||
</DHero>
|
||||
</section>
|
||||
|
||||
<section class="flex flex-col gap-3">
|
||||
<h3 class="text-lg font-bold">DIndicator</h3>
|
||||
<div class="flex flex-wrap items-center gap-8 p-4">
|
||||
<DIndicator>
|
||||
<DIndicatorItem class="badge badge-secondary">new</DIndicatorItem>
|
||||
<div class="grid h-24 w-24 place-items-center rounded-box bg-base-300">content</div>
|
||||
</DIndicator>
|
||||
<DIndicator>
|
||||
<DIndicatorItem class="status status-success"></DIndicatorItem>
|
||||
<DButton>Inbox</DButton>
|
||||
</DIndicator>
|
||||
<DIndicator>
|
||||
<DIndicatorItem Vertical="DIndicatorVertical.Bottom" class="badge badge-primary">99+</DIndicatorItem>
|
||||
<DButton Shape="DButtonShape.Circle"><i class="ion-md-notifications"></i></DButton>
|
||||
</DIndicator>
|
||||
</div>
|
||||
<DIndicator class="m-4">
|
||||
<DIndicatorItem Horizontal="DIndicatorHorizontal.Start" class="badge">↖︎</DIndicatorItem>
|
||||
<DIndicatorItem Horizontal="DIndicatorHorizontal.Center" class="badge">↑</DIndicatorItem>
|
||||
<DIndicatorItem class="badge">↗︎</DIndicatorItem>
|
||||
<DIndicatorItem Horizontal="DIndicatorHorizontal.Start" Vertical="DIndicatorVertical.Middle" class="badge">←</DIndicatorItem>
|
||||
<DIndicatorItem Horizontal="DIndicatorHorizontal.Center" Vertical="DIndicatorVertical.Middle" class="badge">●</DIndicatorItem>
|
||||
<DIndicatorItem Vertical="DIndicatorVertical.Middle" class="badge">→</DIndicatorItem>
|
||||
<DIndicatorItem Horizontal="DIndicatorHorizontal.Start" Vertical="DIndicatorVertical.Bottom" class="badge">↙︎</DIndicatorItem>
|
||||
<DIndicatorItem Horizontal="DIndicatorHorizontal.Center" Vertical="DIndicatorVertical.Bottom" class="badge">↓</DIndicatorItem>
|
||||
<DIndicatorItem Vertical="DIndicatorVertical.Bottom" class="badge">↘︎</DIndicatorItem>
|
||||
<div class="grid h-32 w-60 place-items-center rounded-box bg-base-300">all placements</div>
|
||||
</DIndicator>
|
||||
</section>
|
||||
|
||||
<section class="flex flex-col gap-3">
|
||||
<h3 class="text-lg font-bold">DJoin</h3>
|
||||
<DJoin>
|
||||
<DButton class="join-item">One</DButton>
|
||||
<DButton class="join-item" Active="true">Two</DButton>
|
||||
<DButton class="join-item">Three</DButton>
|
||||
</DJoin>
|
||||
<DJoin Direction="DDirection.Vertical" class="w-fit">
|
||||
<DButton class="join-item">Top</DButton>
|
||||
<DButton class="join-item">Middle</DButton>
|
||||
<DButton class="join-item">Bottom</DButton>
|
||||
</DJoin>
|
||||
<DJoin Direction="DDirection.Vertical" class="lg:join-horizontal w-fit">
|
||||
<DButton class="join-item">Vertical</DButton>
|
||||
<DButton class="join-item">then horizontal</DButton>
|
||||
<DButton class="join-item">from lg</DButton>
|
||||
</DJoin>
|
||||
<DJoin>
|
||||
<input class="input join-item" placeholder="Email" />
|
||||
<select class="select join-item w-28">
|
||||
<option>Filter</option>
|
||||
<option>Sci-fi</option>
|
||||
</select>
|
||||
<DButton class="join-item" Color="DColor.Primary"><i class="ion-md-search"></i></DButton>
|
||||
</DJoin>
|
||||
</section>
|
||||
|
||||
<section class="flex flex-col gap-3">
|
||||
<h3 class="text-lg font-bold">DMask</h3>
|
||||
<div class="flex flex-wrap gap-3">
|
||||
@foreach (var shape in Enum.GetValues<DMaskShape>().Skip(1))
|
||||
{
|
||||
<div class="flex flex-col items-center gap-1 text-xs">
|
||||
<DMask Shape="shape" Src="https://picsum.photos/seed/mask/160/160" alt="@shape" class="h-16 w-16" />
|
||||
@shape
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
<div class="flex items-center gap-1">
|
||||
<DMask Shape="DMaskShape.Star2" Half="DMaskHalf.First" class="h-10 w-5 bg-warning" />
|
||||
<DMask Shape="DMaskShape.Star2" Half="DMaskHalf.Second" class="h-10 w-5 bg-warning" />
|
||||
<DMask Shape="DMaskShape.Heart" class="ml-4 grid h-16 w-16 place-items-center bg-error text-error-content">div</DMask>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="flex flex-col gap-3">
|
||||
<h3 class="text-lg font-bold">DStack</h3>
|
||||
<div class="flex flex-wrap gap-10 p-4">
|
||||
@foreach (var placement in Enum.GetValues<DStackPlacement>())
|
||||
{
|
||||
<div class="flex flex-col items-center gap-3 text-sm">
|
||||
<DStack Placement="placement" class="h-20 w-28">
|
||||
<div class="grid place-content-center rounded-box bg-primary text-primary-content">1</div>
|
||||
<div class="grid place-content-center rounded-box bg-accent text-accent-content">2</div>
|
||||
<div class="grid place-content-center rounded-box bg-secondary text-secondary-content">3</div>
|
||||
</DStack>
|
||||
@placement
|
||||
</div>
|
||||
}
|
||||
<DStack class="w-32">
|
||||
<img src="https://picsum.photos/seed/stack1/200/140" class="rounded-box" alt="" />
|
||||
<img src="https://picsum.photos/seed/stack2/200/140" class="rounded-box" alt="" />
|
||||
<img src="https://picsum.photos/seed/stack3/200/140" class="rounded-box" alt="" />
|
||||
</DStack>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
@code {
|
||||
bool drawerOpen;
|
||||
bool drawerEnd;
|
||||
bool drawerLgOpen;
|
||||
}
|
||||
@@ -0,0 +1,53 @@
|
||||
@* Styleguide: the Mockup components (Browser, Code, Phone, Window). *@
|
||||
<div class="grid gap-8 lg:grid-cols-2">
|
||||
<section class="flex flex-col gap-3">
|
||||
<h3 class="text-lg font-bold">DMockupBrowser</h3>
|
||||
<DMockupBrowser Url="https://decepub.thepra.dev" class="w-full border border-base-300"
|
||||
ContentClass="grid h-40 place-content-center border-t border-base-300">
|
||||
Hello!
|
||||
</DMockupBrowser>
|
||||
<DMockupBrowser class="w-full bg-base-300" ContentClass="grid h-24 place-content-center bg-base-200">
|
||||
<Toolbar><span class="mx-auto text-sm opacity-60">Custom toolbar</span></Toolbar>
|
||||
<ChildContent>Content</ChildContent>
|
||||
</DMockupBrowser>
|
||||
</section>
|
||||
|
||||
<section class="flex flex-col gap-3">
|
||||
<h3 class="text-lg font-bold">DMockupCode</h3>
|
||||
<DMockupCode class="w-full">
|
||||
<DMockupCodeLine Prefix="$">npm i daisyui</DMockupCodeLine>
|
||||
<DMockupCodeLine Prefix=">" class="text-warning">installing...</DMockupCodeLine>
|
||||
<DMockupCodeLine Prefix=">" class="text-success">Done!</DMockupCodeLine>
|
||||
</DMockupCode>
|
||||
<DMockupCode class="w-full">
|
||||
<DMockupCodeLine Prefix="1">dotnet build</DMockupCodeLine>
|
||||
<DMockupCodeLine Prefix="2" class="bg-warning text-warning-content">bash tools/tailwind.sh build</DMockupCodeLine>
|
||||
<DMockupCodeLine Prefix="3">dotnet run</DMockupCodeLine>
|
||||
</DMockupCode>
|
||||
<DMockupCode class="w-full bg-primary text-primary-content">
|
||||
<DMockupCodeLine>No prefix, primary colors</DMockupCodeLine>
|
||||
</DMockupCode>
|
||||
</section>
|
||||
|
||||
<section class="flex flex-col gap-3">
|
||||
<h3 class="text-lg font-bold">DMockupPhone</h3>
|
||||
<div class="flex flex-wrap gap-6">
|
||||
<DMockupPhone class="max-w-56">
|
||||
<div class="grid h-full place-content-center bg-neutral text-neutral-content">It's Glowtime.</div>
|
||||
</DMockupPhone>
|
||||
<DMockupPhone class="max-w-56 border-primary">
|
||||
<img src="https://picsum.photos/seed/phone/462/978" alt="wallpaper" />
|
||||
</DMockupPhone>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="flex flex-col gap-3">
|
||||
<h3 class="text-lg font-bold">DMockupWindow</h3>
|
||||
<DMockupWindow class="w-full border border-base-300" ContentClass="grid h-40 place-content-center border-t border-base-300">
|
||||
Hello!
|
||||
</DMockupWindow>
|
||||
<DMockupWindow class="w-full bg-base-300" ContentClass="grid h-24 place-content-center bg-base-200">
|
||||
On a background color
|
||||
</DMockupWindow>
|
||||
</section>
|
||||
</div>
|
||||
@@ -0,0 +1,265 @@
|
||||
@* Styleguide: every Navigation component (Components/Daisy/Navigation) with its main variants. Demo links point at the
|
||||
daisyUI docs and open in a new tab, so clicking one never leaves this page. *@
|
||||
<div class="grid gap-8 lg:grid-cols-2">
|
||||
<section class="flex flex-col gap-3">
|
||||
<h3 class="text-lg font-bold">DBreadcrumbs</h3>
|
||||
<DBreadcrumbs class="text-sm">
|
||||
<DBreadcrumbItem Href="https://daisyui.com/" target="_blank" rel="noopener"><i class="ion-md-home"></i> Home</DBreadcrumbItem>
|
||||
<DBreadcrumbItem Href="https://daisyui.com/components/" target="_blank" rel="noopener"><i class="ion-md-folder"></i> Components</DBreadcrumbItem>
|
||||
<DBreadcrumbItem aria-current="page"><i class="ion-md-document"></i> Breadcrumbs</DBreadcrumbItem>
|
||||
</DBreadcrumbs>
|
||||
<p class="text-xs opacity-60">max-w-xs: the list scrolls</p>
|
||||
<DBreadcrumbs class="max-w-xs text-sm">
|
||||
<DBreadcrumbItem Href="https://daisyui.com/" target="_blank" rel="noopener">Long text 1</DBreadcrumbItem>
|
||||
<DBreadcrumbItem Href="https://daisyui.com/" target="_blank" rel="noopener">Long text 2</DBreadcrumbItem>
|
||||
<DBreadcrumbItem Href="https://daisyui.com/" target="_blank" rel="noopener">Long text 3</DBreadcrumbItem>
|
||||
<DBreadcrumbItem Href="https://daisyui.com/" target="_blank" rel="noopener">Long text 4</DBreadcrumbItem>
|
||||
<DBreadcrumbItem>Long text 5</DBreadcrumbItem>
|
||||
</DBreadcrumbs>
|
||||
</section>
|
||||
|
||||
<section class="flex flex-col gap-3">
|
||||
<h3 class="text-lg font-bold">DDock</h3>
|
||||
<p class="text-xs opacity-60">class="relative" keeps it in the flow; click to move the active item</p>
|
||||
@foreach (var size in new[] { DSize.Xs, DSize.Sm, DSize.Md, DSize.Lg, DSize.Xl })
|
||||
{
|
||||
<DDock Size="size" class="relative rounded-box bg-base-200">
|
||||
<DDockItem Text="Home" Active="dockActive == 0" OnClick="() => dockActive = 0"><i class="ion-md-home text-xl"></i></DDockItem>
|
||||
<DDockItem Text="Inbox" Active="dockActive == 1" OnClick="() => dockActive = 1"><i class="ion-md-mail text-xl"></i></DDockItem>
|
||||
<DDockItem Text="Settings" Active="dockActive == 2" OnClick="() => dockActive = 2"><i class="ion-md-settings text-xl"></i></DDockItem>
|
||||
<DDockItem Text="Disabled" Disabled="true"><i class="ion-md-close-circle text-xl"></i></DDockItem>
|
||||
</DDock>
|
||||
}
|
||||
</section>
|
||||
|
||||
<section class="flex flex-col gap-3">
|
||||
<h3 class="text-lg font-bold">DLink</h3>
|
||||
<div class="flex flex-wrap gap-3">
|
||||
<DLink Href="https://daisyui.com/components/link/" target="_blank" rel="noopener">Default</DLink>
|
||||
@foreach (var color in colors)
|
||||
{
|
||||
<DLink Href="https://daisyui.com/components/link/" target="_blank" rel="noopener" Color="color">@color</DLink>
|
||||
}
|
||||
</div>
|
||||
<div class="flex flex-wrap gap-3">
|
||||
<DLink Href="https://daisyui.com/components/link/" target="_blank" rel="noopener" Hover="true">Underline on hover</DLink>
|
||||
<DLink Color="DColor.Primary" OnClick="() => linkClicks++">Button link, clicked @linkClicks times</DLink>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="flex flex-col gap-3">
|
||||
<h3 class="text-lg font-bold">DMegamenu</h3>
|
||||
<p class="text-xs opacity-60">Below sm it collapses behind the Menu button</p>
|
||||
<DMegamenu class="border border-base-300 p-2">
|
||||
<DMegamenuItem Text="Products">
|
||||
<DMenu class="w-56">
|
||||
<DMenuTitle>Apps</DMenuTitle>
|
||||
<DMenuItem><i class="ion-md-chatbubbles"></i> Messenger</DMenuItem>
|
||||
<DMenuItem><i class="ion-md-images"></i> Gallery</DMenuItem>
|
||||
<DMenuItem><i class="ion-md-cart"></i> Shop</DMenuItem>
|
||||
</DMenu>
|
||||
</DMegamenuItem>
|
||||
<DMegamenuItem Text="Resources">
|
||||
<div class="flex items-start max-sm:flex-col">
|
||||
<DMenu class="w-full md:menu-horizontal">
|
||||
<li>
|
||||
<a>Guides</a>
|
||||
<ul><li><a>Getting started</a></li><li><a>Theming</a></li></ul>
|
||||
</li>
|
||||
<li>
|
||||
<a>Reference</a>
|
||||
<ul><li><a>Components</a></li><li><a>Utilities</a></li></ul>
|
||||
</li>
|
||||
</DMenu>
|
||||
<img src="https://picsum.photos/seed/megamenu/240/140" class="m-2 rounded-box max-md:w-auto md:max-w-xs" alt="Sample" />
|
||||
</div>
|
||||
</DMegamenuItem>
|
||||
<DMegamenuItem Text="Company" HideArrow="true" class="p-4">
|
||||
<p class="w-64 text-sm">Custom content, and an item without the arrow.</p>
|
||||
</DMegamenuItem>
|
||||
</DMegamenu>
|
||||
<p class="text-xs opacity-60">PanelWidth Wide, Size Sm</p>
|
||||
<DMegamenu PanelWidth="DMegamenuPanelWidth.Wide" Size="DSize.Sm" class="w-full border border-base-300 p-2">
|
||||
<DMegamenuItem Text="One">
|
||||
<DMenu Direction="DDirection.Horizontal" class="w-full">
|
||||
<DMenuItem>First</DMenuItem>
|
||||
<DMenuItem>Second</DMenuItem>
|
||||
<DMenuItem>Third</DMenuItem>
|
||||
</DMenu>
|
||||
</DMegamenuItem>
|
||||
<DMegamenuItem Text="Two">
|
||||
<p class="p-4 text-sm">A wide panel spans the whole megamenu.</p>
|
||||
</DMegamenuItem>
|
||||
</DMegamenu>
|
||||
</section>
|
||||
|
||||
<section class="flex flex-col gap-3">
|
||||
<h3 class="text-lg font-bold">DMenu</h3>
|
||||
<div class="flex flex-wrap items-start gap-4">
|
||||
<DMenu class="w-56 rounded-box bg-base-200">
|
||||
<DMenuTitle>Title</DMenuTitle>
|
||||
<DMenuItem Active="menuActive == 0" OnClick="() => menuActive = 0"><i class="ion-md-home"></i> Home</DMenuItem>
|
||||
<DMenuItem Active="menuActive == 1" OnClick="() => menuActive = 1"><i class="ion-md-mail"></i> Inbox <span class="badge badge-sm">3</span></DMenuItem>
|
||||
<DMenuItem Href="https://daisyui.com/components/menu/" target="_blank" rel="noopener"><i class="ion-md-document"></i> Docs (link)</DMenuItem>
|
||||
<DMenuItem Disabled="true"><i class="ion-md-close-circle"></i> Disabled</DMenuItem>
|
||||
<li></li>
|
||||
<DSubmenu @bind-IsOpen="submenuOpen">
|
||||
<Header><i class="ion-md-folder"></i> Submenu (@(submenuOpen ? "open" : "closed"))</Header>
|
||||
<ChildContent>
|
||||
<DMenuItem>Child 1</DMenuItem>
|
||||
<DSubmenu>
|
||||
<Header>Nested</Header>
|
||||
<ChildContent>
|
||||
<DMenuItem>Grandchild</DMenuItem>
|
||||
</ChildContent>
|
||||
</DSubmenu>
|
||||
</ChildContent>
|
||||
</DSubmenu>
|
||||
</DMenu>
|
||||
<DMenu Paged="true" class="w-56 rounded-box bg-base-200">
|
||||
<DMenuTitle>Paged</DMenuTitle>
|
||||
<DMenuItem>Item</DMenuItem>
|
||||
<DSubmenu BackText="Back to the list">
|
||||
<Header>Settings</Header>
|
||||
<ChildContent>
|
||||
<DMenuItem>Account</DMenuItem>
|
||||
<DMenuItem>Privacy</DMenuItem>
|
||||
</ChildContent>
|
||||
</DSubmenu>
|
||||
</DMenu>
|
||||
</div>
|
||||
<DMenu Direction="DDirection.Horizontal" class="rounded-box bg-base-200">
|
||||
<DMenuItem>Horizontal</DMenuItem>
|
||||
<DMenuItem Active="true">Active</DMenuItem>
|
||||
<DSubmenu @bind-IsOpen="horizontalSubmenuOpen">
|
||||
<Header>Submenu</Header>
|
||||
<ChildContent>
|
||||
<DMenuItem OnClick="() => horizontalSubmenuOpen = false">Close me</DMenuItem>
|
||||
<DMenuItem>Other</DMenuItem>
|
||||
</ChildContent>
|
||||
</DSubmenu>
|
||||
</DMenu>
|
||||
<div class="flex flex-wrap items-start gap-4">
|
||||
@foreach (var size in new[] { DSize.Xs, DSize.Sm, DSize.Lg, DSize.Xl })
|
||||
{
|
||||
<DMenu Size="size" class="rounded-box bg-base-200">
|
||||
<DMenuTitle>@size</DMenuTitle>
|
||||
<DMenuItem>Item</DMenuItem>
|
||||
</DMenu>
|
||||
}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="flex flex-col gap-3">
|
||||
<h3 class="text-lg font-bold">DNavbar</h3>
|
||||
<DNavbar class="rounded-box bg-base-200">
|
||||
<Start>
|
||||
<DButton Variant="DButtonVariant.Ghost" Shape="DButtonShape.Square"><i class="ion-md-menu text-xl"></i></DButton>
|
||||
<span class="px-2 text-xl font-bold">decePub</span>
|
||||
</Start>
|
||||
<Center>
|
||||
<DMenu Direction="DDirection.Horizontal" class="px-1">
|
||||
<DMenuItem Active="true">Home</DMenuItem>
|
||||
<DMenuItem>About</DMenuItem>
|
||||
</DMenu>
|
||||
</Center>
|
||||
<End>
|
||||
<DButton Variant="DButtonVariant.Ghost" Shape="DButtonShape.Circle"><i class="ion-md-search text-xl"></i></DButton>
|
||||
<DButton Variant="DButtonVariant.Ghost" Shape="DButtonShape.Circle"><i class="ion-md-notifications text-xl"></i></DButton>
|
||||
</End>
|
||||
</DNavbar>
|
||||
<DNavbar class="rounded-box bg-neutral text-neutral-content" CenterClass="hidden sm:flex">
|
||||
<Start><span class="px-2 font-bold">Start + End</span></Start>
|
||||
<Center>Center hidden below sm</Center>
|
||||
<End><DButton Size="DSize.Sm">Action</DButton></End>
|
||||
</DNavbar>
|
||||
</section>
|
||||
|
||||
<section class="flex flex-col gap-3">
|
||||
<h3 class="text-lg font-bold">DPagination</h3>
|
||||
<DPagination Count="20" @bind-Current="currentPage" />
|
||||
<p class="text-xs opacity-60">Page @currentPage of 20</p>
|
||||
<DPagination Count="5" @bind-Current="smallPage" Size="DSize.Sm" ShowPreviousNext="false" />
|
||||
<DPagination Count="20" @bind-Current="currentPage" Size="DSize.Xs" Siblings="2" />
|
||||
<DPagination Count="4" @bind-Current="largePage" Size="DSize.Lg" />
|
||||
<DPagination Count="3" @bind-Current="verticalPage" Direction="DDirection.Vertical" ShowPreviousNext="false" class="self-start" />
|
||||
</section>
|
||||
|
||||
<section class="flex flex-col gap-3">
|
||||
<h3 class="text-lg font-bold">DSteps</h3>
|
||||
<DSteps class="w-full">
|
||||
<DStep Color="DColor.Primary">Register</DStep>
|
||||
<DStep Color="DColor.Primary">Choose plan</DStep>
|
||||
<DStep>Purchase</DStep>
|
||||
<DStep>Receive</DStep>
|
||||
</DSteps>
|
||||
<div class="flex flex-wrap items-center gap-2">
|
||||
<DButton Size="DSize.Sm" Disabled="stepsDone == 0" OnClick="() => stepsDone--">Back</DButton>
|
||||
<DButton Size="DSize.Sm" Color="DColor.Primary" Disabled="stepsDone == 4" OnClick="() => stepsDone++">Next</DButton>
|
||||
</div>
|
||||
<DSteps class="w-full">
|
||||
@for (var i = 0; i < 4; i++)
|
||||
{
|
||||
<DStep Color="@(i < stepsDone ? DColor.Success : DColor.None)" Marker="@(i < stepsDone ? "✓" : null)">Step @(i + 1)</DStep>
|
||||
}
|
||||
</DSteps>
|
||||
<DSteps class="w-full overflow-x-auto">
|
||||
@foreach (var color in colors)
|
||||
{
|
||||
<DStep Color="color">@color</DStep>
|
||||
}
|
||||
</DSteps>
|
||||
<div class="flex flex-wrap gap-8">
|
||||
<DSteps Direction="DDirection.Vertical">
|
||||
<DStep Color="DColor.Info" Marker="?">Marker ?</DStep>
|
||||
<DStep Color="DColor.Warning" Marker="!">Marker !</DStep>
|
||||
<DStep Color="DColor.Error" Marker="✕">Marker ✕</DStep>
|
||||
</DSteps>
|
||||
<DSteps Direction="DDirection.Vertical">
|
||||
<DStep Color="DColor.Neutral"><Icon><i class="ion-md-person"></i></Icon><ChildContent>Icon</ChildContent></DStep>
|
||||
<DStep Color="DColor.Neutral"><Icon><i class="ion-md-star"></i></Icon><ChildContent>Icon</ChildContent></DStep>
|
||||
<DStep><Icon><i class="ion-md-checkmark"></i></Icon><ChildContent>Icon</ChildContent></DStep>
|
||||
</DSteps>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="flex flex-col gap-3">
|
||||
<h3 class="text-lg font-bold">DTabs</h3>
|
||||
@foreach (var variant in new[] { DTabsVariant.Default, DTabsVariant.Box, DTabsVariant.Border, DTabsVariant.Lift })
|
||||
{
|
||||
<DTabs Variant="variant" @bind-Active="tabActive">
|
||||
<DTab>
|
||||
<Header>@variant</Header>
|
||||
<ChildContent>@variant tab 1 content</ChildContent>
|
||||
</DTab>
|
||||
<DTab>
|
||||
<Header>Tab 2</Header>
|
||||
<ChildContent>@variant tab 2 content</ChildContent>
|
||||
</DTab>
|
||||
<DTab Disabled="true">
|
||||
<Header>Disabled</Header>
|
||||
<ChildContent>Never shown</ChildContent>
|
||||
</DTab>
|
||||
</DTabs>
|
||||
}
|
||||
</section>
|
||||
</div>
|
||||
|
||||
@code {
|
||||
static readonly DColor[] colors =
|
||||
{
|
||||
DColor.Neutral, DColor.Primary, DColor.Secondary, DColor.Accent, DColor.Info, DColor.Success, DColor.Warning, DColor.Error
|
||||
};
|
||||
|
||||
int dockActive;
|
||||
int linkClicks;
|
||||
int menuActive;
|
||||
bool submenuOpen = true;
|
||||
bool horizontalSubmenuOpen;
|
||||
int currentPage = 7;
|
||||
int smallPage = 2;
|
||||
int largePage = 1;
|
||||
int verticalPage = 1;
|
||||
int stepsDone = 1;
|
||||
int tabActive;
|
||||
}
|
||||
Reference in new issue
Block a user