feat: sync showcase with WRNexusJS 0.8.7
This commit is contained in:
+41
-31
@@ -3,104 +3,114 @@ page NavigationShowcase {
|
||||
layout = "showcase"
|
||||
seo {
|
||||
title = "Navigation components"
|
||||
description = "9 navigation components from @wrnexus/ui."
|
||||
description = "10 navigation components from @wrnexus/ui."
|
||||
}
|
||||
view {
|
||||
<header class="showcase-hero showcase-hero--category">
|
||||
<span class="showcase-eyebrow">Component category</span>
|
||||
<h1 class="showcase-title">Navigation</h1>
|
||||
<p class="showcase-description">9 unique, responsive, theme-aware components. Open a component to inspect multiple live configurations and its complete props API.</p>
|
||||
<div class="category-meta"><span>9 components</span><span>Multiple use cases</span><span>27 live configurations</span></div>
|
||||
<p class="showcase-description">10 unique, responsive, theme-aware components. Open a component to inspect multiple live configurations and its complete props API.</p>
|
||||
<div class="category-meta"><span>10 components</span><span>Multiple use cases</span><span>30 live configurations</span></div>
|
||||
</header>
|
||||
<div class="catalog-grid">
|
||||
<article class="catalog-card">
|
||||
<article class="catalog-card" data-interactive-preview="false">
|
||||
<div class="catalog-card-preview">
|
||||
<div class="catalog-card-glow" aria-hidden="true"></div>
|
||||
<div class="catalog-card-stage"><div data-component="Breadcrumb" size="default" label="Breadcrumb" items="[{"id":"breadcrumb-0-1","key":"breadcrumb-0-1","value":"primary","label":"Primary workflow","title":"Primary workflow","description":"A clean default configuration for everyday product interfaces.","text":"A configurable sample message.","href":"#breadcrumb-demo","actionHref":"#breadcrumb-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":true,"selected":true,"checked":true,"disabled":false,"outgoing":false,"open":true,"number":1,"count":16,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 1","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]},{"id":"breadcrumb-0-2","key":"breadcrumb-0-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A clean default configuration for everyday product interfaces.","text":"Another configurable message.","href":"#breadcrumb-demo","actionHref":"#breadcrumb-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":false,"selected":false,"checked":false,"disabled":false,"outgoing":true,"open":true,"number":2,"count":32,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 2","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]}]" class="showcase-instance showcase-instance--1"></div></div>
|
||||
<div class="catalog-card-stage"><BackToTop threshold="500" label="Back To Top" ariaLabel="Back To Top 1 example" icon="" position="right" showProgress="true" showLabel="true" alwaysVisible="true" size="default" variant="solid" shape="round" class="showcase-instance showcase-instance--1" /></div>
|
||||
</div>
|
||||
<div class="catalog-card-body">
|
||||
<div><span class="catalog-card-category">Navigation</span><h2>Breadcrumb</h2><p>Theme-aware, responsive breadcrumb component.</p></div>
|
||||
<div class="catalog-card-footer"><span>7 props · 1 slots</span><a href="/components/breadcrumb">Explore component <span aria-hidden="true">→</span></a></div>
|
||||
<div><span class="catalog-card-category">Navigation</span><h2>Back To Top</h2><p>Provide a responsive floating control that returns long pages to the top and can show scroll progress.</p></div>
|
||||
<div class="catalog-card-footer"><span>15 props · 0 slots</span><a href="/components/back-to-top">Explore component <span aria-hidden="true">→</span></a></div>
|
||||
</div>
|
||||
</article>
|
||||
<article class="catalog-card">
|
||||
<article class="catalog-card" data-interactive-preview="false">
|
||||
<div class="catalog-card-preview">
|
||||
<div class="catalog-card-glow" aria-hidden="true"></div>
|
||||
<div class="catalog-card-stage"><div data-component="MegaMenu" size="default" label="Mega Menu" items="[{"id":"mega-menu-0-1","key":"mega-menu-0-1","value":"primary","label":"Primary workflow","title":"Primary workflow","description":"A clean default configuration for everyday product interfaces.","text":"A configurable sample message.","href":"#mega-menu-demo","actionHref":"#mega-menu-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":true,"selected":true,"checked":true,"disabled":false,"outgoing":false,"open":true,"number":1,"count":16,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 1","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]},{"id":"mega-menu-0-2","key":"mega-menu-0-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A clean default configuration for everyday product interfaces.","text":"Another configurable message.","href":"#mega-menu-demo","actionHref":"#mega-menu-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":false,"selected":false,"checked":false,"disabled":false,"outgoing":true,"open":true,"number":2,"count":32,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 2","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]}]" class="showcase-instance showcase-instance--1"></div></div>
|
||||
<div class="catalog-card-stage"><Breadcrumb label="Breadcrumb" items='[{"label":"Home","href":"/","icon":"icon-[lucide--house]"},{"label":"Components","href":"/base"},{"label":"Page header","current":true}]' showHome="true" homeLabel="Breadcrumb" homeHref="#breadcrumb-demo" size="small" variant="minimal" class="showcase-instance showcase-instance--1" /></div>
|
||||
</div>
|
||||
<div class="catalog-card-body">
|
||||
<div><span class="catalog-card-category">Navigation</span><h2>Breadcrumb</h2><p>Show responsive hierarchical navigation with home support, separators, current-page state, sizes, and selection events.</p></div>
|
||||
<div class="catalog-card-footer"><span>12 props · 0 slots</span><a href="/components/breadcrumb">Explore component <span aria-hidden="true">→</span></a></div>
|
||||
</div>
|
||||
</article>
|
||||
<article class="catalog-card" data-interactive-preview="false">
|
||||
<div class="catalog-card-preview">
|
||||
<div class="catalog-card-glow" aria-hidden="true"></div>
|
||||
<div class="catalog-card-stage"><MegaMenu size="default" label="Products" icon="icon-[lucide--box]" columns='[{"heading":"Platform","items":[{"label":"Runtime","href":"/runtime","description":"The browser half of the framework."},{"label":"Compiler","href":"/compiler","description":"WRN to JavaScript."}]},{"heading":"Tooling","items":[{"label":"CLI","href":"/cli","description":"Scaffold, build and deploy."},{"label":"Editor","href":"/editor","description":"Language server and syntax."}]}]' defaultOpen="false" class="showcase-instance showcase-instance--1" /></div>
|
||||
</div>
|
||||
<div class="catalog-card-body">
|
||||
<div><span class="catalog-card-category">Navigation</span><h2>Mega Menu</h2><p>Theme-aware, responsive mega menu component.</p></div>
|
||||
<div class="catalog-card-footer"><span>7 props · 1 slots</span><a href="/components/mega-menu">Explore component <span aria-hidden="true">→</span></a></div>
|
||||
<div class="catalog-card-footer"><span>8 props · 1 slots</span><a href="/components/mega-menu">Explore component <span aria-hidden="true">→</span></a></div>
|
||||
</div>
|
||||
</article>
|
||||
<article class="catalog-card">
|
||||
<article class="catalog-card" data-interactive-preview="false">
|
||||
<div class="catalog-card-preview">
|
||||
<div class="catalog-card-glow" aria-hidden="true"></div>
|
||||
<div class="catalog-card-stage"><div data-component="Nav" size="default" label="Nav" items="[{"id":"nav-0-1","key":"nav-0-1","value":"primary","label":"Primary workflow","title":"Primary workflow","description":"A clean default configuration for everyday product interfaces.","text":"A configurable sample message.","href":"#nav-demo","actionHref":"#nav-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":true,"selected":true,"checked":true,"disabled":false,"outgoing":false,"open":true,"number":1,"count":16,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 1","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]},{"id":"nav-0-2","key":"nav-0-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A clean default configuration for everyday product interfaces.","text":"Another configurable message.","href":"#nav-demo","actionHref":"#nav-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":false,"selected":false,"checked":false,"disabled":false,"outgoing":true,"open":true,"number":2,"count":32,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 2","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]}]" class="showcase-instance showcase-instance--1"></div></div>
|
||||
<div class="catalog-card-stage"><Nav size="default" items='[{"label":"Home","href":"/","value":"home","icon":"icon-[lucide--house]"},{"label":"Inbox","href":"/inbox","value":"inbox","badge":"9"},{"label":"Reports","href":"/reports","value":"reports"},{"label":"Archive","href":"/archive","value":"archive","disabled":true}]' active="inbox" label="Nav" collapsible="true" toggleLabel="Nav" class="showcase-instance showcase-instance--1" /></div>
|
||||
</div>
|
||||
<div class="catalog-card-body">
|
||||
<div><span class="catalog-card-category">Navigation</span><h2>Nav</h2><p>Theme-aware, responsive nav component.</p></div>
|
||||
<div class="catalog-card-footer"><span>7 props · 1 slots</span><a href="/components/nav">Explore component <span aria-hidden="true">→</span></a></div>
|
||||
<div class="catalog-card-footer"><span>9 props · 1 slots</span><a href="/components/nav">Explore component <span aria-hidden="true">→</span></a></div>
|
||||
</div>
|
||||
</article>
|
||||
<article class="catalog-card">
|
||||
<article class="catalog-card" data-interactive-preview="false">
|
||||
<div class="catalog-card-preview">
|
||||
<div class="catalog-card-glow" aria-hidden="true"></div>
|
||||
<div class="catalog-card-stage"><div data-component="Navbar" size="default" label="Navbar" items="[{"id":"navbar-0-1","key":"navbar-0-1","value":"primary","label":"Primary workflow","title":"Primary workflow","description":"A clean default configuration for everyday product interfaces.","text":"A configurable sample message.","href":"#navbar-demo","actionHref":"#navbar-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":true,"selected":true,"checked":true,"disabled":false,"outgoing":false,"open":true,"number":1,"count":16,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 1","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]},{"id":"navbar-0-2","key":"navbar-0-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A clean default configuration for everyday product interfaces.","text":"Another configurable message.","href":"#navbar-demo","actionHref":"#navbar-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":false,"selected":false,"checked":false,"disabled":false,"outgoing":true,"open":true,"number":2,"count":32,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 2","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]}]" class="showcase-instance showcase-instance--1"></div></div>
|
||||
<div class="catalog-card-stage"><Navbar size="default" label="Primary navigation" topbarLabel="Navbar" brand='{demo_obj_0}' items='[{"label":"Overview","href":"/","value":"overview"},{"label":"Projects","href":"/projects","value":"projects"},{"label":"Reports","href":"/reports","value":"reports"}]' actions='[{"label":"Sign in","href":"/login","variant":"link"},{"label":"Start free","href":"/signup","variant":"primary"}]' active="projects" sticky="false" openOnHover="false" mobileLabel="Navbar" class="showcase-instance showcase-instance--1" /></div>
|
||||
</div>
|
||||
<div class="catalog-card-body">
|
||||
<div><span class="catalog-card-category">Navigation</span><h2>Navbar</h2><p>Theme-aware, responsive navbar component.</p></div>
|
||||
<div class="catalog-card-footer"><span>7 props · 1 slots</span><a href="/components/navbar">Explore component <span aria-hidden="true">→</span></a></div>
|
||||
<div class="catalog-card-footer"><span>13 props · 2 slots</span><a href="/components/navbar">Explore component <span aria-hidden="true">→</span></a></div>
|
||||
</div>
|
||||
</article>
|
||||
<article class="catalog-card">
|
||||
<article class="catalog-card" data-interactive-preview="false">
|
||||
<div class="catalog-card-preview">
|
||||
<div class="catalog-card-glow" aria-hidden="true"></div>
|
||||
<div class="catalog-card-stage"><div data-component="Pagination" size="default" label="Pagination" items="[{"id":"pagination-0-1","key":"pagination-0-1","value":"primary","label":"Primary workflow","title":"Primary workflow","description":"A clean default configuration for everyday product interfaces.","text":"A configurable sample message.","href":"#pagination-demo","actionHref":"#pagination-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":true,"selected":true,"checked":true,"disabled":false,"outgoing":false,"open":true,"number":1,"count":16,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 1","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]},{"id":"pagination-0-2","key":"pagination-0-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A clean default configuration for everyday product interfaces.","text":"Another configurable message.","href":"#pagination-demo","actionHref":"#pagination-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":false,"selected":false,"checked":false,"disabled":false,"outgoing":true,"open":true,"number":2,"count":32,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 2","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]}]" class="showcase-instance showcase-instance--1"></div></div>
|
||||
<div class="catalog-card-stage"><Pagination size="default" page="2" pageSize="10" total="137" variant="compact" siblingCount="3" showSummary="true" label="Pagination" previousLabel="Pagination" nextLabel="Pagination" class="showcase-instance showcase-instance--1" /></div>
|
||||
</div>
|
||||
<div class="catalog-card-body">
|
||||
<div><span class="catalog-card-category">Navigation</span><h2>Pagination</h2><p>Theme-aware, responsive pagination component.</p></div>
|
||||
<div class="catalog-card-footer"><span>7 props · 1 slots</span><a href="/components/pagination">Explore component <span aria-hidden="true">→</span></a></div>
|
||||
<div class="catalog-card-footer"><span>12 props · 1 slots</span><a href="/components/pagination">Explore component <span aria-hidden="true">→</span></a></div>
|
||||
</div>
|
||||
</article>
|
||||
<article class="catalog-card">
|
||||
<article class="catalog-card" data-interactive-preview="false">
|
||||
<div class="catalog-card-preview">
|
||||
<div class="catalog-card-glow" aria-hidden="true"></div>
|
||||
<div class="catalog-card-stage"><div data-component="Scrollspy" size="default" label="Scrollspy" items="[{"id":"scrollspy-0-1","key":"scrollspy-0-1","value":"primary","label":"Primary workflow","title":"Primary workflow","description":"A clean default configuration for everyday product interfaces.","text":"A configurable sample message.","href":"#scrollspy-demo","actionHref":"#scrollspy-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":true,"selected":true,"checked":true,"disabled":false,"outgoing":false,"open":true,"number":1,"count":16,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 1","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]},{"id":"scrollspy-0-2","key":"scrollspy-0-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A clean default configuration for everyday product interfaces.","text":"Another configurable message.","href":"#scrollspy-demo","actionHref":"#scrollspy-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":false,"selected":false,"checked":false,"disabled":false,"outgoing":true,"open":true,"number":2,"count":32,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 2","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]}]" class="showcase-instance showcase-instance--1"></div></div>
|
||||
<div class="catalog-card-stage"><Scrollspy size="default" items='[{"label":"Overview","href":"#overview"},{"label":"Installation","href":"#installation"},{"label":"Usage","href":"#usage"},{"label":"API","href":"#api"}]' active="#overview" label="Scrollspy" heading="On this page" class="showcase-instance showcase-instance--1" /></div>
|
||||
</div>
|
||||
<div class="catalog-card-body">
|
||||
<div><span class="catalog-card-category">Navigation</span><h2>Scrollspy</h2><p>Theme-aware, responsive scrollspy component.</p></div>
|
||||
<div class="catalog-card-footer"><span>7 props · 1 slots</span><a href="/components/scrollspy">Explore component <span aria-hidden="true">→</span></a></div>
|
||||
</div>
|
||||
</article>
|
||||
<article class="catalog-card">
|
||||
<article class="catalog-card" data-interactive-preview="false">
|
||||
<div class="catalog-card-preview">
|
||||
<div class="catalog-card-glow" aria-hidden="true"></div>
|
||||
<div class="catalog-card-stage"><div data-component="Sidebar" size="default" label="Sidebar" items="[{"id":"sidebar-0-1","key":"sidebar-0-1","value":"primary","label":"Primary workflow","title":"Primary workflow","description":"A clean default configuration for everyday product interfaces.","text":"A configurable sample message.","href":"#sidebar-demo","actionHref":"#sidebar-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":true,"selected":true,"checked":true,"disabled":false,"outgoing":false,"open":true,"number":1,"count":16,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 1","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]},{"id":"sidebar-0-2","key":"sidebar-0-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A clean default configuration for everyday product interfaces.","text":"Another configurable message.","href":"#sidebar-demo","actionHref":"#sidebar-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":false,"selected":false,"checked":false,"disabled":false,"outgoing":true,"open":true,"number":2,"count":32,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 2","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]}]" class="showcase-instance showcase-instance--1"></div></div>
|
||||
<div class="catalog-card-stage"><Sidebar size="default" label="Workspace" items='[{"label":"Dashboard","href":"/","value":"dash","icon":"icon-[lucide--gauge]"},{"heading":"Projects","items":[{"label":"Active","href":"/active","value":"active","badge":"4"},{"label":"Archive","value":"archive","items":[{"label":"2025","href":"/a/2025","value":"a2025"},{"label":"2024","href":"/a/2024","value":"a2024"}]}]},{"heading":"Account","items":[{"label":"Settings","href":"/settings","value":"settings","icon":"icon-[lucide--settings]"}]}]' active="active" mobileLabel="Sidebar" drawerTitle="Sidebar example" class="showcase-instance showcase-instance--1" /></div>
|
||||
</div>
|
||||
<div class="catalog-card-body">
|
||||
<div><span class="catalog-card-category">Navigation</span><h2>Sidebar</h2><p>Theme-aware, responsive sidebar component.</p></div>
|
||||
<div class="catalog-card-footer"><span>7 props · 1 slots</span><a href="/components/sidebar">Explore component <span aria-hidden="true">→</span></a></div>
|
||||
<div class="catalog-card-footer"><span>8 props · 2 slots</span><a href="/components/sidebar">Explore component <span aria-hidden="true">→</span></a></div>
|
||||
</div>
|
||||
</article>
|
||||
<article class="catalog-card">
|
||||
<article class="catalog-card" data-interactive-preview="false">
|
||||
<div class="catalog-card-preview">
|
||||
<div class="catalog-card-glow" aria-hidden="true"></div>
|
||||
<div class="catalog-card-stage"><div data-component="Stepper" size="default" label="Stepper" items="[{"id":"stepper-0-1","key":"stepper-0-1","value":"primary","label":"Primary workflow","title":"Primary workflow","description":"A clean default configuration for everyday product interfaces.","text":"A configurable sample message.","href":"#stepper-demo","actionHref":"#stepper-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":true,"selected":true,"checked":true,"disabled":false,"outgoing":false,"open":true,"number":1,"count":16,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 1","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]},{"id":"stepper-0-2","key":"stepper-0-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A clean default configuration for everyday product interfaces.","text":"Another configurable message.","href":"#stepper-demo","actionHref":"#stepper-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":false,"selected":false,"checked":false,"disabled":false,"outgoing":true,"open":true,"number":2,"count":32,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 2","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]}]" class="showcase-instance showcase-instance--1"></div></div>
|
||||
<div class="catalog-card-stage"><Stepper size="default" steps='[{"label":"Account","description":"Your details"},{"label":"Billing","description":"Payment method"},{"label":"Confirm","description":"Review and submit"}]' active="1" clickable="false" label="Stepper" showPanel="false" controls="false" allowSkip="false" nextDisabled="false" backLabel="Back" nextLabel="Next" skipLabel="Skip" finishLabel="Finish" class="showcase-instance showcase-instance--1" /></div>
|
||||
</div>
|
||||
<div class="catalog-card-body">
|
||||
<div><span class="catalog-card-category">Navigation</span><h2>Stepper</h2><p>Theme-aware, responsive stepper component.</p></div>
|
||||
<div class="catalog-card-footer"><span>7 props · 1 slots</span><a href="/components/stepper">Explore component <span aria-hidden="true">→</span></a></div>
|
||||
<div class="catalog-card-footer"><span>16 props · 3 slots</span><a href="/components/stepper">Explore component <span aria-hidden="true">→</span></a></div>
|
||||
</div>
|
||||
</article>
|
||||
<article class="catalog-card">
|
||||
<article class="catalog-card" data-interactive-preview="false">
|
||||
<div class="catalog-card-preview">
|
||||
<div class="catalog-card-glow" aria-hidden="true"></div>
|
||||
<div class="catalog-card-stage"><div data-component="Tabs" size="default" label="Tabs" items="[{"id":"tabs-0-1","key":"tabs-0-1","value":"primary","label":"Primary workflow","title":"Primary workflow","description":"A clean default configuration for everyday product interfaces.","text":"A configurable sample message.","href":"#tabs-demo","actionHref":"#tabs-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":true,"selected":true,"checked":true,"disabled":false,"outgoing":false,"open":true,"number":1,"count":16,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 1","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]},{"id":"tabs-0-2","key":"tabs-0-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A clean default configuration for everyday product interfaces.","text":"Another configurable message.","href":"#tabs-demo","actionHref":"#tabs-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":false,"selected":false,"checked":false,"disabled":false,"outgoing":true,"open":true,"number":2,"count":32,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 2","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]}]" class="showcase-instance showcase-instance--1"></div></div>
|
||||
<div class="catalog-card-stage"><Tabs size="default" items='[{"label":"Overview","value":"overview","content":"Overview content"},{"label":"Requirements","value":"requirements","content":"Requirements content"},{"label":"Process","value":"process","content":"Process content"}]' active="overview" orientation="horizontal" label="Service information" class="showcase-instance showcase-instance--1" /></div>
|
||||
</div>
|
||||
<div class="catalog-card-body">
|
||||
<div><span class="catalog-card-category">Navigation</span><h2>Tabs</h2><p>Theme-aware, responsive tabs component.</p></div>
|
||||
<div class="catalog-card-footer"><span>7 props · 1 slots</span><a href="/components/tabs">Explore component <span aria-hidden="true">→</span></a></div>
|
||||
<div><span class="catalog-card-category">Navigation</span><h2>Tabs</h2><p>Switch between related responsive content panels with horizontal or vertical orientation and selection events.</p></div>
|
||||
<div class="catalog-card-footer"><span>9 props · 2 slots</span><a href="/components/tabs">Explore component <span aria-hidden="true">→</span></a></div>
|
||||
</div>
|
||||
</article></div>
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user