@gemboss/ui 0.12.0 → 0.21.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +395 -1
- package/README.md +321 -6
- package/catalog/editor.html +611 -0
- package/catalog/index.html +3114 -13
- package/gemboss-ui.css +3 -4682
- package/package.json +16 -4
- package/src/app-shell.css +1 -256
- package/src/assistant.css +1 -558
- package/src/auth.css +1 -606
- package/src/board-move.ts +194 -0
- package/src/chat-composer.css +1 -110
- package/src/chat.css +1 -432
- package/src/collections.css +1 -0
- package/src/collections.tsx +543 -0
- package/src/editor/controls.tsx +206 -0
- package/src/editor/css-url.ts +11 -0
- package/src/editor/frame.tsx +242 -0
- package/src/editor/index.ts +43 -0
- package/src/editor/panel.tsx +188 -0
- package/src/editor/panes.tsx +44 -0
- package/src/editor/swatch.ts +45 -0
- package/src/editor-plain.js +1 -0
- package/src/editor.css +1 -1099
- package/src/gemboss-field.css +1 -112
- package/src/gemboss-tokens.css +1 -164
- package/src/icons.tsx +2 -0
- package/src/index-table.tsx +179 -0
- package/src/index.ts +19 -0
- package/src/kit-plain.css +1 -483
- package/src/kit-plain.js +1 -440
- package/src/menu-layer.ts +87 -0
- package/src/menu.tsx +28 -2
- package/src/portal.css +1 -139
- package/src/reactions-data.ts +59 -0
- package/src/reactions.css +1 -0
- package/src/reactions.tsx +139 -0
- package/src/resource-list-select.tsx +72 -0
- package/src/segmented-click.ts +20 -0
- package/src/segmented.tsx +98 -0
- package/src/selection.tsx +78 -0
- package/src/shell.css +1 -1079
- package/src/theme-dark.css +1 -66
- package/src/ui.css +1 -610
package/catalog/index.html
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
<!doctype html><html lang="vi"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1">
|
|
2
|
-
<title>@gemboss/ui catalog</title><link rel="stylesheet" href="../gemboss-ui.css"><style>
|
|
2
|
+
<title>@gemboss/ui catalog</title><link rel="stylesheet" href="../gemboss-ui.css"><link rel="stylesheet" href="../src/collections.css"><link rel="stylesheet" href="../src/reactions.css"><style>
|
|
3
3
|
body{margin:0;background:var(--gemboss-app-bg,#f1f1f1);color:var(--gemboss-text);font-family:var(--gemboss-font-sans)}
|
|
4
4
|
.cat{display:grid;grid-template-columns:220px minmax(0,1fr);max-width:1180px;margin:0 auto;gap:32px;padding:32px 24px}
|
|
5
5
|
.cat-nav{position:sticky;top:24px;align-self:start;display:flex;flex-direction:column;gap:2px}
|
|
@@ -26,8 +26,8 @@ body{margin:0;background:var(--gemboss-app-bg,#f1f1f1);color:var(--gemboss-text)
|
|
|
26
26
|
|
|
27
27
|
@media (max-width:760px){.cat{grid-template-columns:1fr;padding:16px}.cat-nav{position:static;flex-direction:row;flex-wrap:wrap}}
|
|
28
28
|
</style></head><body>
|
|
29
|
-
<div class="cat"><nav class="cat-nav" aria-label="Mục"><a href="#tokens">Token</a><a href="#buttons">Nút</a><a href="#fields">Ô nhập</a><a href="#choice">Tab, nhóm nút, thẻ</a><a href="#surfaces">Thẻ, số liệu, bảng, trạng thái trống</a><a href="#report">Báo cáo</a><a href="#resizer">Thanh kéo giữa hai cột</a><a href="#modal">Hộp thoại, toast, menu (JS thuần)</a><a href="#shell">Khung app</a><a href="#nav">Chờ điều hướng</a><a href="#page">Bề rộng nội dung</a><a href="#portal">Cổng công khai: tab trên topbar, tìm kiếm, sáng / tối, người dẫn đầu</a><a href="#auth">Đăng nhập</a><a href="#chat">Thân chat</a><a href="#assistant">Trợ lý: cột phiên</a><a href="#icons">Icon</a></nav>
|
|
30
|
-
<main><header class="cat-head"><h1>@gemboss/ui 0.
|
|
29
|
+
<div class="cat"><nav class="cat-nav" aria-label="Mục"><a href="#tokens">Token</a><a href="#buttons">Nút</a><a href="#fields">Ô nhập</a><a href="#choice">Tab, nhóm nút, thẻ</a><a href="#surfaces">Thẻ, số liệu, bảng, trạng thái trống</a><a href="#report">Báo cáo</a><a href="#collections">Bảng, list, lưới, board</a><a href="#resizer">Thanh kéo giữa hai cột</a><a href="#modal">Hộp thoại, toast, menu (JS thuần)</a><a href="#shell">Khung app</a><a href="#nav">Chờ điều hướng</a><a href="#page">Bề rộng nội dung</a><a href="#portal">Cổng công khai: tab trên topbar, tìm kiếm, sáng / tối, người dẫn đầu</a><a href="#auth">Đăng nhập</a><a href="#chat">Thân chat</a><a href="#reactions">Reactions</a><a href="#assistant">Trợ lý: cột phiên</a><a href="#icons">Icon</a><a href="#editor">Editor</a></nav>
|
|
30
|
+
<main><header class="cat-head"><h1>@gemboss/ui 0.21.0</h1><p>Ngôn ngữ thiết kế chung của các công cụ GemBoss. Markup dưới mỗi ví dụ là đúng thứ package render ra; bề mặt không dùng React (HTML tĩnh, Python) chép markup này và nạp <code>gemboss-ui.css</code>. Dựng từ gemboss <code>646a140b4013</code>.</p></header>
|
|
31
31
|
<section id="tokens"><h2>Token</h2><p>Đổi giao diện một bề mặt bằng cách đặt lại token, không viết đè class. Tên và giá trị đọc thẳng từ gemboss-ui.css.</p><div class="cat-swatches"><div class="cat-swatch"><i style="background:var(--gemboss-primary)"></i><code>--gemboss-primary</code><span>#1b1c1e</span></div><div class="cat-swatch"><i style="background:var(--gemboss-primary-dark)"></i><code>--gemboss-primary-dark</code><span>#000000</span></div><div class="cat-swatch"><i style="background:var(--gemboss-primary-soft)"></i><code>--gemboss-primary-soft</code><span>#f2f3f5</span></div><div class="cat-swatch"><i style="background:var(--gemboss-accent)"></i><code>--gemboss-accent</code><span>#5661f5</span></div><div class="cat-swatch"><i style="background:var(--gemboss-accent-strong)"></i><code>--gemboss-accent-strong</code><span>#3a44de</span></div><div class="cat-swatch"><i style="background:var(--gemboss-accent-soft)"></i><code>--gemboss-accent-soft</code><span>#eef0fe</span></div><div class="cat-swatch"><i style="background:var(--gemboss-text-strong)"></i><code>--gemboss-text-strong</code><span>#1b1c1e</span></div><div class="cat-swatch"><i style="background:var(--gemboss-text)"></i><code>--gemboss-text</code><span>#1b1c1e</span></div><div class="cat-swatch"><i style="background:var(--gemboss-text-muted)"></i><code>--gemboss-text-muted</code><span>#686b71</span></div><div class="cat-swatch"><i style="background:var(--gemboss-surface)"></i><code>--gemboss-surface</code><span>#ffffff</span></div><div class="cat-swatch"><i style="background:var(--gemboss-canvas)"></i><code>--gemboss-canvas</code><span>#ffffff</span></div><div class="cat-swatch"><i style="background:var(--gemboss-preview-canvas)"></i><code>--gemboss-preview-canvas</code><span>#eceef1</span></div><div class="cat-swatch"><i style="background:var(--gemboss-rail-bg)"></i><code>--gemboss-rail-bg</code><span>#ffffff</span></div><div class="cat-swatch"><i style="background:var(--gemboss-panel-bg)"></i><code>--gemboss-panel-bg</code><span>#ffffff</span></div><div class="cat-swatch"><i style="background:var(--gemboss-divider)"></i><code>--gemboss-divider</code><span>#e5e7ea</span></div><div class="cat-swatch"><i style="background:var(--gemboss-divider-soft)"></i><code>--gemboss-divider-soft</code><span>#edeff2</span></div><div class="cat-swatch"><i style="background:var(--gemboss-hover)"></i><code>--gemboss-hover</code><span>#eceef2</span></div><div class="cat-swatch"><i style="background:var(--gemboss-active-bg)"></i><code>--gemboss-active-bg</code><span>#f0f1f4</span></div><div class="cat-swatch"><i style="background:var(--gemboss-active-fg)"></i><code>--gemboss-active-fg</code><span>#1b1c1e</span></div><div class="cat-swatch"><i style="background:var(--gemboss-danger)"></i><code>--gemboss-danger</code><span>#d72c0d</span></div><div class="cat-swatch"><i style="background:var(--gemboss-danger-strong)"></i><code>--gemboss-danger-strong</code><span>#b42318</span></div><div class="cat-swatch"><i style="background:var(--gemboss-danger-soft)"></i><code>--gemboss-danger-soft</code><span>#fff0e9</span></div><div class="cat-swatch"><i style="background:var(--gemboss-danger-border)"></i><code>--gemboss-danger-border</code><span>#f5c9bc</span></div><div class="cat-swatch"><i style="background:var(--gemboss-success)"></i><code>--gemboss-success</code><span>#007f5f</span></div><div class="cat-swatch"><i style="background:var(--gemboss-success-strong)"></i><code>--gemboss-success-strong</code><span>#0a6a4c</span></div><div class="cat-swatch"><i style="background:var(--gemboss-success-soft)"></i><code>--gemboss-success-soft</code><span>#e3f1df</span></div><div class="cat-swatch"><i style="background:var(--gemboss-success-border)"></i><code>--gemboss-success-border</code><span>#b7dfcd</span></div><div class="cat-swatch"><i style="background:var(--gemboss-warning)"></i><code>--gemboss-warning</code><span>#9a6700</span></div><div class="cat-swatch"><i style="background:var(--gemboss-warning-soft)"></i><code>--gemboss-warning-soft</code><span>#fff8e0</span></div><div class="cat-swatch"><i style="background:var(--gemboss-warning-border)"></i><code>--gemboss-warning-border</code><span>#f5d569</span></div><div class="cat-swatch"><i style="background:var(--gemboss-dark-bg)"></i><code>--gemboss-dark-bg</code><span>#0a0a0c</span></div><div class="cat-swatch"><i style="background:var(--gemboss-dark-rail)"></i><code>--gemboss-dark-rail</code><span>#0e0e11</span></div><div class="cat-swatch"><i style="background:var(--gemboss-dark-surface)"></i><code>--gemboss-dark-surface</code><span>#16161a</span></div><div class="cat-swatch"><i style="background:var(--gemboss-dark-surface-2)"></i><code>--gemboss-dark-surface-2</code><span>#1e1e24</span></div><div class="cat-swatch"><i style="background:var(--gemboss-dark-divider)"></i><code>--gemboss-dark-divider</code><span>#2a2a31</span></div><div class="cat-swatch"><i style="background:var(--gemboss-dark-text)"></i><code>--gemboss-dark-text</code><span>#ededf0</span></div><div class="cat-swatch"><i style="background:var(--gemboss-dark-muted)"></i><code>--gemboss-dark-muted</code><span>#9a9aa4</span></div><div class="cat-swatch"><i style="background:var(--gemboss-field-bg)"></i><code>--gemboss-field-bg</code><span>#fdfdfd</span></div><div class="cat-swatch"><i style="background:var(--gemboss-field-bg-hover)"></i><code>--gemboss-field-bg-hover</code><span>#fafafa</span></div><div class="cat-swatch"><i style="background:var(--gemboss-field-ink)"></i><code>--gemboss-field-ink</code><span>#303030</span></div><div class="cat-swatch"><i style="background:var(--gemboss-field-placeholder)"></i><code>--gemboss-field-placeholder</code><span>#616161</span></div><div class="cat-swatch"><i style="background:var(--gemboss-field-line)"></i><code>--gemboss-field-line</code><span>#8a8a8a</span></div><div class="cat-swatch"><i style="background:var(--gemboss-field-line-hover)"></i><code>--gemboss-field-line-hover</code><span>#616161</span></div><div class="cat-swatch"><i style="background:var(--gemboss-field-line-active)"></i><code>--gemboss-field-line-active</code><span>#1a1a1a</span></div><div class="cat-swatch"><i style="background:var(--gemboss-chip-ink)"></i><code>--gemboss-chip-ink</code><span>#303633</span></div><div class="cat-swatch"><i style="background:var(--gemboss-chip-line)"></i><code>--gemboss-chip-line</code><span>#cfd6ce</span></div><div class="cat-swatch"><i style="background:var(--gemboss-chip-line-hover)"></i><code>--gemboss-chip-line-hover</code><span>#aab4ad</span></div><div class="cat-swatch"><i style="background:var(--gemboss-chip-bg-hover)"></i><code>--gemboss-chip-bg-hover</code><span>#f6f7f5</span></div><div class="cat-swatch"><i style="background:var(--gemboss-on-primary)"></i><code>--gemboss-on-primary</code><span>#ffffff</span></div><div class="cat-swatch"><i style="background:var(--gemboss-app-bg)"></i><code>--gemboss-app-bg</code><span>#ffffff</span></div></div><table class="ui-table cat-scale"><thead><tr><th>Token</th><th>Giá trị</th><th>Mẫu</th></tr></thead><tbody><tr><td><code>--gemboss-fs-micro</code></td><td>11px</td><td style="font-size:var(--gemboss-fs-micro)">Ngôn ngữ thiết kế chung</td></tr><tr><td><code>--gemboss-fs-caption</code></td><td>12px</td><td style="font-size:var(--gemboss-fs-caption)">Ngôn ngữ thiết kế chung</td></tr><tr><td><code>--gemboss-fs-body</code></td><td>14px</td><td style="font-size:var(--gemboss-fs-body)">Ngôn ngữ thiết kế chung</td></tr><tr><td><code>--gemboss-fs-body-lg</code></td><td>16px</td><td style="font-size:var(--gemboss-fs-body-lg)">Ngôn ngữ thiết kế chung</td></tr><tr><td><code>--gemboss-fs-h3</code></td><td>16px</td><td style="font-size:var(--gemboss-fs-h3)">Ngôn ngữ thiết kế chung</td></tr><tr><td><code>--gemboss-fs-h2</code></td><td>20px</td><td style="font-size:var(--gemboss-fs-h2)">Ngôn ngữ thiết kế chung</td></tr><tr><td><code>--gemboss-fs-h1</code></td><td>24px</td><td style="font-size:var(--gemboss-fs-h1)">Ngôn ngữ thiết kế chung</td></tr><tr><td><code>--gemboss-fs-display</code></td><td>30px</td><td style="font-size:var(--gemboss-fs-display)">Ngôn ngữ thiết kế chung</td></tr><tr><td><code>--gemboss-radius-xs</code></td><td>4px</td><td><i class="cat-radius" style="border-radius:var(--gemboss-radius-xs)"></i></td></tr><tr><td><code>--gemboss-radius-sm</code></td><td>6px</td><td><i class="cat-radius" style="border-radius:var(--gemboss-radius-sm)"></i></td></tr><tr><td><code>--gemboss-radius-md</code></td><td>8px</td><td><i class="cat-radius" style="border-radius:var(--gemboss-radius-md)"></i></td></tr><tr><td><code>--gemboss-radius-lg</code></td><td>12px</td><td><i class="cat-radius" style="border-radius:var(--gemboss-radius-lg)"></i></td></tr><tr><td><code>--gemboss-radius-xl</code></td><td>16px</td><td><i class="cat-radius" style="border-radius:var(--gemboss-radius-xl)"></i></td></tr><tr><td><code>--gemboss-radius-2xl</code></td><td>20px</td><td><i class="cat-radius" style="border-radius:var(--gemboss-radius-2xl)"></i></td></tr><tr><td><code>--gemboss-radius-full</code></td><td>999px</td><td><i class="cat-radius" style="border-radius:var(--gemboss-radius-full)"></i></td></tr><tr><td><code>--gemboss-shadow-resting</code></td><td class="cat-small">0 1px 2px rgba(31, 30, 29, 0.04), 0 2px 6px rgba(31, 30, 29, 0.06)</td><td><i class="cat-radius" style="box-shadow:var(--gemboss-shadow-resting);border:0"></i></td></tr><tr><td><code>--gemboss-shadow-raised</code></td><td class="cat-small">0 4px 16px rgba(31, 30, 29, 0.10)</td><td><i class="cat-radius" style="box-shadow:var(--gemboss-shadow-raised);border:0"></i></td></tr><tr><td><code>--gemboss-shadow-overlay</code></td><td class="cat-small">0 16px 48px rgba(31, 30, 29, 0.18)</td><td><i class="cat-radius" style="box-shadow:var(--gemboss-shadow-overlay);border:0"></i></td></tr></tbody></table></section>
|
|
32
32
|
<section id="buttons"><h2>Nút</h2><p>Một lớp <code>ui-btn</code>, ba biến thể, tông đỏ, một cỡ nhỏ. Cao 28px dưới chuột như Button của Polaris (ô nhập và ô chọn 32, như TextField), 44px dưới ngón tay và ở khổ điện thoại, cỡ nhỏ cũng vậy. Dùng được trên <code><button></code> lẫn <code><a></code> (căn giữa sẵn).</p><figure class="cat-demo"><figcaption>Mặc định · chính · ghost · nhỏ · tắt</figcaption><div class="cat-live"><div class="cat-row"><button type="button" class="ui-btn">Lưu nháp</button><button type="button" class="ui-btn ui-btn--primary">Xuất bản</button><button type="button" class="ui-btn ui-btn--ghost">Huỷ</button><button type="button" class="ui-btn ui-btn--sm">Nhỏ</button><button type="button" class="ui-btn ui-btn--primary" disabled>Đang lưu…</button><a class="ui-btn" href="#buttons">Link dạng nút</a></div></div><details class="cat-code"><summary>Markup</summary><pre><code><div class="cat-row">
|
|
33
33
|
<button type="button" class="ui-btn">Lưu nháp</button>
|
|
@@ -604,6 +604,2918 @@ body{margin:0;background:var(--gemboss-app-bg,#f1f1f1);color:var(--gemboss-text)
|
|
|
604
604
|
</ol>
|
|
605
605
|
</div>
|
|
606
606
|
</div></code></pre></details></figure></section>
|
|
607
|
+
<section id="collections"><h2>Bảng, list, lưới, board</h2><p>Sáu mẫu, chọn theo cây quyết định ở README "Collections": <b>1 Data table</b> (so số theo cột) · <b>2 Index table</b> (thực thể, mở chi tiết, chọn nhiều) · <b>3 Resource list</b> (đọc từng mục) · <b>4 Compact list</b> (một dòng, <code>--activity</code> là timeline) · <b>5 Card grid</b> (ảnh là nội dung) · <b>6 Board</b> (chuyển trạng thái). Nạp <code>@gemboss/ui/collections.css</code> cạnh <code>gemboss-ui.css</code>; bề mặt HTML thuần nạp thêm <code>kit-plain.js</code> cho hàng bấm được, chọn hàng, sort.</p><figure class="cat-demo"><figcaption>1 · Data table (<code>DataTable</code>): sort bằng link (thứ tự nằm trên URL), cột đầu là <code>th scope=row</code>, totals, footer, <code>--sticky-first</code></figcaption><div class="cat-live"><div class="ui-table-wrap"><table class="ui-table ui-table--sticky-first"><caption class="ui-sr-only">Sessions by source</caption><thead><tr><th scope="col" aria-sort="none"><a class="ui-table__sort" href="#collections">Source</a></th><th scope="col" class="is-num" aria-sort="descending"><a class="ui-table__sort" href="#collections">Visits</a></th><th scope="col" class="is-num">Orders</th><th scope="col" class="is-num">Conversion</th><th scope="col" class="is-num">Revenue</th></tr></thead><tbody><tr><th scope="row" class="ui-table__rowhead">Direct</th><td class="is-num">12,804</td><td class="is-num">412</td><td class="is-num">3.2%</td><td class="is-num">$41,220</td></tr><tr><th scope="row" class="ui-table__rowhead">Google / organic</th><td class="is-num">9,331</td><td class="is-num">201</td><td class="is-num">2.2%</td><td class="is-num">$19,870</td></tr><tr><th scope="row" class="ui-table__rowhead">Meta ads</th><td class="is-num">7,002</td><td class="is-num">188</td><td class="is-num">2.7%</td><td class="is-num">$18,410</td></tr><tr><th scope="row" class="ui-table__rowhead">Email (Klaviyo)</th><td class="is-num">2,113</td><td class="is-num">129</td><td class="is-num">6.1%</td><td class="is-num">$13,002</td></tr><tr><th scope="row" class="ui-table__rowhead">TikTok</th><td class="is-num">1,980</td><td class="is-num">22</td><td class="is-num">1.1%</td><td class="is-num">$2,140</td></tr></tbody><tfoot class="ui-table__totals"><tr><td>Total</td><td class="is-num">33,230</td><td class="is-num">952</td><td class="is-num">2.9%</td><td class="is-num">$94,642</td></tr></tfoot></table><div class="ui-table__footer">5 of 5 sources · last 30 days</div></div></div><details class="cat-code"><summary>Markup</summary><pre><code><div class="ui-table-wrap">
|
|
608
|
+
<table class="ui-table ui-table--sticky-first">
|
|
609
|
+
<caption class="ui-sr-only">Sessions by source</caption>
|
|
610
|
+
<thead>
|
|
611
|
+
<tr>
|
|
612
|
+
<th scope="col" aria-sort="none">
|
|
613
|
+
<a class="ui-table__sort" href="#collections">Source</a>
|
|
614
|
+
</th>
|
|
615
|
+
<th scope="col" class="is-num" aria-sort="descending">
|
|
616
|
+
<a class="ui-table__sort" href="#collections">Visits</a>
|
|
617
|
+
</th>
|
|
618
|
+
<th scope="col" class="is-num">Orders</th>
|
|
619
|
+
<th scope="col" class="is-num">Conversion</th>
|
|
620
|
+
<th scope="col" class="is-num">Revenue</th>
|
|
621
|
+
</tr>
|
|
622
|
+
</thead>
|
|
623
|
+
<tbody>
|
|
624
|
+
<tr>
|
|
625
|
+
<th scope="row" class="ui-table__rowhead">Direct</th>
|
|
626
|
+
<td class="is-num">12,804</td>
|
|
627
|
+
<td class="is-num">412</td>
|
|
628
|
+
<td class="is-num">3.2%</td>
|
|
629
|
+
<td class="is-num">$41,220</td>
|
|
630
|
+
</tr>
|
|
631
|
+
<tr>
|
|
632
|
+
<th scope="row" class="ui-table__rowhead">Google / organic</th>
|
|
633
|
+
<td class="is-num">9,331</td>
|
|
634
|
+
<td class="is-num">201</td>
|
|
635
|
+
<td class="is-num">2.2%</td>
|
|
636
|
+
<td class="is-num">$19,870</td>
|
|
637
|
+
</tr>
|
|
638
|
+
<tr>
|
|
639
|
+
<th scope="row" class="ui-table__rowhead">Meta ads</th>
|
|
640
|
+
<td class="is-num">7,002</td>
|
|
641
|
+
<td class="is-num">188</td>
|
|
642
|
+
<td class="is-num">2.7%</td>
|
|
643
|
+
<td class="is-num">$18,410</td>
|
|
644
|
+
</tr>
|
|
645
|
+
<tr>
|
|
646
|
+
<th scope="row" class="ui-table__rowhead">Email (Klaviyo)</th>
|
|
647
|
+
<td class="is-num">2,113</td>
|
|
648
|
+
<td class="is-num">129</td>
|
|
649
|
+
<td class="is-num">6.1%</td>
|
|
650
|
+
<td class="is-num">$13,002</td>
|
|
651
|
+
</tr>
|
|
652
|
+
<tr>
|
|
653
|
+
<th scope="row" class="ui-table__rowhead">TikTok</th>
|
|
654
|
+
<td class="is-num">1,980</td>
|
|
655
|
+
<td class="is-num">22</td>
|
|
656
|
+
<td class="is-num">1.1%</td>
|
|
657
|
+
<td class="is-num">$2,140</td>
|
|
658
|
+
</tr>
|
|
659
|
+
</tbody>
|
|
660
|
+
<tfoot class="ui-table__totals">
|
|
661
|
+
<tr>
|
|
662
|
+
<td>Total</td>
|
|
663
|
+
<td class="is-num">33,230</td>
|
|
664
|
+
<td class="is-num">952</td>
|
|
665
|
+
<td class="is-num">2.9%</td>
|
|
666
|
+
<td class="is-num">$94,642</td>
|
|
667
|
+
</tr>
|
|
668
|
+
</tfoot>
|
|
669
|
+
</table>
|
|
670
|
+
<div class="ui-table__footer">5 of 5 sources · last 30 days</div>
|
|
671
|
+
</div></code></pre></details></figure><figure class="cat-demo"><figcaption>1 · Data table rộng hơn khung: cuộn ngang trong khung, cột đầu dính, bóng mép khi đã cuộn (cuộn thử)</figcaption><div class="cat-live"><div style="max-width:480px" data-coll-demo="scrolls"><div class="ui-table-wrap"><table class="ui-table ui-table--sticky-first"><caption class="ui-sr-only">Pages captured per day</caption><thead><tr><th scope="col">Store</th><th scope="col" class="is-num">Mon</th><th scope="col" class="is-num">Tue</th><th scope="col" class="is-num">Wed</th><th scope="col" class="is-num">Thu</th><th scope="col" class="is-num">Fri</th><th scope="col" class="is-num">Sat</th><th scope="col" class="is-num">Sun</th><th scope="col" class="is-num">Week</th><th scope="col" class="is-num">Prev</th><th scope="col" class="is-num">Δ</th></tr></thead><tbody><tr><th scope="row" class="ui-table__rowhead">glowrecipe.com</th><td class="is-num">102</td><td class="is-num">136</td><td class="is-num">170</td><td class="is-num">204</td><td class="is-num">238</td><td class="is-num">272</td><td class="is-num">306</td><td class="is-num">340</td><td class="is-num">374</td><td class="is-num">408</td></tr><tr><th scope="row" class="ui-table__rowhead">fluke.com</th><td class="is-num">153</td><td class="is-num">204</td><td class="is-num">255</td><td class="is-num">306</td><td class="is-num">357</td><td class="is-num">408</td><td class="is-num">459</td><td class="is-num">510</td><td class="is-num">561</td><td class="is-num">612</td></tr><tr><th scope="row" class="ui-table__rowhead">ruggable.com</th><td class="is-num">204</td><td class="is-num">272</td><td class="is-num">340</td><td class="is-num">408</td><td class="is-num">476</td><td class="is-num">544</td><td class="is-num">612</td><td class="is-num">680</td><td class="is-num">748</td><td class="is-num">816</td></tr><tr><th scope="row" class="ui-table__rowhead">allbirds.com</th><td class="is-num">255</td><td class="is-num">340</td><td class="is-num">425</td><td class="is-num">510</td><td class="is-num">595</td><td class="is-num">680</td><td class="is-num">765</td><td class="is-num">850</td><td class="is-num">935</td><td class="is-num">1020</td></tr></tbody></table></div></div></div><details class="cat-code"><summary>Markup</summary><pre><code><div style="max-width:480px" data-coll-demo="scrolls">
|
|
672
|
+
<div class="ui-table-wrap">
|
|
673
|
+
<table class="ui-table ui-table--sticky-first">
|
|
674
|
+
<caption class="ui-sr-only">Pages captured per day</caption>
|
|
675
|
+
<thead>
|
|
676
|
+
<tr>
|
|
677
|
+
<th scope="col">Store</th>
|
|
678
|
+
<th scope="col" class="is-num">Mon</th>
|
|
679
|
+
<th scope="col" class="is-num">Tue</th>
|
|
680
|
+
<th scope="col" class="is-num">Wed</th>
|
|
681
|
+
<th scope="col" class="is-num">Thu</th>
|
|
682
|
+
<th scope="col" class="is-num">Fri</th>
|
|
683
|
+
<th scope="col" class="is-num">Sat</th>
|
|
684
|
+
<th scope="col" class="is-num">Sun</th>
|
|
685
|
+
<th scope="col" class="is-num">Week</th>
|
|
686
|
+
<th scope="col" class="is-num">Prev</th>
|
|
687
|
+
<th scope="col" class="is-num">Δ</th>
|
|
688
|
+
</tr>
|
|
689
|
+
</thead>
|
|
690
|
+
<tbody>
|
|
691
|
+
<tr>
|
|
692
|
+
<th scope="row" class="ui-table__rowhead">glowrecipe.com</th>
|
|
693
|
+
<td class="is-num">102</td>
|
|
694
|
+
<td class="is-num">136</td>
|
|
695
|
+
<td class="is-num">170</td>
|
|
696
|
+
<td class="is-num">204</td>
|
|
697
|
+
<td class="is-num">238</td>
|
|
698
|
+
<td class="is-num">272</td>
|
|
699
|
+
<td class="is-num">306</td>
|
|
700
|
+
<td class="is-num">340</td>
|
|
701
|
+
<td class="is-num">374</td>
|
|
702
|
+
<td class="is-num">408</td>
|
|
703
|
+
</tr>
|
|
704
|
+
<tr>
|
|
705
|
+
<th scope="row" class="ui-table__rowhead">fluke.com</th>
|
|
706
|
+
<td class="is-num">153</td>
|
|
707
|
+
<td class="is-num">204</td>
|
|
708
|
+
<td class="is-num">255</td>
|
|
709
|
+
<td class="is-num">306</td>
|
|
710
|
+
<td class="is-num">357</td>
|
|
711
|
+
<td class="is-num">408</td>
|
|
712
|
+
<td class="is-num">459</td>
|
|
713
|
+
<td class="is-num">510</td>
|
|
714
|
+
<td class="is-num">561</td>
|
|
715
|
+
<td class="is-num">612</td>
|
|
716
|
+
</tr>
|
|
717
|
+
<tr>
|
|
718
|
+
<th scope="row" class="ui-table__rowhead">ruggable.com</th>
|
|
719
|
+
<td class="is-num">204</td>
|
|
720
|
+
<td class="is-num">272</td>
|
|
721
|
+
<td class="is-num">340</td>
|
|
722
|
+
<td class="is-num">408</td>
|
|
723
|
+
<td class="is-num">476</td>
|
|
724
|
+
<td class="is-num">544</td>
|
|
725
|
+
<td class="is-num">612</td>
|
|
726
|
+
<td class="is-num">680</td>
|
|
727
|
+
<td class="is-num">748</td>
|
|
728
|
+
<td class="is-num">816</td>
|
|
729
|
+
</tr>
|
|
730
|
+
<tr>
|
|
731
|
+
<th scope="row" class="ui-table__rowhead">allbirds.com</th>
|
|
732
|
+
<td class="is-num">255</td>
|
|
733
|
+
<td class="is-num">340</td>
|
|
734
|
+
<td class="is-num">425</td>
|
|
735
|
+
<td class="is-num">510</td>
|
|
736
|
+
<td class="is-num">595</td>
|
|
737
|
+
<td class="is-num">680</td>
|
|
738
|
+
<td class="is-num">765</td>
|
|
739
|
+
<td class="is-num">850</td>
|
|
740
|
+
<td class="is-num">935</td>
|
|
741
|
+
<td class="is-num">1020</td>
|
|
742
|
+
</tr>
|
|
743
|
+
</tbody>
|
|
744
|
+
</table>
|
|
745
|
+
</div>
|
|
746
|
+
</div></code></pre></details></figure><figure class="cat-demo cat-screen"><figcaption>1 · Data table ở 390px: vẫn là bảng, cuộn ngang, cột đầu dính</figcaption><div class="cat-wide"><iframe title="1 · Data table ở 390px: vẫn là bảng, cuộn ngang, cột đầu dính" style="height:300px;width:390px" srcdoc="<!doctype html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="../gemboss-ui.css"><link rel="stylesheet" href="../src/collections.css"><link rel="stylesheet" href="../src/reactions.css"></head><body><div style="padding:16px"><div class="ui-table-wrap"><table class="ui-table ui-table--sticky-first"><caption class="ui-sr-only">Pages captured per day</caption><thead><tr><th scope="col">Store</th><th scope="col" class="is-num">Mon</th><th scope="col" class="is-num">Tue</th><th scope="col" class="is-num">Wed</th><th scope="col" class="is-num">Thu</th><th scope="col" class="is-num">Fri</th><th scope="col" class="is-num">Sat</th><th scope="col" class="is-num">Sun</th><th scope="col" class="is-num">Week</th><th scope="col" class="is-num">Prev</th><th scope="col" class="is-num">Δ</th></tr></thead><tbody><tr><th scope="row" class="ui-table__rowhead">glowrecipe.com</th><td class="is-num">102</td><td class="is-num">136</td><td class="is-num">170</td><td class="is-num">204</td><td class="is-num">238</td><td class="is-num">272</td><td class="is-num">306</td><td class="is-num">340</td><td class="is-num">374</td><td class="is-num">408</td></tr><tr><th scope="row" class="ui-table__rowhead">fluke.com</th><td class="is-num">153</td><td class="is-num">204</td><td class="is-num">255</td><td class="is-num">306</td><td class="is-num">357</td><td class="is-num">408</td><td class="is-num">459</td><td class="is-num">510</td><td class="is-num">561</td><td class="is-num">612</td></tr><tr><th scope="row" class="ui-table__rowhead">ruggable.com</th><td class="is-num">204</td><td class="is-num">272</td><td class="is-num">340</td><td class="is-num">408</td><td class="is-num">476</td><td class="is-num">544</td><td class="is-num">612</td><td class="is-num">680</td><td class="is-num">748</td><td class="is-num">816</td></tr><tr><th scope="row" class="ui-table__rowhead">allbirds.com</th><td class="is-num">255</td><td class="is-num">340</td><td class="is-num">425</td><td class="is-num">510</td><td class="is-num">595</td><td class="is-num">680</td><td class="is-num">765</td><td class="is-num">850</td><td class="is-num">935</td><td class="is-num">1020</td></tr></tbody></table></div></div><script src="../src/kit-plain.js"></script></body></html>"></iframe></div><details class="cat-code"><summary>Markup</summary><pre><code><div style="padding:16px">
|
|
747
|
+
<div class="ui-table-wrap">
|
|
748
|
+
<table class="ui-table ui-table--sticky-first">
|
|
749
|
+
<caption class="ui-sr-only">Pages captured per day</caption>
|
|
750
|
+
<thead>
|
|
751
|
+
<tr>
|
|
752
|
+
<th scope="col">Store</th>
|
|
753
|
+
<th scope="col" class="is-num">Mon</th>
|
|
754
|
+
<th scope="col" class="is-num">Tue</th>
|
|
755
|
+
<th scope="col" class="is-num">Wed</th>
|
|
756
|
+
<th scope="col" class="is-num">Thu</th>
|
|
757
|
+
<th scope="col" class="is-num">Fri</th>
|
|
758
|
+
<th scope="col" class="is-num">Sat</th>
|
|
759
|
+
<th scope="col" class="is-num">Sun</th>
|
|
760
|
+
<th scope="col" class="is-num">Week</th>
|
|
761
|
+
<th scope="col" class="is-num">Prev</th>
|
|
762
|
+
<th scope="col" class="is-num">Δ</th>
|
|
763
|
+
</tr>
|
|
764
|
+
</thead>
|
|
765
|
+
<tbody>
|
|
766
|
+
<tr>
|
|
767
|
+
<th scope="row" class="ui-table__rowhead">glowrecipe.com</th>
|
|
768
|
+
<td class="is-num">102</td>
|
|
769
|
+
<td class="is-num">136</td>
|
|
770
|
+
<td class="is-num">170</td>
|
|
771
|
+
<td class="is-num">204</td>
|
|
772
|
+
<td class="is-num">238</td>
|
|
773
|
+
<td class="is-num">272</td>
|
|
774
|
+
<td class="is-num">306</td>
|
|
775
|
+
<td class="is-num">340</td>
|
|
776
|
+
<td class="is-num">374</td>
|
|
777
|
+
<td class="is-num">408</td>
|
|
778
|
+
</tr>
|
|
779
|
+
<tr>
|
|
780
|
+
<th scope="row" class="ui-table__rowhead">fluke.com</th>
|
|
781
|
+
<td class="is-num">153</td>
|
|
782
|
+
<td class="is-num">204</td>
|
|
783
|
+
<td class="is-num">255</td>
|
|
784
|
+
<td class="is-num">306</td>
|
|
785
|
+
<td class="is-num">357</td>
|
|
786
|
+
<td class="is-num">408</td>
|
|
787
|
+
<td class="is-num">459</td>
|
|
788
|
+
<td class="is-num">510</td>
|
|
789
|
+
<td class="is-num">561</td>
|
|
790
|
+
<td class="is-num">612</td>
|
|
791
|
+
</tr>
|
|
792
|
+
<tr>
|
|
793
|
+
<th scope="row" class="ui-table__rowhead">ruggable.com</th>
|
|
794
|
+
<td class="is-num">204</td>
|
|
795
|
+
<td class="is-num">272</td>
|
|
796
|
+
<td class="is-num">340</td>
|
|
797
|
+
<td class="is-num">408</td>
|
|
798
|
+
<td class="is-num">476</td>
|
|
799
|
+
<td class="is-num">544</td>
|
|
800
|
+
<td class="is-num">612</td>
|
|
801
|
+
<td class="is-num">680</td>
|
|
802
|
+
<td class="is-num">748</td>
|
|
803
|
+
<td class="is-num">816</td>
|
|
804
|
+
</tr>
|
|
805
|
+
<tr>
|
|
806
|
+
<th scope="row" class="ui-table__rowhead">allbirds.com</th>
|
|
807
|
+
<td class="is-num">255</td>
|
|
808
|
+
<td class="is-num">340</td>
|
|
809
|
+
<td class="is-num">425</td>
|
|
810
|
+
<td class="is-num">510</td>
|
|
811
|
+
<td class="is-num">595</td>
|
|
812
|
+
<td class="is-num">680</td>
|
|
813
|
+
<td class="is-num">765</td>
|
|
814
|
+
<td class="is-num">850</td>
|
|
815
|
+
<td class="is-num">935</td>
|
|
816
|
+
<td class="is-num">1020</td>
|
|
817
|
+
</tr>
|
|
818
|
+
</tbody>
|
|
819
|
+
</table>
|
|
820
|
+
</div>
|
|
821
|
+
</div></code></pre></details></figure><figure class="cat-demo"><figcaption>1 · Data table nhiều dòng (0.16.0): ô canh TRÊN như Polaris DataTable; tiêu đề hàng (<code>th scope=row</code>) xuống dòng (cắt bằng <code>truncate</code> / <code>ui-clamp-2</code> nếu cần một dòng); link trong ô 24px mà chữ vẫn thẳng hàng với ô bên cạnh</figcaption><div class="cat-live"><div class="ui-table-wrap"><table class="ui-table ui-table--sticky-first"><caption class="ui-sr-only">Jobs</caption><thead><tr><th scope="col">Job</th><th scope="col">State</th><th scope="col">Source</th><th scope="col">Last run</th><th scope="col" class="is-num">Runs</th></tr></thead><tbody><tr><th scope="row" class="ui-table__rowhead"><a href="#job0">Weekly integrations crawl</a><span class="ui-sub">PageFly, GemPages, Replo, Shogun, EComposer and 14 more partner page builders · every Monday 08:00 UTC</span></th><td><span class="ui-tag ui-tag--success">OK</span></td><td><a href="#src0">sitemap</a></td><td>2h ago</td><td class="is-num">1,204</td></tr><tr><th scope="row" class="ui-table__rowhead"><a href="#job1">StoreLeads refresh</a><span class="ui-sub">Apps with a GemPages mention, ranked by install growth · daily</span></th><td><span class="ui-tag ui-tag--warning">Late</span></td><td><a href="#src1">api</a></td><td>26h ago</td><td class="is-num">311</td></tr><tr><th scope="row" class="ui-table__rowhead"><a href="#job2">LinkedIn people at Shopify</a><span class="ui-sub">367 profiles · Find people on the organization page</span></th><td><span class="ui-tag ui-tag--success">OK</span></td><td><a href="#src2">apify</a></td><td>3d ago</td><td class="is-num">18</td></tr></tbody></table></div></div><details class="cat-code"><summary>Markup</summary><pre><code><div class="ui-table-wrap">
|
|
822
|
+
<table class="ui-table ui-table--sticky-first">
|
|
823
|
+
<caption class="ui-sr-only">Jobs</caption>
|
|
824
|
+
<thead>
|
|
825
|
+
<tr>
|
|
826
|
+
<th scope="col">Job</th>
|
|
827
|
+
<th scope="col">State</th>
|
|
828
|
+
<th scope="col">Source</th>
|
|
829
|
+
<th scope="col">Last run</th>
|
|
830
|
+
<th scope="col" class="is-num">Runs</th>
|
|
831
|
+
</tr>
|
|
832
|
+
</thead>
|
|
833
|
+
<tbody>
|
|
834
|
+
<tr>
|
|
835
|
+
<th scope="row" class="ui-table__rowhead">
|
|
836
|
+
<a href="#job0">Weekly integrations crawl</a>
|
|
837
|
+
<span class="ui-sub">PageFly, GemPages, Replo, Shogun, EComposer and 14 more partner page builders · every Monday 08:00 UTC</span>
|
|
838
|
+
</th>
|
|
839
|
+
<td>
|
|
840
|
+
<span class="ui-tag ui-tag--success">OK</span>
|
|
841
|
+
</td>
|
|
842
|
+
<td>
|
|
843
|
+
<a href="#src0">sitemap</a>
|
|
844
|
+
</td>
|
|
845
|
+
<td>2h ago</td>
|
|
846
|
+
<td class="is-num">1,204</td>
|
|
847
|
+
</tr>
|
|
848
|
+
<tr>
|
|
849
|
+
<th scope="row" class="ui-table__rowhead">
|
|
850
|
+
<a href="#job1">StoreLeads refresh</a>
|
|
851
|
+
<span class="ui-sub">Apps with a GemPages mention, ranked by install growth · daily</span>
|
|
852
|
+
</th>
|
|
853
|
+
<td>
|
|
854
|
+
<span class="ui-tag ui-tag--warning">Late</span>
|
|
855
|
+
</td>
|
|
856
|
+
<td>
|
|
857
|
+
<a href="#src1">api</a>
|
|
858
|
+
</td>
|
|
859
|
+
<td>26h ago</td>
|
|
860
|
+
<td class="is-num">311</td>
|
|
861
|
+
</tr>
|
|
862
|
+
<tr>
|
|
863
|
+
<th scope="row" class="ui-table__rowhead">
|
|
864
|
+
<a href="#job2">LinkedIn people at Shopify</a>
|
|
865
|
+
<span class="ui-sub">367 profiles · Find people on the organization page</span>
|
|
866
|
+
</th>
|
|
867
|
+
<td>
|
|
868
|
+
<span class="ui-tag ui-tag--success">OK</span>
|
|
869
|
+
</td>
|
|
870
|
+
<td>
|
|
871
|
+
<a href="#src2">apify</a>
|
|
872
|
+
</td>
|
|
873
|
+
<td>3d ago</td>
|
|
874
|
+
<td class="is-num">18</td>
|
|
875
|
+
</tr>
|
|
876
|
+
</tbody>
|
|
877
|
+
</table>
|
|
878
|
+
</div></code></pre></details></figure><figure class="cat-demo cat-screen"><figcaption>1 · Data table nhiều dòng ở 390px: vẫn cuộn ngang, cột đầu dính và xuống dòng</figcaption><div class="cat-wide"><iframe title="1 · Data table nhiều dòng ở 390px: vẫn cuộn ngang, cột đầu dính và xuống dòng" style="height:320px;width:390px" srcdoc="<!doctype html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="../gemboss-ui.css"><link rel="stylesheet" href="../src/collections.css"><link rel="stylesheet" href="../src/reactions.css"></head><body><div style="padding:16px"><div class="ui-table-wrap"><table class="ui-table ui-table--sticky-first"><caption class="ui-sr-only">Jobs</caption><thead><tr><th scope="col">Job</th><th scope="col">State</th><th scope="col">Source</th><th scope="col">Last run</th><th scope="col" class="is-num">Runs</th></tr></thead><tbody><tr><th scope="row" class="ui-table__rowhead"><a href="#job0">Weekly integrations crawl</a><span class="ui-sub">PageFly, GemPages, Replo, Shogun, EComposer and 14 more partner page builders · every Monday 08:00 UTC</span></th><td><span class="ui-tag ui-tag--success">OK</span></td><td><a href="#src0">sitemap</a></td><td>2h ago</td><td class="is-num">1,204</td></tr><tr><th scope="row" class="ui-table__rowhead"><a href="#job1">StoreLeads refresh</a><span class="ui-sub">Apps with a GemPages mention, ranked by install growth · daily</span></th><td><span class="ui-tag ui-tag--warning">Late</span></td><td><a href="#src1">api</a></td><td>26h ago</td><td class="is-num">311</td></tr><tr><th scope="row" class="ui-table__rowhead"><a href="#job2">LinkedIn people at Shopify</a><span class="ui-sub">367 profiles · Find people on the organization page</span></th><td><span class="ui-tag ui-tag--success">OK</span></td><td><a href="#src2">apify</a></td><td>3d ago</td><td class="is-num">18</td></tr></tbody></table></div></div><script src="../src/kit-plain.js"></script></body></html>"></iframe></div><details class="cat-code"><summary>Markup</summary><pre><code><div style="padding:16px">
|
|
879
|
+
<div class="ui-table-wrap">
|
|
880
|
+
<table class="ui-table ui-table--sticky-first">
|
|
881
|
+
<caption class="ui-sr-only">Jobs</caption>
|
|
882
|
+
<thead>
|
|
883
|
+
<tr>
|
|
884
|
+
<th scope="col">Job</th>
|
|
885
|
+
<th scope="col">State</th>
|
|
886
|
+
<th scope="col">Source</th>
|
|
887
|
+
<th scope="col">Last run</th>
|
|
888
|
+
<th scope="col" class="is-num">Runs</th>
|
|
889
|
+
</tr>
|
|
890
|
+
</thead>
|
|
891
|
+
<tbody>
|
|
892
|
+
<tr>
|
|
893
|
+
<th scope="row" class="ui-table__rowhead">
|
|
894
|
+
<a href="#job0">Weekly integrations crawl</a>
|
|
895
|
+
<span class="ui-sub">PageFly, GemPages, Replo, Shogun, EComposer and 14 more partner page builders · every Monday 08:00 UTC</span>
|
|
896
|
+
</th>
|
|
897
|
+
<td>
|
|
898
|
+
<span class="ui-tag ui-tag--success">OK</span>
|
|
899
|
+
</td>
|
|
900
|
+
<td>
|
|
901
|
+
<a href="#src0">sitemap</a>
|
|
902
|
+
</td>
|
|
903
|
+
<td>2h ago</td>
|
|
904
|
+
<td class="is-num">1,204</td>
|
|
905
|
+
</tr>
|
|
906
|
+
<tr>
|
|
907
|
+
<th scope="row" class="ui-table__rowhead">
|
|
908
|
+
<a href="#job1">StoreLeads refresh</a>
|
|
909
|
+
<span class="ui-sub">Apps with a GemPages mention, ranked by install growth · daily</span>
|
|
910
|
+
</th>
|
|
911
|
+
<td>
|
|
912
|
+
<span class="ui-tag ui-tag--warning">Late</span>
|
|
913
|
+
</td>
|
|
914
|
+
<td>
|
|
915
|
+
<a href="#src1">api</a>
|
|
916
|
+
</td>
|
|
917
|
+
<td>26h ago</td>
|
|
918
|
+
<td class="is-num">311</td>
|
|
919
|
+
</tr>
|
|
920
|
+
<tr>
|
|
921
|
+
<th scope="row" class="ui-table__rowhead">
|
|
922
|
+
<a href="#job2">LinkedIn people at Shopify</a>
|
|
923
|
+
<span class="ui-sub">367 profiles · Find people on the organization page</span>
|
|
924
|
+
</th>
|
|
925
|
+
<td>
|
|
926
|
+
<span class="ui-tag ui-tag--success">OK</span>
|
|
927
|
+
</td>
|
|
928
|
+
<td>
|
|
929
|
+
<a href="#src2">apify</a>
|
|
930
|
+
</td>
|
|
931
|
+
<td>3d ago</td>
|
|
932
|
+
<td class="is-num">18</td>
|
|
933
|
+
</tr>
|
|
934
|
+
</tbody>
|
|
935
|
+
</table>
|
|
936
|
+
</div>
|
|
937
|
+
</div></code></pre></details></figure><figure class="cat-demo"><figcaption>2 · Index table, HTML thuần + kit-plain.js: bấm CẢ HÀNG mở chi tiết (tiêu đề vẫn là link), checkbox / nút / ⋯ không mở; chọn hàng hiện thanh hành động thay header; Shift+click chọn dải; Escape bỏ chọn; sort ở header (aria-sort)</figcaption><div class="cat-live"><div class="ui-index"><div class="ui-index__sortbar" role="group" aria-label="Sort"><span aria-hidden="true">Sort</span><a class="ui-chip" href="#collections" aria-current="true">Supplier ↑</a><a class="ui-chip" href="#collections">Score</a></div><div class="ui-bulkbar" hidden><label class="ui-table__checkbox"><input type="checkbox" data-gb-select-all aria-label="Select all"></label><span class="ui-bulkbar__count" data-gb-count="{n} selected" aria-live="polite">0 selected</span><span class="ui-bulkbar__actions"><button type="button" class="ui-btn ui-btn--sm">Add to outreach</button><button type="button" class="ui-btn ui-btn--sm ui-btn--critical">Archive</button></span></div><div class="ui-table-wrap"><table class="ui-table ui-table--index" data-gb-sort="client"><caption class="ui-sr-only">Suppliers</caption><thead><tr><th class="ui-table__check" scope="col"><label class="ui-table__checkbox"><input type="checkbox" data-gb-select-all aria-label="Select all"></label></th><th class="ui-table__primary" scope="col" aria-sort="ascending"><button type="button" class="ui-table__sort">Supplier</button></th><th scope="col">Location</th><th scope="col">Verdict</th><th scope="col" class="is-num" aria-sort="none"><button type="button" class="ui-table__sort">Score</button></th><th scope="col">Ads</th><th class="ui-table__actions" scope="col"><span class="ui-sr-only">Actions</span></th></tr></thead><tbody><tr data-href="#c1"><td class="ui-table__check"><label class="ui-table__checkbox"><input type="checkbox" data-gb-select value="c1" aria-label="Select Guangzhou Yanmei Cosmetics"></label></td><td class="ui-table__primary"><a class="ui-table__title" href="#c1" title="Guangzhou Yanmei Cosmetics">Guangzhou Yanmei Cosmetics</a><span class="ui-sub">OEM · Skincare</span></td><td data-label="In">Guangzhou</td><td><span class="ui-tag ui-tag--success">Likely factory</span></td><td class="is-num" data-label="Score" data-sort-value="86">86</td><td data-condensed="hide">TikTok</td><td class="ui-table__actions"><span class="ui-row-actions"><button type="button" class="ui-btn ui-btn--sm">Contact</button><details class="ui-menu ui-menu--end"><summary class="ui-btn ui-btn--icon" aria-label="More actions for Guangzhou Yanmei Cosmetics"><svg viewBox="0 0 20 20" aria-hidden="true"><circle cx="5" cy="10" r="1.5"/><circle cx="10" cy="10" r="1.5"/><circle cx="15" cy="10" r="1.5"/></svg></summary><div class="ui-menu__list gemboss-popover-surface"><button type="button" class="ui-menu__item">Copy link</button><button type="button" class="ui-menu__item">Archive</button></div></details></span></td></tr><tr data-href="#c2"><td class="ui-table__check"><label class="ui-table__checkbox"><input type="checkbox" data-gb-select value="c2" aria-label="Select Shantou Lianfeng Biotech Co., Ltd. (formerly Lianfeng Daily Chemical Factory)"></label></td><td class="ui-table__primary"><a class="ui-table__title" href="#c2" title="Shantou Lianfeng Biotech Co., Ltd. (formerly Lianfeng Daily Chemical Factory)">Shantou Lianfeng Biotech Co., Ltd. (formerly Lianfeng Daily Chemical Factory)</a><span class="ui-sub">ODM · Haircare</span></td><td data-label="In">Shantou</td><td><span class="ui-tag ui-tag--warning">Maybe</span></td><td class="is-num" data-label="Score" data-sort-value="64">64</td><td data-condensed="hide">Meta</td><td class="ui-table__actions"><span class="ui-row-actions"><button type="button" class="ui-btn ui-btn--sm">Contact</button><details class="ui-menu ui-menu--end"><summary class="ui-btn ui-btn--icon" aria-label="More actions for Shantou Lianfeng Biotech Co., Ltd. (formerly Lianfeng Daily Chemical Factory)"><svg viewBox="0 0 20 20" aria-hidden="true"><circle cx="5" cy="10" r="1.5"/><circle cx="10" cy="10" r="1.5"/><circle cx="15" cy="10" r="1.5"/></svg></summary><div class="ui-menu__list gemboss-popover-surface"><button type="button" class="ui-menu__item">Copy link</button><button type="button" class="ui-menu__item">Archive</button></div></details></span></td></tr><tr data-href="#c3"><td class="ui-table__check"><label class="ui-table__checkbox"><input type="checkbox" data-gb-select value="c3" aria-label="Select Yiwu Bloom Packaging"></label></td><td class="ui-table__primary"><a class="ui-table__title" href="#c3" title="Yiwu Bloom Packaging">Yiwu Bloom Packaging</a><span class="ui-sub">Trader · Packaging</span></td><td data-label="In">Yiwu</td><td><span class="ui-tag ui-tag--danger">Trader</span></td><td class="is-num" data-label="Score" data-sort-value="31">31</td><td data-condensed="hide">—</td><td class="ui-table__actions"><span class="ui-row-actions"><button type="button" class="ui-btn ui-btn--sm">Contact</button><details class="ui-menu ui-menu--end"><summary class="ui-btn ui-btn--icon" aria-label="More actions for Yiwu Bloom Packaging"><svg viewBox="0 0 20 20" aria-hidden="true"><circle cx="5" cy="10" r="1.5"/><circle cx="10" cy="10" r="1.5"/><circle cx="15" cy="10" r="1.5"/></svg></summary><div class="ui-menu__list gemboss-popover-surface"><button type="button" class="ui-menu__item">Copy link</button><button type="button" class="ui-menu__item">Archive</button></div></details></span></td></tr><tr data-href="#c4"><td class="ui-table__check"><label class="ui-table__checkbox"><input type="checkbox" data-gb-select value="c4" aria-label="Select Shanghai Kerui Labs"></label></td><td class="ui-table__primary"><a class="ui-table__title" href="#c4" title="Shanghai Kerui Labs">Shanghai Kerui Labs</a><span class="ui-sub">OEM · Serums</span></td><td data-label="In">Shanghai</td><td><span class="ui-tag ui-tag--success">Likely factory</span></td><td class="is-num" data-label="Score" data-sort-value="91">91</td><td data-condensed="hide">Google</td><td class="ui-table__actions"><span class="ui-row-actions"><button type="button" class="ui-btn ui-btn--sm">Contact</button><details class="ui-menu ui-menu--end"><summary class="ui-btn ui-btn--icon" aria-label="More actions for Shanghai Kerui Labs"><svg viewBox="0 0 20 20" aria-hidden="true"><circle cx="5" cy="10" r="1.5"/><circle cx="10" cy="10" r="1.5"/><circle cx="15" cy="10" r="1.5"/></svg></summary><div class="ui-menu__list gemboss-popover-surface"><button type="button" class="ui-menu__item">Copy link</button><button type="button" class="ui-menu__item">Archive</button></div></details></span></td></tr><tr data-href="#c5"><td class="ui-table__check"><label class="ui-table__checkbox"><input type="checkbox" data-gb-select value="c5" aria-label="Select Ningbo Haiyue"></label></td><td class="ui-table__primary"><a class="ui-table__title" href="#c5" title="Ningbo Haiyue">Ningbo Haiyue</a></td><td data-label="In">Ningbo</td><td><span class="ui-tag">Unverified</span></td><td class="is-num" data-label="Score" data-sort-value="0">—</td><td data-condensed="hide">—</td><td class="ui-table__actions"><span class="ui-row-actions"><button type="button" class="ui-btn ui-btn--sm">Contact</button><details class="ui-menu ui-menu--end"><summary class="ui-btn ui-btn--icon" aria-label="More actions for Ningbo Haiyue"><svg viewBox="0 0 20 20" aria-hidden="true"><circle cx="5" cy="10" r="1.5"/><circle cx="10" cy="10" r="1.5"/><circle cx="15" cy="10" r="1.5"/></svg></summary><div class="ui-menu__list gemboss-popover-surface"><button type="button" class="ui-menu__item">Copy link</button><button type="button" class="ui-menu__item">Archive</button></div></details></span></td></tr></tbody></table></div></div></div><details class="cat-code"><summary>Markup</summary><pre><code><div class="ui-index">
|
|
938
|
+
<div class="ui-index__sortbar" role="group" aria-label="Sort">
|
|
939
|
+
<span aria-hidden="true">Sort</span>
|
|
940
|
+
<a class="ui-chip" href="#collections" aria-current="true">Supplier ↑</a>
|
|
941
|
+
<a class="ui-chip" href="#collections">Score</a>
|
|
942
|
+
</div>
|
|
943
|
+
<div class="ui-bulkbar" hidden>
|
|
944
|
+
<label class="ui-table__checkbox">
|
|
945
|
+
<input type="checkbox" data-gb-select-all aria-label="Select all">
|
|
946
|
+
</label>
|
|
947
|
+
<span class="ui-bulkbar__count" data-gb-count="{n} selected" aria-live="polite">0 selected</span>
|
|
948
|
+
<span class="ui-bulkbar__actions">
|
|
949
|
+
<button type="button" class="ui-btn ui-btn--sm">Add to outreach</button>
|
|
950
|
+
<button type="button" class="ui-btn ui-btn--sm ui-btn--critical">Archive</button>
|
|
951
|
+
</span>
|
|
952
|
+
</div>
|
|
953
|
+
<div class="ui-table-wrap">
|
|
954
|
+
<table class="ui-table ui-table--index" data-gb-sort="client">
|
|
955
|
+
<caption class="ui-sr-only">Suppliers</caption>
|
|
956
|
+
<thead>
|
|
957
|
+
<tr>
|
|
958
|
+
<th class="ui-table__check" scope="col">
|
|
959
|
+
<label class="ui-table__checkbox">
|
|
960
|
+
<input type="checkbox" data-gb-select-all aria-label="Select all">
|
|
961
|
+
</label>
|
|
962
|
+
</th>
|
|
963
|
+
<th class="ui-table__primary" scope="col" aria-sort="ascending">
|
|
964
|
+
<button type="button" class="ui-table__sort">Supplier</button>
|
|
965
|
+
</th>
|
|
966
|
+
<th scope="col">Location</th>
|
|
967
|
+
<th scope="col">Verdict</th>
|
|
968
|
+
<th scope="col" class="is-num" aria-sort="none">
|
|
969
|
+
<button type="button" class="ui-table__sort">Score</button>
|
|
970
|
+
</th>
|
|
971
|
+
<th scope="col">Ads</th>
|
|
972
|
+
<th class="ui-table__actions" scope="col">
|
|
973
|
+
<span class="ui-sr-only">Actions</span>
|
|
974
|
+
</th>
|
|
975
|
+
</tr>
|
|
976
|
+
</thead>
|
|
977
|
+
<tbody>
|
|
978
|
+
<tr data-href="#c1">
|
|
979
|
+
<td class="ui-table__check">
|
|
980
|
+
<label class="ui-table__checkbox">
|
|
981
|
+
<input type="checkbox" data-gb-select value="c1" aria-label="Select Guangzhou Yanmei Cosmetics">
|
|
982
|
+
</label>
|
|
983
|
+
</td>
|
|
984
|
+
<td class="ui-table__primary">
|
|
985
|
+
<a class="ui-table__title" href="#c1" title="Guangzhou Yanmei Cosmetics">Guangzhou Yanmei Cosmetics</a>
|
|
986
|
+
<span class="ui-sub">OEM · Skincare</span>
|
|
987
|
+
</td>
|
|
988
|
+
<td data-label="In">Guangzhou</td>
|
|
989
|
+
<td>
|
|
990
|
+
<span class="ui-tag ui-tag--success">Likely factory</span>
|
|
991
|
+
</td>
|
|
992
|
+
<td class="is-num" data-label="Score" data-sort-value="86">86</td>
|
|
993
|
+
<td data-condensed="hide">TikTok</td>
|
|
994
|
+
<td class="ui-table__actions">
|
|
995
|
+
<span class="ui-row-actions">
|
|
996
|
+
<button type="button" class="ui-btn ui-btn--sm">Contact</button>
|
|
997
|
+
<details class="ui-menu ui-menu--end">
|
|
998
|
+
<summary class="ui-btn ui-btn--icon" aria-label="More actions for Guangzhou Yanmei Cosmetics">
|
|
999
|
+
<svg viewBox="0 0 20 20" aria-hidden="true">
|
|
1000
|
+
<circle cx="5" cy="10" r="1.5"/>
|
|
1001
|
+
<circle cx="10" cy="10" r="1.5"/>
|
|
1002
|
+
<circle cx="15" cy="10" r="1.5"/>
|
|
1003
|
+
</svg>
|
|
1004
|
+
</summary>
|
|
1005
|
+
<div class="ui-menu__list gemboss-popover-surface">
|
|
1006
|
+
<button type="button" class="ui-menu__item">Copy link</button>
|
|
1007
|
+
<button type="button" class="ui-menu__item">Archive</button>
|
|
1008
|
+
</div>
|
|
1009
|
+
</details>
|
|
1010
|
+
</span>
|
|
1011
|
+
</td>
|
|
1012
|
+
</tr>
|
|
1013
|
+
<tr data-href="#c2">
|
|
1014
|
+
<td class="ui-table__check">
|
|
1015
|
+
<label class="ui-table__checkbox">
|
|
1016
|
+
<input type="checkbox" data-gb-select value="c2" aria-label="Select Shantou Lianfeng Biotech Co., Ltd. (formerly Lianfeng Daily Chemical Factory)">
|
|
1017
|
+
</label>
|
|
1018
|
+
</td>
|
|
1019
|
+
<td class="ui-table__primary">
|
|
1020
|
+
<a class="ui-table__title" href="#c2" title="Shantou Lianfeng Biotech Co., Ltd. (formerly Lianfeng Daily Chemical Factory)">Shantou Lianfeng Biotech Co., Ltd. (formerly Lianfeng Daily Chemical Factory)</a>
|
|
1021
|
+
<span class="ui-sub">ODM · Haircare</span>
|
|
1022
|
+
</td>
|
|
1023
|
+
<td data-label="In">Shantou</td>
|
|
1024
|
+
<td>
|
|
1025
|
+
<span class="ui-tag ui-tag--warning">Maybe</span>
|
|
1026
|
+
</td>
|
|
1027
|
+
<td class="is-num" data-label="Score" data-sort-value="64">64</td>
|
|
1028
|
+
<td data-condensed="hide">Meta</td>
|
|
1029
|
+
<td class="ui-table__actions">
|
|
1030
|
+
<span class="ui-row-actions">
|
|
1031
|
+
<button type="button" class="ui-btn ui-btn--sm">Contact</button>
|
|
1032
|
+
<details class="ui-menu ui-menu--end">
|
|
1033
|
+
<summary class="ui-btn ui-btn--icon" aria-label="More actions for Shantou Lianfeng Biotech Co., Ltd. (formerly Lianfeng Daily Chemical Factory)">
|
|
1034
|
+
<svg viewBox="0 0 20 20" aria-hidden="true">
|
|
1035
|
+
<circle cx="5" cy="10" r="1.5"/>
|
|
1036
|
+
<circle cx="10" cy="10" r="1.5"/>
|
|
1037
|
+
<circle cx="15" cy="10" r="1.5"/>
|
|
1038
|
+
</svg>
|
|
1039
|
+
</summary>
|
|
1040
|
+
<div class="ui-menu__list gemboss-popover-surface">
|
|
1041
|
+
<button type="button" class="ui-menu__item">Copy link</button>
|
|
1042
|
+
<button type="button" class="ui-menu__item">Archive</button>
|
|
1043
|
+
</div>
|
|
1044
|
+
</details>
|
|
1045
|
+
</span>
|
|
1046
|
+
</td>
|
|
1047
|
+
</tr>
|
|
1048
|
+
<tr data-href="#c3">
|
|
1049
|
+
<td class="ui-table__check">
|
|
1050
|
+
<label class="ui-table__checkbox">
|
|
1051
|
+
<input type="checkbox" data-gb-select value="c3" aria-label="Select Yiwu Bloom Packaging">
|
|
1052
|
+
</label>
|
|
1053
|
+
</td>
|
|
1054
|
+
<td class="ui-table__primary">
|
|
1055
|
+
<a class="ui-table__title" href="#c3" title="Yiwu Bloom Packaging">Yiwu Bloom Packaging</a>
|
|
1056
|
+
<span class="ui-sub">Trader · Packaging</span>
|
|
1057
|
+
</td>
|
|
1058
|
+
<td data-label="In">Yiwu</td>
|
|
1059
|
+
<td>
|
|
1060
|
+
<span class="ui-tag ui-tag--danger">Trader</span>
|
|
1061
|
+
</td>
|
|
1062
|
+
<td class="is-num" data-label="Score" data-sort-value="31">31</td>
|
|
1063
|
+
<td data-condensed="hide">—</td>
|
|
1064
|
+
<td class="ui-table__actions">
|
|
1065
|
+
<span class="ui-row-actions">
|
|
1066
|
+
<button type="button" class="ui-btn ui-btn--sm">Contact</button>
|
|
1067
|
+
<details class="ui-menu ui-menu--end">
|
|
1068
|
+
<summary class="ui-btn ui-btn--icon" aria-label="More actions for Yiwu Bloom Packaging">
|
|
1069
|
+
<svg viewBox="0 0 20 20" aria-hidden="true">
|
|
1070
|
+
<circle cx="5" cy="10" r="1.5"/>
|
|
1071
|
+
<circle cx="10" cy="10" r="1.5"/>
|
|
1072
|
+
<circle cx="15" cy="10" r="1.5"/>
|
|
1073
|
+
</svg>
|
|
1074
|
+
</summary>
|
|
1075
|
+
<div class="ui-menu__list gemboss-popover-surface">
|
|
1076
|
+
<button type="button" class="ui-menu__item">Copy link</button>
|
|
1077
|
+
<button type="button" class="ui-menu__item">Archive</button>
|
|
1078
|
+
</div>
|
|
1079
|
+
</details>
|
|
1080
|
+
</span>
|
|
1081
|
+
</td>
|
|
1082
|
+
</tr>
|
|
1083
|
+
<tr data-href="#c4">
|
|
1084
|
+
<td class="ui-table__check">
|
|
1085
|
+
<label class="ui-table__checkbox">
|
|
1086
|
+
<input type="checkbox" data-gb-select value="c4" aria-label="Select Shanghai Kerui Labs">
|
|
1087
|
+
</label>
|
|
1088
|
+
</td>
|
|
1089
|
+
<td class="ui-table__primary">
|
|
1090
|
+
<a class="ui-table__title" href="#c4" title="Shanghai Kerui Labs">Shanghai Kerui Labs</a>
|
|
1091
|
+
<span class="ui-sub">OEM · Serums</span>
|
|
1092
|
+
</td>
|
|
1093
|
+
<td data-label="In">Shanghai</td>
|
|
1094
|
+
<td>
|
|
1095
|
+
<span class="ui-tag ui-tag--success">Likely factory</span>
|
|
1096
|
+
</td>
|
|
1097
|
+
<td class="is-num" data-label="Score" data-sort-value="91">91</td>
|
|
1098
|
+
<td data-condensed="hide">Google</td>
|
|
1099
|
+
<td class="ui-table__actions">
|
|
1100
|
+
<span class="ui-row-actions">
|
|
1101
|
+
<button type="button" class="ui-btn ui-btn--sm">Contact</button>
|
|
1102
|
+
<details class="ui-menu ui-menu--end">
|
|
1103
|
+
<summary class="ui-btn ui-btn--icon" aria-label="More actions for Shanghai Kerui Labs">
|
|
1104
|
+
<svg viewBox="0 0 20 20" aria-hidden="true">
|
|
1105
|
+
<circle cx="5" cy="10" r="1.5"/>
|
|
1106
|
+
<circle cx="10" cy="10" r="1.5"/>
|
|
1107
|
+
<circle cx="15" cy="10" r="1.5"/>
|
|
1108
|
+
</svg>
|
|
1109
|
+
</summary>
|
|
1110
|
+
<div class="ui-menu__list gemboss-popover-surface">
|
|
1111
|
+
<button type="button" class="ui-menu__item">Copy link</button>
|
|
1112
|
+
<button type="button" class="ui-menu__item">Archive</button>
|
|
1113
|
+
</div>
|
|
1114
|
+
</details>
|
|
1115
|
+
</span>
|
|
1116
|
+
</td>
|
|
1117
|
+
</tr>
|
|
1118
|
+
<tr data-href="#c5">
|
|
1119
|
+
<td class="ui-table__check">
|
|
1120
|
+
<label class="ui-table__checkbox">
|
|
1121
|
+
<input type="checkbox" data-gb-select value="c5" aria-label="Select Ningbo Haiyue">
|
|
1122
|
+
</label>
|
|
1123
|
+
</td>
|
|
1124
|
+
<td class="ui-table__primary">
|
|
1125
|
+
<a class="ui-table__title" href="#c5" title="Ningbo Haiyue">Ningbo Haiyue</a>
|
|
1126
|
+
</td>
|
|
1127
|
+
<td data-label="In">Ningbo</td>
|
|
1128
|
+
<td>
|
|
1129
|
+
<span class="ui-tag">Unverified</span>
|
|
1130
|
+
</td>
|
|
1131
|
+
<td class="is-num" data-label="Score" data-sort-value="0">—</td>
|
|
1132
|
+
<td data-condensed="hide">—</td>
|
|
1133
|
+
<td class="ui-table__actions">
|
|
1134
|
+
<span class="ui-row-actions">
|
|
1135
|
+
<button type="button" class="ui-btn ui-btn--sm">Contact</button>
|
|
1136
|
+
<details class="ui-menu ui-menu--end">
|
|
1137
|
+
<summary class="ui-btn ui-btn--icon" aria-label="More actions for Ningbo Haiyue">
|
|
1138
|
+
<svg viewBox="0 0 20 20" aria-hidden="true">
|
|
1139
|
+
<circle cx="5" cy="10" r="1.5"/>
|
|
1140
|
+
<circle cx="10" cy="10" r="1.5"/>
|
|
1141
|
+
<circle cx="15" cy="10" r="1.5"/>
|
|
1142
|
+
</svg>
|
|
1143
|
+
</summary>
|
|
1144
|
+
<div class="ui-menu__list gemboss-popover-surface">
|
|
1145
|
+
<button type="button" class="ui-menu__item">Copy link</button>
|
|
1146
|
+
<button type="button" class="ui-menu__item">Archive</button>
|
|
1147
|
+
</div>
|
|
1148
|
+
</details>
|
|
1149
|
+
</span>
|
|
1150
|
+
</td>
|
|
1151
|
+
</tr>
|
|
1152
|
+
</tbody>
|
|
1153
|
+
</table>
|
|
1154
|
+
</div>
|
|
1155
|
+
</div></code></pre></details></figure><figure class="cat-demo"><figcaption>2 · Index table đang chọn 2 hàng (<code>is-selected</code>, thanh <code>ui-bulkbar</code>)</figcaption><div class="cat-live"><div class="ui-index"><div class="ui-index__sortbar" role="group" aria-label="Sort"><span aria-hidden="true">Sort</span><a class="ui-chip" href="#collections" aria-current="true">Supplier ↑</a><a class="ui-chip" href="#collections">Score</a></div><div class="ui-bulkbar"><label class="ui-table__checkbox"><input type="checkbox" data-gb-select-all aria-label="Select all"></label><span class="ui-bulkbar__count" data-gb-count="{n} selected" aria-live="polite">2 selected</span><span class="ui-bulkbar__actions"><button type="button" class="ui-btn ui-btn--sm">Add to outreach</button><button type="button" class="ui-btn ui-btn--sm ui-btn--critical">Archive</button></span></div><div class="ui-table-wrap"><table class="ui-table ui-table--index" data-gb-sort="client"><caption class="ui-sr-only">Suppliers</caption><thead><tr><th class="ui-table__check" scope="col"><label class="ui-table__checkbox"><input type="checkbox" data-gb-select-all aria-label="Select all"></label></th><th class="ui-table__primary" scope="col" aria-sort="ascending"><button type="button" class="ui-table__sort">Supplier</button></th><th scope="col">Location</th><th scope="col">Verdict</th><th scope="col" class="is-num" aria-sort="none"><button type="button" class="ui-table__sort">Score</button></th><th scope="col">Ads</th><th class="ui-table__actions" scope="col"><span class="ui-sr-only">Actions</span></th></tr></thead><tbody><tr data-href="#c1" class="is-selected" aria-selected="true"><td class="ui-table__check"><label class="ui-table__checkbox"><input type="checkbox" data-gb-select value="c1" aria-label="Select Guangzhou Yanmei Cosmetics" checked></label></td><td class="ui-table__primary"><a class="ui-table__title" href="#c1" title="Guangzhou Yanmei Cosmetics">Guangzhou Yanmei Cosmetics</a><span class="ui-sub">OEM · Skincare</span></td><td data-label="In">Guangzhou</td><td><span class="ui-tag ui-tag--success">Likely factory</span></td><td class="is-num" data-label="Score" data-sort-value="86">86</td><td data-condensed="hide">TikTok</td><td class="ui-table__actions"><span class="ui-row-actions"><button type="button" class="ui-btn ui-btn--sm">Contact</button><details class="ui-menu ui-menu--end"><summary class="ui-btn ui-btn--icon" aria-label="More actions for Guangzhou Yanmei Cosmetics"><svg viewBox="0 0 20 20" aria-hidden="true"><circle cx="5" cy="10" r="1.5"/><circle cx="10" cy="10" r="1.5"/><circle cx="15" cy="10" r="1.5"/></svg></summary><div class="ui-menu__list gemboss-popover-surface"><button type="button" class="ui-menu__item">Copy link</button><button type="button" class="ui-menu__item">Archive</button></div></details></span></td></tr><tr data-href="#c2"><td class="ui-table__check"><label class="ui-table__checkbox"><input type="checkbox" data-gb-select value="c2" aria-label="Select Shantou Lianfeng Biotech Co., Ltd. (formerly Lianfeng Daily Chemical Factory)"></label></td><td class="ui-table__primary"><a class="ui-table__title" href="#c2" title="Shantou Lianfeng Biotech Co., Ltd. (formerly Lianfeng Daily Chemical Factory)">Shantou Lianfeng Biotech Co., Ltd. (formerly Lianfeng Daily Chemical Factory)</a><span class="ui-sub">ODM · Haircare</span></td><td data-label="In">Shantou</td><td><span class="ui-tag ui-tag--warning">Maybe</span></td><td class="is-num" data-label="Score" data-sort-value="64">64</td><td data-condensed="hide">Meta</td><td class="ui-table__actions"><span class="ui-row-actions"><button type="button" class="ui-btn ui-btn--sm">Contact</button><details class="ui-menu ui-menu--end"><summary class="ui-btn ui-btn--icon" aria-label="More actions for Shantou Lianfeng Biotech Co., Ltd. (formerly Lianfeng Daily Chemical Factory)"><svg viewBox="0 0 20 20" aria-hidden="true"><circle cx="5" cy="10" r="1.5"/><circle cx="10" cy="10" r="1.5"/><circle cx="15" cy="10" r="1.5"/></svg></summary><div class="ui-menu__list gemboss-popover-surface"><button type="button" class="ui-menu__item">Copy link</button><button type="button" class="ui-menu__item">Archive</button></div></details></span></td></tr><tr data-href="#c3" class="is-selected" aria-selected="true"><td class="ui-table__check"><label class="ui-table__checkbox"><input type="checkbox" data-gb-select value="c3" aria-label="Select Yiwu Bloom Packaging" checked></label></td><td class="ui-table__primary"><a class="ui-table__title" href="#c3" title="Yiwu Bloom Packaging">Yiwu Bloom Packaging</a><span class="ui-sub">Trader · Packaging</span></td><td data-label="In">Yiwu</td><td><span class="ui-tag ui-tag--danger">Trader</span></td><td class="is-num" data-label="Score" data-sort-value="31">31</td><td data-condensed="hide">—</td><td class="ui-table__actions"><span class="ui-row-actions"><button type="button" class="ui-btn ui-btn--sm">Contact</button><details class="ui-menu ui-menu--end"><summary class="ui-btn ui-btn--icon" aria-label="More actions for Yiwu Bloom Packaging"><svg viewBox="0 0 20 20" aria-hidden="true"><circle cx="5" cy="10" r="1.5"/><circle cx="10" cy="10" r="1.5"/><circle cx="15" cy="10" r="1.5"/></svg></summary><div class="ui-menu__list gemboss-popover-surface"><button type="button" class="ui-menu__item">Copy link</button><button type="button" class="ui-menu__item">Archive</button></div></details></span></td></tr></tbody></table></div></div></div><details class="cat-code"><summary>Markup</summary><pre><code><div class="ui-index">
|
|
1156
|
+
<div class="ui-index__sortbar" role="group" aria-label="Sort">
|
|
1157
|
+
<span aria-hidden="true">Sort</span>
|
|
1158
|
+
<a class="ui-chip" href="#collections" aria-current="true">Supplier ↑</a>
|
|
1159
|
+
<a class="ui-chip" href="#collections">Score</a>
|
|
1160
|
+
</div>
|
|
1161
|
+
<div class="ui-bulkbar">
|
|
1162
|
+
<label class="ui-table__checkbox">
|
|
1163
|
+
<input type="checkbox" data-gb-select-all aria-label="Select all">
|
|
1164
|
+
</label>
|
|
1165
|
+
<span class="ui-bulkbar__count" data-gb-count="{n} selected" aria-live="polite">2 selected</span>
|
|
1166
|
+
<span class="ui-bulkbar__actions">
|
|
1167
|
+
<button type="button" class="ui-btn ui-btn--sm">Add to outreach</button>
|
|
1168
|
+
<button type="button" class="ui-btn ui-btn--sm ui-btn--critical">Archive</button>
|
|
1169
|
+
</span>
|
|
1170
|
+
</div>
|
|
1171
|
+
<div class="ui-table-wrap">
|
|
1172
|
+
<table class="ui-table ui-table--index" data-gb-sort="client">
|
|
1173
|
+
<caption class="ui-sr-only">Suppliers</caption>
|
|
1174
|
+
<thead>
|
|
1175
|
+
<tr>
|
|
1176
|
+
<th class="ui-table__check" scope="col">
|
|
1177
|
+
<label class="ui-table__checkbox">
|
|
1178
|
+
<input type="checkbox" data-gb-select-all aria-label="Select all">
|
|
1179
|
+
</label>
|
|
1180
|
+
</th>
|
|
1181
|
+
<th class="ui-table__primary" scope="col" aria-sort="ascending">
|
|
1182
|
+
<button type="button" class="ui-table__sort">Supplier</button>
|
|
1183
|
+
</th>
|
|
1184
|
+
<th scope="col">Location</th>
|
|
1185
|
+
<th scope="col">Verdict</th>
|
|
1186
|
+
<th scope="col" class="is-num" aria-sort="none">
|
|
1187
|
+
<button type="button" class="ui-table__sort">Score</button>
|
|
1188
|
+
</th>
|
|
1189
|
+
<th scope="col">Ads</th>
|
|
1190
|
+
<th class="ui-table__actions" scope="col">
|
|
1191
|
+
<span class="ui-sr-only">Actions</span>
|
|
1192
|
+
</th>
|
|
1193
|
+
</tr>
|
|
1194
|
+
</thead>
|
|
1195
|
+
<tbody>
|
|
1196
|
+
<tr data-href="#c1" class="is-selected" aria-selected="true">
|
|
1197
|
+
<td class="ui-table__check">
|
|
1198
|
+
<label class="ui-table__checkbox">
|
|
1199
|
+
<input type="checkbox" data-gb-select value="c1" aria-label="Select Guangzhou Yanmei Cosmetics" checked>
|
|
1200
|
+
</label>
|
|
1201
|
+
</td>
|
|
1202
|
+
<td class="ui-table__primary">
|
|
1203
|
+
<a class="ui-table__title" href="#c1" title="Guangzhou Yanmei Cosmetics">Guangzhou Yanmei Cosmetics</a>
|
|
1204
|
+
<span class="ui-sub">OEM · Skincare</span>
|
|
1205
|
+
</td>
|
|
1206
|
+
<td data-label="In">Guangzhou</td>
|
|
1207
|
+
<td>
|
|
1208
|
+
<span class="ui-tag ui-tag--success">Likely factory</span>
|
|
1209
|
+
</td>
|
|
1210
|
+
<td class="is-num" data-label="Score" data-sort-value="86">86</td>
|
|
1211
|
+
<td data-condensed="hide">TikTok</td>
|
|
1212
|
+
<td class="ui-table__actions">
|
|
1213
|
+
<span class="ui-row-actions">
|
|
1214
|
+
<button type="button" class="ui-btn ui-btn--sm">Contact</button>
|
|
1215
|
+
<details class="ui-menu ui-menu--end">
|
|
1216
|
+
<summary class="ui-btn ui-btn--icon" aria-label="More actions for Guangzhou Yanmei Cosmetics">
|
|
1217
|
+
<svg viewBox="0 0 20 20" aria-hidden="true">
|
|
1218
|
+
<circle cx="5" cy="10" r="1.5"/>
|
|
1219
|
+
<circle cx="10" cy="10" r="1.5"/>
|
|
1220
|
+
<circle cx="15" cy="10" r="1.5"/>
|
|
1221
|
+
</svg>
|
|
1222
|
+
</summary>
|
|
1223
|
+
<div class="ui-menu__list gemboss-popover-surface">
|
|
1224
|
+
<button type="button" class="ui-menu__item">Copy link</button>
|
|
1225
|
+
<button type="button" class="ui-menu__item">Archive</button>
|
|
1226
|
+
</div>
|
|
1227
|
+
</details>
|
|
1228
|
+
</span>
|
|
1229
|
+
</td>
|
|
1230
|
+
</tr>
|
|
1231
|
+
<tr data-href="#c2">
|
|
1232
|
+
<td class="ui-table__check">
|
|
1233
|
+
<label class="ui-table__checkbox">
|
|
1234
|
+
<input type="checkbox" data-gb-select value="c2" aria-label="Select Shantou Lianfeng Biotech Co., Ltd. (formerly Lianfeng Daily Chemical Factory)">
|
|
1235
|
+
</label>
|
|
1236
|
+
</td>
|
|
1237
|
+
<td class="ui-table__primary">
|
|
1238
|
+
<a class="ui-table__title" href="#c2" title="Shantou Lianfeng Biotech Co., Ltd. (formerly Lianfeng Daily Chemical Factory)">Shantou Lianfeng Biotech Co., Ltd. (formerly Lianfeng Daily Chemical Factory)</a>
|
|
1239
|
+
<span class="ui-sub">ODM · Haircare</span>
|
|
1240
|
+
</td>
|
|
1241
|
+
<td data-label="In">Shantou</td>
|
|
1242
|
+
<td>
|
|
1243
|
+
<span class="ui-tag ui-tag--warning">Maybe</span>
|
|
1244
|
+
</td>
|
|
1245
|
+
<td class="is-num" data-label="Score" data-sort-value="64">64</td>
|
|
1246
|
+
<td data-condensed="hide">Meta</td>
|
|
1247
|
+
<td class="ui-table__actions">
|
|
1248
|
+
<span class="ui-row-actions">
|
|
1249
|
+
<button type="button" class="ui-btn ui-btn--sm">Contact</button>
|
|
1250
|
+
<details class="ui-menu ui-menu--end">
|
|
1251
|
+
<summary class="ui-btn ui-btn--icon" aria-label="More actions for Shantou Lianfeng Biotech Co., Ltd. (formerly Lianfeng Daily Chemical Factory)">
|
|
1252
|
+
<svg viewBox="0 0 20 20" aria-hidden="true">
|
|
1253
|
+
<circle cx="5" cy="10" r="1.5"/>
|
|
1254
|
+
<circle cx="10" cy="10" r="1.5"/>
|
|
1255
|
+
<circle cx="15" cy="10" r="1.5"/>
|
|
1256
|
+
</svg>
|
|
1257
|
+
</summary>
|
|
1258
|
+
<div class="ui-menu__list gemboss-popover-surface">
|
|
1259
|
+
<button type="button" class="ui-menu__item">Copy link</button>
|
|
1260
|
+
<button type="button" class="ui-menu__item">Archive</button>
|
|
1261
|
+
</div>
|
|
1262
|
+
</details>
|
|
1263
|
+
</span>
|
|
1264
|
+
</td>
|
|
1265
|
+
</tr>
|
|
1266
|
+
<tr data-href="#c3" class="is-selected" aria-selected="true">
|
|
1267
|
+
<td class="ui-table__check">
|
|
1268
|
+
<label class="ui-table__checkbox">
|
|
1269
|
+
<input type="checkbox" data-gb-select value="c3" aria-label="Select Yiwu Bloom Packaging" checked>
|
|
1270
|
+
</label>
|
|
1271
|
+
</td>
|
|
1272
|
+
<td class="ui-table__primary">
|
|
1273
|
+
<a class="ui-table__title" href="#c3" title="Yiwu Bloom Packaging">Yiwu Bloom Packaging</a>
|
|
1274
|
+
<span class="ui-sub">Trader · Packaging</span>
|
|
1275
|
+
</td>
|
|
1276
|
+
<td data-label="In">Yiwu</td>
|
|
1277
|
+
<td>
|
|
1278
|
+
<span class="ui-tag ui-tag--danger">Trader</span>
|
|
1279
|
+
</td>
|
|
1280
|
+
<td class="is-num" data-label="Score" data-sort-value="31">31</td>
|
|
1281
|
+
<td data-condensed="hide">—</td>
|
|
1282
|
+
<td class="ui-table__actions">
|
|
1283
|
+
<span class="ui-row-actions">
|
|
1284
|
+
<button type="button" class="ui-btn ui-btn--sm">Contact</button>
|
|
1285
|
+
<details class="ui-menu ui-menu--end">
|
|
1286
|
+
<summary class="ui-btn ui-btn--icon" aria-label="More actions for Yiwu Bloom Packaging">
|
|
1287
|
+
<svg viewBox="0 0 20 20" aria-hidden="true">
|
|
1288
|
+
<circle cx="5" cy="10" r="1.5"/>
|
|
1289
|
+
<circle cx="10" cy="10" r="1.5"/>
|
|
1290
|
+
<circle cx="15" cy="10" r="1.5"/>
|
|
1291
|
+
</svg>
|
|
1292
|
+
</summary>
|
|
1293
|
+
<div class="ui-menu__list gemboss-popover-surface">
|
|
1294
|
+
<button type="button" class="ui-menu__item">Copy link</button>
|
|
1295
|
+
<button type="button" class="ui-menu__item">Archive</button>
|
|
1296
|
+
</div>
|
|
1297
|
+
</details>
|
|
1298
|
+
</span>
|
|
1299
|
+
</td>
|
|
1300
|
+
</tr>
|
|
1301
|
+
</tbody>
|
|
1302
|
+
</table>
|
|
1303
|
+
</div>
|
|
1304
|
+
</div></code></pre></details></figure><figure class="cat-demo cat-screen"><figcaption>2 · Index table ở 390px: ĐỔI thành list (container ≤ 768): tiêu đề, dòng phụ, các ô còn lại trên một dòng chữ nhỏ, checkbox + hành động giữ chỗ</figcaption><div class="cat-wide"><iframe title="2 · Index table ở 390px: ĐỔI thành list (container ≤ 768): tiêu đề, dòng phụ, các ô còn lại trên một dòng chữ nhỏ, checkbox + hành động giữ chỗ" style="height:460px;width:390px" srcdoc="<!doctype html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="../gemboss-ui.css"><link rel="stylesheet" href="../src/collections.css"><link rel="stylesheet" href="../src/reactions.css"></head><body><div style="padding:16px"><div class="ui-index"><div class="ui-index__sortbar" role="group" aria-label="Sort"><span aria-hidden="true">Sort</span><a class="ui-chip" href="#collections" aria-current="true">Supplier ↑</a><a class="ui-chip" href="#collections">Score</a></div><div class="ui-bulkbar" hidden><label class="ui-table__checkbox"><input type="checkbox" data-gb-select-all aria-label="Select all"></label><span class="ui-bulkbar__count" data-gb-count="{n} selected" aria-live="polite">0 selected</span><span class="ui-bulkbar__actions"><button type="button" class="ui-btn ui-btn--sm">Add to outreach</button><button type="button" class="ui-btn ui-btn--sm ui-btn--critical">Archive</button></span></div><div class="ui-table-wrap"><table class="ui-table ui-table--index" data-gb-sort="client"><caption class="ui-sr-only">Suppliers</caption><thead><tr><th class="ui-table__check" scope="col"><label class="ui-table__checkbox"><input type="checkbox" data-gb-select-all aria-label="Select all"></label></th><th class="ui-table__primary" scope="col" aria-sort="ascending"><button type="button" class="ui-table__sort">Supplier</button></th><th scope="col">Location</th><th scope="col">Verdict</th><th scope="col" class="is-num" aria-sort="none"><button type="button" class="ui-table__sort">Score</button></th><th scope="col">Ads</th><th class="ui-table__actions" scope="col"><span class="ui-sr-only">Actions</span></th></tr></thead><tbody><tr data-href="#c1"><td class="ui-table__check"><label class="ui-table__checkbox"><input type="checkbox" data-gb-select value="c1" aria-label="Select Guangzhou Yanmei Cosmetics"></label></td><td class="ui-table__primary"><a class="ui-table__title" href="#c1" title="Guangzhou Yanmei Cosmetics">Guangzhou Yanmei Cosmetics</a><span class="ui-sub">OEM · Skincare</span></td><td data-label="In">Guangzhou</td><td><span class="ui-tag ui-tag--success">Likely factory</span></td><td class="is-num" data-label="Score" data-sort-value="86">86</td><td data-condensed="hide">TikTok</td><td class="ui-table__actions"><span class="ui-row-actions"><button type="button" class="ui-btn ui-btn--sm">Contact</button><details class="ui-menu ui-menu--end"><summary class="ui-btn ui-btn--icon" aria-label="More actions for Guangzhou Yanmei Cosmetics"><svg viewBox="0 0 20 20" aria-hidden="true"><circle cx="5" cy="10" r="1.5"/><circle cx="10" cy="10" r="1.5"/><circle cx="15" cy="10" r="1.5"/></svg></summary><div class="ui-menu__list gemboss-popover-surface"><button type="button" class="ui-menu__item">Copy link</button><button type="button" class="ui-menu__item">Archive</button></div></details></span></td></tr><tr data-href="#c2"><td class="ui-table__check"><label class="ui-table__checkbox"><input type="checkbox" data-gb-select value="c2" aria-label="Select Shantou Lianfeng Biotech Co., Ltd. (formerly Lianfeng Daily Chemical Factory)"></label></td><td class="ui-table__primary"><a class="ui-table__title" href="#c2" title="Shantou Lianfeng Biotech Co., Ltd. (formerly Lianfeng Daily Chemical Factory)">Shantou Lianfeng Biotech Co., Ltd. (formerly Lianfeng Daily Chemical Factory)</a><span class="ui-sub">ODM · Haircare</span></td><td data-label="In">Shantou</td><td><span class="ui-tag ui-tag--warning">Maybe</span></td><td class="is-num" data-label="Score" data-sort-value="64">64</td><td data-condensed="hide">Meta</td><td class="ui-table__actions"><span class="ui-row-actions"><button type="button" class="ui-btn ui-btn--sm">Contact</button><details class="ui-menu ui-menu--end"><summary class="ui-btn ui-btn--icon" aria-label="More actions for Shantou Lianfeng Biotech Co., Ltd. (formerly Lianfeng Daily Chemical Factory)"><svg viewBox="0 0 20 20" aria-hidden="true"><circle cx="5" cy="10" r="1.5"/><circle cx="10" cy="10" r="1.5"/><circle cx="15" cy="10" r="1.5"/></svg></summary><div class="ui-menu__list gemboss-popover-surface"><button type="button" class="ui-menu__item">Copy link</button><button type="button" class="ui-menu__item">Archive</button></div></details></span></td></tr><tr data-href="#c3"><td class="ui-table__check"><label class="ui-table__checkbox"><input type="checkbox" data-gb-select value="c3" aria-label="Select Yiwu Bloom Packaging"></label></td><td class="ui-table__primary"><a class="ui-table__title" href="#c3" title="Yiwu Bloom Packaging">Yiwu Bloom Packaging</a><span class="ui-sub">Trader · Packaging</span></td><td data-label="In">Yiwu</td><td><span class="ui-tag ui-tag--danger">Trader</span></td><td class="is-num" data-label="Score" data-sort-value="31">31</td><td data-condensed="hide">—</td><td class="ui-table__actions"><span class="ui-row-actions"><button type="button" class="ui-btn ui-btn--sm">Contact</button><details class="ui-menu ui-menu--end"><summary class="ui-btn ui-btn--icon" aria-label="More actions for Yiwu Bloom Packaging"><svg viewBox="0 0 20 20" aria-hidden="true"><circle cx="5" cy="10" r="1.5"/><circle cx="10" cy="10" r="1.5"/><circle cx="15" cy="10" r="1.5"/></svg></summary><div class="ui-menu__list gemboss-popover-surface"><button type="button" class="ui-menu__item">Copy link</button><button type="button" class="ui-menu__item">Archive</button></div></details></span></td></tr><tr data-href="#c4"><td class="ui-table__check"><label class="ui-table__checkbox"><input type="checkbox" data-gb-select value="c4" aria-label="Select Shanghai Kerui Labs"></label></td><td class="ui-table__primary"><a class="ui-table__title" href="#c4" title="Shanghai Kerui Labs">Shanghai Kerui Labs</a><span class="ui-sub">OEM · Serums</span></td><td data-label="In">Shanghai</td><td><span class="ui-tag ui-tag--success">Likely factory</span></td><td class="is-num" data-label="Score" data-sort-value="91">91</td><td data-condensed="hide">Google</td><td class="ui-table__actions"><span class="ui-row-actions"><button type="button" class="ui-btn ui-btn--sm">Contact</button><details class="ui-menu ui-menu--end"><summary class="ui-btn ui-btn--icon" aria-label="More actions for Shanghai Kerui Labs"><svg viewBox="0 0 20 20" aria-hidden="true"><circle cx="5" cy="10" r="1.5"/><circle cx="10" cy="10" r="1.5"/><circle cx="15" cy="10" r="1.5"/></svg></summary><div class="ui-menu__list gemboss-popover-surface"><button type="button" class="ui-menu__item">Copy link</button><button type="button" class="ui-menu__item">Archive</button></div></details></span></td></tr></tbody></table></div></div></div><script src="../src/kit-plain.js"></script></body></html>"></iframe></div><details class="cat-code"><summary>Markup</summary><pre><code><div style="padding:16px">
|
|
1305
|
+
<div class="ui-index">
|
|
1306
|
+
<div class="ui-index__sortbar" role="group" aria-label="Sort">
|
|
1307
|
+
<span aria-hidden="true">Sort</span>
|
|
1308
|
+
<a class="ui-chip" href="#collections" aria-current="true">Supplier ↑</a>
|
|
1309
|
+
<a class="ui-chip" href="#collections">Score</a>
|
|
1310
|
+
</div>
|
|
1311
|
+
<div class="ui-bulkbar" hidden>
|
|
1312
|
+
<label class="ui-table__checkbox">
|
|
1313
|
+
<input type="checkbox" data-gb-select-all aria-label="Select all">
|
|
1314
|
+
</label>
|
|
1315
|
+
<span class="ui-bulkbar__count" data-gb-count="{n} selected" aria-live="polite">0 selected</span>
|
|
1316
|
+
<span class="ui-bulkbar__actions">
|
|
1317
|
+
<button type="button" class="ui-btn ui-btn--sm">Add to outreach</button>
|
|
1318
|
+
<button type="button" class="ui-btn ui-btn--sm ui-btn--critical">Archive</button>
|
|
1319
|
+
</span>
|
|
1320
|
+
</div>
|
|
1321
|
+
<div class="ui-table-wrap">
|
|
1322
|
+
<table class="ui-table ui-table--index" data-gb-sort="client">
|
|
1323
|
+
<caption class="ui-sr-only">Suppliers</caption>
|
|
1324
|
+
<thead>
|
|
1325
|
+
<tr>
|
|
1326
|
+
<th class="ui-table__check" scope="col">
|
|
1327
|
+
<label class="ui-table__checkbox">
|
|
1328
|
+
<input type="checkbox" data-gb-select-all aria-label="Select all">
|
|
1329
|
+
</label>
|
|
1330
|
+
</th>
|
|
1331
|
+
<th class="ui-table__primary" scope="col" aria-sort="ascending">
|
|
1332
|
+
<button type="button" class="ui-table__sort">Supplier</button>
|
|
1333
|
+
</th>
|
|
1334
|
+
<th scope="col">Location</th>
|
|
1335
|
+
<th scope="col">Verdict</th>
|
|
1336
|
+
<th scope="col" class="is-num" aria-sort="none">
|
|
1337
|
+
<button type="button" class="ui-table__sort">Score</button>
|
|
1338
|
+
</th>
|
|
1339
|
+
<th scope="col">Ads</th>
|
|
1340
|
+
<th class="ui-table__actions" scope="col">
|
|
1341
|
+
<span class="ui-sr-only">Actions</span>
|
|
1342
|
+
</th>
|
|
1343
|
+
</tr>
|
|
1344
|
+
</thead>
|
|
1345
|
+
<tbody>
|
|
1346
|
+
<tr data-href="#c1">
|
|
1347
|
+
<td class="ui-table__check">
|
|
1348
|
+
<label class="ui-table__checkbox">
|
|
1349
|
+
<input type="checkbox" data-gb-select value="c1" aria-label="Select Guangzhou Yanmei Cosmetics">
|
|
1350
|
+
</label>
|
|
1351
|
+
</td>
|
|
1352
|
+
<td class="ui-table__primary">
|
|
1353
|
+
<a class="ui-table__title" href="#c1" title="Guangzhou Yanmei Cosmetics">Guangzhou Yanmei Cosmetics</a>
|
|
1354
|
+
<span class="ui-sub">OEM · Skincare</span>
|
|
1355
|
+
</td>
|
|
1356
|
+
<td data-label="In">Guangzhou</td>
|
|
1357
|
+
<td>
|
|
1358
|
+
<span class="ui-tag ui-tag--success">Likely factory</span>
|
|
1359
|
+
</td>
|
|
1360
|
+
<td class="is-num" data-label="Score" data-sort-value="86">86</td>
|
|
1361
|
+
<td data-condensed="hide">TikTok</td>
|
|
1362
|
+
<td class="ui-table__actions">
|
|
1363
|
+
<span class="ui-row-actions">
|
|
1364
|
+
<button type="button" class="ui-btn ui-btn--sm">Contact</button>
|
|
1365
|
+
<details class="ui-menu ui-menu--end">
|
|
1366
|
+
<summary class="ui-btn ui-btn--icon" aria-label="More actions for Guangzhou Yanmei Cosmetics">
|
|
1367
|
+
<svg viewBox="0 0 20 20" aria-hidden="true">
|
|
1368
|
+
<circle cx="5" cy="10" r="1.5"/>
|
|
1369
|
+
<circle cx="10" cy="10" r="1.5"/>
|
|
1370
|
+
<circle cx="15" cy="10" r="1.5"/>
|
|
1371
|
+
</svg>
|
|
1372
|
+
</summary>
|
|
1373
|
+
<div class="ui-menu__list gemboss-popover-surface">
|
|
1374
|
+
<button type="button" class="ui-menu__item">Copy link</button>
|
|
1375
|
+
<button type="button" class="ui-menu__item">Archive</button>
|
|
1376
|
+
</div>
|
|
1377
|
+
</details>
|
|
1378
|
+
</span>
|
|
1379
|
+
</td>
|
|
1380
|
+
</tr>
|
|
1381
|
+
<tr data-href="#c2">
|
|
1382
|
+
<td class="ui-table__check">
|
|
1383
|
+
<label class="ui-table__checkbox">
|
|
1384
|
+
<input type="checkbox" data-gb-select value="c2" aria-label="Select Shantou Lianfeng Biotech Co., Ltd. (formerly Lianfeng Daily Chemical Factory)">
|
|
1385
|
+
</label>
|
|
1386
|
+
</td>
|
|
1387
|
+
<td class="ui-table__primary">
|
|
1388
|
+
<a class="ui-table__title" href="#c2" title="Shantou Lianfeng Biotech Co., Ltd. (formerly Lianfeng Daily Chemical Factory)">Shantou Lianfeng Biotech Co., Ltd. (formerly Lianfeng Daily Chemical Factory)</a>
|
|
1389
|
+
<span class="ui-sub">ODM · Haircare</span>
|
|
1390
|
+
</td>
|
|
1391
|
+
<td data-label="In">Shantou</td>
|
|
1392
|
+
<td>
|
|
1393
|
+
<span class="ui-tag ui-tag--warning">Maybe</span>
|
|
1394
|
+
</td>
|
|
1395
|
+
<td class="is-num" data-label="Score" data-sort-value="64">64</td>
|
|
1396
|
+
<td data-condensed="hide">Meta</td>
|
|
1397
|
+
<td class="ui-table__actions">
|
|
1398
|
+
<span class="ui-row-actions">
|
|
1399
|
+
<button type="button" class="ui-btn ui-btn--sm">Contact</button>
|
|
1400
|
+
<details class="ui-menu ui-menu--end">
|
|
1401
|
+
<summary class="ui-btn ui-btn--icon" aria-label="More actions for Shantou Lianfeng Biotech Co., Ltd. (formerly Lianfeng Daily Chemical Factory)">
|
|
1402
|
+
<svg viewBox="0 0 20 20" aria-hidden="true">
|
|
1403
|
+
<circle cx="5" cy="10" r="1.5"/>
|
|
1404
|
+
<circle cx="10" cy="10" r="1.5"/>
|
|
1405
|
+
<circle cx="15" cy="10" r="1.5"/>
|
|
1406
|
+
</svg>
|
|
1407
|
+
</summary>
|
|
1408
|
+
<div class="ui-menu__list gemboss-popover-surface">
|
|
1409
|
+
<button type="button" class="ui-menu__item">Copy link</button>
|
|
1410
|
+
<button type="button" class="ui-menu__item">Archive</button>
|
|
1411
|
+
</div>
|
|
1412
|
+
</details>
|
|
1413
|
+
</span>
|
|
1414
|
+
</td>
|
|
1415
|
+
</tr>
|
|
1416
|
+
<tr data-href="#c3">
|
|
1417
|
+
<td class="ui-table__check">
|
|
1418
|
+
<label class="ui-table__checkbox">
|
|
1419
|
+
<input type="checkbox" data-gb-select value="c3" aria-label="Select Yiwu Bloom Packaging">
|
|
1420
|
+
</label>
|
|
1421
|
+
</td>
|
|
1422
|
+
<td class="ui-table__primary">
|
|
1423
|
+
<a class="ui-table__title" href="#c3" title="Yiwu Bloom Packaging">Yiwu Bloom Packaging</a>
|
|
1424
|
+
<span class="ui-sub">Trader · Packaging</span>
|
|
1425
|
+
</td>
|
|
1426
|
+
<td data-label="In">Yiwu</td>
|
|
1427
|
+
<td>
|
|
1428
|
+
<span class="ui-tag ui-tag--danger">Trader</span>
|
|
1429
|
+
</td>
|
|
1430
|
+
<td class="is-num" data-label="Score" data-sort-value="31">31</td>
|
|
1431
|
+
<td data-condensed="hide">—</td>
|
|
1432
|
+
<td class="ui-table__actions">
|
|
1433
|
+
<span class="ui-row-actions">
|
|
1434
|
+
<button type="button" class="ui-btn ui-btn--sm">Contact</button>
|
|
1435
|
+
<details class="ui-menu ui-menu--end">
|
|
1436
|
+
<summary class="ui-btn ui-btn--icon" aria-label="More actions for Yiwu Bloom Packaging">
|
|
1437
|
+
<svg viewBox="0 0 20 20" aria-hidden="true">
|
|
1438
|
+
<circle cx="5" cy="10" r="1.5"/>
|
|
1439
|
+
<circle cx="10" cy="10" r="1.5"/>
|
|
1440
|
+
<circle cx="15" cy="10" r="1.5"/>
|
|
1441
|
+
</svg>
|
|
1442
|
+
</summary>
|
|
1443
|
+
<div class="ui-menu__list gemboss-popover-surface">
|
|
1444
|
+
<button type="button" class="ui-menu__item">Copy link</button>
|
|
1445
|
+
<button type="button" class="ui-menu__item">Archive</button>
|
|
1446
|
+
</div>
|
|
1447
|
+
</details>
|
|
1448
|
+
</span>
|
|
1449
|
+
</td>
|
|
1450
|
+
</tr>
|
|
1451
|
+
<tr data-href="#c4">
|
|
1452
|
+
<td class="ui-table__check">
|
|
1453
|
+
<label class="ui-table__checkbox">
|
|
1454
|
+
<input type="checkbox" data-gb-select value="c4" aria-label="Select Shanghai Kerui Labs">
|
|
1455
|
+
</label>
|
|
1456
|
+
</td>
|
|
1457
|
+
<td class="ui-table__primary">
|
|
1458
|
+
<a class="ui-table__title" href="#c4" title="Shanghai Kerui Labs">Shanghai Kerui Labs</a>
|
|
1459
|
+
<span class="ui-sub">OEM · Serums</span>
|
|
1460
|
+
</td>
|
|
1461
|
+
<td data-label="In">Shanghai</td>
|
|
1462
|
+
<td>
|
|
1463
|
+
<span class="ui-tag ui-tag--success">Likely factory</span>
|
|
1464
|
+
</td>
|
|
1465
|
+
<td class="is-num" data-label="Score" data-sort-value="91">91</td>
|
|
1466
|
+
<td data-condensed="hide">Google</td>
|
|
1467
|
+
<td class="ui-table__actions">
|
|
1468
|
+
<span class="ui-row-actions">
|
|
1469
|
+
<button type="button" class="ui-btn ui-btn--sm">Contact</button>
|
|
1470
|
+
<details class="ui-menu ui-menu--end">
|
|
1471
|
+
<summary class="ui-btn ui-btn--icon" aria-label="More actions for Shanghai Kerui Labs">
|
|
1472
|
+
<svg viewBox="0 0 20 20" aria-hidden="true">
|
|
1473
|
+
<circle cx="5" cy="10" r="1.5"/>
|
|
1474
|
+
<circle cx="10" cy="10" r="1.5"/>
|
|
1475
|
+
<circle cx="15" cy="10" r="1.5"/>
|
|
1476
|
+
</svg>
|
|
1477
|
+
</summary>
|
|
1478
|
+
<div class="ui-menu__list gemboss-popover-surface">
|
|
1479
|
+
<button type="button" class="ui-menu__item">Copy link</button>
|
|
1480
|
+
<button type="button" class="ui-menu__item">Archive</button>
|
|
1481
|
+
</div>
|
|
1482
|
+
</details>
|
|
1483
|
+
</span>
|
|
1484
|
+
</td>
|
|
1485
|
+
</tr>
|
|
1486
|
+
</tbody>
|
|
1487
|
+
</table>
|
|
1488
|
+
</div>
|
|
1489
|
+
</div>
|
|
1490
|
+
</div></code></pre></details></figure><figure class="cat-demo"><figcaption>2 · Index table (React <code>IndexTable</code>, render tĩnh): cùng class; hàng có <code>is-linked</code> thay vì data-href (React tự xử lý click). <code>linkAs</code> (Next <code>Link</code>) dùng cho CẢ link tiêu đề lẫn link sort ở header và chip (0.16.0), <code>sortLinkProps={{ scroll: false }}</code> giữ chỗ cuộn khi sort</figcaption><div class="cat-live"><div class="ui-index"><div class="ui-index__sortbar" role="group" aria-label="Sort"><span aria-hidden="true">Sort</span><a class="ui-chip" href="#collections" aria-current="true">Supplier ↑</a><a class="ui-chip" href="#collections">Score</a></div><div class="ui-table-wrap"><table class="ui-table ui-table--index"><caption class="ui-sr-only">Suppliers</caption><thead><tr><th class="ui-table__primary" scope="col" aria-sort="ascending"><a class="ui-table__sort" href="#collections">Supplier</a></th><th scope="col">Location</th><th scope="col">Verdict</th><th scope="col" class="is-num" aria-sort="none"><a class="ui-table__sort" href="#collections">Score</a></th><th scope="col">Ads</th></tr></thead><tbody><tr class="is-linked"><td class="ui-table__primary"><a class="ui-table__title" href="#c1" title="Guangzhou Yanmei Cosmetics">Guangzhou Yanmei Cosmetics</a><span class="ui-sub">OEM · Skincare</span></td><td data-label="In">Guangzhou</td><td><span class="ui-tag ui-tag--success">Likely factory</span></td><td class="is-num" data-label="Score">86</td><td data-condensed="hide">TikTok</td></tr><tr class="is-linked"><td class="ui-table__primary"><a class="ui-table__title" href="#c2" title="Shantou Lianfeng Biotech Co., Ltd. (formerly Lianfeng Daily Chemical Factory)">Shantou Lianfeng Biotech Co., Ltd. (formerly Lianfeng Daily Chemical Factory)</a><span class="ui-sub">ODM · Haircare</span></td><td data-label="In">Shantou</td><td><span class="ui-tag ui-tag--warning">Maybe</span></td><td class="is-num" data-label="Score">64</td><td data-condensed="hide">Meta</td></tr><tr class="is-linked"><td class="ui-table__primary"><a class="ui-table__title" href="#c3" title="Yiwu Bloom Packaging">Yiwu Bloom Packaging</a><span class="ui-sub">Trader · Packaging</span></td><td data-label="In">Yiwu</td><td><span class="ui-tag ui-tag--danger">Trader</span></td><td class="is-num" data-label="Score">31</td><td data-condensed="hide">—</td></tr><tr class="is-linked"><td class="ui-table__primary"><a class="ui-table__title" href="#c4" title="Shanghai Kerui Labs">Shanghai Kerui Labs</a><span class="ui-sub">OEM · Serums</span></td><td data-label="In">Shanghai</td><td><span class="ui-tag ui-tag--success">Likely factory</span></td><td class="is-num" data-label="Score">91</td><td data-condensed="hide">Google</td></tr><tr class="is-linked"><td class="ui-table__primary"><a class="ui-table__title" href="#c5" title="Ningbo Haiyue">Ningbo Haiyue</a></td><td data-label="In">Ningbo</td><td><span class="ui-tag">Unverified</span></td><td class="is-num" data-label="Score">—</td><td data-condensed="hide">—</td></tr></tbody></table></div></div></div><details class="cat-code"><summary>Markup</summary><pre><code><div class="ui-index">
|
|
1491
|
+
<div class="ui-index__sortbar" role="group" aria-label="Sort">
|
|
1492
|
+
<span aria-hidden="true">Sort</span>
|
|
1493
|
+
<a class="ui-chip" href="#collections" aria-current="true">Supplier ↑</a>
|
|
1494
|
+
<a class="ui-chip" href="#collections">Score</a>
|
|
1495
|
+
</div>
|
|
1496
|
+
<div class="ui-table-wrap">
|
|
1497
|
+
<table class="ui-table ui-table--index">
|
|
1498
|
+
<caption class="ui-sr-only">Suppliers</caption>
|
|
1499
|
+
<thead>
|
|
1500
|
+
<tr>
|
|
1501
|
+
<th class="ui-table__primary" scope="col" aria-sort="ascending">
|
|
1502
|
+
<a class="ui-table__sort" href="#collections">Supplier</a>
|
|
1503
|
+
</th>
|
|
1504
|
+
<th scope="col">Location</th>
|
|
1505
|
+
<th scope="col">Verdict</th>
|
|
1506
|
+
<th scope="col" class="is-num" aria-sort="none">
|
|
1507
|
+
<a class="ui-table__sort" href="#collections">Score</a>
|
|
1508
|
+
</th>
|
|
1509
|
+
<th scope="col">Ads</th>
|
|
1510
|
+
</tr>
|
|
1511
|
+
</thead>
|
|
1512
|
+
<tbody>
|
|
1513
|
+
<tr class="is-linked">
|
|
1514
|
+
<td class="ui-table__primary">
|
|
1515
|
+
<a class="ui-table__title" href="#c1" title="Guangzhou Yanmei Cosmetics">Guangzhou Yanmei Cosmetics</a>
|
|
1516
|
+
<span class="ui-sub">OEM · Skincare</span>
|
|
1517
|
+
</td>
|
|
1518
|
+
<td data-label="In">Guangzhou</td>
|
|
1519
|
+
<td>
|
|
1520
|
+
<span class="ui-tag ui-tag--success">Likely factory</span>
|
|
1521
|
+
</td>
|
|
1522
|
+
<td class="is-num" data-label="Score">86</td>
|
|
1523
|
+
<td data-condensed="hide">TikTok</td>
|
|
1524
|
+
</tr>
|
|
1525
|
+
<tr class="is-linked">
|
|
1526
|
+
<td class="ui-table__primary">
|
|
1527
|
+
<a class="ui-table__title" href="#c2" title="Shantou Lianfeng Biotech Co., Ltd. (formerly Lianfeng Daily Chemical Factory)">Shantou Lianfeng Biotech Co., Ltd. (formerly Lianfeng Daily Chemical Factory)</a>
|
|
1528
|
+
<span class="ui-sub">ODM · Haircare</span>
|
|
1529
|
+
</td>
|
|
1530
|
+
<td data-label="In">Shantou</td>
|
|
1531
|
+
<td>
|
|
1532
|
+
<span class="ui-tag ui-tag--warning">Maybe</span>
|
|
1533
|
+
</td>
|
|
1534
|
+
<td class="is-num" data-label="Score">64</td>
|
|
1535
|
+
<td data-condensed="hide">Meta</td>
|
|
1536
|
+
</tr>
|
|
1537
|
+
<tr class="is-linked">
|
|
1538
|
+
<td class="ui-table__primary">
|
|
1539
|
+
<a class="ui-table__title" href="#c3" title="Yiwu Bloom Packaging">Yiwu Bloom Packaging</a>
|
|
1540
|
+
<span class="ui-sub">Trader · Packaging</span>
|
|
1541
|
+
</td>
|
|
1542
|
+
<td data-label="In">Yiwu</td>
|
|
1543
|
+
<td>
|
|
1544
|
+
<span class="ui-tag ui-tag--danger">Trader</span>
|
|
1545
|
+
</td>
|
|
1546
|
+
<td class="is-num" data-label="Score">31</td>
|
|
1547
|
+
<td data-condensed="hide">—</td>
|
|
1548
|
+
</tr>
|
|
1549
|
+
<tr class="is-linked">
|
|
1550
|
+
<td class="ui-table__primary">
|
|
1551
|
+
<a class="ui-table__title" href="#c4" title="Shanghai Kerui Labs">Shanghai Kerui Labs</a>
|
|
1552
|
+
<span class="ui-sub">OEM · Serums</span>
|
|
1553
|
+
</td>
|
|
1554
|
+
<td data-label="In">Shanghai</td>
|
|
1555
|
+
<td>
|
|
1556
|
+
<span class="ui-tag ui-tag--success">Likely factory</span>
|
|
1557
|
+
</td>
|
|
1558
|
+
<td class="is-num" data-label="Score">91</td>
|
|
1559
|
+
<td data-condensed="hide">Google</td>
|
|
1560
|
+
</tr>
|
|
1561
|
+
<tr class="is-linked">
|
|
1562
|
+
<td class="ui-table__primary">
|
|
1563
|
+
<a class="ui-table__title" href="#c5" title="Ningbo Haiyue">Ningbo Haiyue</a>
|
|
1564
|
+
</td>
|
|
1565
|
+
<td data-label="In">Ningbo</td>
|
|
1566
|
+
<td>
|
|
1567
|
+
<span class="ui-tag">Unverified</span>
|
|
1568
|
+
</td>
|
|
1569
|
+
<td class="is-num" data-label="Score">—</td>
|
|
1570
|
+
<td data-condensed="hide">—</td>
|
|
1571
|
+
</tr>
|
|
1572
|
+
</tbody>
|
|
1573
|
+
</table>
|
|
1574
|
+
</div>
|
|
1575
|
+
</div></code></pre></details></figure><figure class="cat-demo"><figcaption>3 · Resource list (<code>ResourceList</code> + <code>ResourceItem</code>): media 32 · tiêu đề · 2 dòng phụ · meta · badge (3 rồi +N) · aside · 1 nút. Cả hàng là link</figcaption><div class="cat-live"><ul class="ui-list" aria-label="Candidates"><li class="ui-list__item"><div class="ui-list__media"><span class="gb-avatar gb-avatar--32" data-tone="1" aria-hidden="true">LT</span></div><div class="ui-list__body"><a class="ui-list__title" href="#p0">Lily Tran</a><p class="ui-list__sub">Head of CRO at Ruggable</p><p class="ui-list__meta">Replied 2 days ago</p><div class="ui-list__badges"><span class="ui-badge">CRO</span><span class="ui-badge">Plus</span></div></div><div class="ui-list__aside"><b>82</b></div><div class="ui-list__actions"><button type="button" class="ui-btn ui-btn--sm">Invite</button></div></li><li class="ui-list__item"><div class="ui-list__media"><span class="gb-avatar gb-avatar--32" data-tone="0" aria-hidden="true">MB</span></div><div class="ui-list__body"><a class="ui-list__title" href="#p1">Marcus Bell</a><p class="ui-list__sub">Founder, Bell & Co. Media. Runs Meta ads for 40 Shopify brands, mostly apparel and home goods; asked about the agency plan twice.</p><p class="ui-list__meta">New</p><div class="ui-list__badges"><span class="ui-badge">Media buyer</span></div></div><div class="ui-list__aside"><b>77</b></div><div class="ui-list__actions"><button type="button" class="ui-btn ui-btn--sm">Invite</button></div></li><li class="ui-list__item"><div class="ui-list__media"><span class="gb-avatar gb-avatar--32" data-tone="5" aria-hidden="true">AS</span></div><div class="ui-list__body"><a class="ui-list__title" href="#p2">Aiko Sato</a><p class="ui-list__sub">Shopify app founder (reviews)</p><p class="ui-list__meta">Waiting on intro</p><div class="ui-list__badges"><span class="ui-badge">App</span><span class="ui-badge">Japan</span><span class="ui-badge">Plus</span><span class="ui-badge">+1</span></div></div><div class="ui-list__aside"><b>64</b></div><div class="ui-list__actions"><button type="button" class="ui-btn ui-btn--sm">Invite</button></div></li></ul></div><details class="cat-code"><summary>Markup</summary><pre><code><ul class="ui-list" aria-label="Candidates">
|
|
1576
|
+
<li class="ui-list__item">
|
|
1577
|
+
<div class="ui-list__media">
|
|
1578
|
+
<span class="gb-avatar gb-avatar--32" data-tone="1" aria-hidden="true">LT</span>
|
|
1579
|
+
</div>
|
|
1580
|
+
<div class="ui-list__body">
|
|
1581
|
+
<a class="ui-list__title" href="#p0">Lily Tran</a>
|
|
1582
|
+
<p class="ui-list__sub">Head of CRO at Ruggable</p>
|
|
1583
|
+
<p class="ui-list__meta">Replied 2 days ago</p>
|
|
1584
|
+
<div class="ui-list__badges">
|
|
1585
|
+
<span class="ui-badge">CRO</span>
|
|
1586
|
+
<span class="ui-badge">Plus</span>
|
|
1587
|
+
</div>
|
|
1588
|
+
</div>
|
|
1589
|
+
<div class="ui-list__aside">
|
|
1590
|
+
<b>82</b>
|
|
1591
|
+
</div>
|
|
1592
|
+
<div class="ui-list__actions">
|
|
1593
|
+
<button type="button" class="ui-btn ui-btn--sm">Invite</button>
|
|
1594
|
+
</div>
|
|
1595
|
+
</li>
|
|
1596
|
+
<li class="ui-list__item">
|
|
1597
|
+
<div class="ui-list__media">
|
|
1598
|
+
<span class="gb-avatar gb-avatar--32" data-tone="0" aria-hidden="true">MB</span>
|
|
1599
|
+
</div>
|
|
1600
|
+
<div class="ui-list__body">
|
|
1601
|
+
<a class="ui-list__title" href="#p1">Marcus Bell</a>
|
|
1602
|
+
<p class="ui-list__sub">Founder, Bell &amp; Co. Media. Runs Meta ads for 40 Shopify brands, mostly apparel and home goods; asked about the agency plan twice.</p>
|
|
1603
|
+
<p class="ui-list__meta">New</p>
|
|
1604
|
+
<div class="ui-list__badges">
|
|
1605
|
+
<span class="ui-badge">Media buyer</span>
|
|
1606
|
+
</div>
|
|
1607
|
+
</div>
|
|
1608
|
+
<div class="ui-list__aside">
|
|
1609
|
+
<b>77</b>
|
|
1610
|
+
</div>
|
|
1611
|
+
<div class="ui-list__actions">
|
|
1612
|
+
<button type="button" class="ui-btn ui-btn--sm">Invite</button>
|
|
1613
|
+
</div>
|
|
1614
|
+
</li>
|
|
1615
|
+
<li class="ui-list__item">
|
|
1616
|
+
<div class="ui-list__media">
|
|
1617
|
+
<span class="gb-avatar gb-avatar--32" data-tone="5" aria-hidden="true">AS</span>
|
|
1618
|
+
</div>
|
|
1619
|
+
<div class="ui-list__body">
|
|
1620
|
+
<a class="ui-list__title" href="#p2">Aiko Sato</a>
|
|
1621
|
+
<p class="ui-list__sub">Shopify app founder (reviews)</p>
|
|
1622
|
+
<p class="ui-list__meta">Waiting on intro</p>
|
|
1623
|
+
<div class="ui-list__badges">
|
|
1624
|
+
<span class="ui-badge">App</span>
|
|
1625
|
+
<span class="ui-badge">Japan</span>
|
|
1626
|
+
<span class="ui-badge">Plus</span>
|
|
1627
|
+
<span class="ui-badge">+1</span>
|
|
1628
|
+
</div>
|
|
1629
|
+
</div>
|
|
1630
|
+
<div class="ui-list__aside">
|
|
1631
|
+
<b>64</b>
|
|
1632
|
+
</div>
|
|
1633
|
+
<div class="ui-list__actions">
|
|
1634
|
+
<button type="button" class="ui-btn ui-btn--sm">Invite</button>
|
|
1635
|
+
</div>
|
|
1636
|
+
</li>
|
|
1637
|
+
</ul></code></pre></details></figure><figure class="cat-demo"><figcaption>3 · Resource list với thumbnail 40 (<code>ui-thumb</code>)</figcaption><div class="cat-live"><ul class="ui-list" aria-label="Articles"><li class="ui-list__item"><div class="ui-list__media"><span class="ui-thumb"><img alt="" src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20160%20100%22%3E%3Crect%20width%3D%22160%22%20height%3D%22100%22%20fill%3D%22hsl(200%2030%25%2088%25)%22%2F%3E%3Crect%20x%3D%2216%22%20y%3D%2218%22%20width%3D%2280%22%20height%3D%2210%22%20rx%3D%223%22%20fill%3D%22hsl(200%2025%25%2070%25)%22%2F%3E%3Crect%20x%3D%2216%22%20y%3D%2236%22%20width%3D%22128%22%20height%3D%2246%22%20rx%3D%226%22%20fill%3D%22hsl(200%2025%25%2078%25)%22%2F%3E%3C%2Fsvg%3E"/></span></div><div class="ui-list__body"><a class="ui-list__title" href="#a0">Why sticky add-to-cart lifts mobile conversion</a><p class="ui-list__sub">content-radar · 6 min read · 01/10/2026</p></div></li><li class="ui-list__item"><div class="ui-list__media"><span class="ui-thumb"><img alt="" src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20160%20100%22%3E%3Crect%20width%3D%22160%22%20height%3D%22100%22%20fill%3D%22hsl(240%2030%25%2088%25)%22%2F%3E%3Crect%20x%3D%2216%22%20y%3D%2218%22%20width%3D%2280%22%20height%3D%2210%22%20rx%3D%223%22%20fill%3D%22hsl(240%2025%25%2070%25)%22%2F%3E%3Crect%20x%3D%2216%22%20y%3D%2236%22%20width%3D%22128%22%20height%3D%2246%22%20rx%3D%226%22%20fill%3D%22hsl(240%2025%25%2078%25)%22%2F%3E%3C%2Fsvg%3E"/></span></div><div class="ui-list__body"><a class="ui-list__title" href="#a1">Bundles that do not cannibalise the hero product</a><p class="ui-list__sub">content-radar · 6 min read · 02/10/2026</p></div></li><li class="ui-list__item"><div class="ui-list__media"><span class="ui-thumb"><img alt="" src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20160%20100%22%3E%3Crect%20width%3D%22160%22%20height%3D%22100%22%20fill%3D%22hsl(280%2030%25%2088%25)%22%2F%3E%3Crect%20x%3D%2216%22%20y%3D%2218%22%20width%3D%2280%22%20height%3D%2210%22%20rx%3D%223%22%20fill%3D%22hsl(280%2025%25%2070%25)%22%2F%3E%3Crect%20x%3D%2216%22%20y%3D%2236%22%20width%3D%22128%22%20height%3D%2246%22%20rx%3D%226%22%20fill%3D%22hsl(280%2025%25%2078%25)%22%2F%3E%3C%2Fsvg%3E"/></span></div><div class="ui-list__body"><a class="ui-list__title" href="#a2">A/B testing a PDP on 3,000 sessions a week</a><p class="ui-list__sub">content-radar · 6 min read · 03/10/2026</p></div></li></ul></div><details class="cat-code"><summary>Markup</summary><pre><code><ul class="ui-list" aria-label="Articles">
|
|
1638
|
+
<li class="ui-list__item">
|
|
1639
|
+
<div class="ui-list__media">
|
|
1640
|
+
<span class="ui-thumb">
|
|
1641
|
+
<img alt="" src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20160%20100%22%3E%3Crect%20width%3D%22160%22%20height%3D%22100%22%20fill%3D%22hsl(200%2030%25%2088%25)%22%2F%3E%3Crect%20x%3D%2216%22%20y%3D%2218%22%20width%3D%2280%22%20height%3D%2210%22%20rx%3D%223%22%20fill%3D%22hsl(200%2025%25%2070%25)%22%2F%3E%3Crect%20x%3D%2216%22%20y%3D%2236%22%20width%3D%22128%22%20height%3D%2246%22%20rx%3D%226%22%20fill%3D%22hsl(200%2025%25%2078%25)%22%2F%3E%3C%2Fsvg%3E"/>
|
|
1642
|
+
</span>
|
|
1643
|
+
</div>
|
|
1644
|
+
<div class="ui-list__body">
|
|
1645
|
+
<a class="ui-list__title" href="#a0">Why sticky add-to-cart lifts mobile conversion</a>
|
|
1646
|
+
<p class="ui-list__sub">content-radar · 6 min read · 01/10/2026</p>
|
|
1647
|
+
</div>
|
|
1648
|
+
</li>
|
|
1649
|
+
<li class="ui-list__item">
|
|
1650
|
+
<div class="ui-list__media">
|
|
1651
|
+
<span class="ui-thumb">
|
|
1652
|
+
<img alt="" src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20160%20100%22%3E%3Crect%20width%3D%22160%22%20height%3D%22100%22%20fill%3D%22hsl(240%2030%25%2088%25)%22%2F%3E%3Crect%20x%3D%2216%22%20y%3D%2218%22%20width%3D%2280%22%20height%3D%2210%22%20rx%3D%223%22%20fill%3D%22hsl(240%2025%25%2070%25)%22%2F%3E%3Crect%20x%3D%2216%22%20y%3D%2236%22%20width%3D%22128%22%20height%3D%2246%22%20rx%3D%226%22%20fill%3D%22hsl(240%2025%25%2078%25)%22%2F%3E%3C%2Fsvg%3E"/>
|
|
1653
|
+
</span>
|
|
1654
|
+
</div>
|
|
1655
|
+
<div class="ui-list__body">
|
|
1656
|
+
<a class="ui-list__title" href="#a1">Bundles that do not cannibalise the hero product</a>
|
|
1657
|
+
<p class="ui-list__sub">content-radar · 6 min read · 02/10/2026</p>
|
|
1658
|
+
</div>
|
|
1659
|
+
</li>
|
|
1660
|
+
<li class="ui-list__item">
|
|
1661
|
+
<div class="ui-list__media">
|
|
1662
|
+
<span class="ui-thumb">
|
|
1663
|
+
<img alt="" src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20160%20100%22%3E%3Crect%20width%3D%22160%22%20height%3D%22100%22%20fill%3D%22hsl(280%2030%25%2088%25)%22%2F%3E%3Crect%20x%3D%2216%22%20y%3D%2218%22%20width%3D%2280%22%20height%3D%2210%22%20rx%3D%223%22%20fill%3D%22hsl(280%2025%25%2070%25)%22%2F%3E%3Crect%20x%3D%2216%22%20y%3D%2236%22%20width%3D%22128%22%20height%3D%2246%22%20rx%3D%226%22%20fill%3D%22hsl(280%2025%25%2078%25)%22%2F%3E%3C%2Fsvg%3E"/>
|
|
1664
|
+
</span>
|
|
1665
|
+
</div>
|
|
1666
|
+
<div class="ui-list__body">
|
|
1667
|
+
<a class="ui-list__title" href="#a2">A/B testing a PDP on 3,000 sessions a week</a>
|
|
1668
|
+
<p class="ui-list__sub">content-radar · 6 min read · 03/10/2026</p>
|
|
1669
|
+
</div>
|
|
1670
|
+
</li>
|
|
1671
|
+
</ul></code></pre></details></figure><figure class="cat-demo"><figcaption>3 · Resource list chọn được (0.16.0, React <code>SelectableResourceList</code>, đang chọn 2): checkbox đầu khe media; thanh hành động là header của list, có từ đầu ("0 selected", nút tắt) nên tích ô đầu không đẩy hàng; Shift+click chọn dải; Escape bỏ chọn; bấm hàng vẫn mở chi tiết</figcaption><div class="cat-live"><div class="ui-resource"><div class="ui-bulkbar"><label class="ui-table__checkbox"><input type="checkbox" aria-label="Select all"/></label><span class="ui-bulkbar__count" aria-live="polite">2 selected</span><span class="ui-bulkbar__actions"><button type="button" class="ui-btn ui-btn--sm">Shortlist</button><button type="button" class="ui-btn ui-btn--sm">Compare</button><button type="button" class="ui-btn ui-btn--sm ui-btn--critical">Not fit</button></span></div><ul class="ui-list" aria-label="Candidates"><li class="ui-list__item is-selected"><div class="ui-list__media"><label class="ui-list__check"><input type="checkbox" aria-label="Select Lily Tran" checked=""/></label><span class="gb-avatar gb-avatar--32" data-tone="1" aria-hidden="true">LT</span></div><div class="ui-list__body"><a class="ui-list__title" href="#s0">Lily Tran</a><p class="ui-list__sub">Head of CRO at Ruggable</p><p class="ui-list__meta">Replied 2 days ago</p><div class="ui-list__badges"><span class="ui-badge">CRO</span><span class="ui-badge">Plus</span></div></div><div class="ui-list__aside"><b>82</b></div></li><li class="ui-list__item"><div class="ui-list__media"><label class="ui-list__check"><input type="checkbox" aria-label="Select Marcus Bell"/></label><span class="gb-avatar gb-avatar--32" data-tone="0" aria-hidden="true">MB</span></div><div class="ui-list__body"><a class="ui-list__title" href="#s1">Marcus Bell</a><p class="ui-list__sub">Founder, Bell & Co. Media. Runs Meta ads for 40 Shopify brands, mostly apparel and home goods; asked about the agency plan twice.</p><p class="ui-list__meta">New</p><div class="ui-list__badges"><span class="ui-badge">Media buyer</span></div></div><div class="ui-list__aside"><b>77</b></div></li><li class="ui-list__item is-selected"><div class="ui-list__media"><label class="ui-list__check"><input type="checkbox" aria-label="Select Aiko Sato" checked=""/></label><span class="gb-avatar gb-avatar--32" data-tone="5" aria-hidden="true">AS</span></div><div class="ui-list__body"><a class="ui-list__title" href="#s2">Aiko Sato</a><p class="ui-list__sub">Shopify app founder (reviews)</p><p class="ui-list__meta">Waiting on intro</p><div class="ui-list__badges"><span class="ui-badge">App</span><span class="ui-badge">Japan</span><span class="ui-badge">Plus</span><span class="ui-badge">+1</span></div></div><div class="ui-list__aside"><b>64</b></div></li></ul></div></div><details class="cat-code"><summary>Markup</summary><pre><code><div class="ui-resource">
|
|
1672
|
+
<div class="ui-bulkbar">
|
|
1673
|
+
<label class="ui-table__checkbox">
|
|
1674
|
+
<input type="checkbox" aria-label="Select all"/>
|
|
1675
|
+
</label>
|
|
1676
|
+
<span class="ui-bulkbar__count" aria-live="polite">2 selected</span>
|
|
1677
|
+
<span class="ui-bulkbar__actions">
|
|
1678
|
+
<button type="button" class="ui-btn ui-btn--sm">Shortlist</button>
|
|
1679
|
+
<button type="button" class="ui-btn ui-btn--sm">Compare</button>
|
|
1680
|
+
<button type="button" class="ui-btn ui-btn--sm ui-btn--critical">Not fit</button>
|
|
1681
|
+
</span>
|
|
1682
|
+
</div>
|
|
1683
|
+
<ul class="ui-list" aria-label="Candidates">
|
|
1684
|
+
<li class="ui-list__item is-selected">
|
|
1685
|
+
<div class="ui-list__media">
|
|
1686
|
+
<label class="ui-list__check">
|
|
1687
|
+
<input type="checkbox" aria-label="Select Lily Tran" checked=""/>
|
|
1688
|
+
</label>
|
|
1689
|
+
<span class="gb-avatar gb-avatar--32" data-tone="1" aria-hidden="true">LT</span>
|
|
1690
|
+
</div>
|
|
1691
|
+
<div class="ui-list__body">
|
|
1692
|
+
<a class="ui-list__title" href="#s0">Lily Tran</a>
|
|
1693
|
+
<p class="ui-list__sub">Head of CRO at Ruggable</p>
|
|
1694
|
+
<p class="ui-list__meta">Replied 2 days ago</p>
|
|
1695
|
+
<div class="ui-list__badges">
|
|
1696
|
+
<span class="ui-badge">CRO</span>
|
|
1697
|
+
<span class="ui-badge">Plus</span>
|
|
1698
|
+
</div>
|
|
1699
|
+
</div>
|
|
1700
|
+
<div class="ui-list__aside">
|
|
1701
|
+
<b>82</b>
|
|
1702
|
+
</div>
|
|
1703
|
+
</li>
|
|
1704
|
+
<li class="ui-list__item">
|
|
1705
|
+
<div class="ui-list__media">
|
|
1706
|
+
<label class="ui-list__check">
|
|
1707
|
+
<input type="checkbox" aria-label="Select Marcus Bell"/>
|
|
1708
|
+
</label>
|
|
1709
|
+
<span class="gb-avatar gb-avatar--32" data-tone="0" aria-hidden="true">MB</span>
|
|
1710
|
+
</div>
|
|
1711
|
+
<div class="ui-list__body">
|
|
1712
|
+
<a class="ui-list__title" href="#s1">Marcus Bell</a>
|
|
1713
|
+
<p class="ui-list__sub">Founder, Bell &amp; Co. Media. Runs Meta ads for 40 Shopify brands, mostly apparel and home goods; asked about the agency plan twice.</p>
|
|
1714
|
+
<p class="ui-list__meta">New</p>
|
|
1715
|
+
<div class="ui-list__badges">
|
|
1716
|
+
<span class="ui-badge">Media buyer</span>
|
|
1717
|
+
</div>
|
|
1718
|
+
</div>
|
|
1719
|
+
<div class="ui-list__aside">
|
|
1720
|
+
<b>77</b>
|
|
1721
|
+
</div>
|
|
1722
|
+
</li>
|
|
1723
|
+
<li class="ui-list__item is-selected">
|
|
1724
|
+
<div class="ui-list__media">
|
|
1725
|
+
<label class="ui-list__check">
|
|
1726
|
+
<input type="checkbox" aria-label="Select Aiko Sato" checked=""/>
|
|
1727
|
+
</label>
|
|
1728
|
+
<span class="gb-avatar gb-avatar--32" data-tone="5" aria-hidden="true">AS</span>
|
|
1729
|
+
</div>
|
|
1730
|
+
<div class="ui-list__body">
|
|
1731
|
+
<a class="ui-list__title" href="#s2">Aiko Sato</a>
|
|
1732
|
+
<p class="ui-list__sub">Shopify app founder (reviews)</p>
|
|
1733
|
+
<p class="ui-list__meta">Waiting on intro</p>
|
|
1734
|
+
<div class="ui-list__badges">
|
|
1735
|
+
<span class="ui-badge">App</span>
|
|
1736
|
+
<span class="ui-badge">Japan</span>
|
|
1737
|
+
<span class="ui-badge">Plus</span>
|
|
1738
|
+
<span class="ui-badge">+1</span>
|
|
1739
|
+
</div>
|
|
1740
|
+
</div>
|
|
1741
|
+
<div class="ui-list__aside">
|
|
1742
|
+
<b>64</b>
|
|
1743
|
+
</div>
|
|
1744
|
+
</li>
|
|
1745
|
+
</ul>
|
|
1746
|
+
</div></code></pre></details></figure><figure class="cat-demo cat-screen"><figcaption>3 · Resource list chọn được ở 390px: ô chọn 44 (điều khiển dưới ngón tay) kéo vào lề hàng, ảnh không bị đẩy</figcaption><div class="cat-wide"><iframe title="3 · Resource list chọn được ở 390px: ô chọn 44 (điều khiển dưới ngón tay) kéo vào lề hàng, ảnh không bị đẩy" style="height:420px;width:390px" srcdoc="<!doctype html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="../gemboss-ui.css"><link rel="stylesheet" href="../src/collections.css"><link rel="stylesheet" href="../src/reactions.css"></head><body><div style="padding:16px"><div class="ui-resource"><div class="ui-bulkbar"><label class="ui-table__checkbox"><input type="checkbox" aria-label="Select all"/></label><span class="ui-bulkbar__count" aria-live="polite">0 selected</span><span class="ui-bulkbar__actions"><button type="button" class="ui-btn ui-btn--sm" disabled="">Shortlist</button><button type="button" class="ui-btn ui-btn--sm" disabled="">Compare</button><button type="button" class="ui-btn ui-btn--sm ui-btn--critical" disabled="">Not fit</button></span></div><ul class="ui-list" aria-label="Candidates"><li class="ui-list__item"><div class="ui-list__media"><label class="ui-list__check"><input type="checkbox" aria-label="Select Lily Tran"/></label><span class="gb-avatar gb-avatar--32" data-tone="1" aria-hidden="true">LT</span></div><div class="ui-list__body"><a class="ui-list__title" href="#s0">Lily Tran</a><p class="ui-list__sub">Head of CRO at Ruggable</p><p class="ui-list__meta">Replied 2 days ago</p><div class="ui-list__badges"><span class="ui-badge">CRO</span><span class="ui-badge">Plus</span></div></div><div class="ui-list__aside"><b>82</b></div></li><li class="ui-list__item"><div class="ui-list__media"><label class="ui-list__check"><input type="checkbox" aria-label="Select Marcus Bell"/></label><span class="gb-avatar gb-avatar--32" data-tone="0" aria-hidden="true">MB</span></div><div class="ui-list__body"><a class="ui-list__title" href="#s1">Marcus Bell</a><p class="ui-list__sub">Founder, Bell &amp; Co. Media. Runs Meta ads for 40 Shopify brands, mostly apparel and home goods; asked about the agency plan twice.</p><p class="ui-list__meta">New</p><div class="ui-list__badges"><span class="ui-badge">Media buyer</span></div></div><div class="ui-list__aside"><b>77</b></div></li><li class="ui-list__item"><div class="ui-list__media"><label class="ui-list__check"><input type="checkbox" aria-label="Select Aiko Sato"/></label><span class="gb-avatar gb-avatar--32" data-tone="5" aria-hidden="true">AS</span></div><div class="ui-list__body"><a class="ui-list__title" href="#s2">Aiko Sato</a><p class="ui-list__sub">Shopify app founder (reviews)</p><p class="ui-list__meta">Waiting on intro</p><div class="ui-list__badges"><span class="ui-badge">App</span><span class="ui-badge">Japan</span><span class="ui-badge">Plus</span><span class="ui-badge">+1</span></div></div><div class="ui-list__aside"><b>64</b></div></li></ul></div></div></body></html>"></iframe></div><details class="cat-code"><summary>Markup</summary><pre><code><div style="padding:16px">
|
|
1747
|
+
<div class="ui-resource">
|
|
1748
|
+
<div class="ui-bulkbar">
|
|
1749
|
+
<label class="ui-table__checkbox">
|
|
1750
|
+
<input type="checkbox" aria-label="Select all"/>
|
|
1751
|
+
</label>
|
|
1752
|
+
<span class="ui-bulkbar__count" aria-live="polite">0 selected</span>
|
|
1753
|
+
<span class="ui-bulkbar__actions">
|
|
1754
|
+
<button type="button" class="ui-btn ui-btn--sm" disabled="">Shortlist</button>
|
|
1755
|
+
<button type="button" class="ui-btn ui-btn--sm" disabled="">Compare</button>
|
|
1756
|
+
<button type="button" class="ui-btn ui-btn--sm ui-btn--critical" disabled="">Not fit</button>
|
|
1757
|
+
</span>
|
|
1758
|
+
</div>
|
|
1759
|
+
<ul class="ui-list" aria-label="Candidates">
|
|
1760
|
+
<li class="ui-list__item">
|
|
1761
|
+
<div class="ui-list__media">
|
|
1762
|
+
<label class="ui-list__check">
|
|
1763
|
+
<input type="checkbox" aria-label="Select Lily Tran"/>
|
|
1764
|
+
</label>
|
|
1765
|
+
<span class="gb-avatar gb-avatar--32" data-tone="1" aria-hidden="true">LT</span>
|
|
1766
|
+
</div>
|
|
1767
|
+
<div class="ui-list__body">
|
|
1768
|
+
<a class="ui-list__title" href="#s0">Lily Tran</a>
|
|
1769
|
+
<p class="ui-list__sub">Head of CRO at Ruggable</p>
|
|
1770
|
+
<p class="ui-list__meta">Replied 2 days ago</p>
|
|
1771
|
+
<div class="ui-list__badges">
|
|
1772
|
+
<span class="ui-badge">CRO</span>
|
|
1773
|
+
<span class="ui-badge">Plus</span>
|
|
1774
|
+
</div>
|
|
1775
|
+
</div>
|
|
1776
|
+
<div class="ui-list__aside">
|
|
1777
|
+
<b>82</b>
|
|
1778
|
+
</div>
|
|
1779
|
+
</li>
|
|
1780
|
+
<li class="ui-list__item">
|
|
1781
|
+
<div class="ui-list__media">
|
|
1782
|
+
<label class="ui-list__check">
|
|
1783
|
+
<input type="checkbox" aria-label="Select Marcus Bell"/>
|
|
1784
|
+
</label>
|
|
1785
|
+
<span class="gb-avatar gb-avatar--32" data-tone="0" aria-hidden="true">MB</span>
|
|
1786
|
+
</div>
|
|
1787
|
+
<div class="ui-list__body">
|
|
1788
|
+
<a class="ui-list__title" href="#s1">Marcus Bell</a>
|
|
1789
|
+
<p class="ui-list__sub">Founder, Bell &amp; Co. Media. Runs Meta ads for 40 Shopify brands, mostly apparel and home goods; asked about the agency plan twice.</p>
|
|
1790
|
+
<p class="ui-list__meta">New</p>
|
|
1791
|
+
<div class="ui-list__badges">
|
|
1792
|
+
<span class="ui-badge">Media buyer</span>
|
|
1793
|
+
</div>
|
|
1794
|
+
</div>
|
|
1795
|
+
<div class="ui-list__aside">
|
|
1796
|
+
<b>77</b>
|
|
1797
|
+
</div>
|
|
1798
|
+
</li>
|
|
1799
|
+
<li class="ui-list__item">
|
|
1800
|
+
<div class="ui-list__media">
|
|
1801
|
+
<label class="ui-list__check">
|
|
1802
|
+
<input type="checkbox" aria-label="Select Aiko Sato"/>
|
|
1803
|
+
</label>
|
|
1804
|
+
<span class="gb-avatar gb-avatar--32" data-tone="5" aria-hidden="true">AS</span>
|
|
1805
|
+
</div>
|
|
1806
|
+
<div class="ui-list__body">
|
|
1807
|
+
<a class="ui-list__title" href="#s2">Aiko Sato</a>
|
|
1808
|
+
<p class="ui-list__sub">Shopify app founder (reviews)</p>
|
|
1809
|
+
<p class="ui-list__meta">Waiting on intro</p>
|
|
1810
|
+
<div class="ui-list__badges">
|
|
1811
|
+
<span class="ui-badge">App</span>
|
|
1812
|
+
<span class="ui-badge">Japan</span>
|
|
1813
|
+
<span class="ui-badge">Plus</span>
|
|
1814
|
+
<span class="ui-badge">+1</span>
|
|
1815
|
+
</div>
|
|
1816
|
+
</div>
|
|
1817
|
+
<div class="ui-list__aside">
|
|
1818
|
+
<b>64</b>
|
|
1819
|
+
</div>
|
|
1820
|
+
</li>
|
|
1821
|
+
</ul>
|
|
1822
|
+
</div>
|
|
1823
|
+
</div></code></pre></details></figure><figure class="cat-demo cat-screen"><figcaption>3 · Resource list trong khung ≤ 400 (0.15.0): thân luôn cạnh ảnh và lấy hết bề ngang còn lại; aside + hành động chung MỘT dòng dưới thân (aside trái, hành động phải); hàng không ảnh thì thân rộng hết hàng</figcaption><div class="cat-wide"><iframe title="3 · Resource list trong khung ≤ 400 (0.15.0): thân luôn cạnh ảnh và lấy hết bề ngang còn lại; aside + hành động chung MỘT dòng dưới thân (aside trái, hành động phải); hàng không ảnh thì thân rộng hết hàng" style="height:420px;width:390px" srcdoc="<!doctype html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="../gemboss-ui.css"><link rel="stylesheet" href="../src/collections.css"><link rel="stylesheet" href="../src/reactions.css"></head><body><div style="padding:16px"><ul class="ui-list" aria-label="People"><li class="ui-list__item"><div class="ui-list__media"><span class="gb-avatar gb-avatar--40" data-tone="1" aria-hidden="true">LT</span></div><div class="ui-list__body"><a class="ui-list__title" href="#n1">Lily Tran</a><p class="ui-list__sub">Head of CRO at Ruggable. I help Shopify Plus brands turn traffic into revenue with landing pages, offers and A/B tests</p><p class="ui-list__meta">linkedin · cro-agency · Austin, TX · posted 2d ago</p></div><div class="ui-list__aside"><span class="ui-tag ui-tag--success">82</span></div><div class="ui-list__actions"><a href="#orig" aria-label="Open original profile" style="display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px">↗</a></div></li><li class="ui-list__item"><div class="ui-list__body"><a class="ui-list__title" href="#n2">Marcus Bell</a><p class="ui-list__sub">Founder, Bell UGC Studio · 12,400 followers</p><p class="ui-list__meta"><span>Runs the ads himself<span style="display:block;margin-top:4px">Signals: arcads · heygen · veo 3 · capcut</span></span></p><div class="ui-list__badges"><span class="ui-tag">Hands-on</span><span class="ui-tag ui-tag--success">Email verified</span></div></div><div class="ui-list__aside"><span><span class="ui-tag ui-tag--success">91</span><span class="ui-sub">Unverified</span></span></div><div class="ui-list__actions"><span><button type="button" class="ui-btn ui-btn--ghost">Evidence (3)</button><details class="ui-menu ui-menu--end"><summary class="ui-btn ui-btn--icon" aria-label="More profiles">⋯</summary><div class="ui-menu__list gemboss-popover-surface"><a class="ui-menu__item" href="#x">X ↗</a></div></details></span></div></li></ul></div></body></html>"></iframe></div><details class="cat-code"><summary>Markup</summary><pre><code><div style="padding:16px">
|
|
1824
|
+
<ul class="ui-list" aria-label="People">
|
|
1825
|
+
<li class="ui-list__item">
|
|
1826
|
+
<div class="ui-list__media">
|
|
1827
|
+
<span class="gb-avatar gb-avatar--40" data-tone="1" aria-hidden="true">LT</span>
|
|
1828
|
+
</div>
|
|
1829
|
+
<div class="ui-list__body">
|
|
1830
|
+
<a class="ui-list__title" href="#n1">Lily Tran</a>
|
|
1831
|
+
<p class="ui-list__sub">Head of CRO at Ruggable. I help Shopify Plus brands turn traffic into revenue with landing pages, offers and A/B tests</p>
|
|
1832
|
+
<p class="ui-list__meta">linkedin · cro-agency · Austin, TX · posted 2d ago</p>
|
|
1833
|
+
</div>
|
|
1834
|
+
<div class="ui-list__aside">
|
|
1835
|
+
<span class="ui-tag ui-tag--success">82</span>
|
|
1836
|
+
</div>
|
|
1837
|
+
<div class="ui-list__actions">
|
|
1838
|
+
<a href="#orig" aria-label="Open original profile" style="display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px">↗</a>
|
|
1839
|
+
</div>
|
|
1840
|
+
</li>
|
|
1841
|
+
<li class="ui-list__item">
|
|
1842
|
+
<div class="ui-list__body">
|
|
1843
|
+
<a class="ui-list__title" href="#n2">Marcus Bell</a>
|
|
1844
|
+
<p class="ui-list__sub">Founder, Bell UGC Studio · 12,400 followers</p>
|
|
1845
|
+
<p class="ui-list__meta">
|
|
1846
|
+
<span>Runs the ads himself<span style="display:block;margin-top:4px">Signals: arcads · heygen · veo 3 · capcut</span>
|
|
1847
|
+
</span>
|
|
1848
|
+
</p>
|
|
1849
|
+
<div class="ui-list__badges">
|
|
1850
|
+
<span class="ui-tag">Hands-on</span>
|
|
1851
|
+
<span class="ui-tag ui-tag--success">Email verified</span>
|
|
1852
|
+
</div>
|
|
1853
|
+
</div>
|
|
1854
|
+
<div class="ui-list__aside">
|
|
1855
|
+
<span>
|
|
1856
|
+
<span class="ui-tag ui-tag--success">91</span>
|
|
1857
|
+
<span class="ui-sub">Unverified</span>
|
|
1858
|
+
</span>
|
|
1859
|
+
</div>
|
|
1860
|
+
<div class="ui-list__actions">
|
|
1861
|
+
<span>
|
|
1862
|
+
<button type="button" class="ui-btn ui-btn--ghost">Evidence (3)</button>
|
|
1863
|
+
<details class="ui-menu ui-menu--end">
|
|
1864
|
+
<summary class="ui-btn ui-btn--icon" aria-label="More profiles">⋯</summary>
|
|
1865
|
+
<div class="ui-menu__list gemboss-popover-surface">
|
|
1866
|
+
<a class="ui-menu__item" href="#x">X ↗</a>
|
|
1867
|
+
</div>
|
|
1868
|
+
</details>
|
|
1869
|
+
</span>
|
|
1870
|
+
</div>
|
|
1871
|
+
</li>
|
|
1872
|
+
</ul>
|
|
1873
|
+
</div></code></pre></details></figure><figure class="cat-demo"><figcaption>4 · Compact list (<code>CompactList</code>): 36 dưới chuột, 44 dưới ngón tay</figcaption><div class="cat-live"><div style="max-width:420px"><ul class="ui-list ui-list--compact" aria-label="Needs attention"><li class="ui-list__item"><a class="ui-list__row" href="#c1"><span class="ui-list__icon" aria-hidden="true"><svg viewBox="0 0 20 20" aria-hidden="true"><circle cx="10" cy="10" r="6" fill="currentColor"></circle></svg></span><span class="ui-list__label">3 sources failed overnight</span><span class="ui-list__meta">07:12</span></a></li><li class="ui-list__item"><a class="ui-list__row is-selected" href="#c2" aria-current="page"><span class="ui-list__label">Keyword “page builder” dropped from #3 to #9</span><span class="ui-list__meta">Yesterday</span></a></li><li class="ui-list__item"><a class="ui-list__row" href="#c3"><span class="ui-list__label">12 candidates waiting for review in the pool</span><span class="ui-list__meta">12</span></a></li></ul></div></div><details class="cat-code"><summary>Markup</summary><pre><code><div style="max-width:420px">
|
|
1874
|
+
<ul class="ui-list ui-list--compact" aria-label="Needs attention">
|
|
1875
|
+
<li class="ui-list__item">
|
|
1876
|
+
<a class="ui-list__row" href="#c1">
|
|
1877
|
+
<span class="ui-list__icon" aria-hidden="true">
|
|
1878
|
+
<svg viewBox="0 0 20 20" aria-hidden="true">
|
|
1879
|
+
<circle cx="10" cy="10" r="6" fill="currentColor">
|
|
1880
|
+
</circle>
|
|
1881
|
+
</svg>
|
|
1882
|
+
</span>
|
|
1883
|
+
<span class="ui-list__label">3 sources failed overnight</span>
|
|
1884
|
+
<span class="ui-list__meta">07:12</span>
|
|
1885
|
+
</a>
|
|
1886
|
+
</li>
|
|
1887
|
+
<li class="ui-list__item">
|
|
1888
|
+
<a class="ui-list__row is-selected" href="#c2" aria-current="page">
|
|
1889
|
+
<span class="ui-list__label">Keyword “page builder” dropped from #3 to #9</span>
|
|
1890
|
+
<span class="ui-list__meta">Yesterday</span>
|
|
1891
|
+
</a>
|
|
1892
|
+
</li>
|
|
1893
|
+
<li class="ui-list__item">
|
|
1894
|
+
<a class="ui-list__row" href="#c3">
|
|
1895
|
+
<span class="ui-list__label">12 candidates waiting for review in the pool</span>
|
|
1896
|
+
<span class="ui-list__meta">12</span>
|
|
1897
|
+
</a>
|
|
1898
|
+
</li>
|
|
1899
|
+
</ul>
|
|
1900
|
+
</div></code></pre></details></figure><figure class="cat-demo"><figcaption>4 · <code>--activity</code>: một timeline cho mọi bề mặt (chấm theo tông, chi tiết 1 dòng, giờ)</figcaption><div class="cat-live"><div style="max-width:520px"><ul class="ui-list ui-list--compact ui-list--activity" aria-label="History"><li class="ui-list__item"><span class="ui-list__dot ui-list__dot--info" aria-hidden="true"></span><div><span class="ui-list__label">Moved to Review</span><span class="ui-list__detail">by Lily · from In progress</span></div><time class="ui-list__time" dateTime="2026-10-05T14:05">14:05</time></li><li class="ui-list__item"><span class="ui-list__dot ui-list__dot--success" aria-hidden="true"></span><div><span class="ui-list__label">Preview passed the visual gate</span><span class="ui-list__detail">6 widths, 0 overflow</span></div><time class="ui-list__time">13:58</time></li><li class="ui-list__item"><span class="ui-list__dot ui-list__dot--critical" aria-hidden="true"></span><div><span class="ui-list__label">Build failed: missing image in slot hero</span><span class="ui-list__detail">slot hero_media is empty on 390 and 320</span></div><time class="ui-list__time">13:40</time></li><li class="ui-list__item"><span class="ui-list__dot" aria-hidden="true"></span><div><span class="ui-list__label">Created from the Alia popup corpus</span></div><time class="ui-list__time">Yesterday</time></li></ul></div></div><details class="cat-code"><summary>Markup</summary><pre><code><div style="max-width:520px">
|
|
1901
|
+
<ul class="ui-list ui-list--compact ui-list--activity" aria-label="History">
|
|
1902
|
+
<li class="ui-list__item">
|
|
1903
|
+
<span class="ui-list__dot ui-list__dot--info" aria-hidden="true">
|
|
1904
|
+
</span>
|
|
1905
|
+
<div>
|
|
1906
|
+
<span class="ui-list__label">Moved to Review</span>
|
|
1907
|
+
<span class="ui-list__detail">by Lily · from In progress</span>
|
|
1908
|
+
</div>
|
|
1909
|
+
<time class="ui-list__time" dateTime="2026-10-05T14:05">14:05</time>
|
|
1910
|
+
</li>
|
|
1911
|
+
<li class="ui-list__item">
|
|
1912
|
+
<span class="ui-list__dot ui-list__dot--success" aria-hidden="true">
|
|
1913
|
+
</span>
|
|
1914
|
+
<div>
|
|
1915
|
+
<span class="ui-list__label">Preview passed the visual gate</span>
|
|
1916
|
+
<span class="ui-list__detail">6 widths, 0 overflow</span>
|
|
1917
|
+
</div>
|
|
1918
|
+
<time class="ui-list__time">13:58</time>
|
|
1919
|
+
</li>
|
|
1920
|
+
<li class="ui-list__item">
|
|
1921
|
+
<span class="ui-list__dot ui-list__dot--critical" aria-hidden="true">
|
|
1922
|
+
</span>
|
|
1923
|
+
<div>
|
|
1924
|
+
<span class="ui-list__label">Build failed: missing image in slot hero</span>
|
|
1925
|
+
<span class="ui-list__detail">slot hero_media is empty on 390 and 320</span>
|
|
1926
|
+
</div>
|
|
1927
|
+
<time class="ui-list__time">13:40</time>
|
|
1928
|
+
</li>
|
|
1929
|
+
<li class="ui-list__item">
|
|
1930
|
+
<span class="ui-list__dot" aria-hidden="true">
|
|
1931
|
+
</span>
|
|
1932
|
+
<div>
|
|
1933
|
+
<span class="ui-list__label">Created from the Alia popup corpus</span>
|
|
1934
|
+
</div>
|
|
1935
|
+
<time class="ui-list__time">Yesterday</time>
|
|
1936
|
+
</li>
|
|
1937
|
+
</ul>
|
|
1938
|
+
</div></code></pre></details></figure><figure class="cat-demo cat-screen"><figcaption>4 · <code>--activity</code> + <code>body</code> + <code>wrap</code> (0.15.0): nhãn và chi tiết xuống dòng thay vì "…" (title không đọc được trên màn chạm), thân (<code>.ui-list__content</code>) cỡ chữ thân, không cắt</figcaption><div class="cat-wide"><iframe title="4 · <code>--activity</code> + <code>body</code> + <code>wrap</code> (0.15.0): nhãn và chi tiết xuống dòng thay vì "…" (title không đọc được trên màn chạm), thân (<code>.ui-list__content</code>) cỡ chữ thân, không cắt" style="height:360px;width:390px" srcdoc="<!doctype html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="../gemboss-ui.css"><link rel="stylesheet" href="../src/collections.css"><link rel="stylesheet" href="../src/reactions.css"></head><body><div style="padding:16px"><ul class="ui-list ui-list--compact ui-list--activity ui-list--wrap" aria-label="Relationship history"><li class="ui-list__item"><span class="ui-list__dot ui-list__dot--info" aria-hidden="true"></span><div><span class="ui-list__label"><span>Intro call with <a href="#org">Ruggable</a>&#x27;s growth team</span></span><span class="ui-list__detail">by Lily Tran · with Marcus Bell and Aiko Sato</span><div class="ui-list__content"><p>They want a landing page per ad set and asked whether the agency plan covers four stores; send the pricing sheet by Friday.</p></div></div><time class="ui-list__time" dateTime="2026-10-03">Oct 3</time></li><li class="ui-list__item"><span class="ui-list__dot ui-list__dot--warning" aria-hidden="true"></span><div><span class="ui-list__label">No reply to the follow-up</span><span class="ui-list__detail">sent by Lily Tran</span></div><time class="ui-list__time">Sep 28</time></li><li class="ui-list__item"><span class="ui-list__dot ui-list__dot--success" aria-hidden="true"></span><div><span class="ui-list__label">Signed the agency plan</span><span class="ui-list__detail">4 stores · Shopify Plus</span><div class="ui-list__content"><p>Starts Monday; the first store is the Austin one.</p></div></div><time class="ui-list__time">Sep 20</time></li></ul></div></body></html>"></iframe></div><details class="cat-code"><summary>Markup</summary><pre><code><div style="padding:16px">
|
|
1939
|
+
<ul class="ui-list ui-list--compact ui-list--activity ui-list--wrap" aria-label="Relationship history">
|
|
1940
|
+
<li class="ui-list__item">
|
|
1941
|
+
<span class="ui-list__dot ui-list__dot--info" aria-hidden="true">
|
|
1942
|
+
</span>
|
|
1943
|
+
<div>
|
|
1944
|
+
<span class="ui-list__label">
|
|
1945
|
+
<span>Intro call with <a href="#org">Ruggable</a>&#x27;s growth team</span>
|
|
1946
|
+
</span>
|
|
1947
|
+
<span class="ui-list__detail">by Lily Tran · with Marcus Bell and Aiko Sato</span>
|
|
1948
|
+
<div class="ui-list__content">
|
|
1949
|
+
<p>They want a landing page per ad set and asked whether the agency plan covers four stores; send the pricing sheet by Friday.</p>
|
|
1950
|
+
</div>
|
|
1951
|
+
</div>
|
|
1952
|
+
<time class="ui-list__time" dateTime="2026-10-03">Oct 3</time>
|
|
1953
|
+
</li>
|
|
1954
|
+
<li class="ui-list__item">
|
|
1955
|
+
<span class="ui-list__dot ui-list__dot--warning" aria-hidden="true">
|
|
1956
|
+
</span>
|
|
1957
|
+
<div>
|
|
1958
|
+
<span class="ui-list__label">No reply to the follow-up</span>
|
|
1959
|
+
<span class="ui-list__detail">sent by Lily Tran</span>
|
|
1960
|
+
</div>
|
|
1961
|
+
<time class="ui-list__time">Sep 28</time>
|
|
1962
|
+
</li>
|
|
1963
|
+
<li class="ui-list__item">
|
|
1964
|
+
<span class="ui-list__dot ui-list__dot--success" aria-hidden="true">
|
|
1965
|
+
</span>
|
|
1966
|
+
<div>
|
|
1967
|
+
<span class="ui-list__label">Signed the agency plan</span>
|
|
1968
|
+
<span class="ui-list__detail">4 stores · Shopify Plus</span>
|
|
1969
|
+
<div class="ui-list__content">
|
|
1970
|
+
<p>Starts Monday; the first store is the Austin one.</p>
|
|
1971
|
+
</div>
|
|
1972
|
+
</div>
|
|
1973
|
+
<time class="ui-list__time">Sep 20</time>
|
|
1974
|
+
</li>
|
|
1975
|
+
</ul>
|
|
1976
|
+
</div></code></pre></details></figure><figure class="cat-demo"><figcaption>5 · Card grid (<code>CardGrid</code> min 240 + <code>MediaCard</code>): auto-fill, khe 16, ảnh + tiêu đề là một link, ⋯ riêng</figcaption><div class="cat-live"><div class="ui-cardgrid" role="list" aria-label="Sections"><article class="ui-card ui-card--media" role="listitem"><a class="ui-card__media" href="#g0" tabindex="-1" aria-hidden="true"><img alt="" src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20160%20100%22%3E%3Crect%20width%3D%22160%22%20height%3D%22100%22%20fill%3D%22hsl(0%2030%25%2088%25)%22%2F%3E%3Crect%20x%3D%2216%22%20y%3D%2218%22%20width%3D%2280%22%20height%3D%2210%22%20rx%3D%223%22%20fill%3D%22hsl(0%2025%25%2070%25)%22%2F%3E%3Crect%20x%3D%2216%22%20y%3D%2236%22%20width%3D%22128%22%20height%3D%2246%22%20rx%3D%226%22%20fill%3D%22hsl(0%2025%25%2078%25)%22%2F%3E%3C%2Fsvg%3E"/></a><div class="ui-card__menu"><details class="ui-menu ui-menu--end"><summary class="ui-btn ui-btn--icon" aria-label="More actions">⋯</summary><div class="ui-menu__list gemboss-popover-surface"><button type="button" class="ui-menu__item">Duplicate</button></div></details></div><div class="ui-card__body"><a class="ui-card__link" href="#g0">Hero with countdown</a><span class="ui-card__meta">Section · 12 uses</span><div class="ui-list__badges"><span class="ui-badge">Live</span></div></div></article><article class="ui-card ui-card--media" role="listitem"><a class="ui-card__media" href="#g1" tabindex="-1" aria-hidden="true"><img alt="" src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20160%20100%22%3E%3Crect%20width%3D%22160%22%20height%3D%22100%22%20fill%3D%22hsl(47%2030%25%2088%25)%22%2F%3E%3Crect%20x%3D%2216%22%20y%3D%2218%22%20width%3D%2280%22%20height%3D%2210%22%20rx%3D%223%22%20fill%3D%22hsl(47%2025%25%2070%25)%22%2F%3E%3Crect%20x%3D%2216%22%20y%3D%2236%22%20width%3D%22128%22%20height%3D%2246%22%20rx%3D%226%22%20fill%3D%22hsl(47%2025%25%2078%25)%22%2F%3E%3C%2Fsvg%3E"/></a><div class="ui-card__menu"><details class="ui-menu ui-menu--end"><summary class="ui-btn ui-btn--icon" aria-label="More actions">⋯</summary><div class="ui-menu__list gemboss-popover-surface"><button type="button" class="ui-menu__item">Duplicate</button></div></details></div><div class="ui-card__body"><a class="ui-card__link" href="#g1">Bundle picker, three tiers</a><span class="ui-card__meta">Section · 12 uses</span><div class="ui-list__badges"><span class="ui-badge">Draft</span></div></div></article><article class="ui-card ui-card--media" role="listitem"><a class="ui-card__media" href="#g2" tabindex="-1" aria-hidden="true"><img alt="" src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20160%20100%22%3E%3Crect%20width%3D%22160%22%20height%3D%22100%22%20fill%3D%22hsl(94%2030%25%2088%25)%22%2F%3E%3Crect%20x%3D%2216%22%20y%3D%2218%22%20width%3D%2280%22%20height%3D%2210%22%20rx%3D%223%22%20fill%3D%22hsl(94%2025%25%2070%25)%22%2F%3E%3Crect%20x%3D%2216%22%20y%3D%2236%22%20width%3D%22128%22%20height%3D%2246%22%20rx%3D%226%22%20fill%3D%22hsl(94%2025%25%2078%25)%22%2F%3E%3C%2Fsvg%3E"/></a><div class="ui-card__menu"><details class="ui-menu ui-menu--end"><summary class="ui-btn ui-btn--icon" aria-label="More actions">⋯</summary><div class="ui-menu__list gemboss-popover-surface"><button type="button" class="ui-menu__item">Duplicate</button></div></details></div><div class="ui-card__body"><a class="ui-card__link" href="#g2">Reviews carousel</a><span class="ui-card__meta">Section · 12 uses</span><div class="ui-list__badges"><span class="ui-badge">Live</span></div></div></article><article class="ui-card ui-card--media" role="listitem"><a class="ui-card__media" href="#g3" tabindex="-1" aria-hidden="true"><img alt="" src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20160%20100%22%3E%3Crect%20width%3D%22160%22%20height%3D%22100%22%20fill%3D%22hsl(141%2030%25%2088%25)%22%2F%3E%3Crect%20x%3D%2216%22%20y%3D%2218%22%20width%3D%2280%22%20height%3D%2210%22%20rx%3D%223%22%20fill%3D%22hsl(141%2025%25%2070%25)%22%2F%3E%3Crect%20x%3D%2216%22%20y%3D%2236%22%20width%3D%22128%22%20height%3D%2246%22%20rx%3D%226%22%20fill%3D%22hsl(141%2025%25%2078%25)%22%2F%3E%3C%2Fsvg%3E"/></a><div class="ui-card__menu"><details class="ui-menu ui-menu--end"><summary class="ui-btn ui-btn--icon" aria-label="More actions">⋯</summary><div class="ui-menu__list gemboss-popover-surface"><button type="button" class="ui-menu__item">Duplicate</button></div></details></div><div class="ui-card__body"><a class="ui-card__link" href="#g3">FAQ accordion</a><span class="ui-card__meta">Section · 12 uses</span><div class="ui-list__badges"><span class="ui-badge">Draft</span></div></div></article><article class="ui-card ui-card--media" role="listitem"><a class="ui-card__media" href="#g4" tabindex="-1" aria-hidden="true"><img alt="" src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20160%20100%22%3E%3Crect%20width%3D%22160%22%20height%3D%22100%22%20fill%3D%22hsl(188%2030%25%2088%25)%22%2F%3E%3Crect%20x%3D%2216%22%20y%3D%2218%22%20width%3D%2280%22%20height%3D%2210%22%20rx%3D%223%22%20fill%3D%22hsl(188%2025%25%2070%25)%22%2F%3E%3Crect%20x%3D%2216%22%20y%3D%2236%22%20width%3D%22128%22%20height%3D%2246%22%20rx%3D%226%22%20fill%3D%22hsl(188%2025%25%2078%25)%22%2F%3E%3C%2Fsvg%3E"/></a><div class="ui-card__menu"><details class="ui-menu ui-menu--end"><summary class="ui-btn ui-btn--icon" aria-label="More actions">⋯</summary><div class="ui-menu__list gemboss-popover-surface"><button type="button" class="ui-menu__item">Duplicate</button></div></details></div><div class="ui-card__body"><a class="ui-card__link" href="#g4">Sticky add to cart</a><span class="ui-card__meta">Section · 12 uses</span><div class="ui-list__badges"><span class="ui-badge">Live</span></div></div></article><article class="ui-card ui-card--media" role="listitem"><a class="ui-card__media" href="#g5" tabindex="-1" aria-hidden="true"><img alt="" src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20160%20100%22%3E%3Crect%20width%3D%22160%22%20height%3D%22100%22%20fill%3D%22hsl(235%2030%25%2088%25)%22%2F%3E%3Crect%20x%3D%2216%22%20y%3D%2218%22%20width%3D%2280%22%20height%3D%2210%22%20rx%3D%223%22%20fill%3D%22hsl(235%2025%25%2070%25)%22%2F%3E%3Crect%20x%3D%2216%22%20y%3D%2236%22%20width%3D%22128%22%20height%3D%2246%22%20rx%3D%226%22%20fill%3D%22hsl(235%2025%25%2078%25)%22%2F%3E%3C%2Fsvg%3E"/></a><div class="ui-card__menu"><details class="ui-menu ui-menu--end"><summary class="ui-btn ui-btn--icon" aria-label="More actions">⋯</summary><div class="ui-menu__list gemboss-popover-surface"><button type="button" class="ui-menu__item">Duplicate</button></div></details></div><div class="ui-card__body"><a class="ui-card__link" href="#g5">Comparison table</a><span class="ui-card__meta">Section · 12 uses</span><div class="ui-list__badges"><span class="ui-badge">Draft</span></div></div></article></div></div><details class="cat-code"><summary>Markup</summary><pre><code><div class="ui-cardgrid" role="list" aria-label="Sections">
|
|
1977
|
+
<article class="ui-card ui-card--media" role="listitem">
|
|
1978
|
+
<a class="ui-card__media" href="#g0" tabindex="-1" aria-hidden="true">
|
|
1979
|
+
<img alt="" src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20160%20100%22%3E%3Crect%20width%3D%22160%22%20height%3D%22100%22%20fill%3D%22hsl(0%2030%25%2088%25)%22%2F%3E%3Crect%20x%3D%2216%22%20y%3D%2218%22%20width%3D%2280%22%20height%3D%2210%22%20rx%3D%223%22%20fill%3D%22hsl(0%2025%25%2070%25)%22%2F%3E%3Crect%20x%3D%2216%22%20y%3D%2236%22%20width%3D%22128%22%20height%3D%2246%22%20rx%3D%226%22%20fill%3D%22hsl(0%2025%25%2078%25)%22%2F%3E%3C%2Fsvg%3E"/>
|
|
1980
|
+
</a>
|
|
1981
|
+
<div class="ui-card__menu">
|
|
1982
|
+
<details class="ui-menu ui-menu--end">
|
|
1983
|
+
<summary class="ui-btn ui-btn--icon" aria-label="More actions">⋯</summary>
|
|
1984
|
+
<div class="ui-menu__list gemboss-popover-surface">
|
|
1985
|
+
<button type="button" class="ui-menu__item">Duplicate</button>
|
|
1986
|
+
</div>
|
|
1987
|
+
</details>
|
|
1988
|
+
</div>
|
|
1989
|
+
<div class="ui-card__body">
|
|
1990
|
+
<a class="ui-card__link" href="#g0">Hero with countdown</a>
|
|
1991
|
+
<span class="ui-card__meta">Section · 12 uses</span>
|
|
1992
|
+
<div class="ui-list__badges">
|
|
1993
|
+
<span class="ui-badge">Live</span>
|
|
1994
|
+
</div>
|
|
1995
|
+
</div>
|
|
1996
|
+
</article>
|
|
1997
|
+
<article class="ui-card ui-card--media" role="listitem">
|
|
1998
|
+
<a class="ui-card__media" href="#g1" tabindex="-1" aria-hidden="true">
|
|
1999
|
+
<img alt="" src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20160%20100%22%3E%3Crect%20width%3D%22160%22%20height%3D%22100%22%20fill%3D%22hsl(47%2030%25%2088%25)%22%2F%3E%3Crect%20x%3D%2216%22%20y%3D%2218%22%20width%3D%2280%22%20height%3D%2210%22%20rx%3D%223%22%20fill%3D%22hsl(47%2025%25%2070%25)%22%2F%3E%3Crect%20x%3D%2216%22%20y%3D%2236%22%20width%3D%22128%22%20height%3D%2246%22%20rx%3D%226%22%20fill%3D%22hsl(47%2025%25%2078%25)%22%2F%3E%3C%2Fsvg%3E"/>
|
|
2000
|
+
</a>
|
|
2001
|
+
<div class="ui-card__menu">
|
|
2002
|
+
<details class="ui-menu ui-menu--end">
|
|
2003
|
+
<summary class="ui-btn ui-btn--icon" aria-label="More actions">⋯</summary>
|
|
2004
|
+
<div class="ui-menu__list gemboss-popover-surface">
|
|
2005
|
+
<button type="button" class="ui-menu__item">Duplicate</button>
|
|
2006
|
+
</div>
|
|
2007
|
+
</details>
|
|
2008
|
+
</div>
|
|
2009
|
+
<div class="ui-card__body">
|
|
2010
|
+
<a class="ui-card__link" href="#g1">Bundle picker, three tiers</a>
|
|
2011
|
+
<span class="ui-card__meta">Section · 12 uses</span>
|
|
2012
|
+
<div class="ui-list__badges">
|
|
2013
|
+
<span class="ui-badge">Draft</span>
|
|
2014
|
+
</div>
|
|
2015
|
+
</div>
|
|
2016
|
+
</article>
|
|
2017
|
+
<article class="ui-card ui-card--media" role="listitem">
|
|
2018
|
+
<a class="ui-card__media" href="#g2" tabindex="-1" aria-hidden="true">
|
|
2019
|
+
<img alt="" src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20160%20100%22%3E%3Crect%20width%3D%22160%22%20height%3D%22100%22%20fill%3D%22hsl(94%2030%25%2088%25)%22%2F%3E%3Crect%20x%3D%2216%22%20y%3D%2218%22%20width%3D%2280%22%20height%3D%2210%22%20rx%3D%223%22%20fill%3D%22hsl(94%2025%25%2070%25)%22%2F%3E%3Crect%20x%3D%2216%22%20y%3D%2236%22%20width%3D%22128%22%20height%3D%2246%22%20rx%3D%226%22%20fill%3D%22hsl(94%2025%25%2078%25)%22%2F%3E%3C%2Fsvg%3E"/>
|
|
2020
|
+
</a>
|
|
2021
|
+
<div class="ui-card__menu">
|
|
2022
|
+
<details class="ui-menu ui-menu--end">
|
|
2023
|
+
<summary class="ui-btn ui-btn--icon" aria-label="More actions">⋯</summary>
|
|
2024
|
+
<div class="ui-menu__list gemboss-popover-surface">
|
|
2025
|
+
<button type="button" class="ui-menu__item">Duplicate</button>
|
|
2026
|
+
</div>
|
|
2027
|
+
</details>
|
|
2028
|
+
</div>
|
|
2029
|
+
<div class="ui-card__body">
|
|
2030
|
+
<a class="ui-card__link" href="#g2">Reviews carousel</a>
|
|
2031
|
+
<span class="ui-card__meta">Section · 12 uses</span>
|
|
2032
|
+
<div class="ui-list__badges">
|
|
2033
|
+
<span class="ui-badge">Live</span>
|
|
2034
|
+
</div>
|
|
2035
|
+
</div>
|
|
2036
|
+
</article>
|
|
2037
|
+
<article class="ui-card ui-card--media" role="listitem">
|
|
2038
|
+
<a class="ui-card__media" href="#g3" tabindex="-1" aria-hidden="true">
|
|
2039
|
+
<img alt="" src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20160%20100%22%3E%3Crect%20width%3D%22160%22%20height%3D%22100%22%20fill%3D%22hsl(141%2030%25%2088%25)%22%2F%3E%3Crect%20x%3D%2216%22%20y%3D%2218%22%20width%3D%2280%22%20height%3D%2210%22%20rx%3D%223%22%20fill%3D%22hsl(141%2025%25%2070%25)%22%2F%3E%3Crect%20x%3D%2216%22%20y%3D%2236%22%20width%3D%22128%22%20height%3D%2246%22%20rx%3D%226%22%20fill%3D%22hsl(141%2025%25%2078%25)%22%2F%3E%3C%2Fsvg%3E"/>
|
|
2040
|
+
</a>
|
|
2041
|
+
<div class="ui-card__menu">
|
|
2042
|
+
<details class="ui-menu ui-menu--end">
|
|
2043
|
+
<summary class="ui-btn ui-btn--icon" aria-label="More actions">⋯</summary>
|
|
2044
|
+
<div class="ui-menu__list gemboss-popover-surface">
|
|
2045
|
+
<button type="button" class="ui-menu__item">Duplicate</button>
|
|
2046
|
+
</div>
|
|
2047
|
+
</details>
|
|
2048
|
+
</div>
|
|
2049
|
+
<div class="ui-card__body">
|
|
2050
|
+
<a class="ui-card__link" href="#g3">FAQ accordion</a>
|
|
2051
|
+
<span class="ui-card__meta">Section · 12 uses</span>
|
|
2052
|
+
<div class="ui-list__badges">
|
|
2053
|
+
<span class="ui-badge">Draft</span>
|
|
2054
|
+
</div>
|
|
2055
|
+
</div>
|
|
2056
|
+
</article>
|
|
2057
|
+
<article class="ui-card ui-card--media" role="listitem">
|
|
2058
|
+
<a class="ui-card__media" href="#g4" tabindex="-1" aria-hidden="true">
|
|
2059
|
+
<img alt="" src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20160%20100%22%3E%3Crect%20width%3D%22160%22%20height%3D%22100%22%20fill%3D%22hsl(188%2030%25%2088%25)%22%2F%3E%3Crect%20x%3D%2216%22%20y%3D%2218%22%20width%3D%2280%22%20height%3D%2210%22%20rx%3D%223%22%20fill%3D%22hsl(188%2025%25%2070%25)%22%2F%3E%3Crect%20x%3D%2216%22%20y%3D%2236%22%20width%3D%22128%22%20height%3D%2246%22%20rx%3D%226%22%20fill%3D%22hsl(188%2025%25%2078%25)%22%2F%3E%3C%2Fsvg%3E"/>
|
|
2060
|
+
</a>
|
|
2061
|
+
<div class="ui-card__menu">
|
|
2062
|
+
<details class="ui-menu ui-menu--end">
|
|
2063
|
+
<summary class="ui-btn ui-btn--icon" aria-label="More actions">⋯</summary>
|
|
2064
|
+
<div class="ui-menu__list gemboss-popover-surface">
|
|
2065
|
+
<button type="button" class="ui-menu__item">Duplicate</button>
|
|
2066
|
+
</div>
|
|
2067
|
+
</details>
|
|
2068
|
+
</div>
|
|
2069
|
+
<div class="ui-card__body">
|
|
2070
|
+
<a class="ui-card__link" href="#g4">Sticky add to cart</a>
|
|
2071
|
+
<span class="ui-card__meta">Section · 12 uses</span>
|
|
2072
|
+
<div class="ui-list__badges">
|
|
2073
|
+
<span class="ui-badge">Live</span>
|
|
2074
|
+
</div>
|
|
2075
|
+
</div>
|
|
2076
|
+
</article>
|
|
2077
|
+
<article class="ui-card ui-card--media" role="listitem">
|
|
2078
|
+
<a class="ui-card__media" href="#g5" tabindex="-1" aria-hidden="true">
|
|
2079
|
+
<img alt="" src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20160%20100%22%3E%3Crect%20width%3D%22160%22%20height%3D%22100%22%20fill%3D%22hsl(235%2030%25%2088%25)%22%2F%3E%3Crect%20x%3D%2216%22%20y%3D%2218%22%20width%3D%2280%22%20height%3D%2210%22%20rx%3D%223%22%20fill%3D%22hsl(235%2025%25%2070%25)%22%2F%3E%3Crect%20x%3D%2216%22%20y%3D%2236%22%20width%3D%22128%22%20height%3D%2246%22%20rx%3D%226%22%20fill%3D%22hsl(235%2025%25%2078%25)%22%2F%3E%3C%2Fsvg%3E"/>
|
|
2080
|
+
</a>
|
|
2081
|
+
<div class="ui-card__menu">
|
|
2082
|
+
<details class="ui-menu ui-menu--end">
|
|
2083
|
+
<summary class="ui-btn ui-btn--icon" aria-label="More actions">⋯</summary>
|
|
2084
|
+
<div class="ui-menu__list gemboss-popover-surface">
|
|
2085
|
+
<button type="button" class="ui-menu__item">Duplicate</button>
|
|
2086
|
+
</div>
|
|
2087
|
+
</details>
|
|
2088
|
+
</div>
|
|
2089
|
+
<div class="ui-card__body">
|
|
2090
|
+
<a class="ui-card__link" href="#g5">Comparison table</a>
|
|
2091
|
+
<span class="ui-card__meta">Section · 12 uses</span>
|
|
2092
|
+
<div class="ui-list__badges">
|
|
2093
|
+
<span class="ui-badge">Draft</span>
|
|
2094
|
+
</div>
|
|
2095
|
+
</div>
|
|
2096
|
+
</article>
|
|
2097
|
+
</div></code></pre></details></figure><figure class="cat-demo"><figcaption>5 · Card grid min 200 (ảnh nhỏ: inspiration, stock) · min 320 dùng cho theme / trang</figcaption><div class="cat-live"><div class="ui-cardgrid" data-min="200" role="list" aria-label="Sections"><article class="ui-card ui-card--media" role="listitem"><a class="ui-card__media" href="#g0" tabindex="-1" aria-hidden="true"><img alt="" src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20160%20100%22%3E%3Crect%20width%3D%22160%22%20height%3D%22100%22%20fill%3D%22hsl(0%2030%25%2088%25)%22%2F%3E%3Crect%20x%3D%2216%22%20y%3D%2218%22%20width%3D%2280%22%20height%3D%2210%22%20rx%3D%223%22%20fill%3D%22hsl(0%2025%25%2070%25)%22%2F%3E%3Crect%20x%3D%2216%22%20y%3D%2236%22%20width%3D%22128%22%20height%3D%2246%22%20rx%3D%226%22%20fill%3D%22hsl(0%2025%25%2078%25)%22%2F%3E%3C%2Fsvg%3E"/></a><div class="ui-card__menu"><details class="ui-menu ui-menu--end"><summary class="ui-btn ui-btn--icon" aria-label="More actions">⋯</summary><div class="ui-menu__list gemboss-popover-surface"><button type="button" class="ui-menu__item">Duplicate</button></div></details></div><div class="ui-card__body"><a class="ui-card__link" href="#g0">Hero with countdown</a><span class="ui-card__meta">Section · 12 uses</span><div class="ui-list__badges"><span class="ui-badge">Live</span></div></div></article><article class="ui-card ui-card--media" role="listitem"><a class="ui-card__media" href="#g1" tabindex="-1" aria-hidden="true"><img alt="" src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20160%20100%22%3E%3Crect%20width%3D%22160%22%20height%3D%22100%22%20fill%3D%22hsl(47%2030%25%2088%25)%22%2F%3E%3Crect%20x%3D%2216%22%20y%3D%2218%22%20width%3D%2280%22%20height%3D%2210%22%20rx%3D%223%22%20fill%3D%22hsl(47%2025%25%2070%25)%22%2F%3E%3Crect%20x%3D%2216%22%20y%3D%2236%22%20width%3D%22128%22%20height%3D%2246%22%20rx%3D%226%22%20fill%3D%22hsl(47%2025%25%2078%25)%22%2F%3E%3C%2Fsvg%3E"/></a><div class="ui-card__menu"><details class="ui-menu ui-menu--end"><summary class="ui-btn ui-btn--icon" aria-label="More actions">⋯</summary><div class="ui-menu__list gemboss-popover-surface"><button type="button" class="ui-menu__item">Duplicate</button></div></details></div><div class="ui-card__body"><a class="ui-card__link" href="#g1">Bundle picker, three tiers</a><span class="ui-card__meta">Section · 12 uses</span><div class="ui-list__badges"><span class="ui-badge">Draft</span></div></div></article><article class="ui-card ui-card--media" role="listitem"><a class="ui-card__media" href="#g2" tabindex="-1" aria-hidden="true"><img alt="" src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20160%20100%22%3E%3Crect%20width%3D%22160%22%20height%3D%22100%22%20fill%3D%22hsl(94%2030%25%2088%25)%22%2F%3E%3Crect%20x%3D%2216%22%20y%3D%2218%22%20width%3D%2280%22%20height%3D%2210%22%20rx%3D%223%22%20fill%3D%22hsl(94%2025%25%2070%25)%22%2F%3E%3Crect%20x%3D%2216%22%20y%3D%2236%22%20width%3D%22128%22%20height%3D%2246%22%20rx%3D%226%22%20fill%3D%22hsl(94%2025%25%2078%25)%22%2F%3E%3C%2Fsvg%3E"/></a><div class="ui-card__menu"><details class="ui-menu ui-menu--end"><summary class="ui-btn ui-btn--icon" aria-label="More actions">⋯</summary><div class="ui-menu__list gemboss-popover-surface"><button type="button" class="ui-menu__item">Duplicate</button></div></details></div><div class="ui-card__body"><a class="ui-card__link" href="#g2">Reviews carousel</a><span class="ui-card__meta">Section · 12 uses</span><div class="ui-list__badges"><span class="ui-badge">Live</span></div></div></article><article class="ui-card ui-card--media" role="listitem"><a class="ui-card__media" href="#g3" tabindex="-1" aria-hidden="true"><img alt="" src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20160%20100%22%3E%3Crect%20width%3D%22160%22%20height%3D%22100%22%20fill%3D%22hsl(141%2030%25%2088%25)%22%2F%3E%3Crect%20x%3D%2216%22%20y%3D%2218%22%20width%3D%2280%22%20height%3D%2210%22%20rx%3D%223%22%20fill%3D%22hsl(141%2025%25%2070%25)%22%2F%3E%3Crect%20x%3D%2216%22%20y%3D%2236%22%20width%3D%22128%22%20height%3D%2246%22%20rx%3D%226%22%20fill%3D%22hsl(141%2025%25%2078%25)%22%2F%3E%3C%2Fsvg%3E"/></a><div class="ui-card__menu"><details class="ui-menu ui-menu--end"><summary class="ui-btn ui-btn--icon" aria-label="More actions">⋯</summary><div class="ui-menu__list gemboss-popover-surface"><button type="button" class="ui-menu__item">Duplicate</button></div></details></div><div class="ui-card__body"><a class="ui-card__link" href="#g3">FAQ accordion</a><span class="ui-card__meta">Section · 12 uses</span><div class="ui-list__badges"><span class="ui-badge">Draft</span></div></div></article><article class="ui-card ui-card--media" role="listitem"><a class="ui-card__media" href="#g4" tabindex="-1" aria-hidden="true"><img alt="" src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20160%20100%22%3E%3Crect%20width%3D%22160%22%20height%3D%22100%22%20fill%3D%22hsl(188%2030%25%2088%25)%22%2F%3E%3Crect%20x%3D%2216%22%20y%3D%2218%22%20width%3D%2280%22%20height%3D%2210%22%20rx%3D%223%22%20fill%3D%22hsl(188%2025%25%2070%25)%22%2F%3E%3Crect%20x%3D%2216%22%20y%3D%2236%22%20width%3D%22128%22%20height%3D%2246%22%20rx%3D%226%22%20fill%3D%22hsl(188%2025%25%2078%25)%22%2F%3E%3C%2Fsvg%3E"/></a><div class="ui-card__menu"><details class="ui-menu ui-menu--end"><summary class="ui-btn ui-btn--icon" aria-label="More actions">⋯</summary><div class="ui-menu__list gemboss-popover-surface"><button type="button" class="ui-menu__item">Duplicate</button></div></details></div><div class="ui-card__body"><a class="ui-card__link" href="#g4">Sticky add to cart</a><span class="ui-card__meta">Section · 12 uses</span><div class="ui-list__badges"><span class="ui-badge">Live</span></div></div></article><article class="ui-card ui-card--media" role="listitem"><a class="ui-card__media" href="#g5" tabindex="-1" aria-hidden="true"><img alt="" src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20160%20100%22%3E%3Crect%20width%3D%22160%22%20height%3D%22100%22%20fill%3D%22hsl(235%2030%25%2088%25)%22%2F%3E%3Crect%20x%3D%2216%22%20y%3D%2218%22%20width%3D%2280%22%20height%3D%2210%22%20rx%3D%223%22%20fill%3D%22hsl(235%2025%25%2070%25)%22%2F%3E%3Crect%20x%3D%2216%22%20y%3D%2236%22%20width%3D%22128%22%20height%3D%2246%22%20rx%3D%226%22%20fill%3D%22hsl(235%2025%25%2078%25)%22%2F%3E%3C%2Fsvg%3E"/></a><div class="ui-card__menu"><details class="ui-menu ui-menu--end"><summary class="ui-btn ui-btn--icon" aria-label="More actions">⋯</summary><div class="ui-menu__list gemboss-popover-surface"><button type="button" class="ui-menu__item">Duplicate</button></div></details></div><div class="ui-card__body"><a class="ui-card__link" href="#g5">Comparison table</a><span class="ui-card__meta">Section · 12 uses</span><div class="ui-list__badges"><span class="ui-badge">Draft</span></div></div></article></div></div><details class="cat-code"><summary>Markup</summary><pre><code><div class="ui-cardgrid" data-min="200" role="list" aria-label="Sections">
|
|
2098
|
+
<article class="ui-card ui-card--media" role="listitem">
|
|
2099
|
+
<a class="ui-card__media" href="#g0" tabindex="-1" aria-hidden="true">
|
|
2100
|
+
<img alt="" src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20160%20100%22%3E%3Crect%20width%3D%22160%22%20height%3D%22100%22%20fill%3D%22hsl(0%2030%25%2088%25)%22%2F%3E%3Crect%20x%3D%2216%22%20y%3D%2218%22%20width%3D%2280%22%20height%3D%2210%22%20rx%3D%223%22%20fill%3D%22hsl(0%2025%25%2070%25)%22%2F%3E%3Crect%20x%3D%2216%22%20y%3D%2236%22%20width%3D%22128%22%20height%3D%2246%22%20rx%3D%226%22%20fill%3D%22hsl(0%2025%25%2078%25)%22%2F%3E%3C%2Fsvg%3E"/>
|
|
2101
|
+
</a>
|
|
2102
|
+
<div class="ui-card__menu">
|
|
2103
|
+
<details class="ui-menu ui-menu--end">
|
|
2104
|
+
<summary class="ui-btn ui-btn--icon" aria-label="More actions">⋯</summary>
|
|
2105
|
+
<div class="ui-menu__list gemboss-popover-surface">
|
|
2106
|
+
<button type="button" class="ui-menu__item">Duplicate</button>
|
|
2107
|
+
</div>
|
|
2108
|
+
</details>
|
|
2109
|
+
</div>
|
|
2110
|
+
<div class="ui-card__body">
|
|
2111
|
+
<a class="ui-card__link" href="#g0">Hero with countdown</a>
|
|
2112
|
+
<span class="ui-card__meta">Section · 12 uses</span>
|
|
2113
|
+
<div class="ui-list__badges">
|
|
2114
|
+
<span class="ui-badge">Live</span>
|
|
2115
|
+
</div>
|
|
2116
|
+
</div>
|
|
2117
|
+
</article>
|
|
2118
|
+
<article class="ui-card ui-card--media" role="listitem">
|
|
2119
|
+
<a class="ui-card__media" href="#g1" tabindex="-1" aria-hidden="true">
|
|
2120
|
+
<img alt="" src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20160%20100%22%3E%3Crect%20width%3D%22160%22%20height%3D%22100%22%20fill%3D%22hsl(47%2030%25%2088%25)%22%2F%3E%3Crect%20x%3D%2216%22%20y%3D%2218%22%20width%3D%2280%22%20height%3D%2210%22%20rx%3D%223%22%20fill%3D%22hsl(47%2025%25%2070%25)%22%2F%3E%3Crect%20x%3D%2216%22%20y%3D%2236%22%20width%3D%22128%22%20height%3D%2246%22%20rx%3D%226%22%20fill%3D%22hsl(47%2025%25%2078%25)%22%2F%3E%3C%2Fsvg%3E"/>
|
|
2121
|
+
</a>
|
|
2122
|
+
<div class="ui-card__menu">
|
|
2123
|
+
<details class="ui-menu ui-menu--end">
|
|
2124
|
+
<summary class="ui-btn ui-btn--icon" aria-label="More actions">⋯</summary>
|
|
2125
|
+
<div class="ui-menu__list gemboss-popover-surface">
|
|
2126
|
+
<button type="button" class="ui-menu__item">Duplicate</button>
|
|
2127
|
+
</div>
|
|
2128
|
+
</details>
|
|
2129
|
+
</div>
|
|
2130
|
+
<div class="ui-card__body">
|
|
2131
|
+
<a class="ui-card__link" href="#g1">Bundle picker, three tiers</a>
|
|
2132
|
+
<span class="ui-card__meta">Section · 12 uses</span>
|
|
2133
|
+
<div class="ui-list__badges">
|
|
2134
|
+
<span class="ui-badge">Draft</span>
|
|
2135
|
+
</div>
|
|
2136
|
+
</div>
|
|
2137
|
+
</article>
|
|
2138
|
+
<article class="ui-card ui-card--media" role="listitem">
|
|
2139
|
+
<a class="ui-card__media" href="#g2" tabindex="-1" aria-hidden="true">
|
|
2140
|
+
<img alt="" src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20160%20100%22%3E%3Crect%20width%3D%22160%22%20height%3D%22100%22%20fill%3D%22hsl(94%2030%25%2088%25)%22%2F%3E%3Crect%20x%3D%2216%22%20y%3D%2218%22%20width%3D%2280%22%20height%3D%2210%22%20rx%3D%223%22%20fill%3D%22hsl(94%2025%25%2070%25)%22%2F%3E%3Crect%20x%3D%2216%22%20y%3D%2236%22%20width%3D%22128%22%20height%3D%2246%22%20rx%3D%226%22%20fill%3D%22hsl(94%2025%25%2078%25)%22%2F%3E%3C%2Fsvg%3E"/>
|
|
2141
|
+
</a>
|
|
2142
|
+
<div class="ui-card__menu">
|
|
2143
|
+
<details class="ui-menu ui-menu--end">
|
|
2144
|
+
<summary class="ui-btn ui-btn--icon" aria-label="More actions">⋯</summary>
|
|
2145
|
+
<div class="ui-menu__list gemboss-popover-surface">
|
|
2146
|
+
<button type="button" class="ui-menu__item">Duplicate</button>
|
|
2147
|
+
</div>
|
|
2148
|
+
</details>
|
|
2149
|
+
</div>
|
|
2150
|
+
<div class="ui-card__body">
|
|
2151
|
+
<a class="ui-card__link" href="#g2">Reviews carousel</a>
|
|
2152
|
+
<span class="ui-card__meta">Section · 12 uses</span>
|
|
2153
|
+
<div class="ui-list__badges">
|
|
2154
|
+
<span class="ui-badge">Live</span>
|
|
2155
|
+
</div>
|
|
2156
|
+
</div>
|
|
2157
|
+
</article>
|
|
2158
|
+
<article class="ui-card ui-card--media" role="listitem">
|
|
2159
|
+
<a class="ui-card__media" href="#g3" tabindex="-1" aria-hidden="true">
|
|
2160
|
+
<img alt="" src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20160%20100%22%3E%3Crect%20width%3D%22160%22%20height%3D%22100%22%20fill%3D%22hsl(141%2030%25%2088%25)%22%2F%3E%3Crect%20x%3D%2216%22%20y%3D%2218%22%20width%3D%2280%22%20height%3D%2210%22%20rx%3D%223%22%20fill%3D%22hsl(141%2025%25%2070%25)%22%2F%3E%3Crect%20x%3D%2216%22%20y%3D%2236%22%20width%3D%22128%22%20height%3D%2246%22%20rx%3D%226%22%20fill%3D%22hsl(141%2025%25%2078%25)%22%2F%3E%3C%2Fsvg%3E"/>
|
|
2161
|
+
</a>
|
|
2162
|
+
<div class="ui-card__menu">
|
|
2163
|
+
<details class="ui-menu ui-menu--end">
|
|
2164
|
+
<summary class="ui-btn ui-btn--icon" aria-label="More actions">⋯</summary>
|
|
2165
|
+
<div class="ui-menu__list gemboss-popover-surface">
|
|
2166
|
+
<button type="button" class="ui-menu__item">Duplicate</button>
|
|
2167
|
+
</div>
|
|
2168
|
+
</details>
|
|
2169
|
+
</div>
|
|
2170
|
+
<div class="ui-card__body">
|
|
2171
|
+
<a class="ui-card__link" href="#g3">FAQ accordion</a>
|
|
2172
|
+
<span class="ui-card__meta">Section · 12 uses</span>
|
|
2173
|
+
<div class="ui-list__badges">
|
|
2174
|
+
<span class="ui-badge">Draft</span>
|
|
2175
|
+
</div>
|
|
2176
|
+
</div>
|
|
2177
|
+
</article>
|
|
2178
|
+
<article class="ui-card ui-card--media" role="listitem">
|
|
2179
|
+
<a class="ui-card__media" href="#g4" tabindex="-1" aria-hidden="true">
|
|
2180
|
+
<img alt="" src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20160%20100%22%3E%3Crect%20width%3D%22160%22%20height%3D%22100%22%20fill%3D%22hsl(188%2030%25%2088%25)%22%2F%3E%3Crect%20x%3D%2216%22%20y%3D%2218%22%20width%3D%2280%22%20height%3D%2210%22%20rx%3D%223%22%20fill%3D%22hsl(188%2025%25%2070%25)%22%2F%3E%3Crect%20x%3D%2216%22%20y%3D%2236%22%20width%3D%22128%22%20height%3D%2246%22%20rx%3D%226%22%20fill%3D%22hsl(188%2025%25%2078%25)%22%2F%3E%3C%2Fsvg%3E"/>
|
|
2181
|
+
</a>
|
|
2182
|
+
<div class="ui-card__menu">
|
|
2183
|
+
<details class="ui-menu ui-menu--end">
|
|
2184
|
+
<summary class="ui-btn ui-btn--icon" aria-label="More actions">⋯</summary>
|
|
2185
|
+
<div class="ui-menu__list gemboss-popover-surface">
|
|
2186
|
+
<button type="button" class="ui-menu__item">Duplicate</button>
|
|
2187
|
+
</div>
|
|
2188
|
+
</details>
|
|
2189
|
+
</div>
|
|
2190
|
+
<div class="ui-card__body">
|
|
2191
|
+
<a class="ui-card__link" href="#g4">Sticky add to cart</a>
|
|
2192
|
+
<span class="ui-card__meta">Section · 12 uses</span>
|
|
2193
|
+
<div class="ui-list__badges">
|
|
2194
|
+
<span class="ui-badge">Live</span>
|
|
2195
|
+
</div>
|
|
2196
|
+
</div>
|
|
2197
|
+
</article>
|
|
2198
|
+
<article class="ui-card ui-card--media" role="listitem">
|
|
2199
|
+
<a class="ui-card__media" href="#g5" tabindex="-1" aria-hidden="true">
|
|
2200
|
+
<img alt="" src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20160%20100%22%3E%3Crect%20width%3D%22160%22%20height%3D%22100%22%20fill%3D%22hsl(235%2030%25%2088%25)%22%2F%3E%3Crect%20x%3D%2216%22%20y%3D%2218%22%20width%3D%2280%22%20height%3D%2210%22%20rx%3D%223%22%20fill%3D%22hsl(235%2025%25%2070%25)%22%2F%3E%3Crect%20x%3D%2216%22%20y%3D%2236%22%20width%3D%22128%22%20height%3D%2246%22%20rx%3D%226%22%20fill%3D%22hsl(235%2025%25%2078%25)%22%2F%3E%3C%2Fsvg%3E"/>
|
|
2201
|
+
</a>
|
|
2202
|
+
<div class="ui-card__menu">
|
|
2203
|
+
<details class="ui-menu ui-menu--end">
|
|
2204
|
+
<summary class="ui-btn ui-btn--icon" aria-label="More actions">⋯</summary>
|
|
2205
|
+
<div class="ui-menu__list gemboss-popover-surface">
|
|
2206
|
+
<button type="button" class="ui-menu__item">Duplicate</button>
|
|
2207
|
+
</div>
|
|
2208
|
+
</details>
|
|
2209
|
+
</div>
|
|
2210
|
+
<div class="ui-card__body">
|
|
2211
|
+
<a class="ui-card__link" href="#g5">Comparison table</a>
|
|
2212
|
+
<span class="ui-card__meta">Section · 12 uses</span>
|
|
2213
|
+
<div class="ui-list__badges">
|
|
2214
|
+
<span class="ui-badge">Draft</span>
|
|
2215
|
+
</div>
|
|
2216
|
+
</div>
|
|
2217
|
+
</article>
|
|
2218
|
+
</div></code></pre></details></figure><figure class="cat-demo"><figcaption>6 · Board (<code>Board</code>): 12 card mỗi cột rồi "Show N more" (details lồng nhau, không cần script), cột rỗng vẫn hiện</figcaption><div class="cat-live"><div class="ui-board" role="region" aria-label="Element pipeline"><section class="ui-board__col" data-col="todo" aria-labelledby="ui-board-todo"><header class="ui-board__head"><span class="ui-board__dot" aria-hidden="true"></span><span class="ui-board__name" id="ui-board-todo">To do</span><span class="ui-board__count">14</span></header><ol class="ui-board__list"><li><article class="ui-card ui-card--media"><div class="ui-card__body"><a class="ui-card__link" href="#b0">Popup variant 1</a><span class="ui-card__meta">#120 · 2 errors</span></div></article></li><li><article class="ui-card ui-card--media"><div class="ui-card__body"><a class="ui-card__link" href="#b1">Popup variant 2</a><span class="ui-card__meta">#121 · 2 errors</span></div></article></li><li><article class="ui-card ui-card--media"><div class="ui-card__body"><a class="ui-card__link" href="#b2">Popup variant 3</a><span class="ui-card__meta">#122 · 2 errors</span></div></article></li><li><article class="ui-card ui-card--media"><div class="ui-card__body"><a class="ui-card__link" href="#b3">Popup variant 4</a><span class="ui-card__meta">#123 · 2 errors</span></div></article></li><li><article class="ui-card ui-card--media"><div class="ui-card__body"><a class="ui-card__link" href="#b4">Popup variant 5</a><span class="ui-card__meta">#124 · 2 errors</span></div></article></li><li><article class="ui-card ui-card--media"><div class="ui-card__body"><a class="ui-card__link" href="#b5">Popup variant 6</a><span class="ui-card__meta">#125 · 2 errors</span></div></article></li><li><article class="ui-card ui-card--media"><div class="ui-card__body"><a class="ui-card__link" href="#b6">Popup variant 7</a><span class="ui-card__meta">#126 · 2 errors</span></div></article></li><li><article class="ui-card ui-card--media"><div class="ui-card__body"><a class="ui-card__link" href="#b7">Popup variant 8</a><span class="ui-card__meta">#127 · 2 errors</span></div></article></li><li><article class="ui-card ui-card--media"><div class="ui-card__body"><a class="ui-card__link" href="#b8">Popup variant 9</a><span class="ui-card__meta">#128 · 2 errors</span></div></article></li><li><article class="ui-card ui-card--media"><div class="ui-card__body"><a class="ui-card__link" href="#b9">Popup variant 10</a><span class="ui-card__meta">#129 · 2 errors</span></div></article></li><li><article class="ui-card ui-card--media"><div class="ui-card__body"><a class="ui-card__link" href="#b10">Popup variant 11</a><span class="ui-card__meta">#130 · 2 errors</span></div></article></li><li><article class="ui-card ui-card--media"><div class="ui-card__body"><a class="ui-card__link" href="#b11">Popup variant 12</a><span class="ui-card__meta">#131 · 2 errors</span></div></article></li></ol><details class="ui-board__more"><summary class="ui-btn ui-btn--sm">Show 2 more</summary><ol class="ui-board__list"><li><article class="ui-card ui-card--media"><div class="ui-card__body"><a class="ui-card__link" href="#b12">Popup variant 13</a><span class="ui-card__meta">#132 · 2 errors</span></div></article></li><li><article class="ui-card ui-card--media"><div class="ui-card__body"><a class="ui-card__link" href="#b13">Popup variant 14</a><span class="ui-card__meta">#133 · 2 errors</span></div></article></li></ol></details></section><section class="ui-board__col" data-col="review" aria-labelledby="ui-board-review"><header class="ui-board__head"><span class="ui-board__dot ui-board__dot--info" aria-hidden="true"></span><span class="ui-board__name" id="ui-board-review">Review</span><span class="ui-board__count">2</span></header><ol class="ui-board__list"><li><article class="ui-card ui-card--media"><div class="ui-card__body"><a class="ui-card__link" href="#b40">Countdown bar, 6 frames</a><span class="ui-card__meta">#160 · 2 errors</span></div></article></li><li><article class="ui-card ui-card--media"><div class="ui-card__body"><a class="ui-card__link" href="#b41">Spin to win, no bait</a><span class="ui-card__meta">#161 · 2 errors</span></div></article></li></ol></section><section class="ui-board__col" data-col="done" aria-labelledby="ui-board-done"><header class="ui-board__head"><span class="ui-board__dot ui-board__dot--success" aria-hidden="true"></span><span class="ui-board__name" id="ui-board-done">Done</span><span class="ui-board__count">0</span></header><p class="ui-board__empty">Nothing here</p></section></div></div><details class="cat-code"><summary>Markup</summary><pre><code><div class="ui-board" role="region" aria-label="Element pipeline">
|
|
2219
|
+
<section class="ui-board__col" data-col="todo" aria-labelledby="ui-board-todo">
|
|
2220
|
+
<header class="ui-board__head">
|
|
2221
|
+
<span class="ui-board__dot" aria-hidden="true">
|
|
2222
|
+
</span>
|
|
2223
|
+
<span class="ui-board__name" id="ui-board-todo">To do</span>
|
|
2224
|
+
<span class="ui-board__count">14</span>
|
|
2225
|
+
</header>
|
|
2226
|
+
<ol class="ui-board__list">
|
|
2227
|
+
<li>
|
|
2228
|
+
<article class="ui-card ui-card--media">
|
|
2229
|
+
<div class="ui-card__body">
|
|
2230
|
+
<a class="ui-card__link" href="#b0">Popup variant 1</a>
|
|
2231
|
+
<span class="ui-card__meta">#120 · 2 errors</span>
|
|
2232
|
+
</div>
|
|
2233
|
+
</article>
|
|
2234
|
+
</li>
|
|
2235
|
+
<li>
|
|
2236
|
+
<article class="ui-card ui-card--media">
|
|
2237
|
+
<div class="ui-card__body">
|
|
2238
|
+
<a class="ui-card__link" href="#b1">Popup variant 2</a>
|
|
2239
|
+
<span class="ui-card__meta">#121 · 2 errors</span>
|
|
2240
|
+
</div>
|
|
2241
|
+
</article>
|
|
2242
|
+
</li>
|
|
2243
|
+
<li>
|
|
2244
|
+
<article class="ui-card ui-card--media">
|
|
2245
|
+
<div class="ui-card__body">
|
|
2246
|
+
<a class="ui-card__link" href="#b2">Popup variant 3</a>
|
|
2247
|
+
<span class="ui-card__meta">#122 · 2 errors</span>
|
|
2248
|
+
</div>
|
|
2249
|
+
</article>
|
|
2250
|
+
</li>
|
|
2251
|
+
<li>
|
|
2252
|
+
<article class="ui-card ui-card--media">
|
|
2253
|
+
<div class="ui-card__body">
|
|
2254
|
+
<a class="ui-card__link" href="#b3">Popup variant 4</a>
|
|
2255
|
+
<span class="ui-card__meta">#123 · 2 errors</span>
|
|
2256
|
+
</div>
|
|
2257
|
+
</article>
|
|
2258
|
+
</li>
|
|
2259
|
+
<li>
|
|
2260
|
+
<article class="ui-card ui-card--media">
|
|
2261
|
+
<div class="ui-card__body">
|
|
2262
|
+
<a class="ui-card__link" href="#b4">Popup variant 5</a>
|
|
2263
|
+
<span class="ui-card__meta">#124 · 2 errors</span>
|
|
2264
|
+
</div>
|
|
2265
|
+
</article>
|
|
2266
|
+
</li>
|
|
2267
|
+
<li>
|
|
2268
|
+
<article class="ui-card ui-card--media">
|
|
2269
|
+
<div class="ui-card__body">
|
|
2270
|
+
<a class="ui-card__link" href="#b5">Popup variant 6</a>
|
|
2271
|
+
<span class="ui-card__meta">#125 · 2 errors</span>
|
|
2272
|
+
</div>
|
|
2273
|
+
</article>
|
|
2274
|
+
</li>
|
|
2275
|
+
<li>
|
|
2276
|
+
<article class="ui-card ui-card--media">
|
|
2277
|
+
<div class="ui-card__body">
|
|
2278
|
+
<a class="ui-card__link" href="#b6">Popup variant 7</a>
|
|
2279
|
+
<span class="ui-card__meta">#126 · 2 errors</span>
|
|
2280
|
+
</div>
|
|
2281
|
+
</article>
|
|
2282
|
+
</li>
|
|
2283
|
+
<li>
|
|
2284
|
+
<article class="ui-card ui-card--media">
|
|
2285
|
+
<div class="ui-card__body">
|
|
2286
|
+
<a class="ui-card__link" href="#b7">Popup variant 8</a>
|
|
2287
|
+
<span class="ui-card__meta">#127 · 2 errors</span>
|
|
2288
|
+
</div>
|
|
2289
|
+
</article>
|
|
2290
|
+
</li>
|
|
2291
|
+
<li>
|
|
2292
|
+
<article class="ui-card ui-card--media">
|
|
2293
|
+
<div class="ui-card__body">
|
|
2294
|
+
<a class="ui-card__link" href="#b8">Popup variant 9</a>
|
|
2295
|
+
<span class="ui-card__meta">#128 · 2 errors</span>
|
|
2296
|
+
</div>
|
|
2297
|
+
</article>
|
|
2298
|
+
</li>
|
|
2299
|
+
<li>
|
|
2300
|
+
<article class="ui-card ui-card--media">
|
|
2301
|
+
<div class="ui-card__body">
|
|
2302
|
+
<a class="ui-card__link" href="#b9">Popup variant 10</a>
|
|
2303
|
+
<span class="ui-card__meta">#129 · 2 errors</span>
|
|
2304
|
+
</div>
|
|
2305
|
+
</article>
|
|
2306
|
+
</li>
|
|
2307
|
+
<li>
|
|
2308
|
+
<article class="ui-card ui-card--media">
|
|
2309
|
+
<div class="ui-card__body">
|
|
2310
|
+
<a class="ui-card__link" href="#b10">Popup variant 11</a>
|
|
2311
|
+
<span class="ui-card__meta">#130 · 2 errors</span>
|
|
2312
|
+
</div>
|
|
2313
|
+
</article>
|
|
2314
|
+
</li>
|
|
2315
|
+
<li>
|
|
2316
|
+
<article class="ui-card ui-card--media">
|
|
2317
|
+
<div class="ui-card__body">
|
|
2318
|
+
<a class="ui-card__link" href="#b11">Popup variant 12</a>
|
|
2319
|
+
<span class="ui-card__meta">#131 · 2 errors</span>
|
|
2320
|
+
</div>
|
|
2321
|
+
</article>
|
|
2322
|
+
</li>
|
|
2323
|
+
</ol>
|
|
2324
|
+
<details class="ui-board__more">
|
|
2325
|
+
<summary class="ui-btn ui-btn--sm">Show 2 more</summary>
|
|
2326
|
+
<ol class="ui-board__list">
|
|
2327
|
+
<li>
|
|
2328
|
+
<article class="ui-card ui-card--media">
|
|
2329
|
+
<div class="ui-card__body">
|
|
2330
|
+
<a class="ui-card__link" href="#b12">Popup variant 13</a>
|
|
2331
|
+
<span class="ui-card__meta">#132 · 2 errors</span>
|
|
2332
|
+
</div>
|
|
2333
|
+
</article>
|
|
2334
|
+
</li>
|
|
2335
|
+
<li>
|
|
2336
|
+
<article class="ui-card ui-card--media">
|
|
2337
|
+
<div class="ui-card__body">
|
|
2338
|
+
<a class="ui-card__link" href="#b13">Popup variant 14</a>
|
|
2339
|
+
<span class="ui-card__meta">#133 · 2 errors</span>
|
|
2340
|
+
</div>
|
|
2341
|
+
</article>
|
|
2342
|
+
</li>
|
|
2343
|
+
</ol>
|
|
2344
|
+
</details>
|
|
2345
|
+
</section>
|
|
2346
|
+
<section class="ui-board__col" data-col="review" aria-labelledby="ui-board-review">
|
|
2347
|
+
<header class="ui-board__head">
|
|
2348
|
+
<span class="ui-board__dot ui-board__dot--info" aria-hidden="true">
|
|
2349
|
+
</span>
|
|
2350
|
+
<span class="ui-board__name" id="ui-board-review">Review</span>
|
|
2351
|
+
<span class="ui-board__count">2</span>
|
|
2352
|
+
</header>
|
|
2353
|
+
<ol class="ui-board__list">
|
|
2354
|
+
<li>
|
|
2355
|
+
<article class="ui-card ui-card--media">
|
|
2356
|
+
<div class="ui-card__body">
|
|
2357
|
+
<a class="ui-card__link" href="#b40">Countdown bar, 6 frames</a>
|
|
2358
|
+
<span class="ui-card__meta">#160 · 2 errors</span>
|
|
2359
|
+
</div>
|
|
2360
|
+
</article>
|
|
2361
|
+
</li>
|
|
2362
|
+
<li>
|
|
2363
|
+
<article class="ui-card ui-card--media">
|
|
2364
|
+
<div class="ui-card__body">
|
|
2365
|
+
<a class="ui-card__link" href="#b41">Spin to win, no bait</a>
|
|
2366
|
+
<span class="ui-card__meta">#161 · 2 errors</span>
|
|
2367
|
+
</div>
|
|
2368
|
+
</article>
|
|
2369
|
+
</li>
|
|
2370
|
+
</ol>
|
|
2371
|
+
</section>
|
|
2372
|
+
<section class="ui-board__col" data-col="done" aria-labelledby="ui-board-done">
|
|
2373
|
+
<header class="ui-board__head">
|
|
2374
|
+
<span class="ui-board__dot ui-board__dot--success" aria-hidden="true">
|
|
2375
|
+
</span>
|
|
2376
|
+
<span class="ui-board__name" id="ui-board-done">Done</span>
|
|
2377
|
+
<span class="ui-board__count">0</span>
|
|
2378
|
+
</header>
|
|
2379
|
+
<p class="ui-board__empty">Nothing here</p>
|
|
2380
|
+
</section>
|
|
2381
|
+
</div></code></pre></details></figure><figure class="cat-demo cat-screen"><figcaption>6 · Board ở 390px: cột 78% bề ngang, cuộn ngang có snap, không xếp chồng</figcaption><div class="cat-wide"><iframe title="6 · Board ở 390px: cột 78% bề ngang, cuộn ngang có snap, không xếp chồng" style="height:520px;width:390px" srcdoc="<!doctype html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="../gemboss-ui.css"><link rel="stylesheet" href="../src/collections.css"><link rel="stylesheet" href="../src/reactions.css"></head><body><div style="padding:16px"><div class="ui-board" role="region" aria-label="Element pipeline"><section class="ui-board__col" data-col="todo" aria-labelledby="ui-board-todo"><header class="ui-board__head"><span class="ui-board__dot" aria-hidden="true"></span><span class="ui-board__name" id="ui-board-todo">To do</span><span class="ui-board__count">14</span></header><ol class="ui-board__list"><li><article class="ui-card ui-card--media"><div class="ui-card__body"><a class="ui-card__link" href="#b0">Popup variant 1</a><span class="ui-card__meta">#120 · 2 errors</span></div></article></li><li><article class="ui-card ui-card--media"><div class="ui-card__body"><a class="ui-card__link" href="#b1">Popup variant 2</a><span class="ui-card__meta">#121 · 2 errors</span></div></article></li><li><article class="ui-card ui-card--media"><div class="ui-card__body"><a class="ui-card__link" href="#b2">Popup variant 3</a><span class="ui-card__meta">#122 · 2 errors</span></div></article></li><li><article class="ui-card ui-card--media"><div class="ui-card__body"><a class="ui-card__link" href="#b3">Popup variant 4</a><span class="ui-card__meta">#123 · 2 errors</span></div></article></li><li><article class="ui-card ui-card--media"><div class="ui-card__body"><a class="ui-card__link" href="#b4">Popup variant 5</a><span class="ui-card__meta">#124 · 2 errors</span></div></article></li><li><article class="ui-card ui-card--media"><div class="ui-card__body"><a class="ui-card__link" href="#b5">Popup variant 6</a><span class="ui-card__meta">#125 · 2 errors</span></div></article></li><li><article class="ui-card ui-card--media"><div class="ui-card__body"><a class="ui-card__link" href="#b6">Popup variant 7</a><span class="ui-card__meta">#126 · 2 errors</span></div></article></li><li><article class="ui-card ui-card--media"><div class="ui-card__body"><a class="ui-card__link" href="#b7">Popup variant 8</a><span class="ui-card__meta">#127 · 2 errors</span></div></article></li><li><article class="ui-card ui-card--media"><div class="ui-card__body"><a class="ui-card__link" href="#b8">Popup variant 9</a><span class="ui-card__meta">#128 · 2 errors</span></div></article></li><li><article class="ui-card ui-card--media"><div class="ui-card__body"><a class="ui-card__link" href="#b9">Popup variant 10</a><span class="ui-card__meta">#129 · 2 errors</span></div></article></li><li><article class="ui-card ui-card--media"><div class="ui-card__body"><a class="ui-card__link" href="#b10">Popup variant 11</a><span class="ui-card__meta">#130 · 2 errors</span></div></article></li><li><article class="ui-card ui-card--media"><div class="ui-card__body"><a class="ui-card__link" href="#b11">Popup variant 12</a><span class="ui-card__meta">#131 · 2 errors</span></div></article></li></ol><details class="ui-board__more"><summary class="ui-btn ui-btn--sm">Show 2 more</summary><ol class="ui-board__list"><li><article class="ui-card ui-card--media"><div class="ui-card__body"><a class="ui-card__link" href="#b12">Popup variant 13</a><span class="ui-card__meta">#132 · 2 errors</span></div></article></li><li><article class="ui-card ui-card--media"><div class="ui-card__body"><a class="ui-card__link" href="#b13">Popup variant 14</a><span class="ui-card__meta">#133 · 2 errors</span></div></article></li></ol></details></section><section class="ui-board__col" data-col="review" aria-labelledby="ui-board-review"><header class="ui-board__head"><span class="ui-board__dot ui-board__dot--info" aria-hidden="true"></span><span class="ui-board__name" id="ui-board-review">Review</span><span class="ui-board__count">2</span></header><ol class="ui-board__list"><li><article class="ui-card ui-card--media"><div class="ui-card__body"><a class="ui-card__link" href="#b40">Countdown bar, 6 frames</a><span class="ui-card__meta">#160 · 2 errors</span></div></article></li><li><article class="ui-card ui-card--media"><div class="ui-card__body"><a class="ui-card__link" href="#b41">Spin to win, no bait</a><span class="ui-card__meta">#161 · 2 errors</span></div></article></li></ol></section><section class="ui-board__col" data-col="done" aria-labelledby="ui-board-done"><header class="ui-board__head"><span class="ui-board__dot ui-board__dot--success" aria-hidden="true"></span><span class="ui-board__name" id="ui-board-done">Done</span><span class="ui-board__count">0</span></header><p class="ui-board__empty">Nothing here</p></section></div></div><script src="../src/kit-plain.js"></script></body></html>"></iframe></div><details class="cat-code"><summary>Markup</summary><pre><code><div style="padding:16px">
|
|
2382
|
+
<div class="ui-board" role="region" aria-label="Element pipeline">
|
|
2383
|
+
<section class="ui-board__col" data-col="todo" aria-labelledby="ui-board-todo">
|
|
2384
|
+
<header class="ui-board__head">
|
|
2385
|
+
<span class="ui-board__dot" aria-hidden="true">
|
|
2386
|
+
</span>
|
|
2387
|
+
<span class="ui-board__name" id="ui-board-todo">To do</span>
|
|
2388
|
+
<span class="ui-board__count">14</span>
|
|
2389
|
+
</header>
|
|
2390
|
+
<ol class="ui-board__list">
|
|
2391
|
+
<li>
|
|
2392
|
+
<article class="ui-card ui-card--media">
|
|
2393
|
+
<div class="ui-card__body">
|
|
2394
|
+
<a class="ui-card__link" href="#b0">Popup variant 1</a>
|
|
2395
|
+
<span class="ui-card__meta">#120 · 2 errors</span>
|
|
2396
|
+
</div>
|
|
2397
|
+
</article>
|
|
2398
|
+
</li>
|
|
2399
|
+
<li>
|
|
2400
|
+
<article class="ui-card ui-card--media">
|
|
2401
|
+
<div class="ui-card__body">
|
|
2402
|
+
<a class="ui-card__link" href="#b1">Popup variant 2</a>
|
|
2403
|
+
<span class="ui-card__meta">#121 · 2 errors</span>
|
|
2404
|
+
</div>
|
|
2405
|
+
</article>
|
|
2406
|
+
</li>
|
|
2407
|
+
<li>
|
|
2408
|
+
<article class="ui-card ui-card--media">
|
|
2409
|
+
<div class="ui-card__body">
|
|
2410
|
+
<a class="ui-card__link" href="#b2">Popup variant 3</a>
|
|
2411
|
+
<span class="ui-card__meta">#122 · 2 errors</span>
|
|
2412
|
+
</div>
|
|
2413
|
+
</article>
|
|
2414
|
+
</li>
|
|
2415
|
+
<li>
|
|
2416
|
+
<article class="ui-card ui-card--media">
|
|
2417
|
+
<div class="ui-card__body">
|
|
2418
|
+
<a class="ui-card__link" href="#b3">Popup variant 4</a>
|
|
2419
|
+
<span class="ui-card__meta">#123 · 2 errors</span>
|
|
2420
|
+
</div>
|
|
2421
|
+
</article>
|
|
2422
|
+
</li>
|
|
2423
|
+
<li>
|
|
2424
|
+
<article class="ui-card ui-card--media">
|
|
2425
|
+
<div class="ui-card__body">
|
|
2426
|
+
<a class="ui-card__link" href="#b4">Popup variant 5</a>
|
|
2427
|
+
<span class="ui-card__meta">#124 · 2 errors</span>
|
|
2428
|
+
</div>
|
|
2429
|
+
</article>
|
|
2430
|
+
</li>
|
|
2431
|
+
<li>
|
|
2432
|
+
<article class="ui-card ui-card--media">
|
|
2433
|
+
<div class="ui-card__body">
|
|
2434
|
+
<a class="ui-card__link" href="#b5">Popup variant 6</a>
|
|
2435
|
+
<span class="ui-card__meta">#125 · 2 errors</span>
|
|
2436
|
+
</div>
|
|
2437
|
+
</article>
|
|
2438
|
+
</li>
|
|
2439
|
+
<li>
|
|
2440
|
+
<article class="ui-card ui-card--media">
|
|
2441
|
+
<div class="ui-card__body">
|
|
2442
|
+
<a class="ui-card__link" href="#b6">Popup variant 7</a>
|
|
2443
|
+
<span class="ui-card__meta">#126 · 2 errors</span>
|
|
2444
|
+
</div>
|
|
2445
|
+
</article>
|
|
2446
|
+
</li>
|
|
2447
|
+
<li>
|
|
2448
|
+
<article class="ui-card ui-card--media">
|
|
2449
|
+
<div class="ui-card__body">
|
|
2450
|
+
<a class="ui-card__link" href="#b7">Popup variant 8</a>
|
|
2451
|
+
<span class="ui-card__meta">#127 · 2 errors</span>
|
|
2452
|
+
</div>
|
|
2453
|
+
</article>
|
|
2454
|
+
</li>
|
|
2455
|
+
<li>
|
|
2456
|
+
<article class="ui-card ui-card--media">
|
|
2457
|
+
<div class="ui-card__body">
|
|
2458
|
+
<a class="ui-card__link" href="#b8">Popup variant 9</a>
|
|
2459
|
+
<span class="ui-card__meta">#128 · 2 errors</span>
|
|
2460
|
+
</div>
|
|
2461
|
+
</article>
|
|
2462
|
+
</li>
|
|
2463
|
+
<li>
|
|
2464
|
+
<article class="ui-card ui-card--media">
|
|
2465
|
+
<div class="ui-card__body">
|
|
2466
|
+
<a class="ui-card__link" href="#b9">Popup variant 10</a>
|
|
2467
|
+
<span class="ui-card__meta">#129 · 2 errors</span>
|
|
2468
|
+
</div>
|
|
2469
|
+
</article>
|
|
2470
|
+
</li>
|
|
2471
|
+
<li>
|
|
2472
|
+
<article class="ui-card ui-card--media">
|
|
2473
|
+
<div class="ui-card__body">
|
|
2474
|
+
<a class="ui-card__link" href="#b10">Popup variant 11</a>
|
|
2475
|
+
<span class="ui-card__meta">#130 · 2 errors</span>
|
|
2476
|
+
</div>
|
|
2477
|
+
</article>
|
|
2478
|
+
</li>
|
|
2479
|
+
<li>
|
|
2480
|
+
<article class="ui-card ui-card--media">
|
|
2481
|
+
<div class="ui-card__body">
|
|
2482
|
+
<a class="ui-card__link" href="#b11">Popup variant 12</a>
|
|
2483
|
+
<span class="ui-card__meta">#131 · 2 errors</span>
|
|
2484
|
+
</div>
|
|
2485
|
+
</article>
|
|
2486
|
+
</li>
|
|
2487
|
+
</ol>
|
|
2488
|
+
<details class="ui-board__more">
|
|
2489
|
+
<summary class="ui-btn ui-btn--sm">Show 2 more</summary>
|
|
2490
|
+
<ol class="ui-board__list">
|
|
2491
|
+
<li>
|
|
2492
|
+
<article class="ui-card ui-card--media">
|
|
2493
|
+
<div class="ui-card__body">
|
|
2494
|
+
<a class="ui-card__link" href="#b12">Popup variant 13</a>
|
|
2495
|
+
<span class="ui-card__meta">#132 · 2 errors</span>
|
|
2496
|
+
</div>
|
|
2497
|
+
</article>
|
|
2498
|
+
</li>
|
|
2499
|
+
<li>
|
|
2500
|
+
<article class="ui-card ui-card--media">
|
|
2501
|
+
<div class="ui-card__body">
|
|
2502
|
+
<a class="ui-card__link" href="#b13">Popup variant 14</a>
|
|
2503
|
+
<span class="ui-card__meta">#133 · 2 errors</span>
|
|
2504
|
+
</div>
|
|
2505
|
+
</article>
|
|
2506
|
+
</li>
|
|
2507
|
+
</ol>
|
|
2508
|
+
</details>
|
|
2509
|
+
</section>
|
|
2510
|
+
<section class="ui-board__col" data-col="review" aria-labelledby="ui-board-review">
|
|
2511
|
+
<header class="ui-board__head">
|
|
2512
|
+
<span class="ui-board__dot ui-board__dot--info" aria-hidden="true">
|
|
2513
|
+
</span>
|
|
2514
|
+
<span class="ui-board__name" id="ui-board-review">Review</span>
|
|
2515
|
+
<span class="ui-board__count">2</span>
|
|
2516
|
+
</header>
|
|
2517
|
+
<ol class="ui-board__list">
|
|
2518
|
+
<li>
|
|
2519
|
+
<article class="ui-card ui-card--media">
|
|
2520
|
+
<div class="ui-card__body">
|
|
2521
|
+
<a class="ui-card__link" href="#b40">Countdown bar, 6 frames</a>
|
|
2522
|
+
<span class="ui-card__meta">#160 · 2 errors</span>
|
|
2523
|
+
</div>
|
|
2524
|
+
</article>
|
|
2525
|
+
</li>
|
|
2526
|
+
<li>
|
|
2527
|
+
<article class="ui-card ui-card--media">
|
|
2528
|
+
<div class="ui-card__body">
|
|
2529
|
+
<a class="ui-card__link" href="#b41">Spin to win, no bait</a>
|
|
2530
|
+
<span class="ui-card__meta">#161 · 2 errors</span>
|
|
2531
|
+
</div>
|
|
2532
|
+
</article>
|
|
2533
|
+
</li>
|
|
2534
|
+
</ol>
|
|
2535
|
+
</section>
|
|
2536
|
+
<section class="ui-board__col" data-col="done" aria-labelledby="ui-board-done">
|
|
2537
|
+
<header class="ui-board__head">
|
|
2538
|
+
<span class="ui-board__dot ui-board__dot--success" aria-hidden="true">
|
|
2539
|
+
</span>
|
|
2540
|
+
<span class="ui-board__name" id="ui-board-done">Done</span>
|
|
2541
|
+
<span class="ui-board__count">0</span>
|
|
2542
|
+
</header>
|
|
2543
|
+
<p class="ui-board__empty">Nothing here</p>
|
|
2544
|
+
</section>
|
|
2545
|
+
</div>
|
|
2546
|
+
</div></code></pre></details></figure><figure class="cat-demo"><figcaption>6 · Board chuyển thẻ được (0.18.0, <code>onMove</code> / <code>data-gb-move</code>): kéo thả, HOẶC Tab tới thẻ → Space nhấc → mũi tên → Space thả (Escape trả về); vùng aria-live đọc từng bước; thả xong bắn <code>gb:move</code> { id, from, to, index }. Không bật thì board chỉ đọc như cũ</figcaption><div class="cat-live"><div class="ui-board" id="catalog-move" role="region" aria-label="Review queue" data-gb-move=""><p id="catalog-move-move-help" hidden="">Press Space to pick the card up, arrow keys to move it, Space to drop it, Escape to cancel.</p><div class="ui-sr-only" aria-live="assertive" data-gb-live=""></div><section class="ui-board__col" data-col="draft" aria-labelledby="catalog-move-draft"><header class="ui-board__head"><span class="ui-board__dot" aria-hidden="true"></span><span class="ui-board__name" id="catalog-move-draft">Draft</span><span class="ui-board__count">3</span></header><ol class="ui-board__list"><li data-id="d14" data-name="Hero with countdown" tabindex="0" draggable="true" aria-describedby="catalog-move-move-help"><article class="ui-card ui-card--media"><div class="ui-card__body"><a class="ui-card__link" href="#d14">Hero with countdown</a><span class="ui-card__meta">#14 · Section</span></div></article></li><li data-id="d15" data-name="Bundle picker" tabindex="0" draggable="true" aria-describedby="catalog-move-move-help"><article class="ui-card ui-card--media"><div class="ui-card__body"><a class="ui-card__link" href="#d15">Bundle picker</a><span class="ui-card__meta">#15 · Section</span></div></article></li><li data-id="d16" data-name="Reviews carousel" tabindex="0" draggable="true" aria-describedby="catalog-move-move-help"><article class="ui-card ui-card--media"><div class="ui-card__body"><a class="ui-card__link" href="#d16">Reviews carousel</a><span class="ui-card__meta">#16 · Section</span></div></article></li></ol></section><section class="ui-board__col" data-col="review" aria-labelledby="catalog-move-review"><header class="ui-board__head"><span class="ui-board__dot ui-board__dot--info" aria-hidden="true"></span><span class="ui-board__name" id="catalog-move-review">In review</span><span class="ui-board__count">1</span></header><ol class="ui-board__list"><li data-id="r21" data-name="FAQ accordion" tabindex="0" draggable="true" aria-describedby="catalog-move-move-help"><article class="ui-card ui-card--media"><div class="ui-card__body"><a class="ui-card__link" href="#r21">FAQ accordion</a><span class="ui-card__meta">#21 · Section</span></div></article></li></ol></section><section class="ui-board__col" data-col="approved" aria-labelledby="catalog-move-approved"><header class="ui-board__head"><span class="ui-board__dot ui-board__dot--success" aria-hidden="true"></span><span class="ui-board__name" id="catalog-move-approved">Approved</span><span class="ui-board__count">0</span></header><p class="ui-board__empty">Nothing here</p></section></div></div><details class="cat-code"><summary>Markup</summary><pre><code><div class="ui-board" id="catalog-move" role="region" aria-label="Review queue" data-gb-move="">
|
|
2547
|
+
<p id="catalog-move-move-help" hidden="">Press Space to pick the card up, arrow keys to move it, Space to drop it, Escape to cancel.</p>
|
|
2548
|
+
<div class="ui-sr-only" aria-live="assertive" data-gb-live="">
|
|
2549
|
+
</div>
|
|
2550
|
+
<section class="ui-board__col" data-col="draft" aria-labelledby="catalog-move-draft">
|
|
2551
|
+
<header class="ui-board__head">
|
|
2552
|
+
<span class="ui-board__dot" aria-hidden="true">
|
|
2553
|
+
</span>
|
|
2554
|
+
<span class="ui-board__name" id="catalog-move-draft">Draft</span>
|
|
2555
|
+
<span class="ui-board__count">3</span>
|
|
2556
|
+
</header>
|
|
2557
|
+
<ol class="ui-board__list">
|
|
2558
|
+
<li data-id="d14" data-name="Hero with countdown" tabindex="0" draggable="true" aria-describedby="catalog-move-move-help">
|
|
2559
|
+
<article class="ui-card ui-card--media">
|
|
2560
|
+
<div class="ui-card__body">
|
|
2561
|
+
<a class="ui-card__link" href="#d14">Hero with countdown</a>
|
|
2562
|
+
<span class="ui-card__meta">#14 · Section</span>
|
|
2563
|
+
</div>
|
|
2564
|
+
</article>
|
|
2565
|
+
</li>
|
|
2566
|
+
<li data-id="d15" data-name="Bundle picker" tabindex="0" draggable="true" aria-describedby="catalog-move-move-help">
|
|
2567
|
+
<article class="ui-card ui-card--media">
|
|
2568
|
+
<div class="ui-card__body">
|
|
2569
|
+
<a class="ui-card__link" href="#d15">Bundle picker</a>
|
|
2570
|
+
<span class="ui-card__meta">#15 · Section</span>
|
|
2571
|
+
</div>
|
|
2572
|
+
</article>
|
|
2573
|
+
</li>
|
|
2574
|
+
<li data-id="d16" data-name="Reviews carousel" tabindex="0" draggable="true" aria-describedby="catalog-move-move-help">
|
|
2575
|
+
<article class="ui-card ui-card--media">
|
|
2576
|
+
<div class="ui-card__body">
|
|
2577
|
+
<a class="ui-card__link" href="#d16">Reviews carousel</a>
|
|
2578
|
+
<span class="ui-card__meta">#16 · Section</span>
|
|
2579
|
+
</div>
|
|
2580
|
+
</article>
|
|
2581
|
+
</li>
|
|
2582
|
+
</ol>
|
|
2583
|
+
</section>
|
|
2584
|
+
<section class="ui-board__col" data-col="review" aria-labelledby="catalog-move-review">
|
|
2585
|
+
<header class="ui-board__head">
|
|
2586
|
+
<span class="ui-board__dot ui-board__dot--info" aria-hidden="true">
|
|
2587
|
+
</span>
|
|
2588
|
+
<span class="ui-board__name" id="catalog-move-review">In review</span>
|
|
2589
|
+
<span class="ui-board__count">1</span>
|
|
2590
|
+
</header>
|
|
2591
|
+
<ol class="ui-board__list">
|
|
2592
|
+
<li data-id="r21" data-name="FAQ accordion" tabindex="0" draggable="true" aria-describedby="catalog-move-move-help">
|
|
2593
|
+
<article class="ui-card ui-card--media">
|
|
2594
|
+
<div class="ui-card__body">
|
|
2595
|
+
<a class="ui-card__link" href="#r21">FAQ accordion</a>
|
|
2596
|
+
<span class="ui-card__meta">#21 · Section</span>
|
|
2597
|
+
</div>
|
|
2598
|
+
</article>
|
|
2599
|
+
</li>
|
|
2600
|
+
</ol>
|
|
2601
|
+
</section>
|
|
2602
|
+
<section class="ui-board__col" data-col="approved" aria-labelledby="catalog-move-approved">
|
|
2603
|
+
<header class="ui-board__head">
|
|
2604
|
+
<span class="ui-board__dot ui-board__dot--success" aria-hidden="true">
|
|
2605
|
+
</span>
|
|
2606
|
+
<span class="ui-board__name" id="catalog-move-approved">Approved</span>
|
|
2607
|
+
<span class="ui-board__count">0</span>
|
|
2608
|
+
</header>
|
|
2609
|
+
<p class="ui-board__empty">Nothing here</p>
|
|
2610
|
+
</section>
|
|
2611
|
+
</div></code></pre></details></figure><figure class="cat-demo cat-screen"><figcaption>6 · Board phân trang THEO SERVER (0.18.0, <code>hasMore</code> + <code>moreHref</code>): mỗi cột chỉ có 12 thẻ trong HTML, MỘT link "Show 24 more" (<code>?col=x&amp;page=2</code>); kit-plain.js tải trang đó và nối thẻ mới tại chỗ, React dùng <code>onLoadMore</code> hoặc <code>linkAs</code></figcaption><div class="cat-wide"><iframe title="6 · Board phân trang THEO SERVER (0.18.0, <code>hasMore</code> + <code>moreHref</code>): mỗi cột chỉ có 12 thẻ trong HTML, MỘT link "Show 24 more" (<code>?col=x&amp;page=2</code>); kit-plain.js tải trang đó và nối thẻ mới tại chỗ, React dùng <code>onLoadMore</code> hoặc <code>linkAs</code>" style="height:560px;width:900px" srcdoc="<!doctype html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="../gemboss-ui.css"><link rel="stylesheet" href="../src/collections.css"><link rel="stylesheet" href="../src/reactions.css"></head><body><div style="padding:16px"><div class="ui-board" id="catalog-paged" role="region" aria-label="Ideas"><section class="ui-board__col" data-col="enough" aria-labelledby="catalog-paged-enough"><header class="ui-board__head"><span class="ui-board__dot ui-board__dot--success" aria-hidden="true"></span><span class="ui-board__name" id="catalog-paged-enough">Ready to write</span><span class="ui-board__count">412</span></header><ol class="ui-board__list"><li data-id="i0" data-name="Idea 1"><article class="ui-card ui-card--media"><div class="ui-card__body"><a class="ui-card__link" href="#i0">Idea 1</a><span class="ui-card__meta">#0 · Section</span></div></article></li><li data-id="i1" data-name="Idea 2"><article class="ui-card ui-card--media"><div class="ui-card__body"><a class="ui-card__link" href="#i1">Idea 2</a><span class="ui-card__meta">#1 · Section</span></div></article></li><li data-id="i2" data-name="Idea 3"><article class="ui-card ui-card--media"><div class="ui-card__body"><a class="ui-card__link" href="#i2">Idea 3</a><span class="ui-card__meta">#2 · Section</span></div></article></li><li data-id="i3" data-name="Idea 4"><article class="ui-card ui-card--media"><div class="ui-card__body"><a class="ui-card__link" href="#i3">Idea 4</a><span class="ui-card__meta">#3 · Section</span></div></article></li><li data-id="i4" data-name="Idea 5"><article class="ui-card ui-card--media"><div class="ui-card__body"><a class="ui-card__link" href="#i4">Idea 5</a><span class="ui-card__meta">#4 · Section</span></div></article></li><li data-id="i5" data-name="Idea 6"><article class="ui-card ui-card--media"><div class="ui-card__body"><a class="ui-card__link" href="#i5">Idea 6</a><span class="ui-card__meta">#5 · Section</span></div></article></li><li data-id="i6" data-name="Idea 7"><article class="ui-card ui-card--media"><div class="ui-card__body"><a class="ui-card__link" href="#i6">Idea 7</a><span class="ui-card__meta">#6 · Section</span></div></article></li><li data-id="i7" data-name="Idea 8"><article class="ui-card ui-card--media"><div class="ui-card__body"><a class="ui-card__link" href="#i7">Idea 8</a><span class="ui-card__meta">#7 · Section</span></div></article></li><li data-id="i8" data-name="Idea 9"><article class="ui-card ui-card--media"><div class="ui-card__body"><a class="ui-card__link" href="#i8">Idea 9</a><span class="ui-card__meta">#8 · Section</span></div></article></li><li data-id="i9" data-name="Idea 10"><article class="ui-card ui-card--media"><div class="ui-card__body"><a class="ui-card__link" href="#i9">Idea 10</a><span class="ui-card__meta">#9 · Section</span></div></article></li><li data-id="i10" data-name="Idea 11"><article class="ui-card ui-card--media"><div class="ui-card__body"><a class="ui-card__link" href="#i10">Idea 11</a><span class="ui-card__meta">#10 · Section</span></div></article></li><li data-id="i11" data-name="Idea 12"><article class="ui-card ui-card--media"><div class="ui-card__body"><a class="ui-card__link" href="#i11">Idea 12</a><span class="ui-card__meta">#11 · Section</span></div></article></li></ol><div class="ui-more ui-board__next"><a class="ui-btn ui-btn--sm" href="#collections">Show 24 more</a></div></section><section class="ui-board__col" data-col="partial" aria-labelledby="catalog-paged-partial"><header class="ui-board__head"><span class="ui-board__dot ui-board__dot--warning" aria-hidden="true"></span><span class="ui-board__name" id="catalog-paged-partial">Needs more</span><span class="ui-board__count">9</span></header><ol class="ui-board__list"><li data-id="p0" data-name="Idea 100"><article class="ui-card ui-card--media"><div class="ui-card__body"><a class="ui-card__link" href="#p0">Idea 100</a><span class="ui-card__meta">#0 · Section</span></div></article></li><li data-id="p1" data-name="Idea 101"><article class="ui-card ui-card--media"><div class="ui-card__body"><a class="ui-card__link" href="#p1">Idea 101</a><span class="ui-card__meta">#1 · Section</span></div></article></li><li data-id="p2" data-name="Idea 102"><article class="ui-card ui-card--media"><div class="ui-card__body"><a class="ui-card__link" href="#p2">Idea 102</a><span class="ui-card__meta">#2 · Section</span></div></article></li><li data-id="p3" data-name="Idea 103"><article class="ui-card ui-card--media"><div class="ui-card__body"><a class="ui-card__link" href="#p3">Idea 103</a><span class="ui-card__meta">#3 · Section</span></div></article></li><li data-id="p4" data-name="Idea 104"><article class="ui-card ui-card--media"><div class="ui-card__body"><a class="ui-card__link" href="#p4">Idea 104</a><span class="ui-card__meta">#4 · Section</span></div></article></li><li data-id="p5" data-name="Idea 105"><article class="ui-card ui-card--media"><div class="ui-card__body"><a class="ui-card__link" href="#p5">Idea 105</a><span class="ui-card__meta">#5 · Section</span></div></article></li><li data-id="p6" data-name="Idea 106"><article class="ui-card ui-card--media"><div class="ui-card__body"><a class="ui-card__link" href="#p6">Idea 106</a><span class="ui-card__meta">#6 · Section</span></div></article></li><li data-id="p7" data-name="Idea 107"><article class="ui-card ui-card--media"><div class="ui-card__body"><a class="ui-card__link" href="#p7">Idea 107</a><span class="ui-card__meta">#7 · Section</span></div></article></li><li data-id="p8" data-name="Idea 108"><article class="ui-card ui-card--media"><div class="ui-card__body"><a class="ui-card__link" href="#p8">Idea 108</a><span class="ui-card__meta">#8 · Section</span></div></article></li></ol></section></div></div></body></html>"></iframe></div><details class="cat-code"><summary>Markup</summary><pre><code><div style="padding:16px">
|
|
2612
|
+
<div class="ui-board" id="catalog-paged" role="region" aria-label="Ideas">
|
|
2613
|
+
<section class="ui-board__col" data-col="enough" aria-labelledby="catalog-paged-enough">
|
|
2614
|
+
<header class="ui-board__head">
|
|
2615
|
+
<span class="ui-board__dot ui-board__dot--success" aria-hidden="true">
|
|
2616
|
+
</span>
|
|
2617
|
+
<span class="ui-board__name" id="catalog-paged-enough">Ready to write</span>
|
|
2618
|
+
<span class="ui-board__count">412</span>
|
|
2619
|
+
</header>
|
|
2620
|
+
<ol class="ui-board__list">
|
|
2621
|
+
<li data-id="i0" data-name="Idea 1">
|
|
2622
|
+
<article class="ui-card ui-card--media">
|
|
2623
|
+
<div class="ui-card__body">
|
|
2624
|
+
<a class="ui-card__link" href="#i0">Idea 1</a>
|
|
2625
|
+
<span class="ui-card__meta">#0 · Section</span>
|
|
2626
|
+
</div>
|
|
2627
|
+
</article>
|
|
2628
|
+
</li>
|
|
2629
|
+
<li data-id="i1" data-name="Idea 2">
|
|
2630
|
+
<article class="ui-card ui-card--media">
|
|
2631
|
+
<div class="ui-card__body">
|
|
2632
|
+
<a class="ui-card__link" href="#i1">Idea 2</a>
|
|
2633
|
+
<span class="ui-card__meta">#1 · Section</span>
|
|
2634
|
+
</div>
|
|
2635
|
+
</article>
|
|
2636
|
+
</li>
|
|
2637
|
+
<li data-id="i2" data-name="Idea 3">
|
|
2638
|
+
<article class="ui-card ui-card--media">
|
|
2639
|
+
<div class="ui-card__body">
|
|
2640
|
+
<a class="ui-card__link" href="#i2">Idea 3</a>
|
|
2641
|
+
<span class="ui-card__meta">#2 · Section</span>
|
|
2642
|
+
</div>
|
|
2643
|
+
</article>
|
|
2644
|
+
</li>
|
|
2645
|
+
<li data-id="i3" data-name="Idea 4">
|
|
2646
|
+
<article class="ui-card ui-card--media">
|
|
2647
|
+
<div class="ui-card__body">
|
|
2648
|
+
<a class="ui-card__link" href="#i3">Idea 4</a>
|
|
2649
|
+
<span class="ui-card__meta">#3 · Section</span>
|
|
2650
|
+
</div>
|
|
2651
|
+
</article>
|
|
2652
|
+
</li>
|
|
2653
|
+
<li data-id="i4" data-name="Idea 5">
|
|
2654
|
+
<article class="ui-card ui-card--media">
|
|
2655
|
+
<div class="ui-card__body">
|
|
2656
|
+
<a class="ui-card__link" href="#i4">Idea 5</a>
|
|
2657
|
+
<span class="ui-card__meta">#4 · Section</span>
|
|
2658
|
+
</div>
|
|
2659
|
+
</article>
|
|
2660
|
+
</li>
|
|
2661
|
+
<li data-id="i5" data-name="Idea 6">
|
|
2662
|
+
<article class="ui-card ui-card--media">
|
|
2663
|
+
<div class="ui-card__body">
|
|
2664
|
+
<a class="ui-card__link" href="#i5">Idea 6</a>
|
|
2665
|
+
<span class="ui-card__meta">#5 · Section</span>
|
|
2666
|
+
</div>
|
|
2667
|
+
</article>
|
|
2668
|
+
</li>
|
|
2669
|
+
<li data-id="i6" data-name="Idea 7">
|
|
2670
|
+
<article class="ui-card ui-card--media">
|
|
2671
|
+
<div class="ui-card__body">
|
|
2672
|
+
<a class="ui-card__link" href="#i6">Idea 7</a>
|
|
2673
|
+
<span class="ui-card__meta">#6 · Section</span>
|
|
2674
|
+
</div>
|
|
2675
|
+
</article>
|
|
2676
|
+
</li>
|
|
2677
|
+
<li data-id="i7" data-name="Idea 8">
|
|
2678
|
+
<article class="ui-card ui-card--media">
|
|
2679
|
+
<div class="ui-card__body">
|
|
2680
|
+
<a class="ui-card__link" href="#i7">Idea 8</a>
|
|
2681
|
+
<span class="ui-card__meta">#7 · Section</span>
|
|
2682
|
+
</div>
|
|
2683
|
+
</article>
|
|
2684
|
+
</li>
|
|
2685
|
+
<li data-id="i8" data-name="Idea 9">
|
|
2686
|
+
<article class="ui-card ui-card--media">
|
|
2687
|
+
<div class="ui-card__body">
|
|
2688
|
+
<a class="ui-card__link" href="#i8">Idea 9</a>
|
|
2689
|
+
<span class="ui-card__meta">#8 · Section</span>
|
|
2690
|
+
</div>
|
|
2691
|
+
</article>
|
|
2692
|
+
</li>
|
|
2693
|
+
<li data-id="i9" data-name="Idea 10">
|
|
2694
|
+
<article class="ui-card ui-card--media">
|
|
2695
|
+
<div class="ui-card__body">
|
|
2696
|
+
<a class="ui-card__link" href="#i9">Idea 10</a>
|
|
2697
|
+
<span class="ui-card__meta">#9 · Section</span>
|
|
2698
|
+
</div>
|
|
2699
|
+
</article>
|
|
2700
|
+
</li>
|
|
2701
|
+
<li data-id="i10" data-name="Idea 11">
|
|
2702
|
+
<article class="ui-card ui-card--media">
|
|
2703
|
+
<div class="ui-card__body">
|
|
2704
|
+
<a class="ui-card__link" href="#i10">Idea 11</a>
|
|
2705
|
+
<span class="ui-card__meta">#10 · Section</span>
|
|
2706
|
+
</div>
|
|
2707
|
+
</article>
|
|
2708
|
+
</li>
|
|
2709
|
+
<li data-id="i11" data-name="Idea 12">
|
|
2710
|
+
<article class="ui-card ui-card--media">
|
|
2711
|
+
<div class="ui-card__body">
|
|
2712
|
+
<a class="ui-card__link" href="#i11">Idea 12</a>
|
|
2713
|
+
<span class="ui-card__meta">#11 · Section</span>
|
|
2714
|
+
</div>
|
|
2715
|
+
</article>
|
|
2716
|
+
</li>
|
|
2717
|
+
</ol>
|
|
2718
|
+
<div class="ui-more ui-board__next">
|
|
2719
|
+
<a class="ui-btn ui-btn--sm" href="#collections">Show 24 more</a>
|
|
2720
|
+
</div>
|
|
2721
|
+
</section>
|
|
2722
|
+
<section class="ui-board__col" data-col="partial" aria-labelledby="catalog-paged-partial">
|
|
2723
|
+
<header class="ui-board__head">
|
|
2724
|
+
<span class="ui-board__dot ui-board__dot--warning" aria-hidden="true">
|
|
2725
|
+
</span>
|
|
2726
|
+
<span class="ui-board__name" id="catalog-paged-partial">Needs more</span>
|
|
2727
|
+
<span class="ui-board__count">9</span>
|
|
2728
|
+
</header>
|
|
2729
|
+
<ol class="ui-board__list">
|
|
2730
|
+
<li data-id="p0" data-name="Idea 100">
|
|
2731
|
+
<article class="ui-card ui-card--media">
|
|
2732
|
+
<div class="ui-card__body">
|
|
2733
|
+
<a class="ui-card__link" href="#p0">Idea 100</a>
|
|
2734
|
+
<span class="ui-card__meta">#0 · Section</span>
|
|
2735
|
+
</div>
|
|
2736
|
+
</article>
|
|
2737
|
+
</li>
|
|
2738
|
+
<li data-id="p1" data-name="Idea 101">
|
|
2739
|
+
<article class="ui-card ui-card--media">
|
|
2740
|
+
<div class="ui-card__body">
|
|
2741
|
+
<a class="ui-card__link" href="#p1">Idea 101</a>
|
|
2742
|
+
<span class="ui-card__meta">#1 · Section</span>
|
|
2743
|
+
</div>
|
|
2744
|
+
</article>
|
|
2745
|
+
</li>
|
|
2746
|
+
<li data-id="p2" data-name="Idea 102">
|
|
2747
|
+
<article class="ui-card ui-card--media">
|
|
2748
|
+
<div class="ui-card__body">
|
|
2749
|
+
<a class="ui-card__link" href="#p2">Idea 102</a>
|
|
2750
|
+
<span class="ui-card__meta">#2 · Section</span>
|
|
2751
|
+
</div>
|
|
2752
|
+
</article>
|
|
2753
|
+
</li>
|
|
2754
|
+
<li data-id="p3" data-name="Idea 103">
|
|
2755
|
+
<article class="ui-card ui-card--media">
|
|
2756
|
+
<div class="ui-card__body">
|
|
2757
|
+
<a class="ui-card__link" href="#p3">Idea 103</a>
|
|
2758
|
+
<span class="ui-card__meta">#3 · Section</span>
|
|
2759
|
+
</div>
|
|
2760
|
+
</article>
|
|
2761
|
+
</li>
|
|
2762
|
+
<li data-id="p4" data-name="Idea 104">
|
|
2763
|
+
<article class="ui-card ui-card--media">
|
|
2764
|
+
<div class="ui-card__body">
|
|
2765
|
+
<a class="ui-card__link" href="#p4">Idea 104</a>
|
|
2766
|
+
<span class="ui-card__meta">#4 · Section</span>
|
|
2767
|
+
</div>
|
|
2768
|
+
</article>
|
|
2769
|
+
</li>
|
|
2770
|
+
<li data-id="p5" data-name="Idea 105">
|
|
2771
|
+
<article class="ui-card ui-card--media">
|
|
2772
|
+
<div class="ui-card__body">
|
|
2773
|
+
<a class="ui-card__link" href="#p5">Idea 105</a>
|
|
2774
|
+
<span class="ui-card__meta">#5 · Section</span>
|
|
2775
|
+
</div>
|
|
2776
|
+
</article>
|
|
2777
|
+
</li>
|
|
2778
|
+
<li data-id="p6" data-name="Idea 106">
|
|
2779
|
+
<article class="ui-card ui-card--media">
|
|
2780
|
+
<div class="ui-card__body">
|
|
2781
|
+
<a class="ui-card__link" href="#p6">Idea 106</a>
|
|
2782
|
+
<span class="ui-card__meta">#6 · Section</span>
|
|
2783
|
+
</div>
|
|
2784
|
+
</article>
|
|
2785
|
+
</li>
|
|
2786
|
+
<li data-id="p7" data-name="Idea 107">
|
|
2787
|
+
<article class="ui-card ui-card--media">
|
|
2788
|
+
<div class="ui-card__body">
|
|
2789
|
+
<a class="ui-card__link" href="#p7">Idea 107</a>
|
|
2790
|
+
<span class="ui-card__meta">#7 · Section</span>
|
|
2791
|
+
</div>
|
|
2792
|
+
</article>
|
|
2793
|
+
</li>
|
|
2794
|
+
<li data-id="p8" data-name="Idea 108">
|
|
2795
|
+
<article class="ui-card ui-card--media">
|
|
2796
|
+
<div class="ui-card__body">
|
|
2797
|
+
<a class="ui-card__link" href="#p8">Idea 108</a>
|
|
2798
|
+
<span class="ui-card__meta">#8 · Section</span>
|
|
2799
|
+
</div>
|
|
2800
|
+
</article>
|
|
2801
|
+
</li>
|
|
2802
|
+
</ol>
|
|
2803
|
+
</section>
|
|
2804
|
+
</div>
|
|
2805
|
+
</div></code></pre></details></figure><figure class="cat-demo"><figcaption>5 · <code>MediaCard ratio="1/1"</code> (0.18.0): ảnh vuông (moodboard, ảnh sản phẩm). Ba tỉ lệ thôi: 16:10 (mặc định), 4:3, 1:1</figcaption><div class="cat-live"><div class="ui-cardgrid" data-min="200" role="list" aria-label="Moodboard"><article class="ui-card ui-card--media" data-ratio="1/1" role="listitem"><a class="ui-card__media" href="#m0" tabindex="-1" aria-hidden="true"><img alt="" src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20160%20100%22%3E%3Crect%20width%3D%22160%22%20height%3D%22100%22%20fill%3D%22hsl(0%2030%25%2088%25)%22%2F%3E%3Crect%20x%3D%2216%22%20y%3D%2218%22%20width%3D%2280%22%20height%3D%2210%22%20rx%3D%223%22%20fill%3D%22hsl(0%2025%25%2070%25)%22%2F%3E%3Crect%20x%3D%2216%22%20y%3D%2236%22%20width%3D%22128%22%20height%3D%2246%22%20rx%3D%226%22%20fill%3D%22hsl(0%2025%25%2078%25)%22%2F%3E%3C%2Fsvg%3E"/></a><div class="ui-card__body"><a class="ui-card__link" href="#m0">Warm neutrals</a><span class="ui-card__meta">Moodboard · 3 refs</span></div></article><article class="ui-card ui-card--media" data-ratio="1/1" role="listitem"><a class="ui-card__media" href="#m1" tabindex="-1" aria-hidden="true"><img alt="" src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20160%20100%22%3E%3Crect%20width%3D%22160%22%20height%3D%22100%22%20fill%3D%22hsl(61%2030%25%2088%25)%22%2F%3E%3Crect%20x%3D%2216%22%20y%3D%2218%22%20width%3D%2280%22%20height%3D%2210%22%20rx%3D%223%22%20fill%3D%22hsl(61%2025%25%2070%25)%22%2F%3E%3Crect%20x%3D%2216%22%20y%3D%2236%22%20width%3D%22128%22%20height%3D%2246%22%20rx%3D%226%22%20fill%3D%22hsl(61%2025%25%2078%25)%22%2F%3E%3C%2Fsvg%3E"/></a><div class="ui-card__body"><a class="ui-card__link" href="#m1">Night market</a><span class="ui-card__meta">Moodboard · 3 refs</span></div></article><article class="ui-card ui-card--media" data-ratio="1/1" role="listitem"><a class="ui-card__media" href="#m2" tabindex="-1" aria-hidden="true"><img alt="" src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20160%20100%22%3E%3Crect%20width%3D%22160%22%20height%3D%22100%22%20fill%3D%22hsl(122%2030%25%2088%25)%22%2F%3E%3Crect%20x%3D%2216%22%20y%3D%2218%22%20width%3D%2280%22%20height%3D%2210%22%20rx%3D%223%22%20fill%3D%22hsl(122%2025%25%2070%25)%22%2F%3E%3Crect%20x%3D%2216%22%20y%3D%2236%22%20width%3D%22128%22%20height%3D%2246%22%20rx%3D%226%22%20fill%3D%22hsl(122%2025%25%2078%25)%22%2F%3E%3C%2Fsvg%3E"/></a><div class="ui-card__body"><a class="ui-card__link" href="#m2">Studio flat lay</a><span class="ui-card__meta">Moodboard · 3 refs</span></div></article><article class="ui-card ui-card--media" data-ratio="1/1" role="listitem"><a class="ui-card__media" href="#m3" tabindex="-1" aria-hidden="true"><img alt="" src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20160%20100%22%3E%3Crect%20width%3D%22160%22%20height%3D%22100%22%20fill%3D%22hsl(183%2030%25%2088%25)%22%2F%3E%3Crect%20x%3D%2216%22%20y%3D%2218%22%20width%3D%2280%22%20height%3D%2210%22%20rx%3D%223%22%20fill%3D%22hsl(183%2025%25%2070%25)%22%2F%3E%3Crect%20x%3D%2216%22%20y%3D%2236%22%20width%3D%22128%22%20height%3D%2246%22%20rx%3D%226%22%20fill%3D%22hsl(183%2025%25%2078%25)%22%2F%3E%3C%2Fsvg%3E"/></a><div class="ui-card__body"><a class="ui-card__link" href="#m3">Ceramics</a><span class="ui-card__meta">Moodboard · 3 refs</span></div></article><article class="ui-card ui-card--media" data-ratio="1/1" role="listitem"><a class="ui-card__media" href="#m4" tabindex="-1" aria-hidden="true"><img alt="" src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20160%20100%22%3E%3Crect%20width%3D%22160%22%20height%3D%22100%22%20fill%3D%22hsl(244%2030%25%2088%25)%22%2F%3E%3Crect%20x%3D%2216%22%20y%3D%2218%22%20width%3D%2280%22%20height%3D%2210%22%20rx%3D%223%22%20fill%3D%22hsl(244%2025%25%2070%25)%22%2F%3E%3Crect%20x%3D%2216%22%20y%3D%2236%22%20width%3D%22128%22%20height%3D%2246%22%20rx%3D%226%22%20fill%3D%22hsl(244%2025%25%2078%25)%22%2F%3E%3C%2Fsvg%3E"/></a><div class="ui-card__body"><a class="ui-card__link" href="#m4">Linen</a><span class="ui-card__meta">Moodboard · 3 refs</span></div></article><article class="ui-card ui-card--media" data-ratio="1/1" role="listitem"><a class="ui-card__media" href="#m5" tabindex="-1" aria-hidden="true"><img alt="" src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20160%20100%22%3E%3Crect%20width%3D%22160%22%20height%3D%22100%22%20fill%3D%22hsl(305%2030%25%2088%25)%22%2F%3E%3Crect%20x%3D%2216%22%20y%3D%2218%22%20width%3D%2280%22%20height%3D%2210%22%20rx%3D%223%22%20fill%3D%22hsl(305%2025%25%2070%25)%22%2F%3E%3Crect%20x%3D%2216%22%20y%3D%2236%22%20width%3D%22128%22%20height%3D%2246%22%20rx%3D%226%22%20fill%3D%22hsl(305%2025%25%2078%25)%22%2F%3E%3C%2Fsvg%3E"/></a><div class="ui-card__body"><a class="ui-card__link" href="#m5">Citrus</a><span class="ui-card__meta">Moodboard · 3 refs</span></div></article></div></div><details class="cat-code"><summary>Markup</summary><pre><code><div class="ui-cardgrid" data-min="200" role="list" aria-label="Moodboard">
|
|
2806
|
+
<article class="ui-card ui-card--media" data-ratio="1/1" role="listitem">
|
|
2807
|
+
<a class="ui-card__media" href="#m0" tabindex="-1" aria-hidden="true">
|
|
2808
|
+
<img alt="" src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20160%20100%22%3E%3Crect%20width%3D%22160%22%20height%3D%22100%22%20fill%3D%22hsl(0%2030%25%2088%25)%22%2F%3E%3Crect%20x%3D%2216%22%20y%3D%2218%22%20width%3D%2280%22%20height%3D%2210%22%20rx%3D%223%22%20fill%3D%22hsl(0%2025%25%2070%25)%22%2F%3E%3Crect%20x%3D%2216%22%20y%3D%2236%22%20width%3D%22128%22%20height%3D%2246%22%20rx%3D%226%22%20fill%3D%22hsl(0%2025%25%2078%25)%22%2F%3E%3C%2Fsvg%3E"/>
|
|
2809
|
+
</a>
|
|
2810
|
+
<div class="ui-card__body">
|
|
2811
|
+
<a class="ui-card__link" href="#m0">Warm neutrals</a>
|
|
2812
|
+
<span class="ui-card__meta">Moodboard · 3 refs</span>
|
|
2813
|
+
</div>
|
|
2814
|
+
</article>
|
|
2815
|
+
<article class="ui-card ui-card--media" data-ratio="1/1" role="listitem">
|
|
2816
|
+
<a class="ui-card__media" href="#m1" tabindex="-1" aria-hidden="true">
|
|
2817
|
+
<img alt="" src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20160%20100%22%3E%3Crect%20width%3D%22160%22%20height%3D%22100%22%20fill%3D%22hsl(61%2030%25%2088%25)%22%2F%3E%3Crect%20x%3D%2216%22%20y%3D%2218%22%20width%3D%2280%22%20height%3D%2210%22%20rx%3D%223%22%20fill%3D%22hsl(61%2025%25%2070%25)%22%2F%3E%3Crect%20x%3D%2216%22%20y%3D%2236%22%20width%3D%22128%22%20height%3D%2246%22%20rx%3D%226%22%20fill%3D%22hsl(61%2025%25%2078%25)%22%2F%3E%3C%2Fsvg%3E"/>
|
|
2818
|
+
</a>
|
|
2819
|
+
<div class="ui-card__body">
|
|
2820
|
+
<a class="ui-card__link" href="#m1">Night market</a>
|
|
2821
|
+
<span class="ui-card__meta">Moodboard · 3 refs</span>
|
|
2822
|
+
</div>
|
|
2823
|
+
</article>
|
|
2824
|
+
<article class="ui-card ui-card--media" data-ratio="1/1" role="listitem">
|
|
2825
|
+
<a class="ui-card__media" href="#m2" tabindex="-1" aria-hidden="true">
|
|
2826
|
+
<img alt="" src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20160%20100%22%3E%3Crect%20width%3D%22160%22%20height%3D%22100%22%20fill%3D%22hsl(122%2030%25%2088%25)%22%2F%3E%3Crect%20x%3D%2216%22%20y%3D%2218%22%20width%3D%2280%22%20height%3D%2210%22%20rx%3D%223%22%20fill%3D%22hsl(122%2025%25%2070%25)%22%2F%3E%3Crect%20x%3D%2216%22%20y%3D%2236%22%20width%3D%22128%22%20height%3D%2246%22%20rx%3D%226%22%20fill%3D%22hsl(122%2025%25%2078%25)%22%2F%3E%3C%2Fsvg%3E"/>
|
|
2827
|
+
</a>
|
|
2828
|
+
<div class="ui-card__body">
|
|
2829
|
+
<a class="ui-card__link" href="#m2">Studio flat lay</a>
|
|
2830
|
+
<span class="ui-card__meta">Moodboard · 3 refs</span>
|
|
2831
|
+
</div>
|
|
2832
|
+
</article>
|
|
2833
|
+
<article class="ui-card ui-card--media" data-ratio="1/1" role="listitem">
|
|
2834
|
+
<a class="ui-card__media" href="#m3" tabindex="-1" aria-hidden="true">
|
|
2835
|
+
<img alt="" src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20160%20100%22%3E%3Crect%20width%3D%22160%22%20height%3D%22100%22%20fill%3D%22hsl(183%2030%25%2088%25)%22%2F%3E%3Crect%20x%3D%2216%22%20y%3D%2218%22%20width%3D%2280%22%20height%3D%2210%22%20rx%3D%223%22%20fill%3D%22hsl(183%2025%25%2070%25)%22%2F%3E%3Crect%20x%3D%2216%22%20y%3D%2236%22%20width%3D%22128%22%20height%3D%2246%22%20rx%3D%226%22%20fill%3D%22hsl(183%2025%25%2078%25)%22%2F%3E%3C%2Fsvg%3E"/>
|
|
2836
|
+
</a>
|
|
2837
|
+
<div class="ui-card__body">
|
|
2838
|
+
<a class="ui-card__link" href="#m3">Ceramics</a>
|
|
2839
|
+
<span class="ui-card__meta">Moodboard · 3 refs</span>
|
|
2840
|
+
</div>
|
|
2841
|
+
</article>
|
|
2842
|
+
<article class="ui-card ui-card--media" data-ratio="1/1" role="listitem">
|
|
2843
|
+
<a class="ui-card__media" href="#m4" tabindex="-1" aria-hidden="true">
|
|
2844
|
+
<img alt="" src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20160%20100%22%3E%3Crect%20width%3D%22160%22%20height%3D%22100%22%20fill%3D%22hsl(244%2030%25%2088%25)%22%2F%3E%3Crect%20x%3D%2216%22%20y%3D%2218%22%20width%3D%2280%22%20height%3D%2210%22%20rx%3D%223%22%20fill%3D%22hsl(244%2025%25%2070%25)%22%2F%3E%3Crect%20x%3D%2216%22%20y%3D%2236%22%20width%3D%22128%22%20height%3D%2246%22%20rx%3D%226%22%20fill%3D%22hsl(244%2025%25%2078%25)%22%2F%3E%3C%2Fsvg%3E"/>
|
|
2845
|
+
</a>
|
|
2846
|
+
<div class="ui-card__body">
|
|
2847
|
+
<a class="ui-card__link" href="#m4">Linen</a>
|
|
2848
|
+
<span class="ui-card__meta">Moodboard · 3 refs</span>
|
|
2849
|
+
</div>
|
|
2850
|
+
</article>
|
|
2851
|
+
<article class="ui-card ui-card--media" data-ratio="1/1" role="listitem">
|
|
2852
|
+
<a class="ui-card__media" href="#m5" tabindex="-1" aria-hidden="true">
|
|
2853
|
+
<img alt="" src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20160%20100%22%3E%3Crect%20width%3D%22160%22%20height%3D%22100%22%20fill%3D%22hsl(305%2030%25%2088%25)%22%2F%3E%3Crect%20x%3D%2216%22%20y%3D%2218%22%20width%3D%2280%22%20height%3D%2210%22%20rx%3D%223%22%20fill%3D%22hsl(305%2025%25%2070%25)%22%2F%3E%3Crect%20x%3D%2216%22%20y%3D%2236%22%20width%3D%22128%22%20height%3D%2246%22%20rx%3D%226%22%20fill%3D%22hsl(305%2025%25%2078%25)%22%2F%3E%3C%2Fsvg%3E"/>
|
|
2854
|
+
</a>
|
|
2855
|
+
<div class="ui-card__body">
|
|
2856
|
+
<a class="ui-card__link" href="#m5">Citrus</a>
|
|
2857
|
+
<span class="ui-card__meta">Moodboard · 3 refs</span>
|
|
2858
|
+
</div>
|
|
2859
|
+
</article>
|
|
2860
|
+
</div></code></pre></details></figure><figure class="cat-demo"><figcaption>2 · Menu ⋯ của hàng nổi trên khung bảng (0.18.0): mở ⋯ ở hàng CUỐI, menu hiện đủ (top layer, <code>popover</code>), sát đáy màn thì lật lên; cuộn trang hoặc đổi cỡ cửa sổ thì đóng</figcaption><div class="cat-live"><div class="ui-index"><div class="ui-index__sortbar" role="group" aria-label="Sort"><span aria-hidden="true">Sort</span><a class="ui-chip" href="#collections" aria-current="true">Supplier ↑</a><a class="ui-chip" href="#collections">Score</a></div><div class="ui-bulkbar" hidden><label class="ui-table__checkbox"><input type="checkbox" data-gb-select-all aria-label="Select all"></label><span class="ui-bulkbar__count" data-gb-count="{n} selected" aria-live="polite">0 selected</span><span class="ui-bulkbar__actions"><button type="button" class="ui-btn ui-btn--sm">Add to outreach</button><button type="button" class="ui-btn ui-btn--sm ui-btn--critical">Archive</button></span></div><div class="ui-table-wrap"><table class="ui-table ui-table--index" data-gb-sort="client"><caption class="ui-sr-only">Suppliers</caption><thead><tr><th class="ui-table__check" scope="col"><label class="ui-table__checkbox"><input type="checkbox" data-gb-select-all aria-label="Select all"></label></th><th class="ui-table__primary" scope="col" aria-sort="ascending"><button type="button" class="ui-table__sort">Supplier</button></th><th scope="col">Location</th><th scope="col">Verdict</th><th scope="col" class="is-num" aria-sort="none"><button type="button" class="ui-table__sort">Score</button></th><th scope="col">Ads</th><th class="ui-table__actions" scope="col"><span class="ui-sr-only">Actions</span></th></tr></thead><tbody><tr data-href="#c1"><td class="ui-table__check"><label class="ui-table__checkbox"><input type="checkbox" data-gb-select value="c1" aria-label="Select Guangzhou Yanmei Cosmetics"></label></td><td class="ui-table__primary"><a class="ui-table__title" href="#c1" title="Guangzhou Yanmei Cosmetics">Guangzhou Yanmei Cosmetics</a><span class="ui-sub">OEM · Skincare</span></td><td data-label="In">Guangzhou</td><td><span class="ui-tag ui-tag--success">Likely factory</span></td><td class="is-num" data-label="Score" data-sort-value="86">86</td><td data-condensed="hide">TikTok</td><td class="ui-table__actions"><span class="ui-row-actions"><button type="button" class="ui-btn ui-btn--sm">Contact</button><details class="ui-menu ui-menu--end"><summary class="ui-btn ui-btn--icon" aria-label="More actions for Guangzhou Yanmei Cosmetics"><svg viewBox="0 0 20 20" aria-hidden="true"><circle cx="5" cy="10" r="1.5"/><circle cx="10" cy="10" r="1.5"/><circle cx="15" cy="10" r="1.5"/></svg></summary><div class="ui-menu__list gemboss-popover-surface"><button type="button" class="ui-menu__item">Copy link</button><button type="button" class="ui-menu__item">Archive</button></div></details></span></td></tr><tr data-href="#c2"><td class="ui-table__check"><label class="ui-table__checkbox"><input type="checkbox" data-gb-select value="c2" aria-label="Select Shantou Lianfeng Biotech Co., Ltd. (formerly Lianfeng Daily Chemical Factory)"></label></td><td class="ui-table__primary"><a class="ui-table__title" href="#c2" title="Shantou Lianfeng Biotech Co., Ltd. (formerly Lianfeng Daily Chemical Factory)">Shantou Lianfeng Biotech Co., Ltd. (formerly Lianfeng Daily Chemical Factory)</a><span class="ui-sub">ODM · Haircare</span></td><td data-label="In">Shantou</td><td><span class="ui-tag ui-tag--warning">Maybe</span></td><td class="is-num" data-label="Score" data-sort-value="64">64</td><td data-condensed="hide">Meta</td><td class="ui-table__actions"><span class="ui-row-actions"><button type="button" class="ui-btn ui-btn--sm">Contact</button><details class="ui-menu ui-menu--end"><summary class="ui-btn ui-btn--icon" aria-label="More actions for Shantou Lianfeng Biotech Co., Ltd. (formerly Lianfeng Daily Chemical Factory)"><svg viewBox="0 0 20 20" aria-hidden="true"><circle cx="5" cy="10" r="1.5"/><circle cx="10" cy="10" r="1.5"/><circle cx="15" cy="10" r="1.5"/></svg></summary><div class="ui-menu__list gemboss-popover-surface"><button type="button" class="ui-menu__item">Copy link</button><button type="button" class="ui-menu__item">Archive</button></div></details></span></td></tr></tbody></table></div></div></div><details class="cat-code"><summary>Markup</summary><pre><code><div class="ui-index">
|
|
2861
|
+
<div class="ui-index__sortbar" role="group" aria-label="Sort">
|
|
2862
|
+
<span aria-hidden="true">Sort</span>
|
|
2863
|
+
<a class="ui-chip" href="#collections" aria-current="true">Supplier ↑</a>
|
|
2864
|
+
<a class="ui-chip" href="#collections">Score</a>
|
|
2865
|
+
</div>
|
|
2866
|
+
<div class="ui-bulkbar" hidden>
|
|
2867
|
+
<label class="ui-table__checkbox">
|
|
2868
|
+
<input type="checkbox" data-gb-select-all aria-label="Select all">
|
|
2869
|
+
</label>
|
|
2870
|
+
<span class="ui-bulkbar__count" data-gb-count="{n} selected" aria-live="polite">0 selected</span>
|
|
2871
|
+
<span class="ui-bulkbar__actions">
|
|
2872
|
+
<button type="button" class="ui-btn ui-btn--sm">Add to outreach</button>
|
|
2873
|
+
<button type="button" class="ui-btn ui-btn--sm ui-btn--critical">Archive</button>
|
|
2874
|
+
</span>
|
|
2875
|
+
</div>
|
|
2876
|
+
<div class="ui-table-wrap">
|
|
2877
|
+
<table class="ui-table ui-table--index" data-gb-sort="client">
|
|
2878
|
+
<caption class="ui-sr-only">Suppliers</caption>
|
|
2879
|
+
<thead>
|
|
2880
|
+
<tr>
|
|
2881
|
+
<th class="ui-table__check" scope="col">
|
|
2882
|
+
<label class="ui-table__checkbox">
|
|
2883
|
+
<input type="checkbox" data-gb-select-all aria-label="Select all">
|
|
2884
|
+
</label>
|
|
2885
|
+
</th>
|
|
2886
|
+
<th class="ui-table__primary" scope="col" aria-sort="ascending">
|
|
2887
|
+
<button type="button" class="ui-table__sort">Supplier</button>
|
|
2888
|
+
</th>
|
|
2889
|
+
<th scope="col">Location</th>
|
|
2890
|
+
<th scope="col">Verdict</th>
|
|
2891
|
+
<th scope="col" class="is-num" aria-sort="none">
|
|
2892
|
+
<button type="button" class="ui-table__sort">Score</button>
|
|
2893
|
+
</th>
|
|
2894
|
+
<th scope="col">Ads</th>
|
|
2895
|
+
<th class="ui-table__actions" scope="col">
|
|
2896
|
+
<span class="ui-sr-only">Actions</span>
|
|
2897
|
+
</th>
|
|
2898
|
+
</tr>
|
|
2899
|
+
</thead>
|
|
2900
|
+
<tbody>
|
|
2901
|
+
<tr data-href="#c1">
|
|
2902
|
+
<td class="ui-table__check">
|
|
2903
|
+
<label class="ui-table__checkbox">
|
|
2904
|
+
<input type="checkbox" data-gb-select value="c1" aria-label="Select Guangzhou Yanmei Cosmetics">
|
|
2905
|
+
</label>
|
|
2906
|
+
</td>
|
|
2907
|
+
<td class="ui-table__primary">
|
|
2908
|
+
<a class="ui-table__title" href="#c1" title="Guangzhou Yanmei Cosmetics">Guangzhou Yanmei Cosmetics</a>
|
|
2909
|
+
<span class="ui-sub">OEM · Skincare</span>
|
|
2910
|
+
</td>
|
|
2911
|
+
<td data-label="In">Guangzhou</td>
|
|
2912
|
+
<td>
|
|
2913
|
+
<span class="ui-tag ui-tag--success">Likely factory</span>
|
|
2914
|
+
</td>
|
|
2915
|
+
<td class="is-num" data-label="Score" data-sort-value="86">86</td>
|
|
2916
|
+
<td data-condensed="hide">TikTok</td>
|
|
2917
|
+
<td class="ui-table__actions">
|
|
2918
|
+
<span class="ui-row-actions">
|
|
2919
|
+
<button type="button" class="ui-btn ui-btn--sm">Contact</button>
|
|
2920
|
+
<details class="ui-menu ui-menu--end">
|
|
2921
|
+
<summary class="ui-btn ui-btn--icon" aria-label="More actions for Guangzhou Yanmei Cosmetics">
|
|
2922
|
+
<svg viewBox="0 0 20 20" aria-hidden="true">
|
|
2923
|
+
<circle cx="5" cy="10" r="1.5"/>
|
|
2924
|
+
<circle cx="10" cy="10" r="1.5"/>
|
|
2925
|
+
<circle cx="15" cy="10" r="1.5"/>
|
|
2926
|
+
</svg>
|
|
2927
|
+
</summary>
|
|
2928
|
+
<div class="ui-menu__list gemboss-popover-surface">
|
|
2929
|
+
<button type="button" class="ui-menu__item">Copy link</button>
|
|
2930
|
+
<button type="button" class="ui-menu__item">Archive</button>
|
|
2931
|
+
</div>
|
|
2932
|
+
</details>
|
|
2933
|
+
</span>
|
|
2934
|
+
</td>
|
|
2935
|
+
</tr>
|
|
2936
|
+
<tr data-href="#c2">
|
|
2937
|
+
<td class="ui-table__check">
|
|
2938
|
+
<label class="ui-table__checkbox">
|
|
2939
|
+
<input type="checkbox" data-gb-select value="c2" aria-label="Select Shantou Lianfeng Biotech Co., Ltd. (formerly Lianfeng Daily Chemical Factory)">
|
|
2940
|
+
</label>
|
|
2941
|
+
</td>
|
|
2942
|
+
<td class="ui-table__primary">
|
|
2943
|
+
<a class="ui-table__title" href="#c2" title="Shantou Lianfeng Biotech Co., Ltd. (formerly Lianfeng Daily Chemical Factory)">Shantou Lianfeng Biotech Co., Ltd. (formerly Lianfeng Daily Chemical Factory)</a>
|
|
2944
|
+
<span class="ui-sub">ODM · Haircare</span>
|
|
2945
|
+
</td>
|
|
2946
|
+
<td data-label="In">Shantou</td>
|
|
2947
|
+
<td>
|
|
2948
|
+
<span class="ui-tag ui-tag--warning">Maybe</span>
|
|
2949
|
+
</td>
|
|
2950
|
+
<td class="is-num" data-label="Score" data-sort-value="64">64</td>
|
|
2951
|
+
<td data-condensed="hide">Meta</td>
|
|
2952
|
+
<td class="ui-table__actions">
|
|
2953
|
+
<span class="ui-row-actions">
|
|
2954
|
+
<button type="button" class="ui-btn ui-btn--sm">Contact</button>
|
|
2955
|
+
<details class="ui-menu ui-menu--end">
|
|
2956
|
+
<summary class="ui-btn ui-btn--icon" aria-label="More actions for Shantou Lianfeng Biotech Co., Ltd. (formerly Lianfeng Daily Chemical Factory)">
|
|
2957
|
+
<svg viewBox="0 0 20 20" aria-hidden="true">
|
|
2958
|
+
<circle cx="5" cy="10" r="1.5"/>
|
|
2959
|
+
<circle cx="10" cy="10" r="1.5"/>
|
|
2960
|
+
<circle cx="15" cy="10" r="1.5"/>
|
|
2961
|
+
</svg>
|
|
2962
|
+
</summary>
|
|
2963
|
+
<div class="ui-menu__list gemboss-popover-surface">
|
|
2964
|
+
<button type="button" class="ui-menu__item">Copy link</button>
|
|
2965
|
+
<button type="button" class="ui-menu__item">Archive</button>
|
|
2966
|
+
</div>
|
|
2967
|
+
</details>
|
|
2968
|
+
</span>
|
|
2969
|
+
</td>
|
|
2970
|
+
</tr>
|
|
2971
|
+
</tbody>
|
|
2972
|
+
</table>
|
|
2973
|
+
</div>
|
|
2974
|
+
</div></code></pre></details></figure><figure class="cat-demo"><figcaption>Trạng thái · lọc không ra: thanh lọc + header giữ nguyên, <code>ui-empty--no-match</code> + Clear filters</figcaption><div class="cat-live"><div class="ui-toolbar"><label class="gemboss-field gemboss-field--group" style="flex:1 1 220px"><input class="gemboss-field__bare" value="serum" aria-label="Search"></label><div class="ui-chips"><button type="button" class="ui-chip" aria-pressed="true">Likely factory <span class="ui-chip__x" aria-hidden="true">✕</span></button><button type="button" class="ui-chip">Has WhatsApp</button></div><span class="ui-coll-count">0 of 4,558</span></div><div class="ui-table-wrap"><table class="ui-table"><caption class="ui-sr-only">Suppliers</caption><thead><tr><th scope="col" aria-sort="none"><a class="ui-table__sort" href="#collections">Source</a></th><th scope="col" class="is-num" aria-sort="none"><a class="ui-table__sort" href="#collections">Visits</a></th><th scope="col" class="is-num">Orders</th><th scope="col" class="is-num">Conversion</th><th scope="col" class="is-num">Revenue</th></tr></thead></table><div class="ui-empty ui-empty--no-match"><p class="ui-empty__title">No suppliers match these filters</p><p class="ui-empty__body">Try fewer filters or another word.</p><button type="button" class="ui-btn">Clear filters</button></div></div></div><details class="cat-code"><summary>Markup</summary><pre><code><div class="ui-toolbar">
|
|
2975
|
+
<label class="gemboss-field gemboss-field--group" style="flex:1 1 220px">
|
|
2976
|
+
<input class="gemboss-field__bare" value="serum" aria-label="Search">
|
|
2977
|
+
</label>
|
|
2978
|
+
<div class="ui-chips">
|
|
2979
|
+
<button type="button" class="ui-chip" aria-pressed="true">Likely factory <span class="ui-chip__x" aria-hidden="true">✕</span>
|
|
2980
|
+
</button>
|
|
2981
|
+
<button type="button" class="ui-chip">Has WhatsApp</button>
|
|
2982
|
+
</div>
|
|
2983
|
+
<span class="ui-coll-count">0 of 4,558</span>
|
|
2984
|
+
</div>
|
|
2985
|
+
<div class="ui-table-wrap">
|
|
2986
|
+
<table class="ui-table">
|
|
2987
|
+
<caption class="ui-sr-only">Suppliers</caption>
|
|
2988
|
+
<thead>
|
|
2989
|
+
<tr>
|
|
2990
|
+
<th scope="col" aria-sort="none">
|
|
2991
|
+
<a class="ui-table__sort" href="#collections">Source</a>
|
|
2992
|
+
</th>
|
|
2993
|
+
<th scope="col" class="is-num" aria-sort="none">
|
|
2994
|
+
<a class="ui-table__sort" href="#collections">Visits</a>
|
|
2995
|
+
</th>
|
|
2996
|
+
<th scope="col" class="is-num">Orders</th>
|
|
2997
|
+
<th scope="col" class="is-num">Conversion</th>
|
|
2998
|
+
<th scope="col" class="is-num">Revenue</th>
|
|
2999
|
+
</tr>
|
|
3000
|
+
</thead>
|
|
3001
|
+
</table>
|
|
3002
|
+
<div class="ui-empty ui-empty--no-match">
|
|
3003
|
+
<p class="ui-empty__title">No suppliers match these filters</p>
|
|
3004
|
+
<p class="ui-empty__body">Try fewer filters or another word.</p>
|
|
3005
|
+
<button type="button" class="ui-btn">Clear filters</button>
|
|
3006
|
+
</div>
|
|
3007
|
+
</div></code></pre></details></figure><figure class="cat-demo"><figcaption>Trạng thái · rỗng (chưa có dữ liệu): một hành động chính</figcaption><div class="cat-live"><div class="ui-list" role="region" aria-label="Candidates"><div class="ui-empty"><p class="ui-empty__title">No candidates yet</p><p class="ui-empty__body">Run the LinkedIn search to fill the pool.</p><button type="button" class="ui-btn ui-btn--primary">Run search</button></div></div></div><details class="cat-code"><summary>Markup</summary><pre><code><div class="ui-list" role="region" aria-label="Candidates">
|
|
3008
|
+
<div class="ui-empty">
|
|
3009
|
+
<p class="ui-empty__title">No candidates yet</p>
|
|
3010
|
+
<p class="ui-empty__body">Run the LinkedIn search to fill the pool.</p>
|
|
3011
|
+
<button type="button" class="ui-btn ui-btn--primary">Run search</button>
|
|
3012
|
+
</div>
|
|
3013
|
+
</div></code></pre></details></figure><figure class="cat-demo"><figcaption>Trạng thái · lỗi: banner trong khung + Try again, ghi giờ của dữ liệu cũ (không bao giờ thành danh sách rỗng)</figcaption><div class="cat-live"><div class="ui-table-wrap"><table class="ui-table"><caption class="ui-sr-only">Keywords</caption><thead><tr><th scope="col" aria-sort="none"><a class="ui-table__sort" href="#collections">Source</a></th><th scope="col" class="is-num" aria-sort="none"><a class="ui-table__sort" href="#collections">Visits</a></th><th scope="col" class="is-num">Orders</th><th scope="col" class="is-num">Conversion</th><th scope="col" class="is-num">Revenue</th></tr></thead></table><div class="ui-notice ui-notice--danger ui-coll-error" role="alert"><div><b>Couldn't load keywords.</b> SerpAPI answered 429.<span class="ui-muted"> Showing data as of 14:05.</span></div><button type="button" class="ui-btn ui-btn--sm">Try again</button></div></div></div><details class="cat-code"><summary>Markup</summary><pre><code><div class="ui-table-wrap">
|
|
3014
|
+
<table class="ui-table">
|
|
3015
|
+
<caption class="ui-sr-only">Keywords</caption>
|
|
3016
|
+
<thead>
|
|
3017
|
+
<tr>
|
|
3018
|
+
<th scope="col" aria-sort="none">
|
|
3019
|
+
<a class="ui-table__sort" href="#collections">Source</a>
|
|
3020
|
+
</th>
|
|
3021
|
+
<th scope="col" class="is-num" aria-sort="none">
|
|
3022
|
+
<a class="ui-table__sort" href="#collections">Visits</a>
|
|
3023
|
+
</th>
|
|
3024
|
+
<th scope="col" class="is-num">Orders</th>
|
|
3025
|
+
<th scope="col" class="is-num">Conversion</th>
|
|
3026
|
+
<th scope="col" class="is-num">Revenue</th>
|
|
3027
|
+
</tr>
|
|
3028
|
+
</thead>
|
|
3029
|
+
</table>
|
|
3030
|
+
<div class="ui-notice ui-notice--danger ui-coll-error" role="alert">
|
|
3031
|
+
<div>
|
|
3032
|
+
<b>Couldn&#x27;t load keywords.</b> SerpAPI answered 429.<span class="ui-muted"> Showing data as of 14:05.</span>
|
|
3033
|
+
</div>
|
|
3034
|
+
<button type="button" class="ui-btn ui-btn--sm">Try again</button>
|
|
3035
|
+
</div>
|
|
3036
|
+
</div></code></pre></details></figure><figure class="cat-demo"><figcaption>Trạng thái · đang tải lại (<code>aria-busy</code>): giữ hàng cũ, mờ 0,55</figcaption><div class="cat-live"><div class="ui-index" aria-busy="true"><div class="ui-index__sortbar" role="group" aria-label="Sort"><span aria-hidden="true">Sort</span><a class="ui-chip" href="#collections" aria-current="true">Supplier ↑</a><a class="ui-chip" href="#collections">Score</a></div><div class="ui-bulkbar" hidden><label class="ui-table__checkbox"><input type="checkbox" data-gb-select-all aria-label="Select all"></label><span class="ui-bulkbar__count" data-gb-count="{n} selected" aria-live="polite">0 selected</span><span class="ui-bulkbar__actions"><button type="button" class="ui-btn ui-btn--sm">Add to outreach</button><button type="button" class="ui-btn ui-btn--sm ui-btn--critical">Archive</button></span></div><div class="ui-table-wrap"><table class="ui-table ui-table--index" data-gb-sort="client"><caption class="ui-sr-only">Suppliers</caption><thead><tr><th class="ui-table__check" scope="col"><label class="ui-table__checkbox"><input type="checkbox" data-gb-select-all aria-label="Select all"></label></th><th class="ui-table__primary" scope="col" aria-sort="ascending"><button type="button" class="ui-table__sort">Supplier</button></th><th scope="col">Location</th><th scope="col">Verdict</th><th scope="col" class="is-num" aria-sort="none"><button type="button" class="ui-table__sort">Score</button></th><th scope="col">Ads</th><th class="ui-table__actions" scope="col"><span class="ui-sr-only">Actions</span></th></tr></thead><tbody><tr data-href="#c1"><td class="ui-table__check"><label class="ui-table__checkbox"><input type="checkbox" data-gb-select value="c1" aria-label="Select Guangzhou Yanmei Cosmetics"></label></td><td class="ui-table__primary"><a class="ui-table__title" href="#c1" title="Guangzhou Yanmei Cosmetics">Guangzhou Yanmei Cosmetics</a><span class="ui-sub">OEM · Skincare</span></td><td data-label="In">Guangzhou</td><td><span class="ui-tag ui-tag--success">Likely factory</span></td><td class="is-num" data-label="Score" data-sort-value="86">86</td><td data-condensed="hide">TikTok</td><td class="ui-table__actions"><span class="ui-row-actions"><button type="button" class="ui-btn ui-btn--sm">Contact</button><details class="ui-menu ui-menu--end"><summary class="ui-btn ui-btn--icon" aria-label="More actions for Guangzhou Yanmei Cosmetics"><svg viewBox="0 0 20 20" aria-hidden="true"><circle cx="5" cy="10" r="1.5"/><circle cx="10" cy="10" r="1.5"/><circle cx="15" cy="10" r="1.5"/></svg></summary><div class="ui-menu__list gemboss-popover-surface"><button type="button" class="ui-menu__item">Copy link</button><button type="button" class="ui-menu__item">Archive</button></div></details></span></td></tr><tr data-href="#c2"><td class="ui-table__check"><label class="ui-table__checkbox"><input type="checkbox" data-gb-select value="c2" aria-label="Select Shantou Lianfeng Biotech Co., Ltd. (formerly Lianfeng Daily Chemical Factory)"></label></td><td class="ui-table__primary"><a class="ui-table__title" href="#c2" title="Shantou Lianfeng Biotech Co., Ltd. (formerly Lianfeng Daily Chemical Factory)">Shantou Lianfeng Biotech Co., Ltd. (formerly Lianfeng Daily Chemical Factory)</a><span class="ui-sub">ODM · Haircare</span></td><td data-label="In">Shantou</td><td><span class="ui-tag ui-tag--warning">Maybe</span></td><td class="is-num" data-label="Score" data-sort-value="64">64</td><td data-condensed="hide">Meta</td><td class="ui-table__actions"><span class="ui-row-actions"><button type="button" class="ui-btn ui-btn--sm">Contact</button><details class="ui-menu ui-menu--end"><summary class="ui-btn ui-btn--icon" aria-label="More actions for Shantou Lianfeng Biotech Co., Ltd. (formerly Lianfeng Daily Chemical Factory)"><svg viewBox="0 0 20 20" aria-hidden="true"><circle cx="5" cy="10" r="1.5"/><circle cx="10" cy="10" r="1.5"/><circle cx="15" cy="10" r="1.5"/></svg></summary><div class="ui-menu__list gemboss-popover-surface"><button type="button" class="ui-menu__item">Copy link</button><button type="button" class="ui-menu__item">Archive</button></div></details></span></td></tr></tbody></table></div></div></div><details class="cat-code"><summary>Markup</summary><pre><code><div class="ui-index" aria-busy="true">
|
|
3037
|
+
<div class="ui-index__sortbar" role="group" aria-label="Sort">
|
|
3038
|
+
<span aria-hidden="true">Sort</span>
|
|
3039
|
+
<a class="ui-chip" href="#collections" aria-current="true">Supplier ↑</a>
|
|
3040
|
+
<a class="ui-chip" href="#collections">Score</a>
|
|
3041
|
+
</div>
|
|
3042
|
+
<div class="ui-bulkbar" hidden>
|
|
3043
|
+
<label class="ui-table__checkbox">
|
|
3044
|
+
<input type="checkbox" data-gb-select-all aria-label="Select all">
|
|
3045
|
+
</label>
|
|
3046
|
+
<span class="ui-bulkbar__count" data-gb-count="{n} selected" aria-live="polite">0 selected</span>
|
|
3047
|
+
<span class="ui-bulkbar__actions">
|
|
3048
|
+
<button type="button" class="ui-btn ui-btn--sm">Add to outreach</button>
|
|
3049
|
+
<button type="button" class="ui-btn ui-btn--sm ui-btn--critical">Archive</button>
|
|
3050
|
+
</span>
|
|
3051
|
+
</div>
|
|
3052
|
+
<div class="ui-table-wrap">
|
|
3053
|
+
<table class="ui-table ui-table--index" data-gb-sort="client">
|
|
3054
|
+
<caption class="ui-sr-only">Suppliers</caption>
|
|
3055
|
+
<thead>
|
|
3056
|
+
<tr>
|
|
3057
|
+
<th class="ui-table__check" scope="col">
|
|
3058
|
+
<label class="ui-table__checkbox">
|
|
3059
|
+
<input type="checkbox" data-gb-select-all aria-label="Select all">
|
|
3060
|
+
</label>
|
|
3061
|
+
</th>
|
|
3062
|
+
<th class="ui-table__primary" scope="col" aria-sort="ascending">
|
|
3063
|
+
<button type="button" class="ui-table__sort">Supplier</button>
|
|
3064
|
+
</th>
|
|
3065
|
+
<th scope="col">Location</th>
|
|
3066
|
+
<th scope="col">Verdict</th>
|
|
3067
|
+
<th scope="col" class="is-num" aria-sort="none">
|
|
3068
|
+
<button type="button" class="ui-table__sort">Score</button>
|
|
3069
|
+
</th>
|
|
3070
|
+
<th scope="col">Ads</th>
|
|
3071
|
+
<th class="ui-table__actions" scope="col">
|
|
3072
|
+
<span class="ui-sr-only">Actions</span>
|
|
3073
|
+
</th>
|
|
3074
|
+
</tr>
|
|
3075
|
+
</thead>
|
|
3076
|
+
<tbody>
|
|
3077
|
+
<tr data-href="#c1">
|
|
3078
|
+
<td class="ui-table__check">
|
|
3079
|
+
<label class="ui-table__checkbox">
|
|
3080
|
+
<input type="checkbox" data-gb-select value="c1" aria-label="Select Guangzhou Yanmei Cosmetics">
|
|
3081
|
+
</label>
|
|
3082
|
+
</td>
|
|
3083
|
+
<td class="ui-table__primary">
|
|
3084
|
+
<a class="ui-table__title" href="#c1" title="Guangzhou Yanmei Cosmetics">Guangzhou Yanmei Cosmetics</a>
|
|
3085
|
+
<span class="ui-sub">OEM · Skincare</span>
|
|
3086
|
+
</td>
|
|
3087
|
+
<td data-label="In">Guangzhou</td>
|
|
3088
|
+
<td>
|
|
3089
|
+
<span class="ui-tag ui-tag--success">Likely factory</span>
|
|
3090
|
+
</td>
|
|
3091
|
+
<td class="is-num" data-label="Score" data-sort-value="86">86</td>
|
|
3092
|
+
<td data-condensed="hide">TikTok</td>
|
|
3093
|
+
<td class="ui-table__actions">
|
|
3094
|
+
<span class="ui-row-actions">
|
|
3095
|
+
<button type="button" class="ui-btn ui-btn--sm">Contact</button>
|
|
3096
|
+
<details class="ui-menu ui-menu--end">
|
|
3097
|
+
<summary class="ui-btn ui-btn--icon" aria-label="More actions for Guangzhou Yanmei Cosmetics">
|
|
3098
|
+
<svg viewBox="0 0 20 20" aria-hidden="true">
|
|
3099
|
+
<circle cx="5" cy="10" r="1.5"/>
|
|
3100
|
+
<circle cx="10" cy="10" r="1.5"/>
|
|
3101
|
+
<circle cx="15" cy="10" r="1.5"/>
|
|
3102
|
+
</svg>
|
|
3103
|
+
</summary>
|
|
3104
|
+
<div class="ui-menu__list gemboss-popover-surface">
|
|
3105
|
+
<button type="button" class="ui-menu__item">Copy link</button>
|
|
3106
|
+
<button type="button" class="ui-menu__item">Archive</button>
|
|
3107
|
+
</div>
|
|
3108
|
+
</details>
|
|
3109
|
+
</span>
|
|
3110
|
+
</td>
|
|
3111
|
+
</tr>
|
|
3112
|
+
<tr data-href="#c2">
|
|
3113
|
+
<td class="ui-table__check">
|
|
3114
|
+
<label class="ui-table__checkbox">
|
|
3115
|
+
<input type="checkbox" data-gb-select value="c2" aria-label="Select Shantou Lianfeng Biotech Co., Ltd. (formerly Lianfeng Daily Chemical Factory)">
|
|
3116
|
+
</label>
|
|
3117
|
+
</td>
|
|
3118
|
+
<td class="ui-table__primary">
|
|
3119
|
+
<a class="ui-table__title" href="#c2" title="Shantou Lianfeng Biotech Co., Ltd. (formerly Lianfeng Daily Chemical Factory)">Shantou Lianfeng Biotech Co., Ltd. (formerly Lianfeng Daily Chemical Factory)</a>
|
|
3120
|
+
<span class="ui-sub">ODM · Haircare</span>
|
|
3121
|
+
</td>
|
|
3122
|
+
<td data-label="In">Shantou</td>
|
|
3123
|
+
<td>
|
|
3124
|
+
<span class="ui-tag ui-tag--warning">Maybe</span>
|
|
3125
|
+
</td>
|
|
3126
|
+
<td class="is-num" data-label="Score" data-sort-value="64">64</td>
|
|
3127
|
+
<td data-condensed="hide">Meta</td>
|
|
3128
|
+
<td class="ui-table__actions">
|
|
3129
|
+
<span class="ui-row-actions">
|
|
3130
|
+
<button type="button" class="ui-btn ui-btn--sm">Contact</button>
|
|
3131
|
+
<details class="ui-menu ui-menu--end">
|
|
3132
|
+
<summary class="ui-btn ui-btn--icon" aria-label="More actions for Shantou Lianfeng Biotech Co., Ltd. (formerly Lianfeng Daily Chemical Factory)">
|
|
3133
|
+
<svg viewBox="0 0 20 20" aria-hidden="true">
|
|
3134
|
+
<circle cx="5" cy="10" r="1.5"/>
|
|
3135
|
+
<circle cx="10" cy="10" r="1.5"/>
|
|
3136
|
+
<circle cx="15" cy="10" r="1.5"/>
|
|
3137
|
+
</svg>
|
|
3138
|
+
</summary>
|
|
3139
|
+
<div class="ui-menu__list gemboss-popover-surface">
|
|
3140
|
+
<button type="button" class="ui-menu__item">Copy link</button>
|
|
3141
|
+
<button type="button" class="ui-menu__item">Archive</button>
|
|
3142
|
+
</div>
|
|
3143
|
+
</details>
|
|
3144
|
+
</span>
|
|
3145
|
+
</td>
|
|
3146
|
+
</tr>
|
|
3147
|
+
</tbody>
|
|
3148
|
+
</table>
|
|
3149
|
+
</div>
|
|
3150
|
+
</div></code></pre></details></figure><figure class="cat-demo"><figcaption>Trạng thái · đang tải: skeleton đúng hình từng mẫu (bảng giữ header thật; vạch 8px bo 4; tắt ánh chạy khi giảm chuyển động)</figcaption><div class="cat-live"><div class="ui-stack"><div class="ui-table-wrap ui-skeleton--table" aria-busy="true"><span class="ui-sr-only" role="status">Loading…</span><table class="ui-table" aria-hidden="true"><thead><tr><th>Source</th><th class="is-num">Visits</th><th class="is-num">Orders</th><th class="is-num">Conversion</th><th class="is-num">Revenue</th></tr></thead><tbody><tr><td><span class="ui-skeleton__line"></span></td><td><span class="ui-skeleton__line"></span></td><td><span class="ui-skeleton__line"></span></td><td><span class="ui-skeleton__line"></span></td><td><span class="ui-skeleton__line"></span></td></tr><tr><td><span class="ui-skeleton__line"></span></td><td><span class="ui-skeleton__line"></span></td><td><span class="ui-skeleton__line"></span></td><td><span class="ui-skeleton__line"></span></td><td><span class="ui-skeleton__line"></span></td></tr><tr><td><span class="ui-skeleton__line"></span></td><td><span class="ui-skeleton__line"></span></td><td><span class="ui-skeleton__line"></span></td><td><span class="ui-skeleton__line"></span></td><td><span class="ui-skeleton__line"></span></td></tr></tbody></table></div><div class="ui-table-wrap ui-skeleton--table ui-index" aria-busy="true"><span class="ui-sr-only" role="status">Loading…</span><table class="ui-table ui-table--index" aria-hidden="true"><thead><tr><th>Supplier</th><th>Location</th><th>Verdict</th><th class="is-num">Score</th><th>Ads</th></tr></thead><tbody><tr><td><span class="ui-skeleton__line"></span></td><td><span class="ui-skeleton__line"></span></td><td><span class="ui-skeleton__line"></span></td><td><span class="ui-skeleton__line"></span></td><td><span class="ui-skeleton__line"></span></td></tr><tr><td><span class="ui-skeleton__line"></span></td><td><span class="ui-skeleton__line"></span></td><td><span class="ui-skeleton__line"></span></td><td><span class="ui-skeleton__line"></span></td><td><span class="ui-skeleton__line"></span></td></tr><tr><td><span class="ui-skeleton__line"></span></td><td><span class="ui-skeleton__line"></span></td><td><span class="ui-skeleton__line"></span></td><td><span class="ui-skeleton__line"></span></td><td><span class="ui-skeleton__line"></span></td></tr></tbody></table></div><div aria-busy="true"><span class="ui-sr-only" role="status">Loading…</span><ul class="ui-list ui-skeleton--list" aria-hidden="true"><li class="ui-list__item"><span class="ui-skeleton__block"></span><span class="ui-list__body"><span class="ui-skeleton__line"></span><span class="ui-skeleton__line"></span></span></li><li class="ui-list__item"><span class="ui-skeleton__block"></span><span class="ui-list__body"><span class="ui-skeleton__line"></span><span class="ui-skeleton__line"></span></span></li><li class="ui-list__item"><span class="ui-skeleton__block"></span><span class="ui-list__body"><span class="ui-skeleton__line"></span><span class="ui-skeleton__line"></span></span></li></ul></div><div aria-busy="true"><span class="ui-sr-only" role="status">Loading…</span><ul class="ui-list ui-skeleton--list" aria-hidden="true"><li class="ui-list__item"><span class="ui-skeleton__block ui-skeleton__block--round"></span><span class="ui-list__body"><span class="ui-skeleton__line"></span><span class="ui-skeleton__line"></span></span></li><li class="ui-list__item"><span class="ui-skeleton__block ui-skeleton__block--round"></span><span class="ui-list__body"><span class="ui-skeleton__line"></span><span class="ui-skeleton__line"></span></span></li><li class="ui-list__item"><span class="ui-skeleton__block ui-skeleton__block--round"></span><span class="ui-list__body"><span class="ui-skeleton__line"></span><span class="ui-skeleton__line"></span></span></li></ul></div><div aria-busy="true"><span class="ui-sr-only" role="status">Loading…</span><ul class="ui-list ui-list--compact ui-skeleton--compact" aria-hidden="true"><li class="ui-list__item"><span class="ui-list__row"><span class="ui-skeleton__block" style="width:16px;height:16px"></span><span class="ui-skeleton__line"></span></span></li><li class="ui-list__item"><span class="ui-list__row"><span class="ui-skeleton__block" style="width:16px;height:16px"></span><span class="ui-skeleton__line"></span></span></li><li class="ui-list__item"><span class="ui-list__row"><span class="ui-skeleton__block" style="width:16px;height:16px"></span><span class="ui-skeleton__line"></span></span></li></ul></div><div aria-busy="true"><span class="ui-sr-only" role="status">Loading…</span><div class="ui-cardgrid ui-skeleton--grid" aria-hidden="true"><div class="ui-card ui-card--media"><span class="ui-card__media"></span><span class="ui-card__body"><span class="ui-skeleton__line"></span><span class="ui-skeleton__line"></span></span></div><div class="ui-card ui-card--media"><span class="ui-card__media"></span><span class="ui-card__body"><span class="ui-skeleton__line"></span><span class="ui-skeleton__line"></span></span></div><div class="ui-card ui-card--media"><span class="ui-card__media"></span><span class="ui-card__body"><span class="ui-skeleton__line"></span><span class="ui-skeleton__line"></span></span></div></div></div><div aria-busy="true"><span class="ui-sr-only" role="status">Loading…</span><div class="ui-board ui-skeleton--board" aria-hidden="true"><div class="ui-board__col"><span class="ui-board__head"><span class="ui-skeleton__line" style="width:40%"></span></span><ol class="ui-board__list"><li></li><li></li><li></li></ol></div><div class="ui-board__col"><span class="ui-board__head"><span class="ui-skeleton__line" style="width:40%"></span></span><ol class="ui-board__list"><li></li><li></li><li></li></ol></div><div class="ui-board__col"><span class="ui-board__head"><span class="ui-skeleton__line" style="width:40%"></span></span><ol class="ui-board__list"><li></li><li></li><li></li></ol></div></div></div></div></div><details class="cat-code"><summary>Markup</summary><pre><code><div class="ui-stack">
|
|
3151
|
+
<div class="ui-table-wrap ui-skeleton--table" aria-busy="true">
|
|
3152
|
+
<span class="ui-sr-only" role="status">Loading…</span>
|
|
3153
|
+
<table class="ui-table" aria-hidden="true">
|
|
3154
|
+
<thead>
|
|
3155
|
+
<tr>
|
|
3156
|
+
<th>Source</th>
|
|
3157
|
+
<th class="is-num">Visits</th>
|
|
3158
|
+
<th class="is-num">Orders</th>
|
|
3159
|
+
<th class="is-num">Conversion</th>
|
|
3160
|
+
<th class="is-num">Revenue</th>
|
|
3161
|
+
</tr>
|
|
3162
|
+
</thead>
|
|
3163
|
+
<tbody>
|
|
3164
|
+
<tr>
|
|
3165
|
+
<td>
|
|
3166
|
+
<span class="ui-skeleton__line">
|
|
3167
|
+
</span>
|
|
3168
|
+
</td>
|
|
3169
|
+
<td>
|
|
3170
|
+
<span class="ui-skeleton__line">
|
|
3171
|
+
</span>
|
|
3172
|
+
</td>
|
|
3173
|
+
<td>
|
|
3174
|
+
<span class="ui-skeleton__line">
|
|
3175
|
+
</span>
|
|
3176
|
+
</td>
|
|
3177
|
+
<td>
|
|
3178
|
+
<span class="ui-skeleton__line">
|
|
3179
|
+
</span>
|
|
3180
|
+
</td>
|
|
3181
|
+
<td>
|
|
3182
|
+
<span class="ui-skeleton__line">
|
|
3183
|
+
</span>
|
|
3184
|
+
</td>
|
|
3185
|
+
</tr>
|
|
3186
|
+
<tr>
|
|
3187
|
+
<td>
|
|
3188
|
+
<span class="ui-skeleton__line">
|
|
3189
|
+
</span>
|
|
3190
|
+
</td>
|
|
3191
|
+
<td>
|
|
3192
|
+
<span class="ui-skeleton__line">
|
|
3193
|
+
</span>
|
|
3194
|
+
</td>
|
|
3195
|
+
<td>
|
|
3196
|
+
<span class="ui-skeleton__line">
|
|
3197
|
+
</span>
|
|
3198
|
+
</td>
|
|
3199
|
+
<td>
|
|
3200
|
+
<span class="ui-skeleton__line">
|
|
3201
|
+
</span>
|
|
3202
|
+
</td>
|
|
3203
|
+
<td>
|
|
3204
|
+
<span class="ui-skeleton__line">
|
|
3205
|
+
</span>
|
|
3206
|
+
</td>
|
|
3207
|
+
</tr>
|
|
3208
|
+
<tr>
|
|
3209
|
+
<td>
|
|
3210
|
+
<span class="ui-skeleton__line">
|
|
3211
|
+
</span>
|
|
3212
|
+
</td>
|
|
3213
|
+
<td>
|
|
3214
|
+
<span class="ui-skeleton__line">
|
|
3215
|
+
</span>
|
|
3216
|
+
</td>
|
|
3217
|
+
<td>
|
|
3218
|
+
<span class="ui-skeleton__line">
|
|
3219
|
+
</span>
|
|
3220
|
+
</td>
|
|
3221
|
+
<td>
|
|
3222
|
+
<span class="ui-skeleton__line">
|
|
3223
|
+
</span>
|
|
3224
|
+
</td>
|
|
3225
|
+
<td>
|
|
3226
|
+
<span class="ui-skeleton__line">
|
|
3227
|
+
</span>
|
|
3228
|
+
</td>
|
|
3229
|
+
</tr>
|
|
3230
|
+
</tbody>
|
|
3231
|
+
</table>
|
|
3232
|
+
</div>
|
|
3233
|
+
<div class="ui-table-wrap ui-skeleton--table ui-index" aria-busy="true">
|
|
3234
|
+
<span class="ui-sr-only" role="status">Loading…</span>
|
|
3235
|
+
<table class="ui-table ui-table--index" aria-hidden="true">
|
|
3236
|
+
<thead>
|
|
3237
|
+
<tr>
|
|
3238
|
+
<th>Supplier</th>
|
|
3239
|
+
<th>Location</th>
|
|
3240
|
+
<th>Verdict</th>
|
|
3241
|
+
<th class="is-num">Score</th>
|
|
3242
|
+
<th>Ads</th>
|
|
3243
|
+
</tr>
|
|
3244
|
+
</thead>
|
|
3245
|
+
<tbody>
|
|
3246
|
+
<tr>
|
|
3247
|
+
<td>
|
|
3248
|
+
<span class="ui-skeleton__line">
|
|
3249
|
+
</span>
|
|
3250
|
+
</td>
|
|
3251
|
+
<td>
|
|
3252
|
+
<span class="ui-skeleton__line">
|
|
3253
|
+
</span>
|
|
3254
|
+
</td>
|
|
3255
|
+
<td>
|
|
3256
|
+
<span class="ui-skeleton__line">
|
|
3257
|
+
</span>
|
|
3258
|
+
</td>
|
|
3259
|
+
<td>
|
|
3260
|
+
<span class="ui-skeleton__line">
|
|
3261
|
+
</span>
|
|
3262
|
+
</td>
|
|
3263
|
+
<td>
|
|
3264
|
+
<span class="ui-skeleton__line">
|
|
3265
|
+
</span>
|
|
3266
|
+
</td>
|
|
3267
|
+
</tr>
|
|
3268
|
+
<tr>
|
|
3269
|
+
<td>
|
|
3270
|
+
<span class="ui-skeleton__line">
|
|
3271
|
+
</span>
|
|
3272
|
+
</td>
|
|
3273
|
+
<td>
|
|
3274
|
+
<span class="ui-skeleton__line">
|
|
3275
|
+
</span>
|
|
3276
|
+
</td>
|
|
3277
|
+
<td>
|
|
3278
|
+
<span class="ui-skeleton__line">
|
|
3279
|
+
</span>
|
|
3280
|
+
</td>
|
|
3281
|
+
<td>
|
|
3282
|
+
<span class="ui-skeleton__line">
|
|
3283
|
+
</span>
|
|
3284
|
+
</td>
|
|
3285
|
+
<td>
|
|
3286
|
+
<span class="ui-skeleton__line">
|
|
3287
|
+
</span>
|
|
3288
|
+
</td>
|
|
3289
|
+
</tr>
|
|
3290
|
+
<tr>
|
|
3291
|
+
<td>
|
|
3292
|
+
<span class="ui-skeleton__line">
|
|
3293
|
+
</span>
|
|
3294
|
+
</td>
|
|
3295
|
+
<td>
|
|
3296
|
+
<span class="ui-skeleton__line">
|
|
3297
|
+
</span>
|
|
3298
|
+
</td>
|
|
3299
|
+
<td>
|
|
3300
|
+
<span class="ui-skeleton__line">
|
|
3301
|
+
</span>
|
|
3302
|
+
</td>
|
|
3303
|
+
<td>
|
|
3304
|
+
<span class="ui-skeleton__line">
|
|
3305
|
+
</span>
|
|
3306
|
+
</td>
|
|
3307
|
+
<td>
|
|
3308
|
+
<span class="ui-skeleton__line">
|
|
3309
|
+
</span>
|
|
3310
|
+
</td>
|
|
3311
|
+
</tr>
|
|
3312
|
+
</tbody>
|
|
3313
|
+
</table>
|
|
3314
|
+
</div>
|
|
3315
|
+
<div aria-busy="true">
|
|
3316
|
+
<span class="ui-sr-only" role="status">Loading…</span>
|
|
3317
|
+
<ul class="ui-list ui-skeleton--list" aria-hidden="true">
|
|
3318
|
+
<li class="ui-list__item">
|
|
3319
|
+
<span class="ui-skeleton__block">
|
|
3320
|
+
</span>
|
|
3321
|
+
<span class="ui-list__body">
|
|
3322
|
+
<span class="ui-skeleton__line">
|
|
3323
|
+
</span>
|
|
3324
|
+
<span class="ui-skeleton__line">
|
|
3325
|
+
</span>
|
|
3326
|
+
</span>
|
|
3327
|
+
</li>
|
|
3328
|
+
<li class="ui-list__item">
|
|
3329
|
+
<span class="ui-skeleton__block">
|
|
3330
|
+
</span>
|
|
3331
|
+
<span class="ui-list__body">
|
|
3332
|
+
<span class="ui-skeleton__line">
|
|
3333
|
+
</span>
|
|
3334
|
+
<span class="ui-skeleton__line">
|
|
3335
|
+
</span>
|
|
3336
|
+
</span>
|
|
3337
|
+
</li>
|
|
3338
|
+
<li class="ui-list__item">
|
|
3339
|
+
<span class="ui-skeleton__block">
|
|
3340
|
+
</span>
|
|
3341
|
+
<span class="ui-list__body">
|
|
3342
|
+
<span class="ui-skeleton__line">
|
|
3343
|
+
</span>
|
|
3344
|
+
<span class="ui-skeleton__line">
|
|
3345
|
+
</span>
|
|
3346
|
+
</span>
|
|
3347
|
+
</li>
|
|
3348
|
+
</ul>
|
|
3349
|
+
</div>
|
|
3350
|
+
<div aria-busy="true">
|
|
3351
|
+
<span class="ui-sr-only" role="status">Loading…</span>
|
|
3352
|
+
<ul class="ui-list ui-skeleton--list" aria-hidden="true">
|
|
3353
|
+
<li class="ui-list__item">
|
|
3354
|
+
<span class="ui-skeleton__block ui-skeleton__block--round">
|
|
3355
|
+
</span>
|
|
3356
|
+
<span class="ui-list__body">
|
|
3357
|
+
<span class="ui-skeleton__line">
|
|
3358
|
+
</span>
|
|
3359
|
+
<span class="ui-skeleton__line">
|
|
3360
|
+
</span>
|
|
3361
|
+
</span>
|
|
3362
|
+
</li>
|
|
3363
|
+
<li class="ui-list__item">
|
|
3364
|
+
<span class="ui-skeleton__block ui-skeleton__block--round">
|
|
3365
|
+
</span>
|
|
3366
|
+
<span class="ui-list__body">
|
|
3367
|
+
<span class="ui-skeleton__line">
|
|
3368
|
+
</span>
|
|
3369
|
+
<span class="ui-skeleton__line">
|
|
3370
|
+
</span>
|
|
3371
|
+
</span>
|
|
3372
|
+
</li>
|
|
3373
|
+
<li class="ui-list__item">
|
|
3374
|
+
<span class="ui-skeleton__block ui-skeleton__block--round">
|
|
3375
|
+
</span>
|
|
3376
|
+
<span class="ui-list__body">
|
|
3377
|
+
<span class="ui-skeleton__line">
|
|
3378
|
+
</span>
|
|
3379
|
+
<span class="ui-skeleton__line">
|
|
3380
|
+
</span>
|
|
3381
|
+
</span>
|
|
3382
|
+
</li>
|
|
3383
|
+
</ul>
|
|
3384
|
+
</div>
|
|
3385
|
+
<div aria-busy="true">
|
|
3386
|
+
<span class="ui-sr-only" role="status">Loading…</span>
|
|
3387
|
+
<ul class="ui-list ui-list--compact ui-skeleton--compact" aria-hidden="true">
|
|
3388
|
+
<li class="ui-list__item">
|
|
3389
|
+
<span class="ui-list__row">
|
|
3390
|
+
<span class="ui-skeleton__block" style="width:16px;height:16px">
|
|
3391
|
+
</span>
|
|
3392
|
+
<span class="ui-skeleton__line">
|
|
3393
|
+
</span>
|
|
3394
|
+
</span>
|
|
3395
|
+
</li>
|
|
3396
|
+
<li class="ui-list__item">
|
|
3397
|
+
<span class="ui-list__row">
|
|
3398
|
+
<span class="ui-skeleton__block" style="width:16px;height:16px">
|
|
3399
|
+
</span>
|
|
3400
|
+
<span class="ui-skeleton__line">
|
|
3401
|
+
</span>
|
|
3402
|
+
</span>
|
|
3403
|
+
</li>
|
|
3404
|
+
<li class="ui-list__item">
|
|
3405
|
+
<span class="ui-list__row">
|
|
3406
|
+
<span class="ui-skeleton__block" style="width:16px;height:16px">
|
|
3407
|
+
</span>
|
|
3408
|
+
<span class="ui-skeleton__line">
|
|
3409
|
+
</span>
|
|
3410
|
+
</span>
|
|
3411
|
+
</li>
|
|
3412
|
+
</ul>
|
|
3413
|
+
</div>
|
|
3414
|
+
<div aria-busy="true">
|
|
3415
|
+
<span class="ui-sr-only" role="status">Loading…</span>
|
|
3416
|
+
<div class="ui-cardgrid ui-skeleton--grid" aria-hidden="true">
|
|
3417
|
+
<div class="ui-card ui-card--media">
|
|
3418
|
+
<span class="ui-card__media">
|
|
3419
|
+
</span>
|
|
3420
|
+
<span class="ui-card__body">
|
|
3421
|
+
<span class="ui-skeleton__line">
|
|
3422
|
+
</span>
|
|
3423
|
+
<span class="ui-skeleton__line">
|
|
3424
|
+
</span>
|
|
3425
|
+
</span>
|
|
3426
|
+
</div>
|
|
3427
|
+
<div class="ui-card ui-card--media">
|
|
3428
|
+
<span class="ui-card__media">
|
|
3429
|
+
</span>
|
|
3430
|
+
<span class="ui-card__body">
|
|
3431
|
+
<span class="ui-skeleton__line">
|
|
3432
|
+
</span>
|
|
3433
|
+
<span class="ui-skeleton__line">
|
|
3434
|
+
</span>
|
|
3435
|
+
</span>
|
|
3436
|
+
</div>
|
|
3437
|
+
<div class="ui-card ui-card--media">
|
|
3438
|
+
<span class="ui-card__media">
|
|
3439
|
+
</span>
|
|
3440
|
+
<span class="ui-card__body">
|
|
3441
|
+
<span class="ui-skeleton__line">
|
|
3442
|
+
</span>
|
|
3443
|
+
<span class="ui-skeleton__line">
|
|
3444
|
+
</span>
|
|
3445
|
+
</span>
|
|
3446
|
+
</div>
|
|
3447
|
+
</div>
|
|
3448
|
+
</div>
|
|
3449
|
+
<div aria-busy="true">
|
|
3450
|
+
<span class="ui-sr-only" role="status">Loading…</span>
|
|
3451
|
+
<div class="ui-board ui-skeleton--board" aria-hidden="true">
|
|
3452
|
+
<div class="ui-board__col">
|
|
3453
|
+
<span class="ui-board__head">
|
|
3454
|
+
<span class="ui-skeleton__line" style="width:40%">
|
|
3455
|
+
</span>
|
|
3456
|
+
</span>
|
|
3457
|
+
<ol class="ui-board__list">
|
|
3458
|
+
<li>
|
|
3459
|
+
</li>
|
|
3460
|
+
<li>
|
|
3461
|
+
</li>
|
|
3462
|
+
<li>
|
|
3463
|
+
</li>
|
|
3464
|
+
</ol>
|
|
3465
|
+
</div>
|
|
3466
|
+
<div class="ui-board__col">
|
|
3467
|
+
<span class="ui-board__head">
|
|
3468
|
+
<span class="ui-skeleton__line" style="width:40%">
|
|
3469
|
+
</span>
|
|
3470
|
+
</span>
|
|
3471
|
+
<ol class="ui-board__list">
|
|
3472
|
+
<li>
|
|
3473
|
+
</li>
|
|
3474
|
+
<li>
|
|
3475
|
+
</li>
|
|
3476
|
+
<li>
|
|
3477
|
+
</li>
|
|
3478
|
+
</ol>
|
|
3479
|
+
</div>
|
|
3480
|
+
<div class="ui-board__col">
|
|
3481
|
+
<span class="ui-board__head">
|
|
3482
|
+
<span class="ui-skeleton__line" style="width:40%">
|
|
3483
|
+
</span>
|
|
3484
|
+
</span>
|
|
3485
|
+
<ol class="ui-board__list">
|
|
3486
|
+
<li>
|
|
3487
|
+
</li>
|
|
3488
|
+
<li>
|
|
3489
|
+
</li>
|
|
3490
|
+
<li>
|
|
3491
|
+
</li>
|
|
3492
|
+
</ol>
|
|
3493
|
+
</div>
|
|
3494
|
+
</div>
|
|
3495
|
+
</div>
|
|
3496
|
+
</div></code></pre></details></figure><figure class="cat-demo"><figcaption>Trạng thái · nội dung dài: một dòng + ellipsis (<code>ui-trunc</code>, bản đầy đủ ở <code>title</code>), ghi chú tối đa 2 dòng (<code>ui-clamp-2</code>)</figcaption><div class="cat-live"><div class="ui-table-wrap"><table class="ui-table"><caption class="ui-sr-only">Long content</caption><thead><tr><th scope="col">Page</th><th scope="col">Research note</th><th scope="col" class="is-num">Views</th></tr></thead><tbody><tr><th scope="row" class="ui-table__rowhead"><span class="ui-trunc" style="--ui-trunc:260px">/products/the-extremely-long-handle-of-a-limited-edition-holiday-bundle-with-three-serums</span></th><td><span class="ui-clamp-2" title="Factory confirmed on video call, 2 lines max here; the full note is on the detail page with sources and the WhatsApp transcript.">Factory confirmed on video call, 2 lines max here; the full note is on the detail page with sources and the WhatsApp transcript.</span></td><td class="is-num">1,284</td></tr></tbody></table></div></div><details class="cat-code"><summary>Markup</summary><pre><code><div class="ui-table-wrap">
|
|
3497
|
+
<table class="ui-table">
|
|
3498
|
+
<caption class="ui-sr-only">Long content</caption>
|
|
3499
|
+
<thead>
|
|
3500
|
+
<tr>
|
|
3501
|
+
<th scope="col">Page</th>
|
|
3502
|
+
<th scope="col">Research note</th>
|
|
3503
|
+
<th scope="col" class="is-num">Views</th>
|
|
3504
|
+
</tr>
|
|
3505
|
+
</thead>
|
|
3506
|
+
<tbody>
|
|
3507
|
+
<tr>
|
|
3508
|
+
<th scope="row" class="ui-table__rowhead">
|
|
3509
|
+
<span class="ui-trunc" style="--ui-trunc:260px">/products/the-extremely-long-handle-of-a-limited-edition-holiday-bundle-with-three-serums</span>
|
|
3510
|
+
</th>
|
|
3511
|
+
<td>
|
|
3512
|
+
<span class="ui-clamp-2" title="Factory confirmed on video call, 2 lines max here; the full note is on the detail page with sources and the WhatsApp transcript.">Factory confirmed on video call, 2 lines max here; the full note is on the detail page with sources and the WhatsApp transcript.</span>
|
|
3513
|
+
</td>
|
|
3514
|
+
<td class="is-num">1,284</td>
|
|
3515
|
+
</tr>
|
|
3516
|
+
</tbody>
|
|
3517
|
+
</table>
|
|
3518
|
+
</div></code></pre></details></figure></section>
|
|
607
3519
|
<section id="resizer"><h2>Thanh kéo giữa hai cột</h2><p>Thanh <code>ui-resizer</code> đứng giữa hai cột, người dùng kéo để đổi độ rộng. Phần NHÌN (vạch nắm hiện khi rê chuột hoặc focus bàn phím, vùng chạm 24px cho ngón tay, lớp che khi đang kéo) là của gemboss-ui.css; vị trí và hành vi là của bề mặt: dùng <b>pointer event</b> (chạm là một pointer), gắn <code>ui-resizing</code> lên <code><body></code> trong lúc kéo, phím mũi tên / Home / End di chuyển nó, kẹp theo bề rộng THẬT của khung (không theo một con số), và nhớ độ rộng theo trình duyệt. Admin: <code>useResizableChatPanel</code>; gemcare: viết tay theo đúng markup này.</p><figure class="cat-demo"><figcaption>Rê chuột hoặc Tab vào khe giữa để thấy vạch nắm</figcaption><div class="cat-live"><div style="display:grid;grid-template-columns:200px 5px minmax(0,1fr);height:140px;border:1px solid var(--gemboss-divider);border-radius:var(--gemboss-radius-md);overflow:hidden"><div style="padding:12px;background:var(--gemboss-surface)">Danh sách</div><div class="ui-resizer" role="separator" aria-orientation="vertical" aria-label="Độ rộng danh sách" tabindex="0" aria-valuenow="200" aria-valuemin="160" aria-valuemax="420"></div><div style="padding:12px;background:var(--gemboss-surface)">Nội dung</div></div></div><details class="cat-code"><summary>Markup</summary><pre><code><div style="display:grid;grid-template-columns:200px 5px minmax(0,1fr);height:140px;border:1px solid var(--gemboss-divider);border-radius:var(--gemboss-radius-md);overflow:hidden">
|
|
608
3520
|
<div style="padding:12px;background:var(--gemboss-surface)">Danh sách</div>
|
|
609
3521
|
<div class="ui-resizer" role="separator" aria-orientation="vertical" aria-label="Độ rộng danh sách" tabindex="0" aria-valuenow="200" aria-valuemin="160" aria-valuemax="420">
|
|
@@ -633,7 +3545,7 @@ body{margin:0;background:var(--gemboss-app-bg,#f1f1f1);color:var(--gemboss-text)
|
|
|
633
3545
|
<button type="button" class="ui-btn ui-btn--primary">Xoá</button>
|
|
634
3546
|
</div>
|
|
635
3547
|
</div></code></pre></details></figure></section>
|
|
636
|
-
<section id="shell"><h2>Khung app</h2><p>Topbar 56px, rail 240px, ≤760px thành ngăn kéo. Logo <code>BrandLockup</code>, tài khoản <code>AccountMenu</code> (bấm chữ viết tắt), mục Trợ lý ở chân rail có class <code>gnav-assistant</code>.</p><figure class="cat-demo cat-screen"><figcaption>AppShell + BrandLockup + AccountMenu + Icon</figcaption><iframe title="AppShell + BrandLockup + AccountMenu + Icon" style="height:460px" srcdoc="<!doctype html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="../gemboss-ui.css"></head><body><div class="gemboss-platform-shell"><header class="gemboss-platform-topbar"><div class="gemboss-topbar-start"><button type="button" class="gemboss-mobile-menu-btn" aria-label="Mở menu" aria-expanded="false" data-label-open="Mở menu" data-label-close="Đóng menu" aria-controls=":R0:"><svg width="20" height="20" viewBox="0 0 20 20" aria-hidden="true"><path d="M3 5.5h14M3 10h14M3 14.5h14" stroke="currentColor" stroke-width="1.7" stroke-linecap="round"></path></svg></button><a class="gb-brand" href="#" aria-label="GemFactory home"><svg class="gb-brand-gem" viewBox="0 0 32 40" width="20.8" height="26" aria-hidden="true" focusable="false"><g transform="translate(0,0.8) scale(0.31)"><polygon points="26,14 74,14 66,50 34,50" fill="#5661F5" fill-opacity="0.92"></polygon><path d="M26,14 74,14 96,50 50,110 4,50Z" fill="none" stroke="currentColor" stroke-width="8.75" stroke-linejoin="round"></path><path d="M4,50H96M26,14 34,50M74,14 66,50M34,50 50,110M66,50 50,110" fill="none" stroke="currentColor" stroke-width="5.45" stroke-linejoin="round"></path></g></svg><span class="gb-brand-name">GemFactory</span></a></div><div class="gemboss-topbar-center"><form role="search" method="get" action="#" class="gemboss-topbar-search"><svg viewBox="0 0 20 20" width="18" height="18" class="gemboss-topbar-search-icon" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="8.8" cy="8.8" r="5.3"></circle><path d="M12.8 12.8 17 17"></path></g></svg><input class="gemboss-topbar-search-input" type="search" name="q" placeholder="Search by #ID, name or key" aria-label="Search by #ID, name or key" autoComplete="off" enterKeyHint="search"/><kbd class="gemboss-topbar-search-kbd" aria-hidden="true">⌘K</kbd></form></div><div class="gemboss-topbar-end"><details class="gb-account"><summary class="gemboss-account-chip" aria-label="Account · Minh Anh" title="Minh Anh">MA</summary><div role="menu" class="gemboss-popover-surface gemboss-account-menu"><div class="gb-account-head"><div class="gb-account-name">Minh Anh</div><div class="gb-account-email">ma@gemboss.ai</div><div class="gb-account-role">Designer</div></div><a role="menuitem" class="gemboss-account-menu-item" href="#">Cài đặt</a><form method="post" action="#" class="gb-account-form"><button role="menuitem" type="submit" class="gemboss-account-menu-item danger">Đăng xuất</button></form></div></details></div></header><nav class="icon-nav" aria-label="Main navigation" id=":R0:"><div class="gnav-scroll"><div class="gnav-heading">Kho</div><div class="gnav-group active"><a class="gnav-item active" aria-current="page" href="#"><span class="gnav-ico"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3.5" width="4" height="13" rx="1.2"></rect><rect x="8" y="3.5" width="4" height="9" rx="1.2"></rect><rect x="13" y="3.5" width="4" height="6" rx="1.2"></rect></g></svg></span><span class="gnav-label">Board</span></a></div><div class="gnav-group"><a class="gnav-item" href="#"><span class="gnav-ico"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="3.5" y="3" width="13" height="3.5" rx="1"></rect><rect x="3.5" y="8.25" width="13" height="3.5" rx="1"></rect><rect x="3.5" y="13.5" width="13" height="3.5" rx="1"></rect></g></svg></span><span class="gnav-label">Ghép trang</span></a></div><div class="gnav-group"><a class="gnav-item" href="#"><span class="gnav-ico"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M10 3.2 17.3 16H2.7z"></path><path d="M10 8.2v3.6M10 13.9v.1"></path></g></svg></span><span class="gnav-label">Framework thiếu</span><span class="gnav-count" aria-label="3 mục đang mở">3</span></a></div></div><div class="gnav-bottom"><div class="gnav-sep"></div><a class="gnav-item gnav-assistant" href="#"><span class="gnav-ico"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 4.5h14v9H8.5L5 16.5v-3H3z"></path></g></svg></span><span class="gnav-label">Trợ lý</span></a></div></nav><button type="button" class="gemboss-mobile-nav-backdrop" aria-label="Đóng menu" tabindex="-1"></button><main class="gemboss-platform-main"><div style="padding:24px"><h1 style="margin:0">Nội dung màn</h1></div></main></div></body></html>"></iframe><details class="cat-code"><summary>Markup</summary><pre><code><div class="gemboss-platform-shell">
|
|
3548
|
+
<section id="shell"><h2>Khung app</h2><p>Topbar 56px, rail 240px, ≤760px thành ngăn kéo. Logo <code>BrandLockup</code>, tài khoản <code>AccountMenu</code> (bấm chữ viết tắt), mục Trợ lý ở chân rail có class <code>gnav-assistant</code>.</p><figure class="cat-demo cat-screen"><figcaption>AppShell + BrandLockup + AccountMenu + Icon</figcaption><iframe title="AppShell + BrandLockup + AccountMenu + Icon" style="height:460px" srcdoc="<!doctype html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="../gemboss-ui.css"><link rel="stylesheet" href="../src/collections.css"><link rel="stylesheet" href="../src/reactions.css"></head><body><div class="gemboss-platform-shell"><header class="gemboss-platform-topbar"><div class="gemboss-topbar-start"><button type="button" class="gemboss-mobile-menu-btn" aria-label="Mở menu" aria-expanded="false" data-label-open="Mở menu" data-label-close="Đóng menu" aria-controls=":R0:"><svg width="20" height="20" viewBox="0 0 20 20" aria-hidden="true"><path d="M3 5.5h14M3 10h14M3 14.5h14" stroke="currentColor" stroke-width="1.7" stroke-linecap="round"></path></svg></button><a class="gb-brand" href="#" aria-label="GemFactory home"><svg class="gb-brand-gem" viewBox="0 0 32 40" width="20.8" height="26" aria-hidden="true" focusable="false"><g transform="translate(0,0.8) scale(0.31)"><polygon points="26,14 74,14 66,50 34,50" fill="#5661F5" fill-opacity="0.92"></polygon><path d="M26,14 74,14 96,50 50,110 4,50Z" fill="none" stroke="currentColor" stroke-width="8.75" stroke-linejoin="round"></path><path d="M4,50H96M26,14 34,50M74,14 66,50M34,50 50,110M66,50 50,110" fill="none" stroke="currentColor" stroke-width="5.45" stroke-linejoin="round"></path></g></svg><span class="gb-brand-name">GemFactory</span></a></div><div class="gemboss-topbar-center"><form role="search" method="get" action="#" class="gemboss-topbar-search"><svg viewBox="0 0 20 20" width="18" height="18" class="gemboss-topbar-search-icon" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="8.8" cy="8.8" r="5.3"></circle><path d="M12.8 12.8 17 17"></path></g></svg><input class="gemboss-topbar-search-input" type="search" name="q" placeholder="Search by #ID, name or key" aria-label="Search by #ID, name or key" autoComplete="off" enterKeyHint="search"/><kbd class="gemboss-topbar-search-kbd" aria-hidden="true">⌘K</kbd></form></div><div class="gemboss-topbar-end"><details class="gb-account"><summary class="gemboss-account-chip" aria-label="Account · Minh Anh" title="Minh Anh">MA</summary><div role="menu" class="gemboss-popover-surface gemboss-account-menu"><div class="gb-account-head"><div class="gb-account-name">Minh Anh</div><div class="gb-account-email">ma@gemboss.ai</div><div class="gb-account-role">Designer</div></div><a role="menuitem" class="gemboss-account-menu-item" href="#">Cài đặt</a><form method="post" action="#" class="gb-account-form"><button role="menuitem" type="submit" class="gemboss-account-menu-item danger">Đăng xuất</button></form></div></details></div></header><nav class="icon-nav" aria-label="Main navigation" id=":R0:"><div class="gnav-scroll"><div class="gnav-heading">Kho</div><div class="gnav-group active"><a class="gnav-item active" aria-current="page" href="#"><span class="gnav-ico"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3.5" width="4" height="13" rx="1.2"></rect><rect x="8" y="3.5" width="4" height="9" rx="1.2"></rect><rect x="13" y="3.5" width="4" height="6" rx="1.2"></rect></g></svg></span><span class="gnav-label">Board</span></a></div><div class="gnav-group"><a class="gnav-item" href="#"><span class="gnav-ico"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="3.5" y="3" width="13" height="3.5" rx="1"></rect><rect x="3.5" y="8.25" width="13" height="3.5" rx="1"></rect><rect x="3.5" y="13.5" width="13" height="3.5" rx="1"></rect></g></svg></span><span class="gnav-label">Ghép trang</span></a></div><div class="gnav-group"><a class="gnav-item" href="#"><span class="gnav-ico"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M10 3.2 17.3 16H2.7z"></path><path d="M10 8.2v3.6M10 13.9v.1"></path></g></svg></span><span class="gnav-label">Framework thiếu</span><span class="gnav-count" aria-label="3 mục đang mở">3</span></a></div></div><div class="gnav-bottom"><div class="gnav-sep"></div><a class="gnav-item gnav-assistant" href="#"><span class="gnav-ico"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 4.5h14v9H8.5L5 16.5v-3H3z"></path></g></svg></span><span class="gnav-label">Trợ lý</span></a></div></nav><button type="button" class="gemboss-mobile-nav-backdrop" aria-label="Đóng menu" tabindex="-1"></button><main class="gemboss-platform-main"><div style="padding:24px"><h1 style="margin:0">Nội dung màn</h1></div></main></div></body></html>"></iframe><details class="cat-code"><summary>Markup</summary><pre><code><div class="gemboss-platform-shell">
|
|
637
3549
|
<header class="gemboss-platform-topbar">
|
|
638
3550
|
<div class="gemboss-topbar-start">
|
|
639
3551
|
<button type="button" class="gemboss-mobile-menu-btn" aria-label="Mở menu" aria-expanded="false" data-label-open="Mở menu" data-label-close="Đóng menu" aria-controls=":R0:">
|
|
@@ -765,7 +3677,7 @@ body{margin:0;background:var(--gemboss-app-bg,#f1f1f1);color:var(--gemboss-text)
|
|
|
765
3677
|
</div>
|
|
766
3678
|
</main>
|
|
767
3679
|
</div></code></pre></details></figure></section>
|
|
768
|
-
<section id="nav"><h2>Chờ điều hướng</h2><p>Bấm một mục rail là có phản hồi ở khung hình đầu tiên: icon thành spinner trong đúng ô 20px (chữ không xê dịch), mục con có spinner 12px ở phần thụt lề ngay trước chữ, con trỏ chờ. Một trạng thái, ba cách đặt: <code>RailItem pending</code> / <code>RailSubItem pending</code> (React, thành <code>aria-busy="true"</code>); <code>RailItem as={NavLink}</code> của <code>@gemboss/ui/next</code> (đọc <code>useLinkStatus</code> của Next, tải trước khi chuột hoặc focus bàn phím dừng 120 ms, hoặc khi chạm); trang HTML thuần nạp <code>kit-plain.js</code> là tự có, kể cả tải trước (speculation rules ở Chromium, không có thì <code><link rel="prefetch"></code>). Link trong nội dung trang thêm <code>data-gb-pending</code> ("inline" hoặc "corner").</p><figure class="cat-demo cat-screen"><figcaption>RailItem pending + RailSubItem pending</figcaption><iframe title="RailItem pending + RailSubItem pending" style="height:300px" srcdoc="<!doctype html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="../gemboss-ui.css"></head><body><div class="gemboss-platform-shell"><header class="gemboss-platform-topbar"><div class="gemboss-topbar-start"><button type="button" class="gemboss-mobile-menu-btn" aria-label="Open menu" aria-expanded="false" data-label-open="Open menu" data-label-close="Close menu" aria-controls=":R0:"><svg width="20" height="20" viewBox="0 0 20 20" aria-hidden="true"><path d="M3 5.5h14M3 10h14M3 14.5h14" stroke="currentColor" stroke-width="1.7" stroke-linecap="round"></path></svg></button><a class="gb-brand" href="#" aria-label="GemFactory home"><svg class="gb-brand-gem" viewBox="0 0 32 40" width="20.8" height="26" aria-hidden="true" focusable="false"><g transform="translate(0,0.8) scale(0.31)"><polygon points="26,14 74,14 66,50 34,50" fill="#5661F5" fill-opacity="0.92"></polygon><path d="M26,14 74,14 96,50 50,110 4,50Z" fill="none" stroke="currentColor" stroke-width="8.75" stroke-linejoin="round"></path><path d="M4,50H96M26,14 34,50M74,14 66,50M34,50 50,110M66,50 50,110" fill="none" stroke="currentColor" stroke-width="5.45" stroke-linejoin="round"></path></g></svg><span class="gb-brand-name">GemFactory</span></a></div><div class="gemboss-topbar-center"></div><div class="gemboss-topbar-end"></div></header><nav class="icon-nav" aria-label="Main navigation" id=":R0:"><div class="gnav-scroll"><div class="gnav-group"><a class="gnav-item" href="#"><span class="gnav-ico"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3.5" width="4" height="13" rx="1.2"></rect><rect x="8" y="3.5" width="4" height="9" rx="1.2"></rect><rect x="13" y="3.5" width="4" height="6" rx="1.2"></rect></g></svg></span><span class="gnav-label">Board</span></a></div><div class="gnav-group"><a class="gnav-item" aria-busy="true" href="#"><span class="gnav-ico"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="3.5" y="3" width="13" height="3.5" rx="1"></rect><rect x="3.5" y="8.25" width="13" height="3.5" rx="1"></rect><rect x="3.5" y="13.5" width="13" height="3.5" rx="1"></rect></g></svg></span><span class="gnav-label">Ghép trang (đang mở)</span></a></div><div class="gnav-group active has-active-child"><a class="gnav-item active" aria-current="page" href="#"><span class="gnav-ico"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 16.5h14"></path><rect x="4.5" y="9" width="2.8" height="5.5" rx=".7"></rect><rect x="8.6" y="5" width="2.8" height="9.5" rx=".7"></rect><rect x="12.7" y="11" width="2.8" height="3.5" rx=".7"></rect></g></svg></span><span class="gnav-label">Báo cáo</span></a><ul class="gnav-sub"><li><a class="gnav-subitem active" aria-current="page" href="#">Tổng quan</a></li><li><a class="gnav-subitem" aria-busy="true" href="#">Theo kênh (đang mở)</a></li></ul></div></div></nav><button type="button" class="gemboss-mobile-nav-backdrop" aria-label="Close menu" tabindex="-1"></button><main class="gemboss-platform-main"><div style="padding:24px"><h1 style="margin:0">Tổng quan</h1></div></main></div></body></html>"></iframe><details class="cat-code"><summary>Markup</summary><pre><code><div class="gemboss-platform-shell">
|
|
3680
|
+
<section id="nav"><h2>Chờ điều hướng</h2><p>Bấm một mục rail là có phản hồi ở khung hình đầu tiên: icon thành spinner trong đúng ô 20px (chữ không xê dịch), mục con có spinner 12px ở phần thụt lề ngay trước chữ, con trỏ chờ. Một trạng thái, ba cách đặt: <code>RailItem pending</code> / <code>RailSubItem pending</code> (React, thành <code>aria-busy="true"</code>); <code>RailItem as={NavLink}</code> của <code>@gemboss/ui/next</code> (đọc <code>useLinkStatus</code> của Next, tải trước khi chuột hoặc focus bàn phím dừng 120 ms, hoặc khi chạm); trang HTML thuần nạp <code>kit-plain.js</code> là tự có, kể cả tải trước (speculation rules ở Chromium, không có thì <code><link rel="prefetch"></code>). Link trong nội dung trang thêm <code>data-gb-pending</code> ("inline" hoặc "corner").</p><figure class="cat-demo cat-screen"><figcaption>RailItem pending + RailSubItem pending</figcaption><iframe title="RailItem pending + RailSubItem pending" style="height:300px" srcdoc="<!doctype html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="../gemboss-ui.css"><link rel="stylesheet" href="../src/collections.css"><link rel="stylesheet" href="../src/reactions.css"></head><body><div class="gemboss-platform-shell"><header class="gemboss-platform-topbar"><div class="gemboss-topbar-start"><button type="button" class="gemboss-mobile-menu-btn" aria-label="Open menu" aria-expanded="false" data-label-open="Open menu" data-label-close="Close menu" aria-controls=":R0:"><svg width="20" height="20" viewBox="0 0 20 20" aria-hidden="true"><path d="M3 5.5h14M3 10h14M3 14.5h14" stroke="currentColor" stroke-width="1.7" stroke-linecap="round"></path></svg></button><a class="gb-brand" href="#" aria-label="GemFactory home"><svg class="gb-brand-gem" viewBox="0 0 32 40" width="20.8" height="26" aria-hidden="true" focusable="false"><g transform="translate(0,0.8) scale(0.31)"><polygon points="26,14 74,14 66,50 34,50" fill="#5661F5" fill-opacity="0.92"></polygon><path d="M26,14 74,14 96,50 50,110 4,50Z" fill="none" stroke="currentColor" stroke-width="8.75" stroke-linejoin="round"></path><path d="M4,50H96M26,14 34,50M74,14 66,50M34,50 50,110M66,50 50,110" fill="none" stroke="currentColor" stroke-width="5.45" stroke-linejoin="round"></path></g></svg><span class="gb-brand-name">GemFactory</span></a></div><div class="gemboss-topbar-center"></div><div class="gemboss-topbar-end"></div></header><nav class="icon-nav" aria-label="Main navigation" id=":R0:"><div class="gnav-scroll"><div class="gnav-group"><a class="gnav-item" href="#"><span class="gnav-ico"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3.5" width="4" height="13" rx="1.2"></rect><rect x="8" y="3.5" width="4" height="9" rx="1.2"></rect><rect x="13" y="3.5" width="4" height="6" rx="1.2"></rect></g></svg></span><span class="gnav-label">Board</span></a></div><div class="gnav-group"><a class="gnav-item" aria-busy="true" href="#"><span class="gnav-ico"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="3.5" y="3" width="13" height="3.5" rx="1"></rect><rect x="3.5" y="8.25" width="13" height="3.5" rx="1"></rect><rect x="3.5" y="13.5" width="13" height="3.5" rx="1"></rect></g></svg></span><span class="gnav-label">Ghép trang (đang mở)</span></a></div><div class="gnav-group active has-active-child"><a class="gnav-item active" aria-current="page" href="#"><span class="gnav-ico"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 16.5h14"></path><rect x="4.5" y="9" width="2.8" height="5.5" rx=".7"></rect><rect x="8.6" y="5" width="2.8" height="9.5" rx=".7"></rect><rect x="12.7" y="11" width="2.8" height="3.5" rx=".7"></rect></g></svg></span><span class="gnav-label">Báo cáo</span></a><ul class="gnav-sub"><li><a class="gnav-subitem active" aria-current="page" href="#">Tổng quan</a></li><li><a class="gnav-subitem" aria-busy="true" href="#">Theo kênh (đang mở)</a></li></ul></div></div></nav><button type="button" class="gemboss-mobile-nav-backdrop" aria-label="Close menu" tabindex="-1"></button><main class="gemboss-platform-main"><div style="padding:24px"><h1 style="margin:0">Tổng quan</h1></div></main></div></body></html>"></iframe><details class="cat-code"><summary>Markup</summary><pre><code><div class="gemboss-platform-shell">
|
|
769
3681
|
<header class="gemboss-platform-topbar">
|
|
770
3682
|
<div class="gemboss-topbar-start">
|
|
771
3683
|
<button type="button" class="gemboss-mobile-menu-btn" aria-label="Open menu" aria-expanded="false" data-label-open="Open menu" data-label-close="Close menu" aria-controls=":R0:">
|
|
@@ -885,7 +3797,7 @@ body{margin:0;background:var(--gemboss-app-bg,#f1f1f1);color:var(--gemboss-text)
|
|
|
885
3797
|
</span>
|
|
886
3798
|
</div>
|
|
887
3799
|
</div></code></pre></details></figure></section>
|
|
888
|
-
<section id="page"><h2>Bề rộng nội dung</h2><p>Rail bên trái, bên phải là một cột có bề rộng tối đa theo bậc của admin: <code>ui-page</code> 900px (<code>--ui-content-max</code>: danh sách, bảng, lưới card, dashboard), <code>--feed</code> 720, <code>--form</code> 662, <code>--canvas</code> 1440 (chỉ khi nội dung đo được là rộng hơn một cột chữ), <code>--full</code> không giới hạn (board, editor; ghi lý do). React: một <code>PageContainer width="form"</code> ngay trong <code>AppShell</code>. Một cap chỉ có tác dụng khi nó NHỎ HƠN chỗ trống thật: ở 1280 chỗ trống là 992. Hai khung dưới vẽ ở 1440, kéo ngang để xem hết.</p><figure class="cat-demo cat-screen"><figcaption>PageContainer width="default" ở 1440: cột 900</figcaption><div class="cat-wide"><iframe title="PageContainer width="default" ở 1440: cột 900" style="height:300px;width:1440px" srcdoc="<!doctype html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="../gemboss-ui.css"></head><body><div class="gemboss-platform-shell"><header class="gemboss-platform-topbar"><div class="gemboss-topbar-start"><button type="button" class="gemboss-mobile-menu-btn" aria-label="Open menu" aria-expanded="false" data-label-open="Open menu" data-label-close="Close menu" aria-controls=":R0:"><svg width="20" height="20" viewBox="0 0 20 20" aria-hidden="true"><path d="M3 5.5h14M3 10h14M3 14.5h14" stroke="currentColor" stroke-width="1.7" stroke-linecap="round"></path></svg></button><a class="gb-brand" href="#" aria-label="GemFactory home"><svg class="gb-brand-gem" viewBox="0 0 32 40" width="20.8" height="26" aria-hidden="true" focusable="false"><g transform="translate(0,0.8) scale(0.31)"><polygon points="26,14 74,14 66,50 34,50" fill="#5661F5" fill-opacity="0.92"></polygon><path d="M26,14 74,14 96,50 50,110 4,50Z" fill="none" stroke="currentColor" stroke-width="8.75" stroke-linejoin="round"></path><path d="M4,50H96M26,14 34,50M74,14 66,50M34,50 50,110M66,50 50,110" fill="none" stroke="currentColor" stroke-width="5.45" stroke-linejoin="round"></path></g></svg><span class="gb-brand-name">GemFactory</span></a></div><div class="gemboss-topbar-center"></div><div class="gemboss-topbar-end"></div></header><nav class="icon-nav" aria-label="Main navigation" id=":R0:"><div class="gnav-scroll"><div class="gnav-heading">Kho</div><div class="gnav-group active"><a class="gnav-item active" aria-current="page" href="#"><span class="gnav-ico"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3.5" width="4" height="13" rx="1.2"></rect><rect x="8" y="3.5" width="4" height="9" rx="1.2"></rect><rect x="13" y="3.5" width="4" height="6" rx="1.2"></rect></g></svg></span><span class="gnav-label">Board</span></a></div><div class="gnav-group"><a class="gnav-item" href="#"><span class="gnav-ico"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="3.5" y="3" width="13" height="3.5" rx="1"></rect><rect x="3.5" y="8.25" width="13" height="3.5" rx="1"></rect><rect x="3.5" y="13.5" width="13" height="3.5" rx="1"></rect></g></svg></span><span class="gnav-label">Ghép trang</span></a></div><div class="gnav-group"><a class="gnav-item" href="#"><span class="gnav-ico"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M10 3.2 17.3 16H2.7z"></path><path d="M10 8.2v3.6M10 13.9v.1"></path></g></svg></span><span class="gnav-label">Framework thiếu</span><span class="gnav-count" aria-label="3 mục đang mở">3</span></a></div></div></nav><button type="button" class="gemboss-mobile-nav-backdrop" aria-label="Close menu" tabindex="-1"></button><main class="gemboss-platform-main"><div class="ui-page"><h1 style="margin:0 0 16px">Board</h1><div class="ui-card"><div class="ui-card__title">#412 Hero split</div><p class="ui-muted">Cột 900px, căn giữa trong chỗ trống bên phải rail.</p></div></div></main></div></body></html>"></iframe></div><details class="cat-code"><summary>Markup</summary><pre><code><div class="gemboss-platform-shell">
|
|
3800
|
+
<section id="page"><h2>Bề rộng nội dung</h2><p>Rail bên trái, bên phải là một cột có bề rộng tối đa theo bậc của admin: <code>ui-page</code> 900px (<code>--ui-content-max</code>: danh sách, bảng, lưới card, dashboard), <code>--feed</code> 720, <code>--form</code> 662, <code>--canvas</code> 1440 (chỉ khi nội dung đo được là rộng hơn một cột chữ), <code>--full</code> không giới hạn (board, editor; ghi lý do). React: một <code>PageContainer width="form"</code> ngay trong <code>AppShell</code>. Một cap chỉ có tác dụng khi nó NHỎ HƠN chỗ trống thật: ở 1280 chỗ trống là 992. Hai khung dưới vẽ ở 1440, kéo ngang để xem hết.</p><figure class="cat-demo cat-screen"><figcaption>PageContainer width="default" ở 1440: cột 900</figcaption><div class="cat-wide"><iframe title="PageContainer width="default" ở 1440: cột 900" style="height:300px;width:1440px" srcdoc="<!doctype html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="../gemboss-ui.css"><link rel="stylesheet" href="../src/collections.css"><link rel="stylesheet" href="../src/reactions.css"></head><body><div class="gemboss-platform-shell"><header class="gemboss-platform-topbar"><div class="gemboss-topbar-start"><button type="button" class="gemboss-mobile-menu-btn" aria-label="Open menu" aria-expanded="false" data-label-open="Open menu" data-label-close="Close menu" aria-controls=":R0:"><svg width="20" height="20" viewBox="0 0 20 20" aria-hidden="true"><path d="M3 5.5h14M3 10h14M3 14.5h14" stroke="currentColor" stroke-width="1.7" stroke-linecap="round"></path></svg></button><a class="gb-brand" href="#" aria-label="GemFactory home"><svg class="gb-brand-gem" viewBox="0 0 32 40" width="20.8" height="26" aria-hidden="true" focusable="false"><g transform="translate(0,0.8) scale(0.31)"><polygon points="26,14 74,14 66,50 34,50" fill="#5661F5" fill-opacity="0.92"></polygon><path d="M26,14 74,14 96,50 50,110 4,50Z" fill="none" stroke="currentColor" stroke-width="8.75" stroke-linejoin="round"></path><path d="M4,50H96M26,14 34,50M74,14 66,50M34,50 50,110M66,50 50,110" fill="none" stroke="currentColor" stroke-width="5.45" stroke-linejoin="round"></path></g></svg><span class="gb-brand-name">GemFactory</span></a></div><div class="gemboss-topbar-center"></div><div class="gemboss-topbar-end"></div></header><nav class="icon-nav" aria-label="Main navigation" id=":R0:"><div class="gnav-scroll"><div class="gnav-heading">Kho</div><div class="gnav-group active"><a class="gnav-item active" aria-current="page" href="#"><span class="gnav-ico"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3.5" width="4" height="13" rx="1.2"></rect><rect x="8" y="3.5" width="4" height="9" rx="1.2"></rect><rect x="13" y="3.5" width="4" height="6" rx="1.2"></rect></g></svg></span><span class="gnav-label">Board</span></a></div><div class="gnav-group"><a class="gnav-item" href="#"><span class="gnav-ico"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="3.5" y="3" width="13" height="3.5" rx="1"></rect><rect x="3.5" y="8.25" width="13" height="3.5" rx="1"></rect><rect x="3.5" y="13.5" width="13" height="3.5" rx="1"></rect></g></svg></span><span class="gnav-label">Ghép trang</span></a></div><div class="gnav-group"><a class="gnav-item" href="#"><span class="gnav-ico"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M10 3.2 17.3 16H2.7z"></path><path d="M10 8.2v3.6M10 13.9v.1"></path></g></svg></span><span class="gnav-label">Framework thiếu</span><span class="gnav-count" aria-label="3 mục đang mở">3</span></a></div></div></nav><button type="button" class="gemboss-mobile-nav-backdrop" aria-label="Close menu" tabindex="-1"></button><main class="gemboss-platform-main"><div class="ui-page"><h1 style="margin:0 0 16px">Board</h1><div class="ui-card"><div class="ui-card__title">#412 Hero split</div><p class="ui-muted">Cột 900px, căn giữa trong chỗ trống bên phải rail.</p></div></div></main></div></body></html>"></iframe></div><details class="cat-code"><summary>Markup</summary><pre><code><div class="gemboss-platform-shell">
|
|
889
3801
|
<header class="gemboss-platform-topbar">
|
|
890
3802
|
<div class="gemboss-topbar-start">
|
|
891
3803
|
<button type="button" class="gemboss-mobile-menu-btn" aria-label="Open menu" aria-expanded="false" data-label-open="Open menu" data-label-close="Close menu" aria-controls=":R0:">
|
|
@@ -979,7 +3891,7 @@ body{margin:0;background:var(--gemboss-app-bg,#f1f1f1);color:var(--gemboss-text)
|
|
|
979
3891
|
</div>
|
|
980
3892
|
</div>
|
|
981
3893
|
</main>
|
|
982
|
-
</div></code></pre></details></figure><figure class="cat-demo cat-screen"><figcaption>PageContainer width="form" ở 1440: cột 662</figcaption><div class="cat-wide"><iframe title="PageContainer width="form" ở 1440: cột 662" style="height:300px;width:1440px" srcdoc="<!doctype html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="../gemboss-ui.css"></head><body><div class="gemboss-platform-shell"><header class="gemboss-platform-topbar"><div class="gemboss-topbar-start"><button type="button" class="gemboss-mobile-menu-btn" aria-label="Open menu" aria-expanded="false" data-label-open="Open menu" data-label-close="Close menu" aria-controls=":R0:"><svg width="20" height="20" viewBox="0 0 20 20" aria-hidden="true"><path d="M3 5.5h14M3 10h14M3 14.5h14" stroke="currentColor" stroke-width="1.7" stroke-linecap="round"></path></svg></button><a class="gb-brand" href="#" aria-label="GemFactory home"><svg class="gb-brand-gem" viewBox="0 0 32 40" width="20.8" height="26" aria-hidden="true" focusable="false"><g transform="translate(0,0.8) scale(0.31)"><polygon points="26,14 74,14 66,50 34,50" fill="#5661F5" fill-opacity="0.92"></polygon><path d="M26,14 74,14 96,50 50,110 4,50Z" fill="none" stroke="currentColor" stroke-width="8.75" stroke-linejoin="round"></path><path d="M4,50H96M26,14 34,50M74,14 66,50M34,50 50,110M66,50 50,110" fill="none" stroke="currentColor" stroke-width="5.45" stroke-linejoin="round"></path></g></svg><span class="gb-brand-name">GemFactory</span></a></div><div class="gemboss-topbar-center"></div><div class="gemboss-topbar-end"></div></header><nav class="icon-nav" aria-label="Main navigation" id=":R0:"><div class="gnav-scroll"><div class="gnav-heading">Kho</div><div class="gnav-group active"><a class="gnav-item active" aria-current="page" href="#"><span class="gnav-ico"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3.5" width="4" height="13" rx="1.2"></rect><rect x="8" y="3.5" width="4" height="9" rx="1.2"></rect><rect x="13" y="3.5" width="4" height="6" rx="1.2"></rect></g></svg></span><span class="gnav-label">Board</span></a></div><div class="gnav-group"><a class="gnav-item" href="#"><span class="gnav-ico"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="3.5" y="3" width="13" height="3.5" rx="1"></rect><rect x="3.5" y="8.25" width="13" height="3.5" rx="1"></rect><rect x="3.5" y="13.5" width="13" height="3.5" rx="1"></rect></g></svg></span><span class="gnav-label">Ghép trang</span></a></div><div class="gnav-group"><a class="gnav-item" href="#"><span class="gnav-ico"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M10 3.2 17.3 16H2.7z"></path><path d="M10 8.2v3.6M10 13.9v.1"></path></g></svg></span><span class="gnav-label">Framework thiếu</span><span class="gnav-count" aria-label="3 mục đang mở">3</span></a></div></div></nav><button type="button" class="gemboss-mobile-nav-backdrop" aria-label="Close menu" tabindex="-1"></button><main class="gemboss-platform-main"><div class="ui-page ui-page--form"><h1 style="margin:0 0 16px">Settings</h1><div class="ui-card" style="display:grid;gap:6px"><label for="cat-pw-name">Tên hiển thị</label><input id="cat-pw-name" class="gemboss-field" value="Minh Anh"></div></div></main></div></body></html>"></iframe></div><details class="cat-code"><summary>Markup</summary><pre><code><div class="gemboss-platform-shell">
|
|
3894
|
+
</div></code></pre></details></figure><figure class="cat-demo cat-screen"><figcaption>PageContainer width="form" ở 1440: cột 662</figcaption><div class="cat-wide"><iframe title="PageContainer width="form" ở 1440: cột 662" style="height:300px;width:1440px" srcdoc="<!doctype html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="../gemboss-ui.css"><link rel="stylesheet" href="../src/collections.css"><link rel="stylesheet" href="../src/reactions.css"></head><body><div class="gemboss-platform-shell"><header class="gemboss-platform-topbar"><div class="gemboss-topbar-start"><button type="button" class="gemboss-mobile-menu-btn" aria-label="Open menu" aria-expanded="false" data-label-open="Open menu" data-label-close="Close menu" aria-controls=":R0:"><svg width="20" height="20" viewBox="0 0 20 20" aria-hidden="true"><path d="M3 5.5h14M3 10h14M3 14.5h14" stroke="currentColor" stroke-width="1.7" stroke-linecap="round"></path></svg></button><a class="gb-brand" href="#" aria-label="GemFactory home"><svg class="gb-brand-gem" viewBox="0 0 32 40" width="20.8" height="26" aria-hidden="true" focusable="false"><g transform="translate(0,0.8) scale(0.31)"><polygon points="26,14 74,14 66,50 34,50" fill="#5661F5" fill-opacity="0.92"></polygon><path d="M26,14 74,14 96,50 50,110 4,50Z" fill="none" stroke="currentColor" stroke-width="8.75" stroke-linejoin="round"></path><path d="M4,50H96M26,14 34,50M74,14 66,50M34,50 50,110M66,50 50,110" fill="none" stroke="currentColor" stroke-width="5.45" stroke-linejoin="round"></path></g></svg><span class="gb-brand-name">GemFactory</span></a></div><div class="gemboss-topbar-center"></div><div class="gemboss-topbar-end"></div></header><nav class="icon-nav" aria-label="Main navigation" id=":R0:"><div class="gnav-scroll"><div class="gnav-heading">Kho</div><div class="gnav-group active"><a class="gnav-item active" aria-current="page" href="#"><span class="gnav-ico"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3.5" width="4" height="13" rx="1.2"></rect><rect x="8" y="3.5" width="4" height="9" rx="1.2"></rect><rect x="13" y="3.5" width="4" height="6" rx="1.2"></rect></g></svg></span><span class="gnav-label">Board</span></a></div><div class="gnav-group"><a class="gnav-item" href="#"><span class="gnav-ico"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="3.5" y="3" width="13" height="3.5" rx="1"></rect><rect x="3.5" y="8.25" width="13" height="3.5" rx="1"></rect><rect x="3.5" y="13.5" width="13" height="3.5" rx="1"></rect></g></svg></span><span class="gnav-label">Ghép trang</span></a></div><div class="gnav-group"><a class="gnav-item" href="#"><span class="gnav-ico"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M10 3.2 17.3 16H2.7z"></path><path d="M10 8.2v3.6M10 13.9v.1"></path></g></svg></span><span class="gnav-label">Framework thiếu</span><span class="gnav-count" aria-label="3 mục đang mở">3</span></a></div></div></nav><button type="button" class="gemboss-mobile-nav-backdrop" aria-label="Close menu" tabindex="-1"></button><main class="gemboss-platform-main"><div class="ui-page ui-page--form"><h1 style="margin:0 0 16px">Settings</h1><div class="ui-card" style="display:grid;gap:6px"><label for="cat-pw-name">Tên hiển thị</label><input id="cat-pw-name" class="gemboss-field" value="Minh Anh"></div></div></main></div></body></html>"></iframe></div><details class="cat-code"><summary>Markup</summary><pre><code><div class="gemboss-platform-shell">
|
|
983
3895
|
<header class="gemboss-platform-topbar">
|
|
984
3896
|
<div class="gemboss-topbar-start">
|
|
985
3897
|
<button type="button" class="gemboss-mobile-menu-btn" aria-label="Open menu" aria-expanded="false" data-label-open="Open menu" data-label-close="Close menu" aria-controls=":R0:">
|
|
@@ -1076,7 +3988,7 @@ body{margin:0;background:var(--gemboss-app-bg,#f1f1f1);color:var(--gemboss-text)
|
|
|
1076
3988
|
</div></code></pre></details></figure><figure class="cat-demo"><figcaption>HTML thuần: một lớp bọc là con đầu tiên của main</figcaption><div class="cat-live"><div class="ui-page ui-page--feed"><div class="ui-card">Một mục trong feed, cột 720px.</div></div></div><details class="cat-code"><summary>Markup</summary><pre><code><div class="ui-page ui-page--feed">
|
|
1077
3989
|
<div class="ui-card">Một mục trong feed, cột 720px.</div>
|
|
1078
3990
|
</div></code></pre></details></figure></section>
|
|
1079
|
-
<section id="portal"><h2>Cổng công khai: tab trên topbar, tìm kiếm, sáng / tối, người dẫn đầu</h2><p>Cho bề mặt công khai kiểu bảng Featurebase (GemFeedback) và cộng đồng (GemCommunity). <code>TopbarNav</code> đặt tab mục ngay trên topbar cạnh logo; <code>SearchDialog</code> là popup tìm (⌘K, gõ là ra); <code>ThemeToggle</code> + <code>themeScript</code> bật bảng màu tối (chỉ đổi token, mọi class theo); <code>Avatar</code> ảnh hoặc chữ viết tắt trên một tông lấy theo tên; <code>Leaderboard</code> huy chương 1–3 rồi thứ hạng; <code>Podium</code> ba người đầu.</p><figure class="cat-demo cat-screen"><figcaption>TopbarNav + SearchDialog + ThemeToggle, sáng</figcaption><iframe title="TopbarNav + SearchDialog + ThemeToggle, sáng" style="height:360px" srcdoc="<!doctype html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="../gemboss-ui.css"></head><body><div class="gemboss-platform-shell"><header class="gemboss-platform-topbar"><div class="gemboss-topbar-start"><a class="gb-brand" href="/" aria-label="GemFeedback home"><svg class="gb-brand-gem" viewBox="0 0 32 40" width="20.8" height="26" aria-hidden="true" focusable="false"><g transform="translate(0,0.8) scale(0.31)"><polygon points="26,14 74,14 66,50 34,50" fill="#5661F5" fill-opacity="0.92"></polygon><path d="M26,14 74,14 96,50 50,110 4,50Z" fill="none" stroke="currentColor" stroke-width="8.75" stroke-linejoin="round"></path><path d="M4,50H96M26,14 34,50M74,14 66,50M34,50 50,110M66,50 50,110" fill="none" stroke="currentColor" stroke-width="5.45" stroke-linejoin="round"></path></g></svg><span class="gb-brand-name">GemFeedback</span></a><nav class="gb-topnav" aria-label="Sections"><div class="gb-topnav-row"><a href="#portal" class="gb-topnav-link" aria-current="page">Feedback</a><a href="#portal" class="gb-topnav-link">Roadmap</a><a href="#portal" class="gb-topnav-link">Changelog</a></div><details class="gb-topnav-fold"><summary class="gb-topnav-link gb-topnav-fold-btn" aria-current="page">Feedback<svg class="gb-topnav-chevron" width="12" height="12" viewBox="0 0 12 12" aria-hidden="true" focusable="false"><path d="M3 4.5 6 7.5 9 4.5" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"></path></svg></summary><div class="gb-topnav-pop gemboss-popover-surface"><a href="#portal" class="gb-topnav-item" aria-current="page">Feedback</a><a href="#portal" class="gb-topnav-item">Roadmap</a><a href="#portal" class="gb-topnav-item">Changelog</a></div></details></nav></div><div class="gemboss-topbar-center"></div><div class="gemboss-topbar-end"><a class="gb-search-trigger" href="#portal" aria-label="Search" aria-haspopup="dialog"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="8.8" cy="8.8" r="5.3"></circle><path d="M12.8 12.8 17 17"></path></g></svg></a><dialog class="ui-modal gb-search" aria-label="Search"><div class="gb-search-box"><svg viewBox="0 0 20 20" width="18" height="18" class="gb-search-icon" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="8.8" cy="8.8" r="5.3"></circle><path d="M12.8 12.8 17 17"></path></g></svg><input class="gb-search-input" type="search" placeholder="Search…" aria-label="Search" role="combobox" aria-expanded="true" aria-controls=":Rt:" autoComplete="off" value=""/></div><p class="gb-search-empty" aria-live="polite"></p><div class="gb-search-results" id=":Rt:" role="listbox" aria-busy="false"></div><div class="gb-search-foot" aria-hidden="true"><span>↵ open</span><span>↑↓ move</span><span>esc</span></div></dialog><button type="button" class="gb-theme-toggle" aria-label="Switch to dark mode" title="Switch to dark mode"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M15.6 12.4A6.2 6.2 0 0 1 7.6 4.4a6.2 6.2 0 1 0 8 8Z"></path></g></svg></button><a class="ui-btn ui-btn--primary" href="#portal">Sign in</a></div></header><div><div style="padding:72px 24px 24px;display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:24px"><div class="ui-card"><b>Have something to say?</b><p class="ui-muted">Tell us what to build next.</p></div><section class="gb-leaderboard" aria-labelledby="gb-lb-most-helpful-1wqxo9r"><h2 class="gb-leaderboard-title" id="gb-lb-most-helpful-1wqxo9r">Most helpful</h2><p class="gb-leaderboard-caption">By votes on their comments.</p><ol class="gb-leaderboard-list"><li class="gb-leaderboard-row is-first"><a href="#portal" class="gb-leaderboard-link"><span class="gb-leaderboard-rank"><span aria-hidden="true">🥇</span><span class="gb-sr-only">Rank 1: </span></span><span class="gb-avatar gb-avatar--24" data-tone="2" aria-hidden="true">LN</span><span class="gb-leaderboard-name">Lucas Nguyen</span><span class="gb-leaderboard-value">163<span class="gb-sr-only"> votes</span></span></a></li><li class="gb-leaderboard-row"><a href="#portal" class="gb-leaderboard-link"><span class="gb-leaderboard-rank"><span aria-hidden="true">🥈</span><span class="gb-sr-only">Rank 2: </span></span><span class="gb-avatar gb-avatar--24" data-tone="0" aria-hidden="true">DC</span><span class="gb-leaderboard-name">Dima Chernyshov</span><span class="gb-leaderboard-value">56<span class="gb-sr-only"> votes</span></span></a></li><li class="gb-leaderboard-row"><a href="#portal" class="gb-leaderboard-link"><span class="gb-leaderboard-rank"><span aria-hidden="true">🥉</span><span class="gb-sr-only">Rank 3: </span></span><span class="gb-avatar gb-avatar--24" data-tone="5" aria-hidden="true">AR</span><span class="gb-leaderboard-name">Artjom</span><span class="gb-leaderboard-value">55<span class="gb-sr-only"> votes</span></span></a></li><li class="gb-leaderboard-row"><a href="#portal" class="gb-leaderboard-link"><span class="gb-leaderboard-rank is-number"><span aria-hidden="true">4</span><span class="gb-sr-only">Rank 4: </span></span><span class="gb-avatar gb-avatar--24" data-tone="4" aria-hidden="true">GU</span><span class="gb-leaderboard-name">GutBrush</span><span class="gb-leaderboard-value">34<span class="gb-sr-only"> votes</span></span></a></li><li class="gb-leaderboard-row"><a href="#portal" class="gb-leaderboard-link"><span class="gb-leaderboard-rank is-number"><span aria-hidden="true">5</span><span class="gb-sr-only">Rank 5: </span></span><span class="gb-avatar gb-avatar--24" data-tone="5" aria-hidden="true">WO</span><span class="gb-leaderboard-name">Wondercraft</span><span class="gb-leaderboard-value">30<span class="gb-sr-only"> votes</span></span></a></li></ol></section></div></div></div></body></html>"></iframe><details class="cat-code"><summary>Markup</summary><pre><code><div class="gemboss-platform-shell">
|
|
3991
|
+
<section id="portal"><h2>Cổng công khai: tab trên topbar, tìm kiếm, sáng / tối, người dẫn đầu</h2><p>Cho bề mặt công khai kiểu bảng Featurebase (GemFeedback) và cộng đồng (GemCommunity). <code>TopbarNav</code> đặt tab mục ngay trên topbar cạnh logo; <code>SearchDialog</code> là popup tìm (⌘K, gõ là ra); <code>ThemeToggle</code> + <code>themeScript</code> bật bảng màu tối (chỉ đổi token, mọi class theo); <code>Avatar</code> ảnh hoặc chữ viết tắt trên một tông lấy theo tên; <code>Leaderboard</code> huy chương 1–3 rồi thứ hạng; <code>Podium</code> ba người đầu.</p><figure class="cat-demo cat-screen"><figcaption>TopbarNav + SearchDialog + ThemeToggle, sáng</figcaption><iframe title="TopbarNav + SearchDialog + ThemeToggle, sáng" style="height:360px" srcdoc="<!doctype html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="../gemboss-ui.css"><link rel="stylesheet" href="../src/collections.css"><link rel="stylesheet" href="../src/reactions.css"></head><body><div class="gemboss-platform-shell"><header class="gemboss-platform-topbar"><div class="gemboss-topbar-start"><a class="gb-brand" href="/" aria-label="GemFeedback home"><svg class="gb-brand-gem" viewBox="0 0 32 40" width="20.8" height="26" aria-hidden="true" focusable="false"><g transform="translate(0,0.8) scale(0.31)"><polygon points="26,14 74,14 66,50 34,50" fill="#5661F5" fill-opacity="0.92"></polygon><path d="M26,14 74,14 96,50 50,110 4,50Z" fill="none" stroke="currentColor" stroke-width="8.75" stroke-linejoin="round"></path><path d="M4,50H96M26,14 34,50M74,14 66,50M34,50 50,110M66,50 50,110" fill="none" stroke="currentColor" stroke-width="5.45" stroke-linejoin="round"></path></g></svg><span class="gb-brand-name">GemFeedback</span></a><nav class="gb-topnav" aria-label="Sections"><div class="gb-topnav-row"><a href="#portal" class="gb-topnav-link" aria-current="page">Feedback</a><a href="#portal" class="gb-topnav-link">Roadmap</a><a href="#portal" class="gb-topnav-link">Changelog</a></div><details class="gb-topnav-fold"><summary class="gb-topnav-link gb-topnav-fold-btn" aria-current="page">Feedback<svg class="gb-topnav-chevron" width="12" height="12" viewBox="0 0 12 12" aria-hidden="true" focusable="false"><path d="M3 4.5 6 7.5 9 4.5" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"></path></svg></summary><div class="gb-topnav-pop gemboss-popover-surface"><a href="#portal" class="gb-topnav-item" aria-current="page">Feedback</a><a href="#portal" class="gb-topnav-item">Roadmap</a><a href="#portal" class="gb-topnav-item">Changelog</a></div></details></nav></div><div class="gemboss-topbar-center"></div><div class="gemboss-topbar-end"><a class="gb-search-trigger" href="#portal" aria-label="Search" aria-haspopup="dialog"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="8.8" cy="8.8" r="5.3"></circle><path d="M12.8 12.8 17 17"></path></g></svg></a><dialog class="ui-modal gb-search" aria-label="Search"><div class="gb-search-box"><svg viewBox="0 0 20 20" width="18" height="18" class="gb-search-icon" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="8.8" cy="8.8" r="5.3"></circle><path d="M12.8 12.8 17 17"></path></g></svg><input class="gb-search-input" type="search" placeholder="Search…" aria-label="Search" role="combobox" aria-expanded="true" aria-controls=":Rt:" autoComplete="off" value=""/></div><p class="gb-search-empty" aria-live="polite"></p><div class="gb-search-results" id=":Rt:" role="listbox" aria-busy="false"></div><div class="gb-search-foot" aria-hidden="true"><span>↵ open</span><span>↑↓ move</span><span>esc</span></div></dialog><button type="button" class="gb-theme-toggle" aria-label="Switch to dark mode" title="Switch to dark mode"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M15.6 12.4A6.2 6.2 0 0 1 7.6 4.4a6.2 6.2 0 1 0 8 8Z"></path></g></svg></button><a class="ui-btn ui-btn--primary" href="#portal">Sign in</a></div></header><div><div style="padding:72px 24px 24px;display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:24px"><div class="ui-card"><b>Have something to say?</b><p class="ui-muted">Tell us what to build next.</p></div><section class="gb-leaderboard" aria-labelledby="gb-lb-most-helpful-1wqxo9r"><h2 class="gb-leaderboard-title" id="gb-lb-most-helpful-1wqxo9r">Most helpful</h2><p class="gb-leaderboard-caption">By votes on their comments.</p><ol class="gb-leaderboard-list"><li class="gb-leaderboard-row is-first"><a href="#portal" class="gb-leaderboard-link"><span class="gb-leaderboard-rank"><span aria-hidden="true">🥇</span><span class="gb-sr-only">Rank 1: </span></span><span class="gb-avatar gb-avatar--24" data-tone="2" aria-hidden="true">LN</span><span class="gb-leaderboard-name">Lucas Nguyen</span><span class="gb-leaderboard-value">163<span class="gb-sr-only"> votes</span></span></a></li><li class="gb-leaderboard-row"><a href="#portal" class="gb-leaderboard-link"><span class="gb-leaderboard-rank"><span aria-hidden="true">🥈</span><span class="gb-sr-only">Rank 2: </span></span><span class="gb-avatar gb-avatar--24" data-tone="0" aria-hidden="true">DC</span><span class="gb-leaderboard-name">Dima Chernyshov</span><span class="gb-leaderboard-value">56<span class="gb-sr-only"> votes</span></span></a></li><li class="gb-leaderboard-row"><a href="#portal" class="gb-leaderboard-link"><span class="gb-leaderboard-rank"><span aria-hidden="true">🥉</span><span class="gb-sr-only">Rank 3: </span></span><span class="gb-avatar gb-avatar--24" data-tone="5" aria-hidden="true">AR</span><span class="gb-leaderboard-name">Artjom</span><span class="gb-leaderboard-value">55<span class="gb-sr-only"> votes</span></span></a></li><li class="gb-leaderboard-row"><a href="#portal" class="gb-leaderboard-link"><span class="gb-leaderboard-rank is-number"><span aria-hidden="true">4</span><span class="gb-sr-only">Rank 4: </span></span><span class="gb-avatar gb-avatar--24" data-tone="4" aria-hidden="true">GU</span><span class="gb-leaderboard-name">GutBrush</span><span class="gb-leaderboard-value">34<span class="gb-sr-only"> votes</span></span></a></li><li class="gb-leaderboard-row"><a href="#portal" class="gb-leaderboard-link"><span class="gb-leaderboard-rank is-number"><span aria-hidden="true">5</span><span class="gb-sr-only">Rank 5: </span></span><span class="gb-avatar gb-avatar--24" data-tone="5" aria-hidden="true">WO</span><span class="gb-leaderboard-name">Wondercraft</span><span class="gb-leaderboard-value">30<span class="gb-sr-only"> votes</span></span></a></li></ol></section></div></div></div></body></html>"></iframe><details class="cat-code"><summary>Markup</summary><pre><code><div class="gemboss-platform-shell">
|
|
1080
3992
|
<header class="gemboss-platform-topbar">
|
|
1081
3993
|
<div class="gemboss-topbar-start">
|
|
1082
3994
|
<a class="gb-brand" href="/" aria-label="GemFeedback home">
|
|
@@ -1232,7 +4144,7 @@ body{margin:0;background:var(--gemboss-app-bg,#f1f1f1);color:var(--gemboss-text)
|
|
|
1232
4144
|
</section>
|
|
1233
4145
|
</div>
|
|
1234
4146
|
</div>
|
|
1235
|
-
</div></code></pre></details></figure><figure class="cat-demo cat-screen"><figcaption>Cùng trang, tối (data-theme="dark")</figcaption><iframe title="Cùng trang, tối (data-theme="dark")" style="height:360px" srcdoc="<!doctype html><html data-theme="dark"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="../gemboss-ui.css"></head><body><div class="gemboss-platform-shell"><header class="gemboss-platform-topbar"><div class="gemboss-topbar-start"><a class="gb-brand" href="/" aria-label="GemFeedback home"><svg class="gb-brand-gem" viewBox="0 0 32 40" width="20.8" height="26" aria-hidden="true" focusable="false"><g transform="translate(0,0.8) scale(0.31)"><polygon points="26,14 74,14 66,50 34,50" fill="#5661F5" fill-opacity="0.92"></polygon><path d="M26,14 74,14 96,50 50,110 4,50Z" fill="none" stroke="currentColor" stroke-width="8.75" stroke-linejoin="round"></path><path d="M4,50H96M26,14 34,50M74,14 66,50M34,50 50,110M66,50 50,110" fill="none" stroke="currentColor" stroke-width="5.45" stroke-linejoin="round"></path></g></svg><span class="gb-brand-name">GemFeedback</span></a><nav class="gb-topnav" aria-label="Sections"><div class="gb-topnav-row"><a href="#portal" class="gb-topnav-link" aria-current="page">Feedback</a><a href="#portal" class="gb-topnav-link">Roadmap</a><a href="#portal" class="gb-topnav-link">Changelog</a></div><details class="gb-topnav-fold"><summary class="gb-topnav-link gb-topnav-fold-btn" aria-current="page">Feedback<svg class="gb-topnav-chevron" width="12" height="12" viewBox="0 0 12 12" aria-hidden="true" focusable="false"><path d="M3 4.5 6 7.5 9 4.5" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"></path></svg></summary><div class="gb-topnav-pop gemboss-popover-surface"><a href="#portal" class="gb-topnav-item" aria-current="page">Feedback</a><a href="#portal" class="gb-topnav-item">Roadmap</a><a href="#portal" class="gb-topnav-item">Changelog</a></div></details></nav></div><div class="gemboss-topbar-center"></div><div class="gemboss-topbar-end"><a class="gb-search-trigger" href="#portal" aria-label="Search" aria-haspopup="dialog"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="8.8" cy="8.8" r="5.3"></circle><path d="M12.8 12.8 17 17"></path></g></svg></a><dialog class="ui-modal gb-search" aria-label="Search"><div class="gb-search-box"><svg viewBox="0 0 20 20" width="18" height="18" class="gb-search-icon" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="8.8" cy="8.8" r="5.3"></circle><path d="M12.8 12.8 17 17"></path></g></svg><input class="gb-search-input" type="search" placeholder="Search…" aria-label="Search" role="combobox" aria-expanded="true" aria-controls=":Rt:" autoComplete="off" value=""/></div><p class="gb-search-empty" aria-live="polite"></p><div class="gb-search-results" id=":Rt:" role="listbox" aria-busy="false"></div><div class="gb-search-foot" aria-hidden="true"><span>↵ open</span><span>↑↓ move</span><span>esc</span></div></dialog><button type="button" class="gb-theme-toggle" aria-label="Switch to dark mode" title="Switch to dark mode"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M15.6 12.4A6.2 6.2 0 0 1 7.6 4.4a6.2 6.2 0 1 0 8 8Z"></path></g></svg></button><a class="ui-btn ui-btn--primary" href="#portal">Sign in</a></div></header><div><div style="padding:72px 24px 24px;display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:24px"><div class="ui-card"><b>Have something to say?</b><p class="ui-muted">Tell us what to build next.</p></div><section class="gb-leaderboard" aria-labelledby="gb-lb-most-helpful-1wqxo9r"><h2 class="gb-leaderboard-title" id="gb-lb-most-helpful-1wqxo9r">Most helpful</h2><p class="gb-leaderboard-caption">By votes on their comments.</p><ol class="gb-leaderboard-list"><li class="gb-leaderboard-row is-first"><a href="#portal" class="gb-leaderboard-link"><span class="gb-leaderboard-rank"><span aria-hidden="true">🥇</span><span class="gb-sr-only">Rank 1: </span></span><span class="gb-avatar gb-avatar--24" data-tone="2" aria-hidden="true">LN</span><span class="gb-leaderboard-name">Lucas Nguyen</span><span class="gb-leaderboard-value">163<span class="gb-sr-only"> votes</span></span></a></li><li class="gb-leaderboard-row"><a href="#portal" class="gb-leaderboard-link"><span class="gb-leaderboard-rank"><span aria-hidden="true">🥈</span><span class="gb-sr-only">Rank 2: </span></span><span class="gb-avatar gb-avatar--24" data-tone="0" aria-hidden="true">DC</span><span class="gb-leaderboard-name">Dima Chernyshov</span><span class="gb-leaderboard-value">56<span class="gb-sr-only"> votes</span></span></a></li><li class="gb-leaderboard-row"><a href="#portal" class="gb-leaderboard-link"><span class="gb-leaderboard-rank"><span aria-hidden="true">🥉</span><span class="gb-sr-only">Rank 3: </span></span><span class="gb-avatar gb-avatar--24" data-tone="5" aria-hidden="true">AR</span><span class="gb-leaderboard-name">Artjom</span><span class="gb-leaderboard-value">55<span class="gb-sr-only"> votes</span></span></a></li><li class="gb-leaderboard-row"><a href="#portal" class="gb-leaderboard-link"><span class="gb-leaderboard-rank is-number"><span aria-hidden="true">4</span><span class="gb-sr-only">Rank 4: </span></span><span class="gb-avatar gb-avatar--24" data-tone="4" aria-hidden="true">GU</span><span class="gb-leaderboard-name">GutBrush</span><span class="gb-leaderboard-value">34<span class="gb-sr-only"> votes</span></span></a></li><li class="gb-leaderboard-row"><a href="#portal" class="gb-leaderboard-link"><span class="gb-leaderboard-rank is-number"><span aria-hidden="true">5</span><span class="gb-sr-only">Rank 5: </span></span><span class="gb-avatar gb-avatar--24" data-tone="5" aria-hidden="true">WO</span><span class="gb-leaderboard-name">Wondercraft</span><span class="gb-leaderboard-value">30<span class="gb-sr-only"> votes</span></span></a></li></ol></section></div></div></div></body></html>"></iframe><details class="cat-code"><summary>Markup</summary><pre><code><div class="gemboss-platform-shell">
|
|
4147
|
+
</div></code></pre></details></figure><figure class="cat-demo cat-screen"><figcaption>Cùng trang, tối (data-theme="dark")</figcaption><iframe title="Cùng trang, tối (data-theme="dark")" style="height:360px" srcdoc="<!doctype html><html data-theme="dark"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="../gemboss-ui.css"><link rel="stylesheet" href="../src/collections.css"><link rel="stylesheet" href="../src/reactions.css"></head><body><div class="gemboss-platform-shell"><header class="gemboss-platform-topbar"><div class="gemboss-topbar-start"><a class="gb-brand" href="/" aria-label="GemFeedback home"><svg class="gb-brand-gem" viewBox="0 0 32 40" width="20.8" height="26" aria-hidden="true" focusable="false"><g transform="translate(0,0.8) scale(0.31)"><polygon points="26,14 74,14 66,50 34,50" fill="#5661F5" fill-opacity="0.92"></polygon><path d="M26,14 74,14 96,50 50,110 4,50Z" fill="none" stroke="currentColor" stroke-width="8.75" stroke-linejoin="round"></path><path d="M4,50H96M26,14 34,50M74,14 66,50M34,50 50,110M66,50 50,110" fill="none" stroke="currentColor" stroke-width="5.45" stroke-linejoin="round"></path></g></svg><span class="gb-brand-name">GemFeedback</span></a><nav class="gb-topnav" aria-label="Sections"><div class="gb-topnav-row"><a href="#portal" class="gb-topnav-link" aria-current="page">Feedback</a><a href="#portal" class="gb-topnav-link">Roadmap</a><a href="#portal" class="gb-topnav-link">Changelog</a></div><details class="gb-topnav-fold"><summary class="gb-topnav-link gb-topnav-fold-btn" aria-current="page">Feedback<svg class="gb-topnav-chevron" width="12" height="12" viewBox="0 0 12 12" aria-hidden="true" focusable="false"><path d="M3 4.5 6 7.5 9 4.5" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"></path></svg></summary><div class="gb-topnav-pop gemboss-popover-surface"><a href="#portal" class="gb-topnav-item" aria-current="page">Feedback</a><a href="#portal" class="gb-topnav-item">Roadmap</a><a href="#portal" class="gb-topnav-item">Changelog</a></div></details></nav></div><div class="gemboss-topbar-center"></div><div class="gemboss-topbar-end"><a class="gb-search-trigger" href="#portal" aria-label="Search" aria-haspopup="dialog"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="8.8" cy="8.8" r="5.3"></circle><path d="M12.8 12.8 17 17"></path></g></svg></a><dialog class="ui-modal gb-search" aria-label="Search"><div class="gb-search-box"><svg viewBox="0 0 20 20" width="18" height="18" class="gb-search-icon" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="8.8" cy="8.8" r="5.3"></circle><path d="M12.8 12.8 17 17"></path></g></svg><input class="gb-search-input" type="search" placeholder="Search…" aria-label="Search" role="combobox" aria-expanded="true" aria-controls=":Rt:" autoComplete="off" value=""/></div><p class="gb-search-empty" aria-live="polite"></p><div class="gb-search-results" id=":Rt:" role="listbox" aria-busy="false"></div><div class="gb-search-foot" aria-hidden="true"><span>↵ open</span><span>↑↓ move</span><span>esc</span></div></dialog><button type="button" class="gb-theme-toggle" aria-label="Switch to dark mode" title="Switch to dark mode"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M15.6 12.4A6.2 6.2 0 0 1 7.6 4.4a6.2 6.2 0 1 0 8 8Z"></path></g></svg></button><a class="ui-btn ui-btn--primary" href="#portal">Sign in</a></div></header><div><div style="padding:72px 24px 24px;display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:24px"><div class="ui-card"><b>Have something to say?</b><p class="ui-muted">Tell us what to build next.</p></div><section class="gb-leaderboard" aria-labelledby="gb-lb-most-helpful-1wqxo9r"><h2 class="gb-leaderboard-title" id="gb-lb-most-helpful-1wqxo9r">Most helpful</h2><p class="gb-leaderboard-caption">By votes on their comments.</p><ol class="gb-leaderboard-list"><li class="gb-leaderboard-row is-first"><a href="#portal" class="gb-leaderboard-link"><span class="gb-leaderboard-rank"><span aria-hidden="true">🥇</span><span class="gb-sr-only">Rank 1: </span></span><span class="gb-avatar gb-avatar--24" data-tone="2" aria-hidden="true">LN</span><span class="gb-leaderboard-name">Lucas Nguyen</span><span class="gb-leaderboard-value">163<span class="gb-sr-only"> votes</span></span></a></li><li class="gb-leaderboard-row"><a href="#portal" class="gb-leaderboard-link"><span class="gb-leaderboard-rank"><span aria-hidden="true">🥈</span><span class="gb-sr-only">Rank 2: </span></span><span class="gb-avatar gb-avatar--24" data-tone="0" aria-hidden="true">DC</span><span class="gb-leaderboard-name">Dima Chernyshov</span><span class="gb-leaderboard-value">56<span class="gb-sr-only"> votes</span></span></a></li><li class="gb-leaderboard-row"><a href="#portal" class="gb-leaderboard-link"><span class="gb-leaderboard-rank"><span aria-hidden="true">🥉</span><span class="gb-sr-only">Rank 3: </span></span><span class="gb-avatar gb-avatar--24" data-tone="5" aria-hidden="true">AR</span><span class="gb-leaderboard-name">Artjom</span><span class="gb-leaderboard-value">55<span class="gb-sr-only"> votes</span></span></a></li><li class="gb-leaderboard-row"><a href="#portal" class="gb-leaderboard-link"><span class="gb-leaderboard-rank is-number"><span aria-hidden="true">4</span><span class="gb-sr-only">Rank 4: </span></span><span class="gb-avatar gb-avatar--24" data-tone="4" aria-hidden="true">GU</span><span class="gb-leaderboard-name">GutBrush</span><span class="gb-leaderboard-value">34<span class="gb-sr-only"> votes</span></span></a></li><li class="gb-leaderboard-row"><a href="#portal" class="gb-leaderboard-link"><span class="gb-leaderboard-rank is-number"><span aria-hidden="true">5</span><span class="gb-sr-only">Rank 5: </span></span><span class="gb-avatar gb-avatar--24" data-tone="5" aria-hidden="true">WO</span><span class="gb-leaderboard-name">Wondercraft</span><span class="gb-leaderboard-value">30<span class="gb-sr-only"> votes</span></span></a></li></ol></section></div></div></div></body></html>"></iframe><details class="cat-code"><summary>Markup</summary><pre><code><div class="gemboss-platform-shell">
|
|
1236
4148
|
<header class="gemboss-platform-topbar">
|
|
1237
4149
|
<div class="gemboss-topbar-start">
|
|
1238
4150
|
<a class="gb-brand" href="/" aria-label="GemFeedback home">
|
|
@@ -1492,7 +4404,7 @@ body{margin:0;background:var(--gemboss-app-bg,#f1f1f1);color:var(--gemboss-text)
|
|
|
1492
4404
|
</a>
|
|
1493
4405
|
</li>
|
|
1494
4406
|
</ol></code></pre></details></figure></section>
|
|
1495
|
-
<section id="auth"><h2>Đăng nhập</h2><figure class="cat-demo cat-screen"><figcaption>AuthLayout + PasswordField</figcaption><iframe title="AuthLayout + PasswordField" style="height:620px" srcdoc="<!doctype html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="../gemboss-ui.css"></head><body><main class="gb-auth"><div class="gb-auth-split"><div class="gb-auth-stage"><div class="gb-auth-card"><header class="gb-auth-header"><span class="gb-auth-mark" aria-hidden="true"><svg viewBox="0 0 32 32" width="56" height="56" aria-hidden="true" focusable="false"><rect width="32" height="32" rx="7" style="fill:var(--gb-mark-bg)"></rect><g transform="translate(16,16) scale(0.24) translate(-50,-62)"><polygon points="26,14 74,14 66,50 34,50" fill="#8a93ff"></polygon><path d="M26,14 74,14 96,50 50,110 4,50Z" fill="none" stroke="#f4f4f2" stroke-width="5" stroke-linejoin="round"></path><path d="M4,50H96M26,14 34,50M74,14 66,50M34,50 50,110M66,50 50,110" fill="none" stroke="#f4f4f2" stroke-opacity="0.72" stroke-width="3" stroke-linejoin="round"></path></g></svg></span><h1>GemFactory</h1><p>Kho section của GemBoss</p></header><form class="gb-auth-form" method="post" action="#"><div class="gb-auth-field"><label for="pw">Mật khẩu</label><div class="gb-auth-pw"><input class="gb-auth-input" id="pw" type="password"/><button type="button" aria-controls="pw" aria-label="Hiện" title="Hiện" data-label-show="Hiện" data-label-hide="Ẩn" class="gb-auth-pw-toggle"><svg width="18" height="18" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M1.5 10S4.6 4.5 10 4.5 18.5 10 18.5 10 15.4 15.5 10 15.5 1.5 10 1.5 10Z"></path><circle cx="10" cy="10" r="2.6"></circle></svg></button></div></div><button type="submit" class="gb-auth-submit">Đăng nhập</button></form></div></div><aside class="gb-auth-panel"><div class="gb-auth-panel-in"><p class="gb-auth-eyebrow">GemBoss</p><h2 class="gb-auth-panel-h">Một ngôn ngữ thiết kế cho mọi công cụ</h2><p class="gb-auth-panel-p">Đăng nhập bằng mật khẩu đội đã gửi riêng.</p></div></aside></div></main></body></html>"></iframe><details class="cat-code"><summary>Markup</summary><pre><code><main class="gb-auth">
|
|
4407
|
+
<section id="auth"><h2>Đăng nhập</h2><figure class="cat-demo cat-screen"><figcaption>AuthLayout + PasswordField</figcaption><iframe title="AuthLayout + PasswordField" style="height:620px" srcdoc="<!doctype html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="../gemboss-ui.css"><link rel="stylesheet" href="../src/collections.css"><link rel="stylesheet" href="../src/reactions.css"></head><body><main class="gb-auth"><div class="gb-auth-split"><div class="gb-auth-stage"><div class="gb-auth-card"><header class="gb-auth-header"><span class="gb-auth-mark" aria-hidden="true"><svg viewBox="0 0 32 32" width="56" height="56" aria-hidden="true" focusable="false"><rect width="32" height="32" rx="7" style="fill:var(--gb-mark-bg)"></rect><g transform="translate(16,16) scale(0.24) translate(-50,-62)"><polygon points="26,14 74,14 66,50 34,50" fill="#8a93ff"></polygon><path d="M26,14 74,14 96,50 50,110 4,50Z" fill="none" stroke="#f4f4f2" stroke-width="5" stroke-linejoin="round"></path><path d="M4,50H96M26,14 34,50M74,14 66,50M34,50 50,110M66,50 50,110" fill="none" stroke="#f4f4f2" stroke-opacity="0.72" stroke-width="3" stroke-linejoin="round"></path></g></svg></span><h1>GemFactory</h1><p>Kho section của GemBoss</p></header><form class="gb-auth-form" method="post" action="#"><div class="gb-auth-field"><label for="pw">Mật khẩu</label><div class="gb-auth-pw"><input class="gb-auth-input" id="pw" type="password"/><button type="button" aria-controls="pw" aria-label="Hiện" title="Hiện" data-label-show="Hiện" data-label-hide="Ẩn" class="gb-auth-pw-toggle"><svg width="18" height="18" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M1.5 10S4.6 4.5 10 4.5 18.5 10 18.5 10 15.4 15.5 10 15.5 1.5 10 1.5 10Z"></path><circle cx="10" cy="10" r="2.6"></circle></svg></button></div></div><button type="submit" class="gb-auth-submit">Đăng nhập</button></form></div></div><aside class="gb-auth-panel"><div class="gb-auth-panel-in"><p class="gb-auth-eyebrow">GemBoss</p><h2 class="gb-auth-panel-h">Một ngôn ngữ thiết kế cho mọi công cụ</h2><p class="gb-auth-panel-p">Đăng nhập bằng mật khẩu đội đã gửi riêng.</p></div></aside></div></main></body></html>"></iframe><details class="cat-code"><summary>Markup</summary><pre><code><main class="gb-auth">
|
|
1496
4408
|
<div class="gb-auth-split">
|
|
1497
4409
|
<div class="gb-auth-stage">
|
|
1498
4410
|
<div class="gb-auth-card">
|
|
@@ -1590,7 +4502,195 @@ body{margin:0;background:var(--gemboss-app-bg,#f1f1f1);color:var(--gemboss-text)
|
|
|
1590
4502
|
<button type="submit" aria-label="Gửi">↑</button>
|
|
1591
4503
|
</form>
|
|
1592
4504
|
</div></code></pre></details></figure></section>
|
|
1593
|
-
<section id="
|
|
4505
|
+
<section id="reactions"><h2>Reactions</h2><p>Một bộ emoji và một kiểu chip cho cả fleet: chat đội GemCare, request và bình luận GemFeedback. Chip ghi TÊN người thả ("👍 Linh, Quan +1"), của mình có viền + nền; mỗi target 44px nhưng viên thuốc nhìn thấy 26px. Bảng chọn nằm trong luồng dưới hàng chip: dùng nhiều nhất, rồi các nhóm, tìm theo chữ, mũi tên đi trong lưới. Dữ liệu (<code>REACTION_GROUPS</code>, <code>isReactionEmoji</code>, <code>toggleReaction</code>) ở <code>@gemboss/ui/reactions-data</code> cho server.</p><figure class="cat-demo"><figcaption>Reactions: chip đã thả + Add reaction</figcaption><div class="cat-live"><div class="ui-reactions"><div class="ui-reactions__row"><button type="button" class="ui-reaction is-mine" aria-pressed="true" title="Linh, Quan, An" aria-label="👍, Linh, Quan, An. Remove yours"><span class="ui-reaction__emoji">👍</span><span class="ui-reaction__names">Linh, Quan +1</span></button><button type="button" class="ui-reaction" aria-pressed="false" title="Bo" aria-label="🎉, Bo. Add yours"><span class="ui-reaction__emoji">🎉</span><span class="ui-reaction__names">Bo</span></button><button type="button" class="ui-reaction" aria-pressed="false" title="Minh Anh, Phi" aria-label="🚀, Minh Anh, Phi. Add yours"><span class="ui-reaction__emoji">🚀</span><span class="ui-reaction__names">Minh Anh, Phi</span></button><button type="button" class="ui-reaction-add" title="Add reaction" aria-label="Add a reaction to the comment from Linh" aria-expanded="false"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M16.5 10a6.5 6.5 0 1 1-6.5-6.5"></path><path d="M7.5 11.8s.9 1.2 2.5 1.2 2.5-1.2 2.5-1.2"></path><path d="M7.8 8.2h.01M12.2 8.2h.01"></path><path d="M15 2.5v4M13 4.5h4"></path></g></svg></button></div></div></div><details class="cat-code"><summary>Markup</summary><pre><code><div class="ui-reactions">
|
|
4506
|
+
<div class="ui-reactions__row">
|
|
4507
|
+
<button type="button" class="ui-reaction is-mine" aria-pressed="true" title="Linh, Quan, An" aria-label="👍, Linh, Quan, An. Remove yours">
|
|
4508
|
+
<span class="ui-reaction__emoji">👍</span>
|
|
4509
|
+
<span class="ui-reaction__names">Linh, Quan +1</span>
|
|
4510
|
+
</button>
|
|
4511
|
+
<button type="button" class="ui-reaction" aria-pressed="false" title="Bo" aria-label="🎉, Bo. Add yours">
|
|
4512
|
+
<span class="ui-reaction__emoji">🎉</span>
|
|
4513
|
+
<span class="ui-reaction__names">Bo</span>
|
|
4514
|
+
</button>
|
|
4515
|
+
<button type="button" class="ui-reaction" aria-pressed="false" title="Minh Anh, Phi" aria-label="🚀, Minh Anh, Phi. Add yours">
|
|
4516
|
+
<span class="ui-reaction__emoji">🚀</span>
|
|
4517
|
+
<span class="ui-reaction__names">Minh Anh, Phi</span>
|
|
4518
|
+
</button>
|
|
4519
|
+
<button type="button" class="ui-reaction-add" title="Add reaction" aria-label="Add a reaction to the comment from Linh" aria-expanded="false">
|
|
4520
|
+
<svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false">
|
|
4521
|
+
<g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
|
|
4522
|
+
<path d="M16.5 10a6.5 6.5 0 1 1-6.5-6.5">
|
|
4523
|
+
</path>
|
|
4524
|
+
<path d="M7.5 11.8s.9 1.2 2.5 1.2 2.5-1.2 2.5-1.2">
|
|
4525
|
+
</path>
|
|
4526
|
+
<path d="M7.8 8.2h.01M12.2 8.2h.01">
|
|
4527
|
+
</path>
|
|
4528
|
+
<path d="M15 2.5v4M13 4.5h4">
|
|
4529
|
+
</path>
|
|
4530
|
+
</g>
|
|
4531
|
+
</svg>
|
|
4532
|
+
</button>
|
|
4533
|
+
</div>
|
|
4534
|
+
</div></code></pre></details></figure><figure class="cat-demo"><figcaption>ReactionPicker: bảng chọn</figcaption><div class="cat-live"><div class="ui-reaction-picker" role="group" aria-label="Pick a reaction"><input type="search" class="gemboss-field ui-reaction-picker__search" placeholder="Search emoji" aria-label="Search emoji" autoComplete="off" value=""/><div class="ui-reaction-picker__body"><p class="ui-reaction-picker__head">Frequently used</p><div class="ui-reaction-picker__grid"><button type="button" class="ui-reaction-picker__btn" title="like" aria-label="Remove 👍 like thumbs up yes ok" aria-pressed="true">👍</button><button type="button" class="ui-reaction-picker__btn" title="done" aria-label="Add ✅ done check yes" aria-pressed="false">✅</button></div><p class="ui-reaction-picker__head">Smileys</p><div class="ui-reaction-picker__grid"><button type="button" class="ui-reaction-picker__btn" title="grin" aria-label="Add 😀 grin smile happy" aria-pressed="false">😀</button><button type="button" class="ui-reaction-picker__btn" title="smile" aria-label="Add 😃 smile happy" aria-pressed="false">😃</button><button type="button" class="ui-reaction-picker__btn" title="smile" aria-label="Add 😄 smile laugh happy" aria-pressed="false">😄</button><button type="button" class="ui-reaction-picker__btn" title="grin" aria-label="Add 😁 grin beam" aria-pressed="false">😁</button><button type="button" class="ui-reaction-picker__btn" title="laugh" aria-label="Add 😆 laugh squint" aria-pressed="false">😆</button><button type="button" class="ui-reaction-picker__btn" title="sweat" aria-label="Add 😅 sweat smile relief" aria-pressed="false">😅</button><button type="button" class="ui-reaction-picker__btn" title="joy" aria-label="Add 😂 joy tears laugh lol" aria-pressed="false">😂</button><button type="button" class="ui-reaction-picker__btn" title="rofl" aria-label="Add 🤣 rofl rolling laugh" aria-pressed="false">🤣</button><button type="button" class="ui-reaction-picker__btn" title="blush" aria-label="Add 😊 blush smile" aria-pressed="false">😊</button><button type="button" class="ui-reaction-picker__btn" title="innocent" aria-label="Add 😇 innocent halo" aria-pressed="false">😇</button><button type="button" class="ui-reaction-picker__btn" title="slight" aria-label="Add 🙂 slight smile ok" aria-pressed="false">🙂</button><button type="button" class="ui-reaction-picker__btn" title="wink" aria-label="Add 😉 wink" aria-pressed="false">😉</button><button type="button" class="ui-reaction-picker__btn" title="heart" aria-label="Add 😍 heart eyes love" aria-pressed="false">😍</button><button type="button" class="ui-reaction-picker__btn" title="love" aria-label="Add 🥰 love hearts" aria-pressed="false">🥰</button><button type="button" class="ui-reaction-picker__btn" title="kiss" aria-label="Add 😘 kiss" aria-pressed="false">😘</button><button type="button" class="ui-reaction-picker__btn" title="yum" aria-label="Add 😋 yum tasty" aria-pressed="false">😋</button><button type="button" class="ui-reaction-picker__btn" title="wink" aria-label="Add 😜 wink tongue" aria-pressed="false">😜</button><button type="button" class="ui-reaction-picker__btn" title="zany" aria-label="Add 🤪 zany crazy" aria-pressed="false">🤪</button><button type="button" class="ui-reaction-picker__btn" title="hug" aria-label="Add 🤗 hug" aria-pressed="false">🤗</button><button type="button" class="ui-reaction-picker__btn" title="oops" aria-label="Add 🤭 oops giggle" aria-pressed="false">🤭</button><button type="button" class="ui-reaction-picker__btn" title="think" aria-label="Add 🤔 think hmm" aria-pressed="false">🤔</button><button type="button" class="ui-reaction-picker__btn" title="raised" aria-label="Add 🤨 raised eyebrow doubt" aria-pressed="false">🤨</button><button type="button" class="ui-reaction-picker__btn" title="neutral" aria-label="Add 😐 neutral" aria-pressed="false">😐</button><button type="button" class="ui-reaction-picker__btn" title="no" aria-label="Add 😶 no words" aria-pressed="false">😶</button><button type="button" class="ui-reaction-picker__btn" title="eye" aria-label="Add 🙄 eye roll" aria-pressed="false">🙄</button><button type="button" class="ui-reaction-picker__btn" title="smirk" aria-label="Add 😏 smirk" aria-pressed="false">😏</button><button type="button" class="ui-reaction-picker__btn" title="grimace" aria-label="Add 😬 grimace awkward" aria-pressed="false">😬</button><button type="button" class="ui-reaction-picker__btn" title="relieved" aria-label="Add 😌 relieved" aria-pressed="false">😌</button><button type="button" class="ui-reaction-picker__btn" title="sleep" aria-label="Add 😴 sleep tired" aria-pressed="false">😴</button><button type="button" class="ui-reaction-picker__btn" title="mask" aria-label="Add 😷 mask sick" aria-pressed="false">😷</button><button type="button" class="ui-reaction-picker__btn" title="mind" aria-label="Add 🤯 mind blown" aria-pressed="false">🤯</button><button type="button" class="ui-reaction-picker__btn" title="party" aria-label="Add 🥳 party celebrate" aria-pressed="false">🥳</button><button type="button" class="ui-reaction-picker__btn" title="cool" aria-label="Add 😎 cool sunglasses" aria-pressed="false">😎</button><button type="button" class="ui-reaction-picker__btn" title="nerd" aria-label="Add 🤓 nerd" aria-pressed="false">🤓</button><button type="button" class="ui-reaction-picker__btn" title="confused" aria-label="Add 😕 confused" aria-pressed="false">😕</button><button type="button" class="ui-reaction-picker__btn" title="worried" aria-label="Add 😟 worried" aria-pressed="false">😟</button><button type="button" class="ui-reaction-picker__btn" title="wow" aria-label="Add 😮 wow surprised" aria-pressed="false">😮</button><button type="button" class="ui-reaction-picker__btn" title="astonished" aria-label="Add 😲 astonished" aria-pressed="false">😲</button><button type="button" class="ui-reaction-picker__btn" title="flushed" aria-label="Add 😳 flushed embarrassed" aria-pressed="false">😳</button><button type="button" class="ui-reaction-picker__btn" title="pleading" aria-label="Add 🥺 pleading please" aria-pressed="false">🥺</button><button type="button" class="ui-reaction-picker__btn" title="cry" aria-label="Add 😢 cry sad" aria-pressed="false">😢</button><button type="button" class="ui-reaction-picker__btn" title="sob" aria-label="Add 😭 sob crying" aria-pressed="false">😭</button><button type="button" class="ui-reaction-picker__btn" title="scream" aria-label="Add 😱 scream shock" aria-pressed="false">😱</button><button type="button" class="ui-reaction-picker__btn" title="huff" aria-label="Add 😤 huff frustrated" aria-pressed="false">😤</button><button type="button" class="ui-reaction-picker__btn" title="angry" aria-label="Add 😡 angry mad" aria-pressed="false">😡</button><button type="button" class="ui-reaction-picker__btn" title="swear" aria-label="Add 🤬 swear" aria-pressed="false">🤬</button><button type="button" class="ui-reaction-picker__btn" title="dead" aria-label="Add 💀 dead skull" aria-pressed="false">💀</button><button type="button" class="ui-reaction-picker__btn" title="melting" aria-label="Add 🫠 melting" aria-pressed="false">🫠</button><button type="button" class="ui-reaction-picker__btn" title="salute" aria-label="Add 🫡 salute" aria-pressed="false">🫡</button></div><p class="ui-reaction-picker__head">Hands</p><div class="ui-reaction-picker__grid"><button type="button" class="ui-reaction-picker__btn" title="like" aria-label="Remove 👍 like thumbs up yes ok" aria-pressed="true">👍</button><button type="button" class="ui-reaction-picker__btn" title="dislike" aria-label="Add 👎 dislike thumbs down no" aria-pressed="false">👎</button><button type="button" class="ui-reaction-picker__btn" title="ok" aria-label="Add 👌 ok perfect" aria-pressed="false">👌</button><button type="button" class="ui-reaction-picker__btn" title="peace" aria-label="Add ✌️ peace victory" aria-pressed="false">✌️</button><button type="button" class="ui-reaction-picker__btn" title="fingers" aria-label="Add 🤞 fingers crossed luck" aria-pressed="false">🤞</button><button type="button" class="ui-reaction-picker__btn" title="love" aria-label="Add 🤟 love you" aria-pressed="false">🤟</button><button type="button" class="ui-reaction-picker__btn" title="rock" aria-label="Add 🤘 rock" aria-pressed="false">🤘</button><button type="button" class="ui-reaction-picker__btn" title="clap" aria-label="Add 👏 clap applause" aria-pressed="false">👏</button><button type="button" class="ui-reaction-picker__btn" title="raise" aria-label="Add 🙌 raise hands hooray" aria-pressed="false">🙌</button><button type="button" class="ui-reaction-picker__btn" title="open" aria-label="Add 👐 open hands" aria-pressed="false">👐</button><button type="button" class="ui-reaction-picker__btn" title="handshake" aria-label="Add 🤝 handshake deal" aria-pressed="false">🤝</button><button type="button" class="ui-reaction-picker__btn" title="thanks" aria-label="Add 🙏 thanks please pray" aria-pressed="false">🙏</button><button type="button" class="ui-reaction-picker__btn" title="strong" aria-label="Add 💪 strong muscle" aria-pressed="false">💪</button><button type="button" class="ui-reaction-picker__btn" title="eyes" aria-label="Add 👀 eyes looking" aria-pressed="false">👀</button><button type="button" class="ui-reaction-picker__btn" title="heart" aria-label="Add 🫶 heart hands" aria-pressed="false">🫶</button><button type="button" class="ui-reaction-picker__btn" title="writing" aria-label="Add ✍️ writing" aria-pressed="false">✍️</button><button type="button" class="ui-reaction-picker__btn" title="wave" aria-label="Add 👋 wave hi bye" aria-pressed="false">👋</button><button type="button" class="ui-reaction-picker__btn" title="point" aria-label="Add ☝️ point up" aria-pressed="false">☝️</button><button type="button" class="ui-reaction-picker__btn" title="point" aria-label="Add 👇 point down" aria-pressed="false">👇</button><button type="button" class="ui-reaction-picker__btn" title="point" aria-label="Add 👉 point right" aria-pressed="false">👉</button><button type="button" class="ui-reaction-picker__btn" title="point" aria-label="Add 👈 point left" aria-pressed="false">👈</button><button type="button" class="ui-reaction-picker__btn" title="call" aria-label="Add 🤙 call me" aria-pressed="false">🤙</button><button type="button" class="ui-reaction-picker__btn" title="stop" aria-label="Add 🖐️ stop hand" aria-pressed="false">🖐️</button><button type="button" class="ui-reaction-picker__btn" title="pinched" aria-label="Add 🤌 pinched" aria-pressed="false">🤌</button></div><p class="ui-reaction-picker__head">Marks</p><div class="ui-reaction-picker__grid"><button type="button" class="ui-reaction-picker__btn" title="heart" aria-label="Add ❤️ heart love red" aria-pressed="false">❤️</button><button type="button" class="ui-reaction-picker__btn" title="orange" aria-label="Add 🧡 orange heart" aria-pressed="false">🧡</button><button type="button" class="ui-reaction-picker__btn" title="yellow" aria-label="Add 💛 yellow heart" aria-pressed="false">💛</button><button type="button" class="ui-reaction-picker__btn" title="green" aria-label="Add 💚 green heart" aria-pressed="false">💚</button><button type="button" class="ui-reaction-picker__btn" title="blue" aria-label="Add 💙 blue heart" aria-pressed="false">💙</button><button type="button" class="ui-reaction-picker__btn" title="purple" aria-label="Add 💜 purple heart" aria-pressed="false">💜</button><button type="button" class="ui-reaction-picker__btn" title="black" aria-label="Add 🖤 black heart" aria-pressed="false">🖤</button><button type="button" class="ui-reaction-picker__btn" title="hundred" aria-label="Add 💯 hundred perfect" aria-pressed="false">💯</button><button type="button" class="ui-reaction-picker__btn" title="done" aria-label="Add ✅ done check yes" aria-pressed="false">✅</button><button type="button" class="ui-reaction-picker__btn" title="checked" aria-label="Add ☑️ checked box" aria-pressed="false">☑️</button><button type="button" class="ui-reaction-picker__btn" title="check" aria-label="Add ✔️ check mark" aria-pressed="false">✔️</button><button type="button" class="ui-reaction-picker__btn" title="no" aria-label="Add ❌ no cross wrong" aria-pressed="false">❌</button><button type="button" class="ui-reaction-picker__btn" title="important" aria-label="Add ❗ important exclamation" aria-pressed="false">❗</button><button type="button" class="ui-reaction-picker__btn" title="question" aria-label="Add ❓ question" aria-pressed="false">❓</button><button type="button" class="ui-reaction-picker__btn" title="warning" aria-label="Add ⚠️ warning" aria-pressed="false">⚠️</button><button type="button" class="ui-reaction-picker__btn" title="fire" aria-label="Add 🔥 fire hot lit" aria-pressed="false">🔥</button><button type="button" class="ui-reaction-picker__btn" title="star" aria-label="Add ⭐ star" aria-pressed="false">⭐</button><button type="button" class="ui-reaction-picker__btn" title="sparkles" aria-label="Add ✨ sparkles new" aria-pressed="false">✨</button><button type="button" class="ui-reaction-picker__btn" title="idea" aria-label="Add 💡 idea" aria-pressed="false">💡</button><button type="button" class="ui-reaction-picker__btn" title="pin" aria-label="Add 📌 pin" aria-pressed="false">📌</button><button type="button" class="ui-reaction-picker__btn" title="rocket" aria-label="Add 🚀 rocket ship launch" aria-pressed="false">🚀</button><button type="button" class="ui-reaction-picker__btn" title="target" aria-label="Add 🎯 target goal" aria-pressed="false">🎯</button><button type="button" class="ui-reaction-picker__btn" title="ok" aria-label="Add 🆗 ok button" aria-pressed="false">🆗</button><button type="button" class="ui-reaction-picker__btn" title="new" aria-label="Add 🆕 new" aria-pressed="false">🆕</button><button type="button" class="ui-reaction-picker__btn" title="red" aria-label="Add 🔴 red circle urgent" aria-pressed="false">🔴</button><button type="button" class="ui-reaction-picker__btn" title="green" aria-label="Add 🟢 green circle" aria-pressed="false">🟢</button><button type="button" class="ui-reaction-picker__btn" title="yellow" aria-label="Add 🟡 yellow circle" aria-pressed="false">🟡</button><button type="button" class="ui-reaction-picker__btn" title="plus" aria-label="Add ➕ plus one add" aria-pressed="false">➕</button></div><p class="ui-reaction-picker__head">Work</p><div class="ui-reaction-picker__grid"><button type="button" class="ui-reaction-picker__btn" title="party" aria-label="Add 🎉 party tada celebrate" aria-pressed="false">🎉</button><button type="button" class="ui-reaction-picker__btn" title="confetti" aria-label="Add 🎊 confetti" aria-pressed="false">🎊</button><button type="button" class="ui-reaction-picker__btn" title="trophy" aria-label="Add 🏆 trophy win" aria-pressed="false">🏆</button><button type="button" class="ui-reaction-picker__btn" title="gold" aria-label="Add 🥇 gold medal first" aria-pressed="false">🥇</button><button type="button" class="ui-reaction-picker__btn" title="gift" aria-label="Add 🎁 gift" aria-pressed="false">🎁</button><button type="button" class="ui-reaction-picker__btn" title="coffee" aria-label="Add ☕ coffee" aria-pressed="false">☕</button><button type="button" class="ui-reaction-picker__btn" title="cheers" aria-label="Add 🍻 cheers beer" aria-pressed="false">🍻</button><button type="button" class="ui-reaction-picker__btn" title="pizza" aria-label="Add 🍕 pizza" aria-pressed="false">🍕</button><button type="button" class="ui-reaction-picker__btn" title="chart" aria-label="Add 📈 chart up growth" aria-pressed="false">📈</button><button type="button" class="ui-reaction-picker__btn" title="chart" aria-label="Add 📉 chart down" aria-pressed="false">📉</button><button type="button" class="ui-reaction-picker__btn" title="money" aria-label="Add 💰 money" aria-pressed="false">💰</button><button type="button" class="ui-reaction-picker__btn" title="cart" aria-label="Add 🛒 cart shop" aria-pressed="false">🛒</button><button type="button" class="ui-reaction-picker__btn" title="package" aria-label="Add 📦 package order shipping" aria-pressed="false">📦</button><button type="button" class="ui-reaction-picker__btn" title="receipt" aria-label="Add 🧾 receipt invoice" aria-pressed="false">🧾</button><button type="button" class="ui-reaction-picker__btn" title="note" aria-label="Add 📝 note memo" aria-pressed="false">📝</button><button type="button" class="ui-reaction-picker__btn" title="calendar" aria-label="Add 📅 calendar date" aria-pressed="false">📅</button><button type="button" class="ui-reaction-picker__btn" title="alarm" aria-label="Add ⏰ alarm time" aria-pressed="false">⏰</button><button type="button" class="ui-reaction-picker__btn" title="waiting" aria-label="Add ⏳ waiting hourglass" aria-pressed="false">⏳</button><button type="button" class="ui-reaction-picker__btn" title="fix" aria-label="Add 🔧 fix wrench" aria-pressed="false">🔧</button><button type="button" class="ui-reaction-picker__btn" title="bug" aria-label="Add 🐛 bug" aria-pressed="false">🐛</button><button type="button" class="ui-reaction-picker__btn" title="test" aria-label="Add 🧪 test" aria-pressed="false">🧪</button><button type="button" class="ui-reaction-picker__btn" title="search" aria-label="Add 🔍 search look" aria-pressed="false">🔍</button><button type="button" class="ui-reaction-picker__btn" title="comment" aria-label="Add 💬 comment chat" aria-pressed="false">💬</button><button type="button" class="ui-reaction-picker__btn" title="call" aria-label="Add 📞 call phone" aria-pressed="false">📞</button><button type="button" class="ui-reaction-picker__btn" title="email" aria-label="Add 📧 email" aria-pressed="false">📧</button><button type="button" class="ui-reaction-picker__btn" title="lock" aria-label="Add 🔒 lock private" aria-pressed="false">🔒</button><button type="button" class="ui-reaction-picker__btn" title="link" aria-label="Add 🔗 link" aria-pressed="false">🔗</button><button type="button" class="ui-reaction-picker__btn" title="image" aria-label="Add 🖼️ image picture" aria-pressed="false">🖼️</button><button type="button" class="ui-reaction-picker__btn" title="laptop" aria-label="Add 💻 laptop computer" aria-pressed="false">💻</button><button type="button" class="ui-reaction-picker__btn" title="phone" aria-label="Add 📱 phone mobile" aria-pressed="false">📱</button><button type="button" class="ui-reaction-picker__btn" title="see" aria-label="Add 🙈 see no evil oops" aria-pressed="false">🙈</button><button type="button" class="ui-reaction-picker__btn" title="hear" aria-label="Add 🙉 hear no evil" aria-pressed="false">🙉</button><button type="button" class="ui-reaction-picker__btn" title="robot" aria-label="Add 🤖 robot bot ai" aria-pressed="false">🤖</button><button type="button" class="ui-reaction-picker__btn" title="brain" aria-label="Add 🧠 brain" aria-pressed="false">🧠</button><button type="button" class="ui-reaction-picker__btn" title="crown" aria-label="Add 👑 crown vip" aria-pressed="false">👑</button><button type="button" class="ui-reaction-picker__btn" title="gem" aria-label="Add 💎 gem diamond" aria-pressed="false">💎</button></div></div></div></div><details class="cat-code"><summary>Markup</summary><pre><code><div class="ui-reaction-picker" role="group" aria-label="Pick a reaction">
|
|
4535
|
+
<input type="search" class="gemboss-field ui-reaction-picker__search" placeholder="Search emoji" aria-label="Search emoji" autoComplete="off" value=""/>
|
|
4536
|
+
<div class="ui-reaction-picker__body">
|
|
4537
|
+
<p class="ui-reaction-picker__head">Frequently used</p>
|
|
4538
|
+
<div class="ui-reaction-picker__grid">
|
|
4539
|
+
<button type="button" class="ui-reaction-picker__btn" title="like" aria-label="Remove 👍 like thumbs up yes ok" aria-pressed="true">👍</button>
|
|
4540
|
+
<button type="button" class="ui-reaction-picker__btn" title="done" aria-label="Add ✅ done check yes" aria-pressed="false">✅</button>
|
|
4541
|
+
</div>
|
|
4542
|
+
<p class="ui-reaction-picker__head">Smileys</p>
|
|
4543
|
+
<div class="ui-reaction-picker__grid">
|
|
4544
|
+
<button type="button" class="ui-reaction-picker__btn" title="grin" aria-label="Add 😀 grin smile happy" aria-pressed="false">😀</button>
|
|
4545
|
+
<button type="button" class="ui-reaction-picker__btn" title="smile" aria-label="Add 😃 smile happy" aria-pressed="false">😃</button>
|
|
4546
|
+
<button type="button" class="ui-reaction-picker__btn" title="smile" aria-label="Add 😄 smile laugh happy" aria-pressed="false">😄</button>
|
|
4547
|
+
<button type="button" class="ui-reaction-picker__btn" title="grin" aria-label="Add 😁 grin beam" aria-pressed="false">😁</button>
|
|
4548
|
+
<button type="button" class="ui-reaction-picker__btn" title="laugh" aria-label="Add 😆 laugh squint" aria-pressed="false">😆</button>
|
|
4549
|
+
<button type="button" class="ui-reaction-picker__btn" title="sweat" aria-label="Add 😅 sweat smile relief" aria-pressed="false">😅</button>
|
|
4550
|
+
<button type="button" class="ui-reaction-picker__btn" title="joy" aria-label="Add 😂 joy tears laugh lol" aria-pressed="false">😂</button>
|
|
4551
|
+
<button type="button" class="ui-reaction-picker__btn" title="rofl" aria-label="Add 🤣 rofl rolling laugh" aria-pressed="false">🤣</button>
|
|
4552
|
+
<button type="button" class="ui-reaction-picker__btn" title="blush" aria-label="Add 😊 blush smile" aria-pressed="false">😊</button>
|
|
4553
|
+
<button type="button" class="ui-reaction-picker__btn" title="innocent" aria-label="Add 😇 innocent halo" aria-pressed="false">😇</button>
|
|
4554
|
+
<button type="button" class="ui-reaction-picker__btn" title="slight" aria-label="Add 🙂 slight smile ok" aria-pressed="false">🙂</button>
|
|
4555
|
+
<button type="button" class="ui-reaction-picker__btn" title="wink" aria-label="Add 😉 wink" aria-pressed="false">😉</button>
|
|
4556
|
+
<button type="button" class="ui-reaction-picker__btn" title="heart" aria-label="Add 😍 heart eyes love" aria-pressed="false">😍</button>
|
|
4557
|
+
<button type="button" class="ui-reaction-picker__btn" title="love" aria-label="Add 🥰 love hearts" aria-pressed="false">🥰</button>
|
|
4558
|
+
<button type="button" class="ui-reaction-picker__btn" title="kiss" aria-label="Add 😘 kiss" aria-pressed="false">😘</button>
|
|
4559
|
+
<button type="button" class="ui-reaction-picker__btn" title="yum" aria-label="Add 😋 yum tasty" aria-pressed="false">😋</button>
|
|
4560
|
+
<button type="button" class="ui-reaction-picker__btn" title="wink" aria-label="Add 😜 wink tongue" aria-pressed="false">😜</button>
|
|
4561
|
+
<button type="button" class="ui-reaction-picker__btn" title="zany" aria-label="Add 🤪 zany crazy" aria-pressed="false">🤪</button>
|
|
4562
|
+
<button type="button" class="ui-reaction-picker__btn" title="hug" aria-label="Add 🤗 hug" aria-pressed="false">🤗</button>
|
|
4563
|
+
<button type="button" class="ui-reaction-picker__btn" title="oops" aria-label="Add 🤭 oops giggle" aria-pressed="false">🤭</button>
|
|
4564
|
+
<button type="button" class="ui-reaction-picker__btn" title="think" aria-label="Add 🤔 think hmm" aria-pressed="false">🤔</button>
|
|
4565
|
+
<button type="button" class="ui-reaction-picker__btn" title="raised" aria-label="Add 🤨 raised eyebrow doubt" aria-pressed="false">🤨</button>
|
|
4566
|
+
<button type="button" class="ui-reaction-picker__btn" title="neutral" aria-label="Add 😐 neutral" aria-pressed="false">😐</button>
|
|
4567
|
+
<button type="button" class="ui-reaction-picker__btn" title="no" aria-label="Add 😶 no words" aria-pressed="false">😶</button>
|
|
4568
|
+
<button type="button" class="ui-reaction-picker__btn" title="eye" aria-label="Add 🙄 eye roll" aria-pressed="false">🙄</button>
|
|
4569
|
+
<button type="button" class="ui-reaction-picker__btn" title="smirk" aria-label="Add 😏 smirk" aria-pressed="false">😏</button>
|
|
4570
|
+
<button type="button" class="ui-reaction-picker__btn" title="grimace" aria-label="Add 😬 grimace awkward" aria-pressed="false">😬</button>
|
|
4571
|
+
<button type="button" class="ui-reaction-picker__btn" title="relieved" aria-label="Add 😌 relieved" aria-pressed="false">😌</button>
|
|
4572
|
+
<button type="button" class="ui-reaction-picker__btn" title="sleep" aria-label="Add 😴 sleep tired" aria-pressed="false">😴</button>
|
|
4573
|
+
<button type="button" class="ui-reaction-picker__btn" title="mask" aria-label="Add 😷 mask sick" aria-pressed="false">😷</button>
|
|
4574
|
+
<button type="button" class="ui-reaction-picker__btn" title="mind" aria-label="Add 🤯 mind blown" aria-pressed="false">🤯</button>
|
|
4575
|
+
<button type="button" class="ui-reaction-picker__btn" title="party" aria-label="Add 🥳 party celebrate" aria-pressed="false">🥳</button>
|
|
4576
|
+
<button type="button" class="ui-reaction-picker__btn" title="cool" aria-label="Add 😎 cool sunglasses" aria-pressed="false">😎</button>
|
|
4577
|
+
<button type="button" class="ui-reaction-picker__btn" title="nerd" aria-label="Add 🤓 nerd" aria-pressed="false">🤓</button>
|
|
4578
|
+
<button type="button" class="ui-reaction-picker__btn" title="confused" aria-label="Add 😕 confused" aria-pressed="false">😕</button>
|
|
4579
|
+
<button type="button" class="ui-reaction-picker__btn" title="worried" aria-label="Add 😟 worried" aria-pressed="false">😟</button>
|
|
4580
|
+
<button type="button" class="ui-reaction-picker__btn" title="wow" aria-label="Add 😮 wow surprised" aria-pressed="false">😮</button>
|
|
4581
|
+
<button type="button" class="ui-reaction-picker__btn" title="astonished" aria-label="Add 😲 astonished" aria-pressed="false">😲</button>
|
|
4582
|
+
<button type="button" class="ui-reaction-picker__btn" title="flushed" aria-label="Add 😳 flushed embarrassed" aria-pressed="false">😳</button>
|
|
4583
|
+
<button type="button" class="ui-reaction-picker__btn" title="pleading" aria-label="Add 🥺 pleading please" aria-pressed="false">🥺</button>
|
|
4584
|
+
<button type="button" class="ui-reaction-picker__btn" title="cry" aria-label="Add 😢 cry sad" aria-pressed="false">😢</button>
|
|
4585
|
+
<button type="button" class="ui-reaction-picker__btn" title="sob" aria-label="Add 😭 sob crying" aria-pressed="false">😭</button>
|
|
4586
|
+
<button type="button" class="ui-reaction-picker__btn" title="scream" aria-label="Add 😱 scream shock" aria-pressed="false">😱</button>
|
|
4587
|
+
<button type="button" class="ui-reaction-picker__btn" title="huff" aria-label="Add 😤 huff frustrated" aria-pressed="false">😤</button>
|
|
4588
|
+
<button type="button" class="ui-reaction-picker__btn" title="angry" aria-label="Add 😡 angry mad" aria-pressed="false">😡</button>
|
|
4589
|
+
<button type="button" class="ui-reaction-picker__btn" title="swear" aria-label="Add 🤬 swear" aria-pressed="false">🤬</button>
|
|
4590
|
+
<button type="button" class="ui-reaction-picker__btn" title="dead" aria-label="Add 💀 dead skull" aria-pressed="false">💀</button>
|
|
4591
|
+
<button type="button" class="ui-reaction-picker__btn" title="melting" aria-label="Add 🫠 melting" aria-pressed="false">🫠</button>
|
|
4592
|
+
<button type="button" class="ui-reaction-picker__btn" title="salute" aria-label="Add 🫡 salute" aria-pressed="false">🫡</button>
|
|
4593
|
+
</div>
|
|
4594
|
+
<p class="ui-reaction-picker__head">Hands</p>
|
|
4595
|
+
<div class="ui-reaction-picker__grid">
|
|
4596
|
+
<button type="button" class="ui-reaction-picker__btn" title="like" aria-label="Remove 👍 like thumbs up yes ok" aria-pressed="true">👍</button>
|
|
4597
|
+
<button type="button" class="ui-reaction-picker__btn" title="dislike" aria-label="Add 👎 dislike thumbs down no" aria-pressed="false">👎</button>
|
|
4598
|
+
<button type="button" class="ui-reaction-picker__btn" title="ok" aria-label="Add 👌 ok perfect" aria-pressed="false">👌</button>
|
|
4599
|
+
<button type="button" class="ui-reaction-picker__btn" title="peace" aria-label="Add ✌️ peace victory" aria-pressed="false">✌️</button>
|
|
4600
|
+
<button type="button" class="ui-reaction-picker__btn" title="fingers" aria-label="Add 🤞 fingers crossed luck" aria-pressed="false">🤞</button>
|
|
4601
|
+
<button type="button" class="ui-reaction-picker__btn" title="love" aria-label="Add 🤟 love you" aria-pressed="false">🤟</button>
|
|
4602
|
+
<button type="button" class="ui-reaction-picker__btn" title="rock" aria-label="Add 🤘 rock" aria-pressed="false">🤘</button>
|
|
4603
|
+
<button type="button" class="ui-reaction-picker__btn" title="clap" aria-label="Add 👏 clap applause" aria-pressed="false">👏</button>
|
|
4604
|
+
<button type="button" class="ui-reaction-picker__btn" title="raise" aria-label="Add 🙌 raise hands hooray" aria-pressed="false">🙌</button>
|
|
4605
|
+
<button type="button" class="ui-reaction-picker__btn" title="open" aria-label="Add 👐 open hands" aria-pressed="false">👐</button>
|
|
4606
|
+
<button type="button" class="ui-reaction-picker__btn" title="handshake" aria-label="Add 🤝 handshake deal" aria-pressed="false">🤝</button>
|
|
4607
|
+
<button type="button" class="ui-reaction-picker__btn" title="thanks" aria-label="Add 🙏 thanks please pray" aria-pressed="false">🙏</button>
|
|
4608
|
+
<button type="button" class="ui-reaction-picker__btn" title="strong" aria-label="Add 💪 strong muscle" aria-pressed="false">💪</button>
|
|
4609
|
+
<button type="button" class="ui-reaction-picker__btn" title="eyes" aria-label="Add 👀 eyes looking" aria-pressed="false">👀</button>
|
|
4610
|
+
<button type="button" class="ui-reaction-picker__btn" title="heart" aria-label="Add 🫶 heart hands" aria-pressed="false">🫶</button>
|
|
4611
|
+
<button type="button" class="ui-reaction-picker__btn" title="writing" aria-label="Add ✍️ writing" aria-pressed="false">✍️</button>
|
|
4612
|
+
<button type="button" class="ui-reaction-picker__btn" title="wave" aria-label="Add 👋 wave hi bye" aria-pressed="false">👋</button>
|
|
4613
|
+
<button type="button" class="ui-reaction-picker__btn" title="point" aria-label="Add ☝️ point up" aria-pressed="false">☝️</button>
|
|
4614
|
+
<button type="button" class="ui-reaction-picker__btn" title="point" aria-label="Add 👇 point down" aria-pressed="false">👇</button>
|
|
4615
|
+
<button type="button" class="ui-reaction-picker__btn" title="point" aria-label="Add 👉 point right" aria-pressed="false">👉</button>
|
|
4616
|
+
<button type="button" class="ui-reaction-picker__btn" title="point" aria-label="Add 👈 point left" aria-pressed="false">👈</button>
|
|
4617
|
+
<button type="button" class="ui-reaction-picker__btn" title="call" aria-label="Add 🤙 call me" aria-pressed="false">🤙</button>
|
|
4618
|
+
<button type="button" class="ui-reaction-picker__btn" title="stop" aria-label="Add 🖐️ stop hand" aria-pressed="false">🖐️</button>
|
|
4619
|
+
<button type="button" class="ui-reaction-picker__btn" title="pinched" aria-label="Add 🤌 pinched" aria-pressed="false">🤌</button>
|
|
4620
|
+
</div>
|
|
4621
|
+
<p class="ui-reaction-picker__head">Marks</p>
|
|
4622
|
+
<div class="ui-reaction-picker__grid">
|
|
4623
|
+
<button type="button" class="ui-reaction-picker__btn" title="heart" aria-label="Add ❤️ heart love red" aria-pressed="false">❤️</button>
|
|
4624
|
+
<button type="button" class="ui-reaction-picker__btn" title="orange" aria-label="Add 🧡 orange heart" aria-pressed="false">🧡</button>
|
|
4625
|
+
<button type="button" class="ui-reaction-picker__btn" title="yellow" aria-label="Add 💛 yellow heart" aria-pressed="false">💛</button>
|
|
4626
|
+
<button type="button" class="ui-reaction-picker__btn" title="green" aria-label="Add 💚 green heart" aria-pressed="false">💚</button>
|
|
4627
|
+
<button type="button" class="ui-reaction-picker__btn" title="blue" aria-label="Add 💙 blue heart" aria-pressed="false">💙</button>
|
|
4628
|
+
<button type="button" class="ui-reaction-picker__btn" title="purple" aria-label="Add 💜 purple heart" aria-pressed="false">💜</button>
|
|
4629
|
+
<button type="button" class="ui-reaction-picker__btn" title="black" aria-label="Add 🖤 black heart" aria-pressed="false">🖤</button>
|
|
4630
|
+
<button type="button" class="ui-reaction-picker__btn" title="hundred" aria-label="Add 💯 hundred perfect" aria-pressed="false">💯</button>
|
|
4631
|
+
<button type="button" class="ui-reaction-picker__btn" title="done" aria-label="Add ✅ done check yes" aria-pressed="false">✅</button>
|
|
4632
|
+
<button type="button" class="ui-reaction-picker__btn" title="checked" aria-label="Add ☑️ checked box" aria-pressed="false">☑️</button>
|
|
4633
|
+
<button type="button" class="ui-reaction-picker__btn" title="check" aria-label="Add ✔️ check mark" aria-pressed="false">✔️</button>
|
|
4634
|
+
<button type="button" class="ui-reaction-picker__btn" title="no" aria-label="Add ❌ no cross wrong" aria-pressed="false">❌</button>
|
|
4635
|
+
<button type="button" class="ui-reaction-picker__btn" title="important" aria-label="Add ❗ important exclamation" aria-pressed="false">❗</button>
|
|
4636
|
+
<button type="button" class="ui-reaction-picker__btn" title="question" aria-label="Add ❓ question" aria-pressed="false">❓</button>
|
|
4637
|
+
<button type="button" class="ui-reaction-picker__btn" title="warning" aria-label="Add ⚠️ warning" aria-pressed="false">⚠️</button>
|
|
4638
|
+
<button type="button" class="ui-reaction-picker__btn" title="fire" aria-label="Add 🔥 fire hot lit" aria-pressed="false">🔥</button>
|
|
4639
|
+
<button type="button" class="ui-reaction-picker__btn" title="star" aria-label="Add ⭐ star" aria-pressed="false">⭐</button>
|
|
4640
|
+
<button type="button" class="ui-reaction-picker__btn" title="sparkles" aria-label="Add ✨ sparkles new" aria-pressed="false">✨</button>
|
|
4641
|
+
<button type="button" class="ui-reaction-picker__btn" title="idea" aria-label="Add 💡 idea" aria-pressed="false">💡</button>
|
|
4642
|
+
<button type="button" class="ui-reaction-picker__btn" title="pin" aria-label="Add 📌 pin" aria-pressed="false">📌</button>
|
|
4643
|
+
<button type="button" class="ui-reaction-picker__btn" title="rocket" aria-label="Add 🚀 rocket ship launch" aria-pressed="false">🚀</button>
|
|
4644
|
+
<button type="button" class="ui-reaction-picker__btn" title="target" aria-label="Add 🎯 target goal" aria-pressed="false">🎯</button>
|
|
4645
|
+
<button type="button" class="ui-reaction-picker__btn" title="ok" aria-label="Add 🆗 ok button" aria-pressed="false">🆗</button>
|
|
4646
|
+
<button type="button" class="ui-reaction-picker__btn" title="new" aria-label="Add 🆕 new" aria-pressed="false">🆕</button>
|
|
4647
|
+
<button type="button" class="ui-reaction-picker__btn" title="red" aria-label="Add 🔴 red circle urgent" aria-pressed="false">🔴</button>
|
|
4648
|
+
<button type="button" class="ui-reaction-picker__btn" title="green" aria-label="Add 🟢 green circle" aria-pressed="false">🟢</button>
|
|
4649
|
+
<button type="button" class="ui-reaction-picker__btn" title="yellow" aria-label="Add 🟡 yellow circle" aria-pressed="false">🟡</button>
|
|
4650
|
+
<button type="button" class="ui-reaction-picker__btn" title="plus" aria-label="Add ➕ plus one add" aria-pressed="false">➕</button>
|
|
4651
|
+
</div>
|
|
4652
|
+
<p class="ui-reaction-picker__head">Work</p>
|
|
4653
|
+
<div class="ui-reaction-picker__grid">
|
|
4654
|
+
<button type="button" class="ui-reaction-picker__btn" title="party" aria-label="Add 🎉 party tada celebrate" aria-pressed="false">🎉</button>
|
|
4655
|
+
<button type="button" class="ui-reaction-picker__btn" title="confetti" aria-label="Add 🎊 confetti" aria-pressed="false">🎊</button>
|
|
4656
|
+
<button type="button" class="ui-reaction-picker__btn" title="trophy" aria-label="Add 🏆 trophy win" aria-pressed="false">🏆</button>
|
|
4657
|
+
<button type="button" class="ui-reaction-picker__btn" title="gold" aria-label="Add 🥇 gold medal first" aria-pressed="false">🥇</button>
|
|
4658
|
+
<button type="button" class="ui-reaction-picker__btn" title="gift" aria-label="Add 🎁 gift" aria-pressed="false">🎁</button>
|
|
4659
|
+
<button type="button" class="ui-reaction-picker__btn" title="coffee" aria-label="Add ☕ coffee" aria-pressed="false">☕</button>
|
|
4660
|
+
<button type="button" class="ui-reaction-picker__btn" title="cheers" aria-label="Add 🍻 cheers beer" aria-pressed="false">🍻</button>
|
|
4661
|
+
<button type="button" class="ui-reaction-picker__btn" title="pizza" aria-label="Add 🍕 pizza" aria-pressed="false">🍕</button>
|
|
4662
|
+
<button type="button" class="ui-reaction-picker__btn" title="chart" aria-label="Add 📈 chart up growth" aria-pressed="false">📈</button>
|
|
4663
|
+
<button type="button" class="ui-reaction-picker__btn" title="chart" aria-label="Add 📉 chart down" aria-pressed="false">📉</button>
|
|
4664
|
+
<button type="button" class="ui-reaction-picker__btn" title="money" aria-label="Add 💰 money" aria-pressed="false">💰</button>
|
|
4665
|
+
<button type="button" class="ui-reaction-picker__btn" title="cart" aria-label="Add 🛒 cart shop" aria-pressed="false">🛒</button>
|
|
4666
|
+
<button type="button" class="ui-reaction-picker__btn" title="package" aria-label="Add 📦 package order shipping" aria-pressed="false">📦</button>
|
|
4667
|
+
<button type="button" class="ui-reaction-picker__btn" title="receipt" aria-label="Add 🧾 receipt invoice" aria-pressed="false">🧾</button>
|
|
4668
|
+
<button type="button" class="ui-reaction-picker__btn" title="note" aria-label="Add 📝 note memo" aria-pressed="false">📝</button>
|
|
4669
|
+
<button type="button" class="ui-reaction-picker__btn" title="calendar" aria-label="Add 📅 calendar date" aria-pressed="false">📅</button>
|
|
4670
|
+
<button type="button" class="ui-reaction-picker__btn" title="alarm" aria-label="Add ⏰ alarm time" aria-pressed="false">⏰</button>
|
|
4671
|
+
<button type="button" class="ui-reaction-picker__btn" title="waiting" aria-label="Add ⏳ waiting hourglass" aria-pressed="false">⏳</button>
|
|
4672
|
+
<button type="button" class="ui-reaction-picker__btn" title="fix" aria-label="Add 🔧 fix wrench" aria-pressed="false">🔧</button>
|
|
4673
|
+
<button type="button" class="ui-reaction-picker__btn" title="bug" aria-label="Add 🐛 bug" aria-pressed="false">🐛</button>
|
|
4674
|
+
<button type="button" class="ui-reaction-picker__btn" title="test" aria-label="Add 🧪 test" aria-pressed="false">🧪</button>
|
|
4675
|
+
<button type="button" class="ui-reaction-picker__btn" title="search" aria-label="Add 🔍 search look" aria-pressed="false">🔍</button>
|
|
4676
|
+
<button type="button" class="ui-reaction-picker__btn" title="comment" aria-label="Add 💬 comment chat" aria-pressed="false">💬</button>
|
|
4677
|
+
<button type="button" class="ui-reaction-picker__btn" title="call" aria-label="Add 📞 call phone" aria-pressed="false">📞</button>
|
|
4678
|
+
<button type="button" class="ui-reaction-picker__btn" title="email" aria-label="Add 📧 email" aria-pressed="false">📧</button>
|
|
4679
|
+
<button type="button" class="ui-reaction-picker__btn" title="lock" aria-label="Add 🔒 lock private" aria-pressed="false">🔒</button>
|
|
4680
|
+
<button type="button" class="ui-reaction-picker__btn" title="link" aria-label="Add 🔗 link" aria-pressed="false">🔗</button>
|
|
4681
|
+
<button type="button" class="ui-reaction-picker__btn" title="image" aria-label="Add 🖼️ image picture" aria-pressed="false">🖼️</button>
|
|
4682
|
+
<button type="button" class="ui-reaction-picker__btn" title="laptop" aria-label="Add 💻 laptop computer" aria-pressed="false">💻</button>
|
|
4683
|
+
<button type="button" class="ui-reaction-picker__btn" title="phone" aria-label="Add 📱 phone mobile" aria-pressed="false">📱</button>
|
|
4684
|
+
<button type="button" class="ui-reaction-picker__btn" title="see" aria-label="Add 🙈 see no evil oops" aria-pressed="false">🙈</button>
|
|
4685
|
+
<button type="button" class="ui-reaction-picker__btn" title="hear" aria-label="Add 🙉 hear no evil" aria-pressed="false">🙉</button>
|
|
4686
|
+
<button type="button" class="ui-reaction-picker__btn" title="robot" aria-label="Add 🤖 robot bot ai" aria-pressed="false">🤖</button>
|
|
4687
|
+
<button type="button" class="ui-reaction-picker__btn" title="brain" aria-label="Add 🧠 brain" aria-pressed="false">🧠</button>
|
|
4688
|
+
<button type="button" class="ui-reaction-picker__btn" title="crown" aria-label="Add 👑 crown vip" aria-pressed="false">👑</button>
|
|
4689
|
+
<button type="button" class="ui-reaction-picker__btn" title="gem" aria-label="Add 💎 gem diamond" aria-pressed="false">💎</button>
|
|
4690
|
+
</div>
|
|
4691
|
+
</div>
|
|
4692
|
+
</div></code></pre></details></figure></section>
|
|
4693
|
+
<section id="assistant"><h2>Trợ lý: cột phiên</h2><p><code>SessionRail</code> (React). Khung toàn màn hình / cửa sổ nổi / cột phải cao hết màn (<code>allowSide</code>) / thanh là <code>AssistantHost</code>, cần React vì có trạng thái.</p><figure class="cat-demo"><figcaption>SessionRail</figcaption><div class="cat-live"><div style="height:360px;display:flex"><aside class="gemboss-assistant-rail"><div class="gemboss-assistant-rail-top"><button type="button" class="gemboss-assistant-newchat" title="Phiên mới"><svg viewBox="0 0 20 20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M11 4H5.5A1.5 1.5 0 0 0 4 5.5v9A1.5 1.5 0 0 0 5.5 16h9a1.5 1.5 0 0 0 1.5-1.5V9"></path><path d="M14.5 3.5l2 2L10 12H8v-2z"></path></g></svg><span>Phiên mới</span></button><button type="button" class="gemboss-assistant-collapse" aria-label="Collapse sidebar" title="Collapse"><svg viewBox="0 0 20 20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M12 5l-5 5 5 5"></path></g></svg></button></div><div class="gemboss-assistant-search gemboss-field gemboss-field--group"><svg viewBox="0 0 20 20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><circle cx="9" cy="9" r="5"></circle><path d="M13 13l3.5 3.5"></path></g></svg><input class="gemboss-field__bare" placeholder="Tìm phiên…" aria-label="Search history" value=""/><kbd class="gemboss-assistant-kbd">/</kbd></div><div class="gemboss-assistant-threads"><div class="gemboss-assistant-group"><div class="gemboss-assistant-group-label">Đã ghim</div><div class="gemboss-assistant-thread"><button type="button" class="gemboss-assistant-thread-main" title="So sánh advertorial với listicle"><span class="gemboss-assistant-thread-titlerow"><svg viewBox="0 0 20 20" class="gemboss-assistant-pin-dot" aria-hidden="true" focusable="false"><path d="M8 3.5h4l-.5 5 2.5 2.5H6l2.5-2.5z" fill="currentColor"></path><path d="M10 11v5.5" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"></path></svg><span class="gemboss-assistant-thread-title">So sánh advertorial với listicle</span></span><span class="gemboss-assistant-thread-meta">28/8/2026</span></button><div class="gemboss-assistant-thread-actions"><button type="button" class="gemboss-assistant-thread-act" aria-label="Options"><svg viewBox="0 0 20 20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><circle cx="5" cy="10" r=".8"></circle><circle cx="10" cy="10" r=".8"></circle><circle cx="15" cy="10" r=".8"></circle></g></svg></button></div></div></div><div class="gemboss-assistant-group"><div class="gemboss-assistant-group-label">Hôm nay</div><div class="gemboss-assistant-thread active"><button type="button" class="gemboss-assistant-thread-main" title="Store nào đang dựng loạt landing?"><span class="gemboss-assistant-thread-titlerow"><span class="gemboss-assistant-thread-title">Store nào đang dựng loạt landing?</span></span><span class="gemboss-assistant-thread-meta">3 giờ trước</span></button><div class="gemboss-assistant-thread-actions"><button type="button" class="gemboss-assistant-thread-act" aria-label="Options"><svg viewBox="0 0 20 20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><circle cx="5" cy="10" r=".8"></circle><circle cx="10" cy="10" r=".8"></circle><circle cx="15" cy="10" r=".8"></circle></g></svg></button></div></div></div><div class="gemboss-assistant-group"><div class="gemboss-assistant-group-label">Hôm qua</div><div class="gemboss-assistant-thread"><button type="button" class="gemboss-assistant-thread-main" title="Landing điểm cao nhất của corpus"><span class="gemboss-assistant-thread-titlerow"><span class="gemboss-assistant-thread-title">Landing điểm cao nhất của corpus</span></span><span class="gemboss-assistant-thread-meta">1 ngày trước</span></button><div class="gemboss-assistant-thread-actions"><button type="button" class="gemboss-assistant-thread-act" aria-label="Options"><svg viewBox="0 0 20 20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><circle cx="5" cy="10" r=".8"></circle><circle cx="10" cy="10" r=".8"></circle><circle cx="15" cy="10" r=".8"></circle></g></svg></button></div></div></div></div></aside></div></div><details class="cat-code"><summary>Markup</summary><pre><code><div style="height:360px;display:flex">
|
|
1594
4694
|
<aside class="gemboss-assistant-rail">
|
|
1595
4695
|
<div class="gemboss-assistant-rail-top">
|
|
1596
4696
|
<button type="button" class="gemboss-assistant-newchat" title="Phiên mới">
|
|
@@ -1639,7 +4739,7 @@ body{margin:0;background:var(--gemboss-app-bg,#f1f1f1);color:var(--gemboss-text)
|
|
|
1639
4739
|
</svg>
|
|
1640
4740
|
<span class="gemboss-assistant-thread-title">So sánh advertorial với listicle</span>
|
|
1641
4741
|
</span>
|
|
1642
|
-
<span class="gemboss-assistant-thread-meta">
|
|
4742
|
+
<span class="gemboss-assistant-thread-meta">28/8/2026</span>
|
|
1643
4743
|
</button>
|
|
1644
4744
|
<div class="gemboss-assistant-thread-actions">
|
|
1645
4745
|
<button type="button" class="gemboss-assistant-thread-act" aria-label="Options">
|
|
@@ -1710,7 +4810,7 @@ body{margin:0;background:var(--gemboss-app-bg,#f1f1f1);color:var(--gemboss-text)
|
|
|
1710
4810
|
</div>
|
|
1711
4811
|
</aside>
|
|
1712
4812
|
</div></code></pre></details></figure></section>
|
|
1713
|
-
<section id="icons"><h2>Icon</h2><p>Bộ icon GemBoss: 43 icon, lưới 20px, nét 1.5. <code>fill="none"</code> nằm trên <code><g></code>, không trên <code><svg></code>.</p><div class="cat-icons"><div class="gnav-ico cat-icon" title="home"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3.5 9 10 3.5 16.5 9"></path><path d="M5 7.8v8.7h10V7.8"></path><path d="M8.5 16.5v-4h3v4"></path></g></svg><code>home</code></div><div class="gnav-ico cat-icon" title="dashboard"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="6" height="6" rx="1.3"></rect><rect x="11" y="3" width="6" height="6" rx="1.3"></rect><rect x="3" y="11" width="6" height="6" rx="1.3"></rect><rect x="11" y="11" width="6" height="6" rx="1.3"></rect></g></svg><code>dashboard</code></div><div class="gnav-ico cat-icon" title="board"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3.5" width="4" height="13" rx="1.2"></rect><rect x="8" y="3.5" width="4" height="9" rx="1.2"></rect><rect x="13" y="3.5" width="4" height="6" rx="1.2"></rect></g></svg><code>board</code></div><div class="gnav-ico cat-icon" title="layout"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="3.5" y="3" width="13" height="3.5" rx="1"></rect><rect x="3.5" y="8.25" width="13" height="3.5" rx="1"></rect><rect x="3.5" y="13.5" width="13" height="3.5" rx="1"></rect></g></svg><code>layout</code></div><div class="gnav-ico cat-icon" title="layers"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M10 3 17 6.8 10 10.6 3 6.8z"></path><path d="M3 10.1l7 3.8 7-3.8"></path><path d="M3 13.4l7 3.8 7-3.8"></path></g></svg><code>layers</code></div><div class="gnav-ico cat-icon" title="document"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M5 2.8h6.8l3.2 3.2v11.2H5z"></path><path d="M11.8 2.8V6H15M7.5 10h5M7.5 13h5"></path></g></svg><code>document</code></div><div class="gnav-ico cat-icon" title="article"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3.5" width="14" height="13" rx="1.5"></rect><path d="M6 7h8M6 10h8M6 13h5"></path></g></svg><code>article</code></div><div class="gnav-ico cat-icon" title="page"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="2.5" y="3.5" width="15" height="13" rx="2"></rect><path d="M2.5 7.5h15M6 11h8M6 13.5h5"></path></g></svg><code>page</code></div><div class="gnav-ico cat-icon" title="image"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3.5" width="14" height="13" rx="1.8"></rect><circle cx="7.3" cy="7.8" r="1.3"></circle><path d="M3.5 15l4.2-4.2 3 3 2.2-2.2 3.6 3.6"></path></g></svg><code>image</code></div><div class="gnav-ico cat-icon" title="folder"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M2.8 5.3c0-.8.6-1.3 1.3-1.3h3.4l1.8 2h6.6c.8 0 1.3.6 1.3 1.3v7.7c0 .8-.6 1.3-1.3 1.3H4.1c-.8 0-1.3-.6-1.3-1.3z"></path></g></svg><code>folder</code></div><div class="gnav-ico cat-icon" title="list"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M8 5h9M8 10h9M8 15h9"></path><circle cx="4" cy="5" r=".9"></circle><circle cx="4" cy="10" r=".9"></circle><circle cx="4" cy="15" r=".9"></circle></g></svg><code>list</code></div><div class="gnav-ico cat-icon" title="activity"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M2.5 10h3l2-5 3 10 2-5h5"></path></g></svg><code>activity</code></div><div class="gnav-ico cat-icon" title="chart"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 16.5h14"></path><rect x="4.5" y="9" width="2.8" height="5.5" rx=".7"></rect><rect x="8.6" y="5" width="2.8" height="9.5" rx=".7"></rect><rect x="12.7" y="11" width="2.8" height="3.5" rx=".7"></rect></g></svg><code>chart</code></div><div class="gnav-ico cat-icon" title="radar"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="10" cy="10" r="7"></circle><circle cx="10" cy="10" r="3.5"></circle><path d="M10 10l5-5"></path></g></svg><code>radar</code></div><div class="gnav-ico cat-icon" title="map"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="14" height="14" rx="2"></rect><path d="M3 7.7h14M3 12.3h14M7.7 3v14M12.3 3v14"></path></g></svg><code>map</code></div><div class="gnav-ico cat-icon" title="globe"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="10" cy="10" r="7"></circle><path d="M3 10h14M10 3c2 2 2.8 4.3 2.8 7s-.8 5-2.8 7c-2-2-2.8-4.3-2.8-7s.8-5 2.8-7z"></path></g></svg><code>globe</code></div><div class="gnav-ico cat-icon" title="megaphone"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 8v4h3l6 4V4L6 8H3z"></path><path d="M15 7.5a3.5 3.5 0 0 1 0 5"></path></g></svg><code>megaphone</code></div><div class="gnav-ico cat-icon" title="star"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M10 2.8l2.2 4.5 5 .7-3.6 3.5.9 5-4.5-2.4-4.5 2.4.9-5L2.8 8l5-.7z"></path></g></svg><code>star</code></div><div class="gnav-ico cat-icon" title="eye"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M1.8 10S4.7 4.8 10 4.8 18.2 10 18.2 10 15.3 15.2 10 15.2 1.8 10 1.8 10z"></path><circle cx="10" cy="10" r="2.5"></circle></g></svg><code>eye</code></div><div class="gnav-ico cat-icon" title="inbox"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 11l2-7h10l2 7v5H3z"></path><path d="M3 11h4l1 2h4l1-2h4"></path></g></svg><code>inbox</code></div><div class="gnav-ico cat-icon" title="bell"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M5 13.5V9a5 5 0 0 1 10 0v4.5l1.3 1.5H3.7z"></path><path d="M8.3 17.2a1.9 1.9 0 0 0 3.4 0"></path></g></svg><code>bell</code></div><div class="gnav-ico cat-icon" title="chat"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 4.5h14v9H8.5L5 16.5v-3H3z"></path></g></svg><code>chat</code></div><div class="gnav-ico cat-icon" title="money"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="10" cy="10" r="7"></circle><path d="M12 7.6c-.5-.7-1.2-1-2-1-1.1 0-2 .7-2 1.6 0 2.1 4 1.2 4 3.4 0 .9-.9 1.6-2 1.6-.8 0-1.6-.3-2.1-1M10 5v1.6M10 13.2V15"></path></g></svg><code>money</code></div><div class="gnav-ico cat-icon" title="store"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3.2 7.5 4.5 3.5h11l1.3 4"></path><path d="M3.2 7.5c0 1.3 1 2.2 2.3 2.2s2.2-1 2.2-2.2c0 1.3 1 2.2 2.3 2.2s2.3-1 2.3-2.2c0 1.3.9 2.2 2.2 2.2s2.3-.9 2.3-2.2"></path><path d="M4.5 9.5v7h11v-7M8.5 16.5v-3.5h3v3.5"></path></g></svg><code>store</code></div><div class="gnav-ico cat-icon" title="user"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="10" cy="7" r="3.2"></circle><path d="M3.8 16.5c.8-2.8 3.3-4.5 6.2-4.5s5.4 1.7 6.2 4.5"></path></g></svg><code>user</code></div><div class="gnav-ico cat-icon" title="users"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="7.5" cy="7.3" r="2.8"></circle><path d="M2.5 16.3c.6-2.5 2.5-4 5-4s4.4 1.5 5 4"></path><path d="M12.3 4.8a2.8 2.8 0 0 1 0 5.2M14.3 12.5c1.6.4 2.7 1.7 3.2 3.8"></path></g></svg><code>users</code></div><div class="gnav-ico cat-icon" title="calendar"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4.5" width="14" height="12.5" rx="1.8"></rect><path d="M3 8.5h14M7 3v3M13 3v3"></path></g></svg><code>calendar</code></div><div class="gnav-ico cat-icon" title="clock"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="10" cy="10" r="7"></circle><path d="M10 6v4l2.8 1.8"></path></g></svg><code>clock</code></div><div class="gnav-ico cat-icon" title="search"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="8.8" cy="8.8" r="5.3"></circle><path d="M12.8 12.8 17 17"></path></g></svg><code>search</code></div><div class="gnav-ico cat-icon" title="moon"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M15.6 12.4A6.2 6.2 0 0 1 7.6 4.4a6.2 6.2 0 1 0 8 8Z"></path></g></svg><code>moon</code></div><div class="gnav-ico cat-icon" title="sun"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="10" cy="10" r="3.2"></circle><path d="M10 2.6v1.8M10 15.6v1.8M2.6 10h1.8M15.6 10h1.8M4.8 4.8l1.3 1.3M13.9 13.9l1.3 1.3M4.8 15.2l1.3-1.3M13.9 6.1l1.3-1.3"></path></g></svg><code>sun</code></div><div class="gnav-ico cat-icon" title="link"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M8.6 11.4a3 3 0 0 0 4.2 0l2.6-2.6a3 3 0 0 0-4.2-4.2l-1 1"></path><path d="M11.4 8.6a3 3 0 0 0-4.2 0l-2.6 2.6a3 3 0 0 0 4.2 4.2l1-1"></path></g></svg><code>link</code></div><div class="gnav-ico cat-icon" title="sliders"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 5h14M3 10h14M3 15h14"></path><circle cx="7" cy="5" r="1.6"></circle><circle cx="13" cy="10" r="1.6"></circle><circle cx="9" cy="15" r="1.6"></circle></g></svg><code>sliders</code></div><div class="gnav-ico cat-icon" title="settings"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M15.52 9.08 17.15 9.15 17.15 10.85 15.52 10.92 14.56 13.26 15.66 14.45 14.45 15.66 13.26 14.56 10.92 15.52 10.85 17.15 9.15 17.15 9.08 15.52 6.74 14.56 5.55 15.66 4.34 14.45 5.44 13.26 4.48 10.92 2.85 10.85 2.85 9.15 4.48 9.08 5.44 6.74 4.34 5.55 5.55 4.34 6.74 5.44 9.08 4.48 9.15 2.85 10.85 2.85 10.92 4.48 13.26 5.44 14.45 4.34 15.66 5.55 14.56 6.74Z"></path><circle cx="10" cy="10" r="2.4"></circle></g></svg><code>settings</code></div><div class="gnav-ico cat-icon" title="alert"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M10 3.2 17.3 16H2.7z"></path><path d="M10 8.2v3.6M10 13.9v.1"></path></g></svg><code>alert</code></div><div class="gnav-ico cat-icon" title="info"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="10" cy="10" r="7"></circle><path d="M10 9v4.5M10 6.4v.1"></path></g></svg><code>info</code></div><div class="gnav-ico cat-icon" title="check"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M4 10.5 8 14.5 16 5.5"></path></g></svg><code>check</code></div><div class="gnav-ico cat-icon" title="plus"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M10 4v12M4 10h12"></path></g></svg><code>plus</code></div><div class="gnav-ico cat-icon" title="close"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M5 5l10 10M15 5 5 15"></path></g></svg><code>close</code></div><div class="gnav-ico cat-icon" title="more"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="4.5" cy="10" r="1"></circle><circle cx="10" cy="10" r="1"></circle><circle cx="15.5" cy="10" r="1"></circle></g></svg><code>more</code></div><div class="gnav-ico cat-icon" title="utensils"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M6 3v5a2 2 0 0 0 4 0V3M8 3v14"></path><path d="M15 3c-1.6 1.4-2.5 3.6-2.5 6.5H15V17"></path></g></svg><code>utensils</code></div><div class="gnav-ico cat-icon" title="signOut"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M8 3.5H4v13h4M12.5 6.5 16 10l-3.5 3.5M16 10H8"></path></g></svg><code>signOut</code></div><div class="gnav-ico cat-icon" title="sparkle"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M9 3.5c.4 2.9 1.6 4.1 4.5 4.5-2.9.4-4.1 1.6-4.5 4.5-.4-2.9-1.6-4.1-4.5-4.5 2.9-.4 4.1-1.6 4.5-4.5z"></path><path d="M14.5 12.5c.2 1.3.7 1.8 2 2-1.3.2-1.8.7-2 2-.2-1.3-.7-1.8-2-2 1.3-.2 1.8-.7 2-2z"></path></g></svg><code>sparkle</code></div></div><figure class="cat-demo"><figcaption>Một icon (markup)</figcaption><div class="cat-live"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3.5" width="4" height="13" rx="1.2"></rect><rect x="8" y="3.5" width="4" height="9" rx="1.2"></rect><rect x="13" y="3.5" width="4" height="6" rx="1.2"></rect></g></svg></div><details class="cat-code"><summary>Markup</summary><pre><code><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false">
|
|
4813
|
+
<section id="icons"><h2>Icon</h2><p>Bộ icon GemBoss: 44 icon, lưới 20px, nét 1.5. <code>fill="none"</code> nằm trên <code><g></code>, không trên <code><svg></code>.</p><div class="cat-icons"><div class="gnav-ico cat-icon" title="reaction"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M16.5 10a6.5 6.5 0 1 1-6.5-6.5"></path><path d="M7.5 11.8s.9 1.2 2.5 1.2 2.5-1.2 2.5-1.2"></path><path d="M7.8 8.2h.01M12.2 8.2h.01"></path><path d="M15 2.5v4M13 4.5h4"></path></g></svg><code>reaction</code></div><div class="gnav-ico cat-icon" title="home"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3.5 9 10 3.5 16.5 9"></path><path d="M5 7.8v8.7h10V7.8"></path><path d="M8.5 16.5v-4h3v4"></path></g></svg><code>home</code></div><div class="gnav-ico cat-icon" title="dashboard"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="6" height="6" rx="1.3"></rect><rect x="11" y="3" width="6" height="6" rx="1.3"></rect><rect x="3" y="11" width="6" height="6" rx="1.3"></rect><rect x="11" y="11" width="6" height="6" rx="1.3"></rect></g></svg><code>dashboard</code></div><div class="gnav-ico cat-icon" title="board"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3.5" width="4" height="13" rx="1.2"></rect><rect x="8" y="3.5" width="4" height="9" rx="1.2"></rect><rect x="13" y="3.5" width="4" height="6" rx="1.2"></rect></g></svg><code>board</code></div><div class="gnav-ico cat-icon" title="layout"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="3.5" y="3" width="13" height="3.5" rx="1"></rect><rect x="3.5" y="8.25" width="13" height="3.5" rx="1"></rect><rect x="3.5" y="13.5" width="13" height="3.5" rx="1"></rect></g></svg><code>layout</code></div><div class="gnav-ico cat-icon" title="layers"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M10 3 17 6.8 10 10.6 3 6.8z"></path><path d="M3 10.1l7 3.8 7-3.8"></path><path d="M3 13.4l7 3.8 7-3.8"></path></g></svg><code>layers</code></div><div class="gnav-ico cat-icon" title="document"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M5 2.8h6.8l3.2 3.2v11.2H5z"></path><path d="M11.8 2.8V6H15M7.5 10h5M7.5 13h5"></path></g></svg><code>document</code></div><div class="gnav-ico cat-icon" title="article"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3.5" width="14" height="13" rx="1.5"></rect><path d="M6 7h8M6 10h8M6 13h5"></path></g></svg><code>article</code></div><div class="gnav-ico cat-icon" title="page"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="2.5" y="3.5" width="15" height="13" rx="2"></rect><path d="M2.5 7.5h15M6 11h8M6 13.5h5"></path></g></svg><code>page</code></div><div class="gnav-ico cat-icon" title="image"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3.5" width="14" height="13" rx="1.8"></rect><circle cx="7.3" cy="7.8" r="1.3"></circle><path d="M3.5 15l4.2-4.2 3 3 2.2-2.2 3.6 3.6"></path></g></svg><code>image</code></div><div class="gnav-ico cat-icon" title="folder"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M2.8 5.3c0-.8.6-1.3 1.3-1.3h3.4l1.8 2h6.6c.8 0 1.3.6 1.3 1.3v7.7c0 .8-.6 1.3-1.3 1.3H4.1c-.8 0-1.3-.6-1.3-1.3z"></path></g></svg><code>folder</code></div><div class="gnav-ico cat-icon" title="list"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M8 5h9M8 10h9M8 15h9"></path><circle cx="4" cy="5" r=".9"></circle><circle cx="4" cy="10" r=".9"></circle><circle cx="4" cy="15" r=".9"></circle></g></svg><code>list</code></div><div class="gnav-ico cat-icon" title="activity"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M2.5 10h3l2-5 3 10 2-5h5"></path></g></svg><code>activity</code></div><div class="gnav-ico cat-icon" title="chart"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 16.5h14"></path><rect x="4.5" y="9" width="2.8" height="5.5" rx=".7"></rect><rect x="8.6" y="5" width="2.8" height="9.5" rx=".7"></rect><rect x="12.7" y="11" width="2.8" height="3.5" rx=".7"></rect></g></svg><code>chart</code></div><div class="gnav-ico cat-icon" title="radar"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="10" cy="10" r="7"></circle><circle cx="10" cy="10" r="3.5"></circle><path d="M10 10l5-5"></path></g></svg><code>radar</code></div><div class="gnav-ico cat-icon" title="map"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="14" height="14" rx="2"></rect><path d="M3 7.7h14M3 12.3h14M7.7 3v14M12.3 3v14"></path></g></svg><code>map</code></div><div class="gnav-ico cat-icon" title="globe"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="10" cy="10" r="7"></circle><path d="M3 10h14M10 3c2 2 2.8 4.3 2.8 7s-.8 5-2.8 7c-2-2-2.8-4.3-2.8-7s.8-5 2.8-7z"></path></g></svg><code>globe</code></div><div class="gnav-ico cat-icon" title="megaphone"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 8v4h3l6 4V4L6 8H3z"></path><path d="M15 7.5a3.5 3.5 0 0 1 0 5"></path></g></svg><code>megaphone</code></div><div class="gnav-ico cat-icon" title="star"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M10 2.8l2.2 4.5 5 .7-3.6 3.5.9 5-4.5-2.4-4.5 2.4.9-5L2.8 8l5-.7z"></path></g></svg><code>star</code></div><div class="gnav-ico cat-icon" title="eye"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M1.8 10S4.7 4.8 10 4.8 18.2 10 18.2 10 15.3 15.2 10 15.2 1.8 10 1.8 10z"></path><circle cx="10" cy="10" r="2.5"></circle></g></svg><code>eye</code></div><div class="gnav-ico cat-icon" title="inbox"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 11l2-7h10l2 7v5H3z"></path><path d="M3 11h4l1 2h4l1-2h4"></path></g></svg><code>inbox</code></div><div class="gnav-ico cat-icon" title="bell"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M5 13.5V9a5 5 0 0 1 10 0v4.5l1.3 1.5H3.7z"></path><path d="M8.3 17.2a1.9 1.9 0 0 0 3.4 0"></path></g></svg><code>bell</code></div><div class="gnav-ico cat-icon" title="chat"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 4.5h14v9H8.5L5 16.5v-3H3z"></path></g></svg><code>chat</code></div><div class="gnav-ico cat-icon" title="money"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="10" cy="10" r="7"></circle><path d="M12 7.6c-.5-.7-1.2-1-2-1-1.1 0-2 .7-2 1.6 0 2.1 4 1.2 4 3.4 0 .9-.9 1.6-2 1.6-.8 0-1.6-.3-2.1-1M10 5v1.6M10 13.2V15"></path></g></svg><code>money</code></div><div class="gnav-ico cat-icon" title="store"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3.2 7.5 4.5 3.5h11l1.3 4"></path><path d="M3.2 7.5c0 1.3 1 2.2 2.3 2.2s2.2-1 2.2-2.2c0 1.3 1 2.2 2.3 2.2s2.3-1 2.3-2.2c0 1.3.9 2.2 2.2 2.2s2.3-.9 2.3-2.2"></path><path d="M4.5 9.5v7h11v-7M8.5 16.5v-3.5h3v3.5"></path></g></svg><code>store</code></div><div class="gnav-ico cat-icon" title="user"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="10" cy="7" r="3.2"></circle><path d="M3.8 16.5c.8-2.8 3.3-4.5 6.2-4.5s5.4 1.7 6.2 4.5"></path></g></svg><code>user</code></div><div class="gnav-ico cat-icon" title="users"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="7.5" cy="7.3" r="2.8"></circle><path d="M2.5 16.3c.6-2.5 2.5-4 5-4s4.4 1.5 5 4"></path><path d="M12.3 4.8a2.8 2.8 0 0 1 0 5.2M14.3 12.5c1.6.4 2.7 1.7 3.2 3.8"></path></g></svg><code>users</code></div><div class="gnav-ico cat-icon" title="calendar"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4.5" width="14" height="12.5" rx="1.8"></rect><path d="M3 8.5h14M7 3v3M13 3v3"></path></g></svg><code>calendar</code></div><div class="gnav-ico cat-icon" title="clock"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="10" cy="10" r="7"></circle><path d="M10 6v4l2.8 1.8"></path></g></svg><code>clock</code></div><div class="gnav-ico cat-icon" title="search"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="8.8" cy="8.8" r="5.3"></circle><path d="M12.8 12.8 17 17"></path></g></svg><code>search</code></div><div class="gnav-ico cat-icon" title="moon"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M15.6 12.4A6.2 6.2 0 0 1 7.6 4.4a6.2 6.2 0 1 0 8 8Z"></path></g></svg><code>moon</code></div><div class="gnav-ico cat-icon" title="sun"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="10" cy="10" r="3.2"></circle><path d="M10 2.6v1.8M10 15.6v1.8M2.6 10h1.8M15.6 10h1.8M4.8 4.8l1.3 1.3M13.9 13.9l1.3 1.3M4.8 15.2l1.3-1.3M13.9 6.1l1.3-1.3"></path></g></svg><code>sun</code></div><div class="gnav-ico cat-icon" title="link"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M8.6 11.4a3 3 0 0 0 4.2 0l2.6-2.6a3 3 0 0 0-4.2-4.2l-1 1"></path><path d="M11.4 8.6a3 3 0 0 0-4.2 0l-2.6 2.6a3 3 0 0 0 4.2 4.2l1-1"></path></g></svg><code>link</code></div><div class="gnav-ico cat-icon" title="sliders"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 5h14M3 10h14M3 15h14"></path><circle cx="7" cy="5" r="1.6"></circle><circle cx="13" cy="10" r="1.6"></circle><circle cx="9" cy="15" r="1.6"></circle></g></svg><code>sliders</code></div><div class="gnav-ico cat-icon" title="settings"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M15.52 9.08 17.15 9.15 17.15 10.85 15.52 10.92 14.56 13.26 15.66 14.45 14.45 15.66 13.26 14.56 10.92 15.52 10.85 17.15 9.15 17.15 9.08 15.52 6.74 14.56 5.55 15.66 4.34 14.45 5.44 13.26 4.48 10.92 2.85 10.85 2.85 9.15 4.48 9.08 5.44 6.74 4.34 5.55 5.55 4.34 6.74 5.44 9.08 4.48 9.15 2.85 10.85 2.85 10.92 4.48 13.26 5.44 14.45 4.34 15.66 5.55 14.56 6.74Z"></path><circle cx="10" cy="10" r="2.4"></circle></g></svg><code>settings</code></div><div class="gnav-ico cat-icon" title="alert"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M10 3.2 17.3 16H2.7z"></path><path d="M10 8.2v3.6M10 13.9v.1"></path></g></svg><code>alert</code></div><div class="gnav-ico cat-icon" title="info"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="10" cy="10" r="7"></circle><path d="M10 9v4.5M10 6.4v.1"></path></g></svg><code>info</code></div><div class="gnav-ico cat-icon" title="check"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M4 10.5 8 14.5 16 5.5"></path></g></svg><code>check</code></div><div class="gnav-ico cat-icon" title="plus"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M10 4v12M4 10h12"></path></g></svg><code>plus</code></div><div class="gnav-ico cat-icon" title="close"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M5 5l10 10M15 5 5 15"></path></g></svg><code>close</code></div><div class="gnav-ico cat-icon" title="more"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="4.5" cy="10" r="1"></circle><circle cx="10" cy="10" r="1"></circle><circle cx="15.5" cy="10" r="1"></circle></g></svg><code>more</code></div><div class="gnav-ico cat-icon" title="utensils"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M6 3v5a2 2 0 0 0 4 0V3M8 3v14"></path><path d="M15 3c-1.6 1.4-2.5 3.6-2.5 6.5H15V17"></path></g></svg><code>utensils</code></div><div class="gnav-ico cat-icon" title="signOut"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M8 3.5H4v13h4M12.5 6.5 16 10l-3.5 3.5M16 10H8"></path></g></svg><code>signOut</code></div><div class="gnav-ico cat-icon" title="sparkle"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M9 3.5c.4 2.9 1.6 4.1 4.5 4.5-2.9.4-4.1 1.6-4.5 4.5-.4-2.9-1.6-4.1-4.5-4.5 2.9-.4 4.1-1.6 4.5-4.5z"></path><path d="M14.5 12.5c.2 1.3.7 1.8 2 2-1.3.2-1.8.7-2 2-.2-1.3-.7-1.8-2-2 1.3-.2 1.8-.7 2-2z"></path></g></svg><code>sparkle</code></div></div><figure class="cat-demo"><figcaption>Một icon (markup)</figcaption><div class="cat-live"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3.5" width="4" height="13" rx="1.2"></rect><rect x="8" y="3.5" width="4" height="9" rx="1.2"></rect><rect x="13" y="3.5" width="4" height="6" rx="1.2"></rect></g></svg></div><details class="cat-code"><summary>Markup</summary><pre><code><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false">
|
|
1714
4814
|
<g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
|
|
1715
4815
|
<rect x="3" y="3.5" width="4" height="13" rx="1.2">
|
|
1716
4816
|
</rect>
|
|
@@ -1720,6 +4820,7 @@ body{margin:0;background:var(--gemboss-app-bg,#f1f1f1);color:var(--gemboss-text)
|
|
|
1720
4820
|
</rect>
|
|
1721
4821
|
</g>
|
|
1722
4822
|
</svg></code></pre></details></figure></section>
|
|
4823
|
+
<section id="editor"><h2>Editor</h2><p>Khung editor (<code>EditorFrame</code> + <code>EditorTopbar</code>, <code>@gemboss/ui/editor</code>; HTML thuần: <code>editor.css</code> + <code>editor-plain.js</code>) nằm ở trang riêng, chạy thật: <a href="editor.html">catalog/editor.html</a>.</p></section>
|
|
1723
4824
|
</main></div><script src="../src/kit-plain.js"></script><script>gembossUI.initMenus();
|
|
1724
4825
|
document.addEventListener("click", function (e) {
|
|
1725
4826
|
var b = e.target.closest("[data-cat-js]"); if (!b) return;
|