thepra/decePubClient
1
0 Fork 0
Code Issues Pull Requests Actions Projects Releases 1 Wiki Activity
Files
a097338121a4008a367ad001cb220f33f780abec
decePubClient/Components/Styleguide/NavigationSection.razor
T
thepraandClaude Opus 5.5 90e4b9200c 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
2026-10-03 12:01:42 +02:00

266 lines
11 KiB
Plaintext
Raw Blame History

@* 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 View Git Blame Copy Permalink