Refresh UI components and showcase; release updated framework packages
This commit is contained in:
Clintchiz committed
1 parent
d800228585
commit
c77f5e1cec
293 files changed
+22544
-35778
No files matched your search
@@ -33,118 +33,123 @@ page MarqueeDetail {
|
||||
<div class="playground-preview-source" data-playground-preview><Marquee size='{playground_size}' color='{playground_color}' title='{playground_title}' description='{playground_description}' items='{playground_items}' variant='{playground_variant}' class='{playground_class}' /></div>
|
||||
<section class="playground-code" aria-label="Current component code">
|
||||
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component code</span><button type="button" data-playground-copy><span class="icon-[lucide--copy] size-4" aria-hidden="true"></span>Copy</button></header>
|
||||
<pre><code data-playground-code><Marquee
|
||||
title="Marquee example"
|
||||
description="A polished default marquee for a modern application."
|
||||
items='[
|
||||
<span>{</span>
|
||||
"id": "marquee-0-1",
|
||||
"key": "marquee-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": "#marquee-demo",
|
||||
"actionHref": "#marquee-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": [
|
||||
<span>{</span>
|
||||
"label": "Nested option A",
|
||||
"value": "nested-a"
|
||||
<span>}</span>,
|
||||
<span>{</span>
|
||||
"label": "Nested option B",
|
||||
"value": "nested-b"
|
||||
<span>}</span>
|
||||
],
|
||||
"links": [
|
||||
<span>{</span>
|
||||
"label": "Documentation",
|
||||
"href": "#documentation"
|
||||
<span>}</span>,
|
||||
<span>{</span>
|
||||
"label": "API reference",
|
||||
"href": "#api-reference"
|
||||
<span>}</span>
|
||||
],
|
||||
"values": [
|
||||
"Included",
|
||||
"Standard"
|
||||
]
|
||||
<span>}</span>,
|
||||
<span>{</span>
|
||||
"id": "marquee-0-2",
|
||||
"key": "marquee-0-2",
|
||||
"value": "secondary",
|
||||
"label": "Additional option",
|
||||
"title": "Supporting example",
|
||||
"description": "A clean default configuration for everyday product interfaces.",
|
||||
"text": "Another configurable message.",
|
||||
"href": "#marquee-demo",
|
||||
"actionHref": "#marquee-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": [
|
||||
<span>{</span>
|
||||
"label": "Nested option A",
|
||||
"value": "nested-a"
|
||||
<span>}</span>,
|
||||
<span>{</span>
|
||||
"label": "Nested option B",
|
||||
"value": "nested-b"
|
||||
<span>}</span>
|
||||
],
|
||||
"links": [
|
||||
<span>{</span>
|
||||
"label": "Documentation",
|
||||
"href": "#documentation"
|
||||
<span>}</span>,
|
||||
<span>{</span>
|
||||
"label": "API reference",
|
||||
"href": "#api-reference"
|
||||
<span>}</span>
|
||||
],
|
||||
"values": [
|
||||
"Included",
|
||||
"Standard"
|
||||
]
|
||||
<span>}</span>
|
||||
]'
|
||||
/></code></pre>
|
||||
<pre><code data-playground-code>page MarqueeExample <span>{</span>
|
||||
state items = [
|
||||
<span>{</span>
|
||||
"id": "marquee-0-1",
|
||||
"key": "marquee-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": "#marquee-demo",
|
||||
"actionHref": "#marquee-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": [
|
||||
<span>{</span>
|
||||
"label": "Nested option A",
|
||||
"value": "nested-a"
|
||||
<span>}</span>,
|
||||
<span>{</span>
|
||||
"label": "Nested option B",
|
||||
"value": "nested-b"
|
||||
<span>}</span>
|
||||
],
|
||||
"links": [
|
||||
<span>{</span>
|
||||
"label": "Documentation",
|
||||
"href": "#documentation"
|
||||
<span>}</span>,
|
||||
<span>{</span>
|
||||
"label": "API reference",
|
||||
"href": "#api-reference"
|
||||
<span>}</span>
|
||||
],
|
||||
"values": [
|
||||
"Included",
|
||||
"Standard"
|
||||
]
|
||||
<span>}</span>,
|
||||
<span>{</span>
|
||||
"id": "marquee-0-2",
|
||||
"key": "marquee-0-2",
|
||||
"value": "secondary",
|
||||
"label": "Additional option",
|
||||
"title": "Supporting example",
|
||||
"description": "A clean default configuration for everyday product interfaces.",
|
||||
"text": "Another configurable message.",
|
||||
"href": "#marquee-demo",
|
||||
"actionHref": "#marquee-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": [
|
||||
<span>{</span>
|
||||
"label": "Nested option A",
|
||||
"value": "nested-a"
|
||||
<span>}</span>,
|
||||
<span>{</span>
|
||||
"label": "Nested option B",
|
||||
"value": "nested-b"
|
||||
<span>}</span>
|
||||
],
|
||||
"links": [
|
||||
<span>{</span>
|
||||
"label": "Documentation",
|
||||
"href": "#documentation"
|
||||
<span>}</span>,
|
||||
<span>{</span>
|
||||
"label": "API reference",
|
||||
"href": "#api-reference"
|
||||
<span>}</span>
|
||||
],
|
||||
"values": [
|
||||
"Included",
|
||||
"Standard"
|
||||
]
|
||||
<span>}</span>
|
||||
]
|
||||
view <span>{</span>
|
||||
<Marquee
|
||||
title="Marquee example"
|
||||
description="A polished default marquee for a modern application."
|
||||
items="<span>{</span>items<span>}</span>"
|
||||
/>
|
||||
<span>}</span>
|
||||
<span>}</span></code></pre>
|
||||
</section>
|
||||
<div class="playground-status" data-playground-status aria-live="polite"></div>
|
||||
<div class="playground-event-log" data-playground-event-log aria-live="polite"><strong>Event output</strong><span>Interact with the preview to inspect the typed <code>payload</code>.</span></div>
|
||||
@@ -278,27 +283,32 @@ page MarqueeDetail {
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Partner and capability strip usage">
|
||||
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
||||
<pre><code><Marquee
|
||||
title="Supported capabilities"
|
||||
description="A polished default marquee for a modern application."
|
||||
items='[
|
||||
<span>{</span>
|
||||
"label": "SSR"
|
||||
<span>}</span>,
|
||||
<span>{</span>
|
||||
"label": "CSR"
|
||||
<span>}</span>,
|
||||
<span>{</span>
|
||||
"label": "Themes"
|
||||
<span>}</span>,
|
||||
<span>{</span>
|
||||
"label": "Accessibility"
|
||||
<span>}</span>,
|
||||
<span>{</span>
|
||||
"label": "Responsive UI"
|
||||
<span>}</span>
|
||||
]'
|
||||
/></code></pre>
|
||||
<pre><code>page MarqueeExample <span>{</span>
|
||||
state items = [
|
||||
<span>{</span>
|
||||
"label": "SSR"
|
||||
<span>}</span>,
|
||||
<span>{</span>
|
||||
"label": "CSR"
|
||||
<span>}</span>,
|
||||
<span>{</span>
|
||||
"label": "Themes"
|
||||
<span>}</span>,
|
||||
<span>{</span>
|
||||
"label": "Accessibility"
|
||||
<span>}</span>,
|
||||
<span>{</span>
|
||||
"label": "Responsive UI"
|
||||
<span>}</span>
|
||||
]
|
||||
view <span>{</span>
|
||||
<Marquee
|
||||
title="Supported capabilities"
|
||||
description="A polished default marquee for a modern application."
|
||||
items="<span>{</span>items<span>}</span>"
|
||||
/>
|
||||
<span>}</span>
|
||||
<span>}</span></code></pre>
|
||||
</section>
|
||||
</div>
|
||||
</article>
|
||||
@@ -315,23 +325,28 @@ page MarqueeDetail {
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Compact announcement ticker usage">
|
||||
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
||||
<pre><code><Marquee
|
||||
size="sm"
|
||||
title="Compact Marquee"
|
||||
description="A compact configuration for dashboards and dense product surfaces."
|
||||
items='[
|
||||
<span>{</span>
|
||||
"label": "All services operational"
|
||||
<span>}</span>,
|
||||
<span>{</span>
|
||||
"label": "New components published"
|
||||
<span>}</span>,
|
||||
<span>{</span>
|
||||
"label": "Documentation updated"
|
||||
<span>}</span>
|
||||
]'
|
||||
variant="soft"
|
||||
/></code></pre>
|
||||
<pre><code>page MarqueeExample <span>{</span>
|
||||
state items = [
|
||||
<span>{</span>
|
||||
"label": "All services operational"
|
||||
<span>}</span>,
|
||||
<span>{</span>
|
||||
"label": "New components published"
|
||||
<span>}</span>,
|
||||
<span>{</span>
|
||||
"label": "Documentation updated"
|
||||
<span>}</span>
|
||||
]
|
||||
view <span>{</span>
|
||||
<Marquee
|
||||
size="sm"
|
||||
title="Compact Marquee"
|
||||
description="A compact configuration for dashboards and dense product surfaces."
|
||||
items="<span>{</span>items<span>}</span>"
|
||||
variant="soft"
|
||||
/>
|
||||
<span>}</span>
|
||||
<span>}</span></code></pre>
|
||||
</section>
|
||||
</div>
|
||||
</article>
|
||||
@@ -348,27 +363,32 @@ page MarqueeDetail {
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Large visual marquee usage">
|
||||
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
||||
<pre><code><Marquee
|
||||
size="lg"
|
||||
color="info"
|
||||
title="Built for complete digital platforms"
|
||||
description="A richer configuration demonstrating additional content and hierarchy."
|
||||
items='[
|
||||
<span>{</span>
|
||||
"label": "Public portals",
|
||||
"icon": "icon-[lucide--landmark]"
|
||||
<span>}</span>,
|
||||
<span>{</span>
|
||||
"label": "Enterprise systems",
|
||||
"icon": "icon-[lucide--building-2]"
|
||||
<span>}</span>,
|
||||
<span>{</span>
|
||||
"label": "Developer tools",
|
||||
"icon": "icon-[lucide--code-2]"
|
||||
<span>}</span>
|
||||
]'
|
||||
variant="raised"
|
||||
/></code></pre>
|
||||
<pre><code>page MarqueeExample <span>{</span>
|
||||
state items = [
|
||||
<span>{</span>
|
||||
"label": "Public portals",
|
||||
"icon": "icon-[lucide--landmark]"
|
||||
<span>}</span>,
|
||||
<span>{</span>
|
||||
"label": "Enterprise systems",
|
||||
"icon": "icon-[lucide--building-2]"
|
||||
<span>}</span>,
|
||||
<span>{</span>
|
||||
"label": "Developer tools",
|
||||
"icon": "icon-[lucide--code-2]"
|
||||
<span>}</span>
|
||||
]
|
||||
view <span>{</span>
|
||||
<Marquee
|
||||
size="lg"
|
||||
color="info"
|
||||
title="Built for complete digital platforms"
|
||||
description="A richer configuration demonstrating additional content and hierarchy."
|
||||
items="<span>{</span>items<span>}</span>"
|
||||
variant="raised"
|
||||
/>
|
||||
<span>}</span>
|
||||
<span>}</span></code></pre>
|
||||
</section>
|
||||
</div>
|
||||
</article></div></section>
|
||||
|
||||
Reference in new issue
Block a user