thepraandClaude Opus 5.5
90e4b9200c
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
266 lines
11 KiB
Plaintext
266 lines
11 KiB
Plaintext
@* 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;
|
|
}
|