@gemboss/ui 0.10.0 → 0.13.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 +113 -0
- package/README.md +155 -2
- package/catalog/index.html +2156 -15
- package/gemboss-ui.css +126 -66
- package/package.json +2 -1
- package/src/app-shell.css +13 -0
- package/src/collections.css +350 -0
- package/src/collections.tsx +414 -0
- package/src/editor.css +22 -19
- package/src/gemboss-tokens.css +1 -1
- package/src/index-table.tsx +216 -0
- package/src/index.ts +11 -0
- package/src/kit-plain.css +42 -9
- package/src/kit-plain.js +136 -1
- package/src/theme-dark.css +1 -0
- package/src/ui.css +67 -54
package/catalog/index.html
CHANGED
|
@@ -1,12 +1,12 @@
|
|
|
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"><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}
|
|
6
6
|
.cat-nav a{padding:8px 12px;border-radius:var(--gemboss-radius-md);color:var(--gemboss-text);text-decoration:none;min-height:24px}
|
|
7
7
|
.cat-nav a:hover{background:var(--gemboss-hover)}
|
|
8
8
|
.cat-head h1{margin:0 0 4px;font-size:28px}.cat-head p{margin:0 0 24px;color:var(--gemboss-text-muted)}
|
|
9
|
-
.cat section{margin:0 0 48px}.cat h2{margin:0 0 6px;font-size:20px}.cat section>p{margin:0 0 16px;color:var(--gemboss-text-muted)}
|
|
9
|
+
.cat section{margin:0 0 48px}.cat section>h2{margin:0 0 6px;font-size:20px;font-weight:650}.cat section>p{margin:0 0 16px;color:var(--gemboss-text-muted)}
|
|
10
10
|
.cat-demo{margin:0 0 16px;background:var(--gemboss-surface);border:1px solid var(--gemboss-divider);border-radius:12px;overflow:hidden}
|
|
11
11
|
.cat-demo figcaption{padding:10px 16px;font-size:13px;font-weight:600;border-bottom:1px solid var(--gemboss-divider)}
|
|
12
12
|
.cat-demo figcaption span{font-weight:400;color:var(--gemboss-text-muted)}
|
|
@@ -26,10 +26,10 @@ 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="#assistant">Trợ lý: cột phiên</a><a href="#icons">Icon</a></nav>
|
|
30
|
+
<main><header class="cat-head"><h1>@gemboss/ui 0.13.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>4fa51b50e621</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
|
-
<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
|
|
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>
|
|
34
34
|
<button type="button" class="ui-btn ui-btn--primary">Xuất bản</button>
|
|
35
35
|
<button type="button" class="ui-btn ui-btn--ghost">Huỷ</button>
|
|
@@ -158,6 +158,10 @@ body{margin:0;background:var(--gemboss-app-bg,#f1f1f1);color:var(--gemboss-text)
|
|
|
158
158
|
<a class="ui-tag ui-tag--chip" href="#">Judge.me Product Reviews</a>
|
|
159
159
|
<a class="ui-tag ui-tag--chip" href="#">Klaviyo</a>
|
|
160
160
|
<a class="ui-tag ui-tag--chip" href="#">Instafeed</a>
|
|
161
|
+
</div></code></pre></details></figure><figure class="cat-demo"><figcaption>Chip lọc (<code>ui-chip</code>: hình FilterPill của Polaris, cao như nút 28px, nét đứt khi chưa áp; <code>aria-pressed</code> lọc tại chỗ, <code>aria-current</code> lọc bằng URL)</figcaption><div class="cat-live"><div class="ui-chips"><button type="button" class="ui-chip" aria-pressed="true">Shopify Plus</button><button type="button" class="ui-chip" aria-pressed="false">Có review app</button><a class="ui-chip" href="#">Hoa Kỳ</a></div></div><details class="cat-code"><summary>Markup</summary><pre><code><div class="ui-chips">
|
|
162
|
+
<button type="button" class="ui-chip" aria-pressed="true">Shopify Plus</button>
|
|
163
|
+
<button type="button" class="ui-chip" aria-pressed="false">Có review app</button>
|
|
164
|
+
<a class="ui-chip" href="#">Hoa Kỳ</a>
|
|
161
165
|
</div></code></pre></details></figure></section>
|
|
162
166
|
<section id="surfaces"><h2>Thẻ, số liệu, bảng, trạng thái trống</h2><figure class="cat-demo"><figcaption>Tiêu đề trang (<code>ui-page-head</code>) · chữ phụ (<code>ui-muted</code>)</figcaption><div class="cat-live"><div class="ui-page-head"><h1>Đối thủ</h1><p>Page builder nào đang tích hợp với ai.</p></div><p class="ui-muted">Cập nhật 01/10, 300 trang app đã đọc.</p></div><details class="cat-code"><summary>Markup</summary><pre><code><div class="ui-page-head">
|
|
163
167
|
<h1>Đối thủ</h1>
|
|
@@ -302,7 +306,16 @@ body{margin:0;background:var(--gemboss-app-bg,#f1f1f1);color:var(--gemboss-text)
|
|
|
302
306
|
<span>2 giờ trước</span>
|
|
303
307
|
</div>
|
|
304
308
|
</article>
|
|
305
|
-
</div></code></pre></details></figure><figure class="cat-demo"><figcaption>Card</figcaption><div class="cat-live"><div class="ui-card"
|
|
309
|
+
</div></code></pre></details></figure><figure class="cat-demo"><figcaption>Card</figcaption><div class="cat-live"><div class="ui-card">Một khối nội dung. Nền, một viền 1px <code>--ui-border</code>, bóng shadow-100 của Polaris, bo góc 12 và đệm 16 lấy từ gói.</div></div><details class="cat-code"><summary>Markup</summary><pre><code><div class="ui-card">Một khối nội dung. Nền, một viền 1px <code>--ui-border</code>, bóng shadow-100 của Polaris, bo góc 12 và đệm 16 lấy từ gói.</div></code></pre></details></figure><figure class="cat-demo"><figcaption>Xếp card (<code>ui-stack</code>: khe 16px giữa các khối, như BlockStack gap 400 của Polaris)</figcaption><div class="cat-live"><div class="ui-stack"><div class="ui-card"><h2 class="ui-card__title">Kênh</h2><p class="ui-muted">Lượt đọc theo nguồn.</p></div><div class="ui-card"><h2 class="ui-card__title">Ngôn ngữ</h2><p class="ui-muted">vi · en · zh.</p></div></div></div><details class="cat-code"><summary>Markup</summary><pre><code><div class="ui-stack">
|
|
310
|
+
<div class="ui-card">
|
|
311
|
+
<h2 class="ui-card__title">Kênh</h2>
|
|
312
|
+
<p class="ui-muted">Lượt đọc theo nguồn.</p>
|
|
313
|
+
</div>
|
|
314
|
+
<div class="ui-card">
|
|
315
|
+
<h2 class="ui-card__title">Ngôn ngữ</h2>
|
|
316
|
+
<p class="ui-muted">vi · en · zh.</p>
|
|
317
|
+
</div>
|
|
318
|
+
</div></code></pre></details></figure><figure class="cat-demo"><figcaption>Đầu thẻ có nút (<code>ui-card__head</code>)</figcaption><div class="cat-live"><div class="ui-card"><div class="ui-card__head"><h3 class="ui-card__title">Hạng đối tác</h3><div><button type="button" class="ui-btn ui-btn--primary">Đổi hạng</button><button type="button" class="ui-btn">Kết thúc</button></div></div><p class="ui-muted" style="margin:0">Partner từ 01/08/2026.</p></div></div><details class="cat-code"><summary>Markup</summary><pre><code><div class="ui-card">
|
|
306
319
|
<div class="ui-card__head">
|
|
307
320
|
<h3 class="ui-card__title">Hạng đối tác</h3>
|
|
308
321
|
<div>
|
|
@@ -591,6 +604,2134 @@ body{margin:0;background:var(--gemboss-app-bg,#f1f1f1);color:var(--gemboss-text)
|
|
|
591
604
|
</ol>
|
|
592
605
|
</div>
|
|
593
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"></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>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">
|
|
822
|
+
<div class="ui-index__sortbar" role="group" aria-label="Sort">
|
|
823
|
+
<span aria-hidden="true">Sort</span>
|
|
824
|
+
<a class="ui-chip" href="#collections" aria-current="true">Supplier ↑</a>
|
|
825
|
+
<a class="ui-chip" href="#collections">Score</a>
|
|
826
|
+
</div>
|
|
827
|
+
<div class="ui-bulkbar" hidden>
|
|
828
|
+
<label class="ui-table__checkbox">
|
|
829
|
+
<input type="checkbox" data-gb-select-all aria-label="Select all">
|
|
830
|
+
</label>
|
|
831
|
+
<span class="ui-bulkbar__count" data-gb-count="{n} selected" aria-live="polite">0 selected</span>
|
|
832
|
+
<span class="ui-bulkbar__actions">
|
|
833
|
+
<button type="button" class="ui-btn ui-btn--sm">Add to outreach</button>
|
|
834
|
+
<button type="button" class="ui-btn ui-btn--sm ui-btn--critical">Archive</button>
|
|
835
|
+
</span>
|
|
836
|
+
</div>
|
|
837
|
+
<div class="ui-table-wrap">
|
|
838
|
+
<table class="ui-table ui-table--index" data-gb-sort="client">
|
|
839
|
+
<caption class="ui-sr-only">Suppliers</caption>
|
|
840
|
+
<thead>
|
|
841
|
+
<tr>
|
|
842
|
+
<th class="ui-table__check" scope="col">
|
|
843
|
+
<label class="ui-table__checkbox">
|
|
844
|
+
<input type="checkbox" data-gb-select-all aria-label="Select all">
|
|
845
|
+
</label>
|
|
846
|
+
</th>
|
|
847
|
+
<th class="ui-table__primary" scope="col" aria-sort="ascending">
|
|
848
|
+
<button type="button" class="ui-table__sort">Supplier</button>
|
|
849
|
+
</th>
|
|
850
|
+
<th scope="col">Location</th>
|
|
851
|
+
<th scope="col">Verdict</th>
|
|
852
|
+
<th scope="col" class="is-num" aria-sort="none">
|
|
853
|
+
<button type="button" class="ui-table__sort">Score</button>
|
|
854
|
+
</th>
|
|
855
|
+
<th scope="col">Ads</th>
|
|
856
|
+
<th class="ui-table__actions" scope="col">
|
|
857
|
+
<span class="ui-sr-only">Actions</span>
|
|
858
|
+
</th>
|
|
859
|
+
</tr>
|
|
860
|
+
</thead>
|
|
861
|
+
<tbody>
|
|
862
|
+
<tr data-href="#c1">
|
|
863
|
+
<td class="ui-table__check">
|
|
864
|
+
<label class="ui-table__checkbox">
|
|
865
|
+
<input type="checkbox" data-gb-select value="c1" aria-label="Select Guangzhou Yanmei Cosmetics">
|
|
866
|
+
</label>
|
|
867
|
+
</td>
|
|
868
|
+
<td class="ui-table__primary">
|
|
869
|
+
<a class="ui-table__title" href="#c1" title="Guangzhou Yanmei Cosmetics">Guangzhou Yanmei Cosmetics</a>
|
|
870
|
+
<span class="ui-sub">OEM · Skincare</span>
|
|
871
|
+
</td>
|
|
872
|
+
<td data-label="In">Guangzhou</td>
|
|
873
|
+
<td>
|
|
874
|
+
<span class="ui-tag ui-tag--success">Likely factory</span>
|
|
875
|
+
</td>
|
|
876
|
+
<td class="is-num" data-label="Score" data-sort-value="86">86</td>
|
|
877
|
+
<td data-condensed="hide">TikTok</td>
|
|
878
|
+
<td class="ui-table__actions">
|
|
879
|
+
<span class="ui-row-actions">
|
|
880
|
+
<button type="button" class="ui-btn ui-btn--sm">Contact</button>
|
|
881
|
+
<details class="ui-menu ui-menu--end">
|
|
882
|
+
<summary class="ui-btn ui-btn--icon" aria-label="More actions for Guangzhou Yanmei Cosmetics">
|
|
883
|
+
<svg viewBox="0 0 20 20" aria-hidden="true">
|
|
884
|
+
<circle cx="5" cy="10" r="1.5"/>
|
|
885
|
+
<circle cx="10" cy="10" r="1.5"/>
|
|
886
|
+
<circle cx="15" cy="10" r="1.5"/>
|
|
887
|
+
</svg>
|
|
888
|
+
</summary>
|
|
889
|
+
<div class="ui-menu__list gemboss-popover-surface">
|
|
890
|
+
<button type="button" class="ui-menu__item">Copy link</button>
|
|
891
|
+
<button type="button" class="ui-menu__item">Archive</button>
|
|
892
|
+
</div>
|
|
893
|
+
</details>
|
|
894
|
+
</span>
|
|
895
|
+
</td>
|
|
896
|
+
</tr>
|
|
897
|
+
<tr data-href="#c2">
|
|
898
|
+
<td class="ui-table__check">
|
|
899
|
+
<label class="ui-table__checkbox">
|
|
900
|
+
<input type="checkbox" data-gb-select value="c2" aria-label="Select Shantou Lianfeng Biotech Co., Ltd. (formerly Lianfeng Daily Chemical Factory)">
|
|
901
|
+
</label>
|
|
902
|
+
</td>
|
|
903
|
+
<td class="ui-table__primary">
|
|
904
|
+
<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>
|
|
905
|
+
<span class="ui-sub">ODM · Haircare</span>
|
|
906
|
+
</td>
|
|
907
|
+
<td data-label="In">Shantou</td>
|
|
908
|
+
<td>
|
|
909
|
+
<span class="ui-tag ui-tag--warning">Maybe</span>
|
|
910
|
+
</td>
|
|
911
|
+
<td class="is-num" data-label="Score" data-sort-value="64">64</td>
|
|
912
|
+
<td data-condensed="hide">Meta</td>
|
|
913
|
+
<td class="ui-table__actions">
|
|
914
|
+
<span class="ui-row-actions">
|
|
915
|
+
<button type="button" class="ui-btn ui-btn--sm">Contact</button>
|
|
916
|
+
<details class="ui-menu ui-menu--end">
|
|
917
|
+
<summary class="ui-btn ui-btn--icon" aria-label="More actions for Shantou Lianfeng Biotech Co., Ltd. (formerly Lianfeng Daily Chemical Factory)">
|
|
918
|
+
<svg viewBox="0 0 20 20" aria-hidden="true">
|
|
919
|
+
<circle cx="5" cy="10" r="1.5"/>
|
|
920
|
+
<circle cx="10" cy="10" r="1.5"/>
|
|
921
|
+
<circle cx="15" cy="10" r="1.5"/>
|
|
922
|
+
</svg>
|
|
923
|
+
</summary>
|
|
924
|
+
<div class="ui-menu__list gemboss-popover-surface">
|
|
925
|
+
<button type="button" class="ui-menu__item">Copy link</button>
|
|
926
|
+
<button type="button" class="ui-menu__item">Archive</button>
|
|
927
|
+
</div>
|
|
928
|
+
</details>
|
|
929
|
+
</span>
|
|
930
|
+
</td>
|
|
931
|
+
</tr>
|
|
932
|
+
<tr data-href="#c3">
|
|
933
|
+
<td class="ui-table__check">
|
|
934
|
+
<label class="ui-table__checkbox">
|
|
935
|
+
<input type="checkbox" data-gb-select value="c3" aria-label="Select Yiwu Bloom Packaging">
|
|
936
|
+
</label>
|
|
937
|
+
</td>
|
|
938
|
+
<td class="ui-table__primary">
|
|
939
|
+
<a class="ui-table__title" href="#c3" title="Yiwu Bloom Packaging">Yiwu Bloom Packaging</a>
|
|
940
|
+
<span class="ui-sub">Trader · Packaging</span>
|
|
941
|
+
</td>
|
|
942
|
+
<td data-label="In">Yiwu</td>
|
|
943
|
+
<td>
|
|
944
|
+
<span class="ui-tag ui-tag--danger">Trader</span>
|
|
945
|
+
</td>
|
|
946
|
+
<td class="is-num" data-label="Score" data-sort-value="31">31</td>
|
|
947
|
+
<td data-condensed="hide">—</td>
|
|
948
|
+
<td class="ui-table__actions">
|
|
949
|
+
<span class="ui-row-actions">
|
|
950
|
+
<button type="button" class="ui-btn ui-btn--sm">Contact</button>
|
|
951
|
+
<details class="ui-menu ui-menu--end">
|
|
952
|
+
<summary class="ui-btn ui-btn--icon" aria-label="More actions for Yiwu Bloom Packaging">
|
|
953
|
+
<svg viewBox="0 0 20 20" aria-hidden="true">
|
|
954
|
+
<circle cx="5" cy="10" r="1.5"/>
|
|
955
|
+
<circle cx="10" cy="10" r="1.5"/>
|
|
956
|
+
<circle cx="15" cy="10" r="1.5"/>
|
|
957
|
+
</svg>
|
|
958
|
+
</summary>
|
|
959
|
+
<div class="ui-menu__list gemboss-popover-surface">
|
|
960
|
+
<button type="button" class="ui-menu__item">Copy link</button>
|
|
961
|
+
<button type="button" class="ui-menu__item">Archive</button>
|
|
962
|
+
</div>
|
|
963
|
+
</details>
|
|
964
|
+
</span>
|
|
965
|
+
</td>
|
|
966
|
+
</tr>
|
|
967
|
+
<tr data-href="#c4">
|
|
968
|
+
<td class="ui-table__check">
|
|
969
|
+
<label class="ui-table__checkbox">
|
|
970
|
+
<input type="checkbox" data-gb-select value="c4" aria-label="Select Shanghai Kerui Labs">
|
|
971
|
+
</label>
|
|
972
|
+
</td>
|
|
973
|
+
<td class="ui-table__primary">
|
|
974
|
+
<a class="ui-table__title" href="#c4" title="Shanghai Kerui Labs">Shanghai Kerui Labs</a>
|
|
975
|
+
<span class="ui-sub">OEM · Serums</span>
|
|
976
|
+
</td>
|
|
977
|
+
<td data-label="In">Shanghai</td>
|
|
978
|
+
<td>
|
|
979
|
+
<span class="ui-tag ui-tag--success">Likely factory</span>
|
|
980
|
+
</td>
|
|
981
|
+
<td class="is-num" data-label="Score" data-sort-value="91">91</td>
|
|
982
|
+
<td data-condensed="hide">Google</td>
|
|
983
|
+
<td class="ui-table__actions">
|
|
984
|
+
<span class="ui-row-actions">
|
|
985
|
+
<button type="button" class="ui-btn ui-btn--sm">Contact</button>
|
|
986
|
+
<details class="ui-menu ui-menu--end">
|
|
987
|
+
<summary class="ui-btn ui-btn--icon" aria-label="More actions for Shanghai Kerui Labs">
|
|
988
|
+
<svg viewBox="0 0 20 20" aria-hidden="true">
|
|
989
|
+
<circle cx="5" cy="10" r="1.5"/>
|
|
990
|
+
<circle cx="10" cy="10" r="1.5"/>
|
|
991
|
+
<circle cx="15" cy="10" r="1.5"/>
|
|
992
|
+
</svg>
|
|
993
|
+
</summary>
|
|
994
|
+
<div class="ui-menu__list gemboss-popover-surface">
|
|
995
|
+
<button type="button" class="ui-menu__item">Copy link</button>
|
|
996
|
+
<button type="button" class="ui-menu__item">Archive</button>
|
|
997
|
+
</div>
|
|
998
|
+
</details>
|
|
999
|
+
</span>
|
|
1000
|
+
</td>
|
|
1001
|
+
</tr>
|
|
1002
|
+
<tr data-href="#c5">
|
|
1003
|
+
<td class="ui-table__check">
|
|
1004
|
+
<label class="ui-table__checkbox">
|
|
1005
|
+
<input type="checkbox" data-gb-select value="c5" aria-label="Select Ningbo Haiyue">
|
|
1006
|
+
</label>
|
|
1007
|
+
</td>
|
|
1008
|
+
<td class="ui-table__primary">
|
|
1009
|
+
<a class="ui-table__title" href="#c5" title="Ningbo Haiyue">Ningbo Haiyue</a>
|
|
1010
|
+
</td>
|
|
1011
|
+
<td data-label="In">Ningbo</td>
|
|
1012
|
+
<td>
|
|
1013
|
+
<span class="ui-tag">Unverified</span>
|
|
1014
|
+
</td>
|
|
1015
|
+
<td class="is-num" data-label="Score" data-sort-value="0">—</td>
|
|
1016
|
+
<td data-condensed="hide">—</td>
|
|
1017
|
+
<td class="ui-table__actions">
|
|
1018
|
+
<span class="ui-row-actions">
|
|
1019
|
+
<button type="button" class="ui-btn ui-btn--sm">Contact</button>
|
|
1020
|
+
<details class="ui-menu ui-menu--end">
|
|
1021
|
+
<summary class="ui-btn ui-btn--icon" aria-label="More actions for Ningbo Haiyue">
|
|
1022
|
+
<svg viewBox="0 0 20 20" aria-hidden="true">
|
|
1023
|
+
<circle cx="5" cy="10" r="1.5"/>
|
|
1024
|
+
<circle cx="10" cy="10" r="1.5"/>
|
|
1025
|
+
<circle cx="15" cy="10" r="1.5"/>
|
|
1026
|
+
</svg>
|
|
1027
|
+
</summary>
|
|
1028
|
+
<div class="ui-menu__list gemboss-popover-surface">
|
|
1029
|
+
<button type="button" class="ui-menu__item">Copy link</button>
|
|
1030
|
+
<button type="button" class="ui-menu__item">Archive</button>
|
|
1031
|
+
</div>
|
|
1032
|
+
</details>
|
|
1033
|
+
</span>
|
|
1034
|
+
</td>
|
|
1035
|
+
</tr>
|
|
1036
|
+
</tbody>
|
|
1037
|
+
</table>
|
|
1038
|
+
</div>
|
|
1039
|
+
</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">
|
|
1040
|
+
<div class="ui-index__sortbar" role="group" aria-label="Sort">
|
|
1041
|
+
<span aria-hidden="true">Sort</span>
|
|
1042
|
+
<a class="ui-chip" href="#collections" aria-current="true">Supplier ↑</a>
|
|
1043
|
+
<a class="ui-chip" href="#collections">Score</a>
|
|
1044
|
+
</div>
|
|
1045
|
+
<div class="ui-bulkbar">
|
|
1046
|
+
<label class="ui-table__checkbox">
|
|
1047
|
+
<input type="checkbox" data-gb-select-all aria-label="Select all">
|
|
1048
|
+
</label>
|
|
1049
|
+
<span class="ui-bulkbar__count" data-gb-count="{n} selected" aria-live="polite">2 selected</span>
|
|
1050
|
+
<span class="ui-bulkbar__actions">
|
|
1051
|
+
<button type="button" class="ui-btn ui-btn--sm">Add to outreach</button>
|
|
1052
|
+
<button type="button" class="ui-btn ui-btn--sm ui-btn--critical">Archive</button>
|
|
1053
|
+
</span>
|
|
1054
|
+
</div>
|
|
1055
|
+
<div class="ui-table-wrap">
|
|
1056
|
+
<table class="ui-table ui-table--index" data-gb-sort="client">
|
|
1057
|
+
<caption class="ui-sr-only">Suppliers</caption>
|
|
1058
|
+
<thead>
|
|
1059
|
+
<tr>
|
|
1060
|
+
<th class="ui-table__check" scope="col">
|
|
1061
|
+
<label class="ui-table__checkbox">
|
|
1062
|
+
<input type="checkbox" data-gb-select-all aria-label="Select all">
|
|
1063
|
+
</label>
|
|
1064
|
+
</th>
|
|
1065
|
+
<th class="ui-table__primary" scope="col" aria-sort="ascending">
|
|
1066
|
+
<button type="button" class="ui-table__sort">Supplier</button>
|
|
1067
|
+
</th>
|
|
1068
|
+
<th scope="col">Location</th>
|
|
1069
|
+
<th scope="col">Verdict</th>
|
|
1070
|
+
<th scope="col" class="is-num" aria-sort="none">
|
|
1071
|
+
<button type="button" class="ui-table__sort">Score</button>
|
|
1072
|
+
</th>
|
|
1073
|
+
<th scope="col">Ads</th>
|
|
1074
|
+
<th class="ui-table__actions" scope="col">
|
|
1075
|
+
<span class="ui-sr-only">Actions</span>
|
|
1076
|
+
</th>
|
|
1077
|
+
</tr>
|
|
1078
|
+
</thead>
|
|
1079
|
+
<tbody>
|
|
1080
|
+
<tr data-href="#c1" class="is-selected" aria-selected="true">
|
|
1081
|
+
<td class="ui-table__check">
|
|
1082
|
+
<label class="ui-table__checkbox">
|
|
1083
|
+
<input type="checkbox" data-gb-select value="c1" aria-label="Select Guangzhou Yanmei Cosmetics" checked>
|
|
1084
|
+
</label>
|
|
1085
|
+
</td>
|
|
1086
|
+
<td class="ui-table__primary">
|
|
1087
|
+
<a class="ui-table__title" href="#c1" title="Guangzhou Yanmei Cosmetics">Guangzhou Yanmei Cosmetics</a>
|
|
1088
|
+
<span class="ui-sub">OEM · Skincare</span>
|
|
1089
|
+
</td>
|
|
1090
|
+
<td data-label="In">Guangzhou</td>
|
|
1091
|
+
<td>
|
|
1092
|
+
<span class="ui-tag ui-tag--success">Likely factory</span>
|
|
1093
|
+
</td>
|
|
1094
|
+
<td class="is-num" data-label="Score" data-sort-value="86">86</td>
|
|
1095
|
+
<td data-condensed="hide">TikTok</td>
|
|
1096
|
+
<td class="ui-table__actions">
|
|
1097
|
+
<span class="ui-row-actions">
|
|
1098
|
+
<button type="button" class="ui-btn ui-btn--sm">Contact</button>
|
|
1099
|
+
<details class="ui-menu ui-menu--end">
|
|
1100
|
+
<summary class="ui-btn ui-btn--icon" aria-label="More actions for Guangzhou Yanmei Cosmetics">
|
|
1101
|
+
<svg viewBox="0 0 20 20" aria-hidden="true">
|
|
1102
|
+
<circle cx="5" cy="10" r="1.5"/>
|
|
1103
|
+
<circle cx="10" cy="10" r="1.5"/>
|
|
1104
|
+
<circle cx="15" cy="10" r="1.5"/>
|
|
1105
|
+
</svg>
|
|
1106
|
+
</summary>
|
|
1107
|
+
<div class="ui-menu__list gemboss-popover-surface">
|
|
1108
|
+
<button type="button" class="ui-menu__item">Copy link</button>
|
|
1109
|
+
<button type="button" class="ui-menu__item">Archive</button>
|
|
1110
|
+
</div>
|
|
1111
|
+
</details>
|
|
1112
|
+
</span>
|
|
1113
|
+
</td>
|
|
1114
|
+
</tr>
|
|
1115
|
+
<tr data-href="#c2">
|
|
1116
|
+
<td class="ui-table__check">
|
|
1117
|
+
<label class="ui-table__checkbox">
|
|
1118
|
+
<input type="checkbox" data-gb-select value="c2" aria-label="Select Shantou Lianfeng Biotech Co., Ltd. (formerly Lianfeng Daily Chemical Factory)">
|
|
1119
|
+
</label>
|
|
1120
|
+
</td>
|
|
1121
|
+
<td class="ui-table__primary">
|
|
1122
|
+
<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>
|
|
1123
|
+
<span class="ui-sub">ODM · Haircare</span>
|
|
1124
|
+
</td>
|
|
1125
|
+
<td data-label="In">Shantou</td>
|
|
1126
|
+
<td>
|
|
1127
|
+
<span class="ui-tag ui-tag--warning">Maybe</span>
|
|
1128
|
+
</td>
|
|
1129
|
+
<td class="is-num" data-label="Score" data-sort-value="64">64</td>
|
|
1130
|
+
<td data-condensed="hide">Meta</td>
|
|
1131
|
+
<td class="ui-table__actions">
|
|
1132
|
+
<span class="ui-row-actions">
|
|
1133
|
+
<button type="button" class="ui-btn ui-btn--sm">Contact</button>
|
|
1134
|
+
<details class="ui-menu ui-menu--end">
|
|
1135
|
+
<summary class="ui-btn ui-btn--icon" aria-label="More actions for Shantou Lianfeng Biotech Co., Ltd. (formerly Lianfeng Daily Chemical Factory)">
|
|
1136
|
+
<svg viewBox="0 0 20 20" aria-hidden="true">
|
|
1137
|
+
<circle cx="5" cy="10" r="1.5"/>
|
|
1138
|
+
<circle cx="10" cy="10" r="1.5"/>
|
|
1139
|
+
<circle cx="15" cy="10" r="1.5"/>
|
|
1140
|
+
</svg>
|
|
1141
|
+
</summary>
|
|
1142
|
+
<div class="ui-menu__list gemboss-popover-surface">
|
|
1143
|
+
<button type="button" class="ui-menu__item">Copy link</button>
|
|
1144
|
+
<button type="button" class="ui-menu__item">Archive</button>
|
|
1145
|
+
</div>
|
|
1146
|
+
</details>
|
|
1147
|
+
</span>
|
|
1148
|
+
</td>
|
|
1149
|
+
</tr>
|
|
1150
|
+
<tr data-href="#c3" class="is-selected" aria-selected="true">
|
|
1151
|
+
<td class="ui-table__check">
|
|
1152
|
+
<label class="ui-table__checkbox">
|
|
1153
|
+
<input type="checkbox" data-gb-select value="c3" aria-label="Select Yiwu Bloom Packaging" checked>
|
|
1154
|
+
</label>
|
|
1155
|
+
</td>
|
|
1156
|
+
<td class="ui-table__primary">
|
|
1157
|
+
<a class="ui-table__title" href="#c3" title="Yiwu Bloom Packaging">Yiwu Bloom Packaging</a>
|
|
1158
|
+
<span class="ui-sub">Trader · Packaging</span>
|
|
1159
|
+
</td>
|
|
1160
|
+
<td data-label="In">Yiwu</td>
|
|
1161
|
+
<td>
|
|
1162
|
+
<span class="ui-tag ui-tag--danger">Trader</span>
|
|
1163
|
+
</td>
|
|
1164
|
+
<td class="is-num" data-label="Score" data-sort-value="31">31</td>
|
|
1165
|
+
<td data-condensed="hide">—</td>
|
|
1166
|
+
<td class="ui-table__actions">
|
|
1167
|
+
<span class="ui-row-actions">
|
|
1168
|
+
<button type="button" class="ui-btn ui-btn--sm">Contact</button>
|
|
1169
|
+
<details class="ui-menu ui-menu--end">
|
|
1170
|
+
<summary class="ui-btn ui-btn--icon" aria-label="More actions for Yiwu Bloom Packaging">
|
|
1171
|
+
<svg viewBox="0 0 20 20" aria-hidden="true">
|
|
1172
|
+
<circle cx="5" cy="10" r="1.5"/>
|
|
1173
|
+
<circle cx="10" cy="10" r="1.5"/>
|
|
1174
|
+
<circle cx="15" cy="10" r="1.5"/>
|
|
1175
|
+
</svg>
|
|
1176
|
+
</summary>
|
|
1177
|
+
<div class="ui-menu__list gemboss-popover-surface">
|
|
1178
|
+
<button type="button" class="ui-menu__item">Copy link</button>
|
|
1179
|
+
<button type="button" class="ui-menu__item">Archive</button>
|
|
1180
|
+
</div>
|
|
1181
|
+
</details>
|
|
1182
|
+
</span>
|
|
1183
|
+
</td>
|
|
1184
|
+
</tr>
|
|
1185
|
+
</tbody>
|
|
1186
|
+
</table>
|
|
1187
|
+
</div>
|
|
1188
|
+
</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"></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">
|
|
1189
|
+
<div class="ui-index">
|
|
1190
|
+
<div class="ui-index__sortbar" role="group" aria-label="Sort">
|
|
1191
|
+
<span aria-hidden="true">Sort</span>
|
|
1192
|
+
<a class="ui-chip" href="#collections" aria-current="true">Supplier ↑</a>
|
|
1193
|
+
<a class="ui-chip" href="#collections">Score</a>
|
|
1194
|
+
</div>
|
|
1195
|
+
<div class="ui-bulkbar" hidden>
|
|
1196
|
+
<label class="ui-table__checkbox">
|
|
1197
|
+
<input type="checkbox" data-gb-select-all aria-label="Select all">
|
|
1198
|
+
</label>
|
|
1199
|
+
<span class="ui-bulkbar__count" data-gb-count="{n} selected" aria-live="polite">0 selected</span>
|
|
1200
|
+
<span class="ui-bulkbar__actions">
|
|
1201
|
+
<button type="button" class="ui-btn ui-btn--sm">Add to outreach</button>
|
|
1202
|
+
<button type="button" class="ui-btn ui-btn--sm ui-btn--critical">Archive</button>
|
|
1203
|
+
</span>
|
|
1204
|
+
</div>
|
|
1205
|
+
<div class="ui-table-wrap">
|
|
1206
|
+
<table class="ui-table ui-table--index" data-gb-sort="client">
|
|
1207
|
+
<caption class="ui-sr-only">Suppliers</caption>
|
|
1208
|
+
<thead>
|
|
1209
|
+
<tr>
|
|
1210
|
+
<th class="ui-table__check" scope="col">
|
|
1211
|
+
<label class="ui-table__checkbox">
|
|
1212
|
+
<input type="checkbox" data-gb-select-all aria-label="Select all">
|
|
1213
|
+
</label>
|
|
1214
|
+
</th>
|
|
1215
|
+
<th class="ui-table__primary" scope="col" aria-sort="ascending">
|
|
1216
|
+
<button type="button" class="ui-table__sort">Supplier</button>
|
|
1217
|
+
</th>
|
|
1218
|
+
<th scope="col">Location</th>
|
|
1219
|
+
<th scope="col">Verdict</th>
|
|
1220
|
+
<th scope="col" class="is-num" aria-sort="none">
|
|
1221
|
+
<button type="button" class="ui-table__sort">Score</button>
|
|
1222
|
+
</th>
|
|
1223
|
+
<th scope="col">Ads</th>
|
|
1224
|
+
<th class="ui-table__actions" scope="col">
|
|
1225
|
+
<span class="ui-sr-only">Actions</span>
|
|
1226
|
+
</th>
|
|
1227
|
+
</tr>
|
|
1228
|
+
</thead>
|
|
1229
|
+
<tbody>
|
|
1230
|
+
<tr data-href="#c1">
|
|
1231
|
+
<td class="ui-table__check">
|
|
1232
|
+
<label class="ui-table__checkbox">
|
|
1233
|
+
<input type="checkbox" data-gb-select value="c1" aria-label="Select Guangzhou Yanmei Cosmetics">
|
|
1234
|
+
</label>
|
|
1235
|
+
</td>
|
|
1236
|
+
<td class="ui-table__primary">
|
|
1237
|
+
<a class="ui-table__title" href="#c1" title="Guangzhou Yanmei Cosmetics">Guangzhou Yanmei Cosmetics</a>
|
|
1238
|
+
<span class="ui-sub">OEM · Skincare</span>
|
|
1239
|
+
</td>
|
|
1240
|
+
<td data-label="In">Guangzhou</td>
|
|
1241
|
+
<td>
|
|
1242
|
+
<span class="ui-tag ui-tag--success">Likely factory</span>
|
|
1243
|
+
</td>
|
|
1244
|
+
<td class="is-num" data-label="Score" data-sort-value="86">86</td>
|
|
1245
|
+
<td data-condensed="hide">TikTok</td>
|
|
1246
|
+
<td class="ui-table__actions">
|
|
1247
|
+
<span class="ui-row-actions">
|
|
1248
|
+
<button type="button" class="ui-btn ui-btn--sm">Contact</button>
|
|
1249
|
+
<details class="ui-menu ui-menu--end">
|
|
1250
|
+
<summary class="ui-btn ui-btn--icon" aria-label="More actions for Guangzhou Yanmei Cosmetics">
|
|
1251
|
+
<svg viewBox="0 0 20 20" aria-hidden="true">
|
|
1252
|
+
<circle cx="5" cy="10" r="1.5"/>
|
|
1253
|
+
<circle cx="10" cy="10" r="1.5"/>
|
|
1254
|
+
<circle cx="15" cy="10" r="1.5"/>
|
|
1255
|
+
</svg>
|
|
1256
|
+
</summary>
|
|
1257
|
+
<div class="ui-menu__list gemboss-popover-surface">
|
|
1258
|
+
<button type="button" class="ui-menu__item">Copy link</button>
|
|
1259
|
+
<button type="button" class="ui-menu__item">Archive</button>
|
|
1260
|
+
</div>
|
|
1261
|
+
</details>
|
|
1262
|
+
</span>
|
|
1263
|
+
</td>
|
|
1264
|
+
</tr>
|
|
1265
|
+
<tr data-href="#c2">
|
|
1266
|
+
<td class="ui-table__check">
|
|
1267
|
+
<label class="ui-table__checkbox">
|
|
1268
|
+
<input type="checkbox" data-gb-select value="c2" aria-label="Select Shantou Lianfeng Biotech Co., Ltd. (formerly Lianfeng Daily Chemical Factory)">
|
|
1269
|
+
</label>
|
|
1270
|
+
</td>
|
|
1271
|
+
<td class="ui-table__primary">
|
|
1272
|
+
<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>
|
|
1273
|
+
<span class="ui-sub">ODM · Haircare</span>
|
|
1274
|
+
</td>
|
|
1275
|
+
<td data-label="In">Shantou</td>
|
|
1276
|
+
<td>
|
|
1277
|
+
<span class="ui-tag ui-tag--warning">Maybe</span>
|
|
1278
|
+
</td>
|
|
1279
|
+
<td class="is-num" data-label="Score" data-sort-value="64">64</td>
|
|
1280
|
+
<td data-condensed="hide">Meta</td>
|
|
1281
|
+
<td class="ui-table__actions">
|
|
1282
|
+
<span class="ui-row-actions">
|
|
1283
|
+
<button type="button" class="ui-btn ui-btn--sm">Contact</button>
|
|
1284
|
+
<details class="ui-menu ui-menu--end">
|
|
1285
|
+
<summary class="ui-btn ui-btn--icon" aria-label="More actions for Shantou Lianfeng Biotech Co., Ltd. (formerly Lianfeng Daily Chemical Factory)">
|
|
1286
|
+
<svg viewBox="0 0 20 20" aria-hidden="true">
|
|
1287
|
+
<circle cx="5" cy="10" r="1.5"/>
|
|
1288
|
+
<circle cx="10" cy="10" r="1.5"/>
|
|
1289
|
+
<circle cx="15" cy="10" r="1.5"/>
|
|
1290
|
+
</svg>
|
|
1291
|
+
</summary>
|
|
1292
|
+
<div class="ui-menu__list gemboss-popover-surface">
|
|
1293
|
+
<button type="button" class="ui-menu__item">Copy link</button>
|
|
1294
|
+
<button type="button" class="ui-menu__item">Archive</button>
|
|
1295
|
+
</div>
|
|
1296
|
+
</details>
|
|
1297
|
+
</span>
|
|
1298
|
+
</td>
|
|
1299
|
+
</tr>
|
|
1300
|
+
<tr data-href="#c3">
|
|
1301
|
+
<td class="ui-table__check">
|
|
1302
|
+
<label class="ui-table__checkbox">
|
|
1303
|
+
<input type="checkbox" data-gb-select value="c3" aria-label="Select Yiwu Bloom Packaging">
|
|
1304
|
+
</label>
|
|
1305
|
+
</td>
|
|
1306
|
+
<td class="ui-table__primary">
|
|
1307
|
+
<a class="ui-table__title" href="#c3" title="Yiwu Bloom Packaging">Yiwu Bloom Packaging</a>
|
|
1308
|
+
<span class="ui-sub">Trader · Packaging</span>
|
|
1309
|
+
</td>
|
|
1310
|
+
<td data-label="In">Yiwu</td>
|
|
1311
|
+
<td>
|
|
1312
|
+
<span class="ui-tag ui-tag--danger">Trader</span>
|
|
1313
|
+
</td>
|
|
1314
|
+
<td class="is-num" data-label="Score" data-sort-value="31">31</td>
|
|
1315
|
+
<td data-condensed="hide">—</td>
|
|
1316
|
+
<td class="ui-table__actions">
|
|
1317
|
+
<span class="ui-row-actions">
|
|
1318
|
+
<button type="button" class="ui-btn ui-btn--sm">Contact</button>
|
|
1319
|
+
<details class="ui-menu ui-menu--end">
|
|
1320
|
+
<summary class="ui-btn ui-btn--icon" aria-label="More actions for Yiwu Bloom Packaging">
|
|
1321
|
+
<svg viewBox="0 0 20 20" aria-hidden="true">
|
|
1322
|
+
<circle cx="5" cy="10" r="1.5"/>
|
|
1323
|
+
<circle cx="10" cy="10" r="1.5"/>
|
|
1324
|
+
<circle cx="15" cy="10" r="1.5"/>
|
|
1325
|
+
</svg>
|
|
1326
|
+
</summary>
|
|
1327
|
+
<div class="ui-menu__list gemboss-popover-surface">
|
|
1328
|
+
<button type="button" class="ui-menu__item">Copy link</button>
|
|
1329
|
+
<button type="button" class="ui-menu__item">Archive</button>
|
|
1330
|
+
</div>
|
|
1331
|
+
</details>
|
|
1332
|
+
</span>
|
|
1333
|
+
</td>
|
|
1334
|
+
</tr>
|
|
1335
|
+
<tr data-href="#c4">
|
|
1336
|
+
<td class="ui-table__check">
|
|
1337
|
+
<label class="ui-table__checkbox">
|
|
1338
|
+
<input type="checkbox" data-gb-select value="c4" aria-label="Select Shanghai Kerui Labs">
|
|
1339
|
+
</label>
|
|
1340
|
+
</td>
|
|
1341
|
+
<td class="ui-table__primary">
|
|
1342
|
+
<a class="ui-table__title" href="#c4" title="Shanghai Kerui Labs">Shanghai Kerui Labs</a>
|
|
1343
|
+
<span class="ui-sub">OEM · Serums</span>
|
|
1344
|
+
</td>
|
|
1345
|
+
<td data-label="In">Shanghai</td>
|
|
1346
|
+
<td>
|
|
1347
|
+
<span class="ui-tag ui-tag--success">Likely factory</span>
|
|
1348
|
+
</td>
|
|
1349
|
+
<td class="is-num" data-label="Score" data-sort-value="91">91</td>
|
|
1350
|
+
<td data-condensed="hide">Google</td>
|
|
1351
|
+
<td class="ui-table__actions">
|
|
1352
|
+
<span class="ui-row-actions">
|
|
1353
|
+
<button type="button" class="ui-btn ui-btn--sm">Contact</button>
|
|
1354
|
+
<details class="ui-menu ui-menu--end">
|
|
1355
|
+
<summary class="ui-btn ui-btn--icon" aria-label="More actions for Shanghai Kerui Labs">
|
|
1356
|
+
<svg viewBox="0 0 20 20" aria-hidden="true">
|
|
1357
|
+
<circle cx="5" cy="10" r="1.5"/>
|
|
1358
|
+
<circle cx="10" cy="10" r="1.5"/>
|
|
1359
|
+
<circle cx="15" cy="10" r="1.5"/>
|
|
1360
|
+
</svg>
|
|
1361
|
+
</summary>
|
|
1362
|
+
<div class="ui-menu__list gemboss-popover-surface">
|
|
1363
|
+
<button type="button" class="ui-menu__item">Copy link</button>
|
|
1364
|
+
<button type="button" class="ui-menu__item">Archive</button>
|
|
1365
|
+
</div>
|
|
1366
|
+
</details>
|
|
1367
|
+
</span>
|
|
1368
|
+
</td>
|
|
1369
|
+
</tr>
|
|
1370
|
+
</tbody>
|
|
1371
|
+
</table>
|
|
1372
|
+
</div>
|
|
1373
|
+
</div>
|
|
1374
|
+
</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)</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">
|
|
1375
|
+
<div class="ui-index__sortbar" role="group" aria-label="Sort">
|
|
1376
|
+
<span aria-hidden="true">Sort</span>
|
|
1377
|
+
<a class="ui-chip" href="#collections" aria-current="true">Supplier ↑</a>
|
|
1378
|
+
<a class="ui-chip" href="#collections">Score</a>
|
|
1379
|
+
</div>
|
|
1380
|
+
<div class="ui-table-wrap">
|
|
1381
|
+
<table class="ui-table ui-table--index">
|
|
1382
|
+
<caption class="ui-sr-only">Suppliers</caption>
|
|
1383
|
+
<thead>
|
|
1384
|
+
<tr>
|
|
1385
|
+
<th class="ui-table__primary" scope="col" aria-sort="ascending">
|
|
1386
|
+
<a class="ui-table__sort" href="#collections">Supplier</a>
|
|
1387
|
+
</th>
|
|
1388
|
+
<th scope="col">Location</th>
|
|
1389
|
+
<th scope="col">Verdict</th>
|
|
1390
|
+
<th scope="col" class="is-num" aria-sort="none">
|
|
1391
|
+
<a class="ui-table__sort" href="#collections">Score</a>
|
|
1392
|
+
</th>
|
|
1393
|
+
<th scope="col">Ads</th>
|
|
1394
|
+
</tr>
|
|
1395
|
+
</thead>
|
|
1396
|
+
<tbody>
|
|
1397
|
+
<tr class="is-linked">
|
|
1398
|
+
<td class="ui-table__primary">
|
|
1399
|
+
<a class="ui-table__title" href="#c1" title="Guangzhou Yanmei Cosmetics">Guangzhou Yanmei Cosmetics</a>
|
|
1400
|
+
<span class="ui-sub">OEM · Skincare</span>
|
|
1401
|
+
</td>
|
|
1402
|
+
<td data-label="In">Guangzhou</td>
|
|
1403
|
+
<td>
|
|
1404
|
+
<span class="ui-tag ui-tag--success">Likely factory</span>
|
|
1405
|
+
</td>
|
|
1406
|
+
<td class="is-num" data-label="Score">86</td>
|
|
1407
|
+
<td data-condensed="hide">TikTok</td>
|
|
1408
|
+
</tr>
|
|
1409
|
+
<tr class="is-linked">
|
|
1410
|
+
<td class="ui-table__primary">
|
|
1411
|
+
<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>
|
|
1412
|
+
<span class="ui-sub">ODM · Haircare</span>
|
|
1413
|
+
</td>
|
|
1414
|
+
<td data-label="In">Shantou</td>
|
|
1415
|
+
<td>
|
|
1416
|
+
<span class="ui-tag ui-tag--warning">Maybe</span>
|
|
1417
|
+
</td>
|
|
1418
|
+
<td class="is-num" data-label="Score">64</td>
|
|
1419
|
+
<td data-condensed="hide">Meta</td>
|
|
1420
|
+
</tr>
|
|
1421
|
+
<tr class="is-linked">
|
|
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">31</td>
|
|
1431
|
+
<td data-condensed="hide">—</td>
|
|
1432
|
+
</tr>
|
|
1433
|
+
<tr class="is-linked">
|
|
1434
|
+
<td class="ui-table__primary">
|
|
1435
|
+
<a class="ui-table__title" href="#c4" title="Shanghai Kerui Labs">Shanghai Kerui Labs</a>
|
|
1436
|
+
<span class="ui-sub">OEM · Serums</span>
|
|
1437
|
+
</td>
|
|
1438
|
+
<td data-label="In">Shanghai</td>
|
|
1439
|
+
<td>
|
|
1440
|
+
<span class="ui-tag ui-tag--success">Likely factory</span>
|
|
1441
|
+
</td>
|
|
1442
|
+
<td class="is-num" data-label="Score">91</td>
|
|
1443
|
+
<td data-condensed="hide">Google</td>
|
|
1444
|
+
</tr>
|
|
1445
|
+
<tr class="is-linked">
|
|
1446
|
+
<td class="ui-table__primary">
|
|
1447
|
+
<a class="ui-table__title" href="#c5" title="Ningbo Haiyue">Ningbo Haiyue</a>
|
|
1448
|
+
</td>
|
|
1449
|
+
<td data-label="In">Ningbo</td>
|
|
1450
|
+
<td>
|
|
1451
|
+
<span class="ui-tag">Unverified</span>
|
|
1452
|
+
</td>
|
|
1453
|
+
<td class="is-num" data-label="Score">—</td>
|
|
1454
|
+
<td data-condensed="hide">—</td>
|
|
1455
|
+
</tr>
|
|
1456
|
+
</tbody>
|
|
1457
|
+
</table>
|
|
1458
|
+
</div>
|
|
1459
|
+
</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">
|
|
1460
|
+
<li class="ui-list__item">
|
|
1461
|
+
<div class="ui-list__media">
|
|
1462
|
+
<span class="gb-avatar gb-avatar--32" data-tone="1" aria-hidden="true">LT</span>
|
|
1463
|
+
</div>
|
|
1464
|
+
<div class="ui-list__body">
|
|
1465
|
+
<a class="ui-list__title" href="#p0">Lily Tran</a>
|
|
1466
|
+
<p class="ui-list__sub">Head of CRO at Ruggable</p>
|
|
1467
|
+
<p class="ui-list__meta">Replied 2 days ago</p>
|
|
1468
|
+
<div class="ui-list__badges">
|
|
1469
|
+
<span class="ui-badge">CRO</span>
|
|
1470
|
+
<span class="ui-badge">Plus</span>
|
|
1471
|
+
</div>
|
|
1472
|
+
</div>
|
|
1473
|
+
<div class="ui-list__aside">
|
|
1474
|
+
<b>82</b>
|
|
1475
|
+
</div>
|
|
1476
|
+
<div class="ui-list__actions">
|
|
1477
|
+
<button type="button" class="ui-btn ui-btn--sm">Invite</button>
|
|
1478
|
+
</div>
|
|
1479
|
+
</li>
|
|
1480
|
+
<li class="ui-list__item">
|
|
1481
|
+
<div class="ui-list__media">
|
|
1482
|
+
<span class="gb-avatar gb-avatar--32" data-tone="0" aria-hidden="true">MB</span>
|
|
1483
|
+
</div>
|
|
1484
|
+
<div class="ui-list__body">
|
|
1485
|
+
<a class="ui-list__title" href="#p1">Marcus Bell</a>
|
|
1486
|
+
<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>
|
|
1487
|
+
<p class="ui-list__meta">New</p>
|
|
1488
|
+
<div class="ui-list__badges">
|
|
1489
|
+
<span class="ui-badge">Media buyer</span>
|
|
1490
|
+
</div>
|
|
1491
|
+
</div>
|
|
1492
|
+
<div class="ui-list__aside">
|
|
1493
|
+
<b>77</b>
|
|
1494
|
+
</div>
|
|
1495
|
+
<div class="ui-list__actions">
|
|
1496
|
+
<button type="button" class="ui-btn ui-btn--sm">Invite</button>
|
|
1497
|
+
</div>
|
|
1498
|
+
</li>
|
|
1499
|
+
<li class="ui-list__item">
|
|
1500
|
+
<div class="ui-list__media">
|
|
1501
|
+
<span class="gb-avatar gb-avatar--32" data-tone="5" aria-hidden="true">AS</span>
|
|
1502
|
+
</div>
|
|
1503
|
+
<div class="ui-list__body">
|
|
1504
|
+
<a class="ui-list__title" href="#p2">Aiko Sato</a>
|
|
1505
|
+
<p class="ui-list__sub">Shopify app founder (reviews)</p>
|
|
1506
|
+
<p class="ui-list__meta">Waiting on intro</p>
|
|
1507
|
+
<div class="ui-list__badges">
|
|
1508
|
+
<span class="ui-badge">App</span>
|
|
1509
|
+
<span class="ui-badge">Japan</span>
|
|
1510
|
+
<span class="ui-badge">Plus</span>
|
|
1511
|
+
<span class="ui-badge">+1</span>
|
|
1512
|
+
</div>
|
|
1513
|
+
</div>
|
|
1514
|
+
<div class="ui-list__aside">
|
|
1515
|
+
<b>64</b>
|
|
1516
|
+
</div>
|
|
1517
|
+
<div class="ui-list__actions">
|
|
1518
|
+
<button type="button" class="ui-btn ui-btn--sm">Invite</button>
|
|
1519
|
+
</div>
|
|
1520
|
+
</li>
|
|
1521
|
+
</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">
|
|
1522
|
+
<li class="ui-list__item">
|
|
1523
|
+
<div class="ui-list__media">
|
|
1524
|
+
<span class="ui-thumb">
|
|
1525
|
+
<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"/>
|
|
1526
|
+
</span>
|
|
1527
|
+
</div>
|
|
1528
|
+
<div class="ui-list__body">
|
|
1529
|
+
<a class="ui-list__title" href="#a0">Why sticky add-to-cart lifts mobile conversion</a>
|
|
1530
|
+
<p class="ui-list__sub">content-radar · 6 min read · 01/10/2026</p>
|
|
1531
|
+
</div>
|
|
1532
|
+
</li>
|
|
1533
|
+
<li class="ui-list__item">
|
|
1534
|
+
<div class="ui-list__media">
|
|
1535
|
+
<span class="ui-thumb">
|
|
1536
|
+
<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"/>
|
|
1537
|
+
</span>
|
|
1538
|
+
</div>
|
|
1539
|
+
<div class="ui-list__body">
|
|
1540
|
+
<a class="ui-list__title" href="#a1">Bundles that do not cannibalise the hero product</a>
|
|
1541
|
+
<p class="ui-list__sub">content-radar · 6 min read · 02/10/2026</p>
|
|
1542
|
+
</div>
|
|
1543
|
+
</li>
|
|
1544
|
+
<li class="ui-list__item">
|
|
1545
|
+
<div class="ui-list__media">
|
|
1546
|
+
<span class="ui-thumb">
|
|
1547
|
+
<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"/>
|
|
1548
|
+
</span>
|
|
1549
|
+
</div>
|
|
1550
|
+
<div class="ui-list__body">
|
|
1551
|
+
<a class="ui-list__title" href="#a2">A/B testing a PDP on 3,000 sessions a week</a>
|
|
1552
|
+
<p class="ui-list__sub">content-radar · 6 min read · 03/10/2026</p>
|
|
1553
|
+
</div>
|
|
1554
|
+
</li>
|
|
1555
|
+
</ul></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">
|
|
1556
|
+
<ul class="ui-list ui-list--compact" aria-label="Needs attention">
|
|
1557
|
+
<li class="ui-list__item">
|
|
1558
|
+
<a class="ui-list__row" href="#c1">
|
|
1559
|
+
<span class="ui-list__icon" aria-hidden="true">
|
|
1560
|
+
<svg viewBox="0 0 20 20" aria-hidden="true">
|
|
1561
|
+
<circle cx="10" cy="10" r="6" fill="currentColor">
|
|
1562
|
+
</circle>
|
|
1563
|
+
</svg>
|
|
1564
|
+
</span>
|
|
1565
|
+
<span class="ui-list__label">3 sources failed overnight</span>
|
|
1566
|
+
<span class="ui-list__meta">07:12</span>
|
|
1567
|
+
</a>
|
|
1568
|
+
</li>
|
|
1569
|
+
<li class="ui-list__item">
|
|
1570
|
+
<a class="ui-list__row is-selected" href="#c2" aria-current="page">
|
|
1571
|
+
<span class="ui-list__label">Keyword “page builder” dropped from #3 to #9</span>
|
|
1572
|
+
<span class="ui-list__meta">Yesterday</span>
|
|
1573
|
+
</a>
|
|
1574
|
+
</li>
|
|
1575
|
+
<li class="ui-list__item">
|
|
1576
|
+
<a class="ui-list__row" href="#c3">
|
|
1577
|
+
<span class="ui-list__label">12 candidates waiting for review in the pool</span>
|
|
1578
|
+
<span class="ui-list__meta">12</span>
|
|
1579
|
+
</a>
|
|
1580
|
+
</li>
|
|
1581
|
+
</ul>
|
|
1582
|
+
</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">
|
|
1583
|
+
<ul class="ui-list ui-list--compact ui-list--activity" aria-label="History">
|
|
1584
|
+
<li class="ui-list__item">
|
|
1585
|
+
<span class="ui-list__dot ui-list__dot--info" aria-hidden="true">
|
|
1586
|
+
</span>
|
|
1587
|
+
<div>
|
|
1588
|
+
<span class="ui-list__label">Moved to Review</span>
|
|
1589
|
+
<span class="ui-list__detail">by Lily · from In progress</span>
|
|
1590
|
+
</div>
|
|
1591
|
+
<time class="ui-list__time" dateTime="2026-10-05T14:05">14:05</time>
|
|
1592
|
+
</li>
|
|
1593
|
+
<li class="ui-list__item">
|
|
1594
|
+
<span class="ui-list__dot ui-list__dot--success" aria-hidden="true">
|
|
1595
|
+
</span>
|
|
1596
|
+
<div>
|
|
1597
|
+
<span class="ui-list__label">Preview passed the visual gate</span>
|
|
1598
|
+
<span class="ui-list__detail">6 widths, 0 overflow</span>
|
|
1599
|
+
</div>
|
|
1600
|
+
<time class="ui-list__time">13:58</time>
|
|
1601
|
+
</li>
|
|
1602
|
+
<li class="ui-list__item">
|
|
1603
|
+
<span class="ui-list__dot ui-list__dot--critical" aria-hidden="true">
|
|
1604
|
+
</span>
|
|
1605
|
+
<div>
|
|
1606
|
+
<span class="ui-list__label">Build failed: missing image in slot hero</span>
|
|
1607
|
+
<span class="ui-list__detail">slot hero_media is empty on 390 and 320</span>
|
|
1608
|
+
</div>
|
|
1609
|
+
<time class="ui-list__time">13:40</time>
|
|
1610
|
+
</li>
|
|
1611
|
+
<li class="ui-list__item">
|
|
1612
|
+
<span class="ui-list__dot" aria-hidden="true">
|
|
1613
|
+
</span>
|
|
1614
|
+
<div>
|
|
1615
|
+
<span class="ui-list__label">Created from the Alia popup corpus</span>
|
|
1616
|
+
</div>
|
|
1617
|
+
<time class="ui-list__time">Yesterday</time>
|
|
1618
|
+
</li>
|
|
1619
|
+
</ul>
|
|
1620
|
+
</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">
|
|
1621
|
+
<article class="ui-card ui-card--media" role="listitem">
|
|
1622
|
+
<a class="ui-card__media" href="#g0" tabindex="-1" aria-hidden="true">
|
|
1623
|
+
<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"/>
|
|
1624
|
+
</a>
|
|
1625
|
+
<div class="ui-card__menu">
|
|
1626
|
+
<details class="ui-menu ui-menu--end">
|
|
1627
|
+
<summary class="ui-btn ui-btn--icon" aria-label="More actions">⋯</summary>
|
|
1628
|
+
<div class="ui-menu__list gemboss-popover-surface">
|
|
1629
|
+
<button type="button" class="ui-menu__item">Duplicate</button>
|
|
1630
|
+
</div>
|
|
1631
|
+
</details>
|
|
1632
|
+
</div>
|
|
1633
|
+
<div class="ui-card__body">
|
|
1634
|
+
<a class="ui-card__link" href="#g0">Hero with countdown</a>
|
|
1635
|
+
<span class="ui-card__meta">Section · 12 uses</span>
|
|
1636
|
+
<div class="ui-list__badges">
|
|
1637
|
+
<span class="ui-badge">Live</span>
|
|
1638
|
+
</div>
|
|
1639
|
+
</div>
|
|
1640
|
+
</article>
|
|
1641
|
+
<article class="ui-card ui-card--media" role="listitem">
|
|
1642
|
+
<a class="ui-card__media" href="#g1" tabindex="-1" aria-hidden="true">
|
|
1643
|
+
<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"/>
|
|
1644
|
+
</a>
|
|
1645
|
+
<div class="ui-card__menu">
|
|
1646
|
+
<details class="ui-menu ui-menu--end">
|
|
1647
|
+
<summary class="ui-btn ui-btn--icon" aria-label="More actions">⋯</summary>
|
|
1648
|
+
<div class="ui-menu__list gemboss-popover-surface">
|
|
1649
|
+
<button type="button" class="ui-menu__item">Duplicate</button>
|
|
1650
|
+
</div>
|
|
1651
|
+
</details>
|
|
1652
|
+
</div>
|
|
1653
|
+
<div class="ui-card__body">
|
|
1654
|
+
<a class="ui-card__link" href="#g1">Bundle picker, three tiers</a>
|
|
1655
|
+
<span class="ui-card__meta">Section · 12 uses</span>
|
|
1656
|
+
<div class="ui-list__badges">
|
|
1657
|
+
<span class="ui-badge">Draft</span>
|
|
1658
|
+
</div>
|
|
1659
|
+
</div>
|
|
1660
|
+
</article>
|
|
1661
|
+
<article class="ui-card ui-card--media" role="listitem">
|
|
1662
|
+
<a class="ui-card__media" href="#g2" tabindex="-1" aria-hidden="true">
|
|
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(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"/>
|
|
1664
|
+
</a>
|
|
1665
|
+
<div class="ui-card__menu">
|
|
1666
|
+
<details class="ui-menu ui-menu--end">
|
|
1667
|
+
<summary class="ui-btn ui-btn--icon" aria-label="More actions">⋯</summary>
|
|
1668
|
+
<div class="ui-menu__list gemboss-popover-surface">
|
|
1669
|
+
<button type="button" class="ui-menu__item">Duplicate</button>
|
|
1670
|
+
</div>
|
|
1671
|
+
</details>
|
|
1672
|
+
</div>
|
|
1673
|
+
<div class="ui-card__body">
|
|
1674
|
+
<a class="ui-card__link" href="#g2">Reviews carousel</a>
|
|
1675
|
+
<span class="ui-card__meta">Section · 12 uses</span>
|
|
1676
|
+
<div class="ui-list__badges">
|
|
1677
|
+
<span class="ui-badge">Live</span>
|
|
1678
|
+
</div>
|
|
1679
|
+
</div>
|
|
1680
|
+
</article>
|
|
1681
|
+
<article class="ui-card ui-card--media" role="listitem">
|
|
1682
|
+
<a class="ui-card__media" href="#g3" tabindex="-1" aria-hidden="true">
|
|
1683
|
+
<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"/>
|
|
1684
|
+
</a>
|
|
1685
|
+
<div class="ui-card__menu">
|
|
1686
|
+
<details class="ui-menu ui-menu--end">
|
|
1687
|
+
<summary class="ui-btn ui-btn--icon" aria-label="More actions">⋯</summary>
|
|
1688
|
+
<div class="ui-menu__list gemboss-popover-surface">
|
|
1689
|
+
<button type="button" class="ui-menu__item">Duplicate</button>
|
|
1690
|
+
</div>
|
|
1691
|
+
</details>
|
|
1692
|
+
</div>
|
|
1693
|
+
<div class="ui-card__body">
|
|
1694
|
+
<a class="ui-card__link" href="#g3">FAQ accordion</a>
|
|
1695
|
+
<span class="ui-card__meta">Section · 12 uses</span>
|
|
1696
|
+
<div class="ui-list__badges">
|
|
1697
|
+
<span class="ui-badge">Draft</span>
|
|
1698
|
+
</div>
|
|
1699
|
+
</div>
|
|
1700
|
+
</article>
|
|
1701
|
+
<article class="ui-card ui-card--media" role="listitem">
|
|
1702
|
+
<a class="ui-card__media" href="#g4" tabindex="-1" aria-hidden="true">
|
|
1703
|
+
<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"/>
|
|
1704
|
+
</a>
|
|
1705
|
+
<div class="ui-card__menu">
|
|
1706
|
+
<details class="ui-menu ui-menu--end">
|
|
1707
|
+
<summary class="ui-btn ui-btn--icon" aria-label="More actions">⋯</summary>
|
|
1708
|
+
<div class="ui-menu__list gemboss-popover-surface">
|
|
1709
|
+
<button type="button" class="ui-menu__item">Duplicate</button>
|
|
1710
|
+
</div>
|
|
1711
|
+
</details>
|
|
1712
|
+
</div>
|
|
1713
|
+
<div class="ui-card__body">
|
|
1714
|
+
<a class="ui-card__link" href="#g4">Sticky add to cart</a>
|
|
1715
|
+
<span class="ui-card__meta">Section · 12 uses</span>
|
|
1716
|
+
<div class="ui-list__badges">
|
|
1717
|
+
<span class="ui-badge">Live</span>
|
|
1718
|
+
</div>
|
|
1719
|
+
</div>
|
|
1720
|
+
</article>
|
|
1721
|
+
<article class="ui-card ui-card--media" role="listitem">
|
|
1722
|
+
<a class="ui-card__media" href="#g5" tabindex="-1" aria-hidden="true">
|
|
1723
|
+
<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"/>
|
|
1724
|
+
</a>
|
|
1725
|
+
<div class="ui-card__menu">
|
|
1726
|
+
<details class="ui-menu ui-menu--end">
|
|
1727
|
+
<summary class="ui-btn ui-btn--icon" aria-label="More actions">⋯</summary>
|
|
1728
|
+
<div class="ui-menu__list gemboss-popover-surface">
|
|
1729
|
+
<button type="button" class="ui-menu__item">Duplicate</button>
|
|
1730
|
+
</div>
|
|
1731
|
+
</details>
|
|
1732
|
+
</div>
|
|
1733
|
+
<div class="ui-card__body">
|
|
1734
|
+
<a class="ui-card__link" href="#g5">Comparison table</a>
|
|
1735
|
+
<span class="ui-card__meta">Section · 12 uses</span>
|
|
1736
|
+
<div class="ui-list__badges">
|
|
1737
|
+
<span class="ui-badge">Draft</span>
|
|
1738
|
+
</div>
|
|
1739
|
+
</div>
|
|
1740
|
+
</article>
|
|
1741
|
+
</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">
|
|
1742
|
+
<article class="ui-card ui-card--media" role="listitem">
|
|
1743
|
+
<a class="ui-card__media" href="#g0" tabindex="-1" aria-hidden="true">
|
|
1744
|
+
<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"/>
|
|
1745
|
+
</a>
|
|
1746
|
+
<div class="ui-card__menu">
|
|
1747
|
+
<details class="ui-menu ui-menu--end">
|
|
1748
|
+
<summary class="ui-btn ui-btn--icon" aria-label="More actions">⋯</summary>
|
|
1749
|
+
<div class="ui-menu__list gemboss-popover-surface">
|
|
1750
|
+
<button type="button" class="ui-menu__item">Duplicate</button>
|
|
1751
|
+
</div>
|
|
1752
|
+
</details>
|
|
1753
|
+
</div>
|
|
1754
|
+
<div class="ui-card__body">
|
|
1755
|
+
<a class="ui-card__link" href="#g0">Hero with countdown</a>
|
|
1756
|
+
<span class="ui-card__meta">Section · 12 uses</span>
|
|
1757
|
+
<div class="ui-list__badges">
|
|
1758
|
+
<span class="ui-badge">Live</span>
|
|
1759
|
+
</div>
|
|
1760
|
+
</div>
|
|
1761
|
+
</article>
|
|
1762
|
+
<article class="ui-card ui-card--media" role="listitem">
|
|
1763
|
+
<a class="ui-card__media" href="#g1" tabindex="-1" aria-hidden="true">
|
|
1764
|
+
<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"/>
|
|
1765
|
+
</a>
|
|
1766
|
+
<div class="ui-card__menu">
|
|
1767
|
+
<details class="ui-menu ui-menu--end">
|
|
1768
|
+
<summary class="ui-btn ui-btn--icon" aria-label="More actions">⋯</summary>
|
|
1769
|
+
<div class="ui-menu__list gemboss-popover-surface">
|
|
1770
|
+
<button type="button" class="ui-menu__item">Duplicate</button>
|
|
1771
|
+
</div>
|
|
1772
|
+
</details>
|
|
1773
|
+
</div>
|
|
1774
|
+
<div class="ui-card__body">
|
|
1775
|
+
<a class="ui-card__link" href="#g1">Bundle picker, three tiers</a>
|
|
1776
|
+
<span class="ui-card__meta">Section · 12 uses</span>
|
|
1777
|
+
<div class="ui-list__badges">
|
|
1778
|
+
<span class="ui-badge">Draft</span>
|
|
1779
|
+
</div>
|
|
1780
|
+
</div>
|
|
1781
|
+
</article>
|
|
1782
|
+
<article class="ui-card ui-card--media" role="listitem">
|
|
1783
|
+
<a class="ui-card__media" href="#g2" tabindex="-1" aria-hidden="true">
|
|
1784
|
+
<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"/>
|
|
1785
|
+
</a>
|
|
1786
|
+
<div class="ui-card__menu">
|
|
1787
|
+
<details class="ui-menu ui-menu--end">
|
|
1788
|
+
<summary class="ui-btn ui-btn--icon" aria-label="More actions">⋯</summary>
|
|
1789
|
+
<div class="ui-menu__list gemboss-popover-surface">
|
|
1790
|
+
<button type="button" class="ui-menu__item">Duplicate</button>
|
|
1791
|
+
</div>
|
|
1792
|
+
</details>
|
|
1793
|
+
</div>
|
|
1794
|
+
<div class="ui-card__body">
|
|
1795
|
+
<a class="ui-card__link" href="#g2">Reviews carousel</a>
|
|
1796
|
+
<span class="ui-card__meta">Section · 12 uses</span>
|
|
1797
|
+
<div class="ui-list__badges">
|
|
1798
|
+
<span class="ui-badge">Live</span>
|
|
1799
|
+
</div>
|
|
1800
|
+
</div>
|
|
1801
|
+
</article>
|
|
1802
|
+
<article class="ui-card ui-card--media" role="listitem">
|
|
1803
|
+
<a class="ui-card__media" href="#g3" tabindex="-1" aria-hidden="true">
|
|
1804
|
+
<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"/>
|
|
1805
|
+
</a>
|
|
1806
|
+
<div class="ui-card__menu">
|
|
1807
|
+
<details class="ui-menu ui-menu--end">
|
|
1808
|
+
<summary class="ui-btn ui-btn--icon" aria-label="More actions">⋯</summary>
|
|
1809
|
+
<div class="ui-menu__list gemboss-popover-surface">
|
|
1810
|
+
<button type="button" class="ui-menu__item">Duplicate</button>
|
|
1811
|
+
</div>
|
|
1812
|
+
</details>
|
|
1813
|
+
</div>
|
|
1814
|
+
<div class="ui-card__body">
|
|
1815
|
+
<a class="ui-card__link" href="#g3">FAQ accordion</a>
|
|
1816
|
+
<span class="ui-card__meta">Section · 12 uses</span>
|
|
1817
|
+
<div class="ui-list__badges">
|
|
1818
|
+
<span class="ui-badge">Draft</span>
|
|
1819
|
+
</div>
|
|
1820
|
+
</div>
|
|
1821
|
+
</article>
|
|
1822
|
+
<article class="ui-card ui-card--media" role="listitem">
|
|
1823
|
+
<a class="ui-card__media" href="#g4" tabindex="-1" aria-hidden="true">
|
|
1824
|
+
<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"/>
|
|
1825
|
+
</a>
|
|
1826
|
+
<div class="ui-card__menu">
|
|
1827
|
+
<details class="ui-menu ui-menu--end">
|
|
1828
|
+
<summary class="ui-btn ui-btn--icon" aria-label="More actions">⋯</summary>
|
|
1829
|
+
<div class="ui-menu__list gemboss-popover-surface">
|
|
1830
|
+
<button type="button" class="ui-menu__item">Duplicate</button>
|
|
1831
|
+
</div>
|
|
1832
|
+
</details>
|
|
1833
|
+
</div>
|
|
1834
|
+
<div class="ui-card__body">
|
|
1835
|
+
<a class="ui-card__link" href="#g4">Sticky add to cart</a>
|
|
1836
|
+
<span class="ui-card__meta">Section · 12 uses</span>
|
|
1837
|
+
<div class="ui-list__badges">
|
|
1838
|
+
<span class="ui-badge">Live</span>
|
|
1839
|
+
</div>
|
|
1840
|
+
</div>
|
|
1841
|
+
</article>
|
|
1842
|
+
<article class="ui-card ui-card--media" role="listitem">
|
|
1843
|
+
<a class="ui-card__media" href="#g5" tabindex="-1" aria-hidden="true">
|
|
1844
|
+
<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"/>
|
|
1845
|
+
</a>
|
|
1846
|
+
<div class="ui-card__menu">
|
|
1847
|
+
<details class="ui-menu ui-menu--end">
|
|
1848
|
+
<summary class="ui-btn ui-btn--icon" aria-label="More actions">⋯</summary>
|
|
1849
|
+
<div class="ui-menu__list gemboss-popover-surface">
|
|
1850
|
+
<button type="button" class="ui-menu__item">Duplicate</button>
|
|
1851
|
+
</div>
|
|
1852
|
+
</details>
|
|
1853
|
+
</div>
|
|
1854
|
+
<div class="ui-card__body">
|
|
1855
|
+
<a class="ui-card__link" href="#g5">Comparison table</a>
|
|
1856
|
+
<span class="ui-card__meta">Section · 12 uses</span>
|
|
1857
|
+
<div class="ui-list__badges">
|
|
1858
|
+
<span class="ui-badge">Draft</span>
|
|
1859
|
+
</div>
|
|
1860
|
+
</div>
|
|
1861
|
+
</article>
|
|
1862
|
+
</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" 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" 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" 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">
|
|
1863
|
+
<section class="ui-board__col" aria-labelledby="ui-board-todo">
|
|
1864
|
+
<header class="ui-board__head">
|
|
1865
|
+
<span class="ui-board__dot" aria-hidden="true">
|
|
1866
|
+
</span>
|
|
1867
|
+
<span class="ui-board__name" id="ui-board-todo">To do</span>
|
|
1868
|
+
<span class="ui-board__count">14</span>
|
|
1869
|
+
</header>
|
|
1870
|
+
<ol class="ui-board__list">
|
|
1871
|
+
<li>
|
|
1872
|
+
<article class="ui-card ui-card--media">
|
|
1873
|
+
<div class="ui-card__body">
|
|
1874
|
+
<a class="ui-card__link" href="#b0">Popup variant 1</a>
|
|
1875
|
+
<span class="ui-card__meta">#120 · 2 errors</span>
|
|
1876
|
+
</div>
|
|
1877
|
+
</article>
|
|
1878
|
+
</li>
|
|
1879
|
+
<li>
|
|
1880
|
+
<article class="ui-card ui-card--media">
|
|
1881
|
+
<div class="ui-card__body">
|
|
1882
|
+
<a class="ui-card__link" href="#b1">Popup variant 2</a>
|
|
1883
|
+
<span class="ui-card__meta">#121 · 2 errors</span>
|
|
1884
|
+
</div>
|
|
1885
|
+
</article>
|
|
1886
|
+
</li>
|
|
1887
|
+
<li>
|
|
1888
|
+
<article class="ui-card ui-card--media">
|
|
1889
|
+
<div class="ui-card__body">
|
|
1890
|
+
<a class="ui-card__link" href="#b2">Popup variant 3</a>
|
|
1891
|
+
<span class="ui-card__meta">#122 · 2 errors</span>
|
|
1892
|
+
</div>
|
|
1893
|
+
</article>
|
|
1894
|
+
</li>
|
|
1895
|
+
<li>
|
|
1896
|
+
<article class="ui-card ui-card--media">
|
|
1897
|
+
<div class="ui-card__body">
|
|
1898
|
+
<a class="ui-card__link" href="#b3">Popup variant 4</a>
|
|
1899
|
+
<span class="ui-card__meta">#123 · 2 errors</span>
|
|
1900
|
+
</div>
|
|
1901
|
+
</article>
|
|
1902
|
+
</li>
|
|
1903
|
+
<li>
|
|
1904
|
+
<article class="ui-card ui-card--media">
|
|
1905
|
+
<div class="ui-card__body">
|
|
1906
|
+
<a class="ui-card__link" href="#b4">Popup variant 5</a>
|
|
1907
|
+
<span class="ui-card__meta">#124 · 2 errors</span>
|
|
1908
|
+
</div>
|
|
1909
|
+
</article>
|
|
1910
|
+
</li>
|
|
1911
|
+
<li>
|
|
1912
|
+
<article class="ui-card ui-card--media">
|
|
1913
|
+
<div class="ui-card__body">
|
|
1914
|
+
<a class="ui-card__link" href="#b5">Popup variant 6</a>
|
|
1915
|
+
<span class="ui-card__meta">#125 · 2 errors</span>
|
|
1916
|
+
</div>
|
|
1917
|
+
</article>
|
|
1918
|
+
</li>
|
|
1919
|
+
<li>
|
|
1920
|
+
<article class="ui-card ui-card--media">
|
|
1921
|
+
<div class="ui-card__body">
|
|
1922
|
+
<a class="ui-card__link" href="#b6">Popup variant 7</a>
|
|
1923
|
+
<span class="ui-card__meta">#126 · 2 errors</span>
|
|
1924
|
+
</div>
|
|
1925
|
+
</article>
|
|
1926
|
+
</li>
|
|
1927
|
+
<li>
|
|
1928
|
+
<article class="ui-card ui-card--media">
|
|
1929
|
+
<div class="ui-card__body">
|
|
1930
|
+
<a class="ui-card__link" href="#b7">Popup variant 8</a>
|
|
1931
|
+
<span class="ui-card__meta">#127 · 2 errors</span>
|
|
1932
|
+
</div>
|
|
1933
|
+
</article>
|
|
1934
|
+
</li>
|
|
1935
|
+
<li>
|
|
1936
|
+
<article class="ui-card ui-card--media">
|
|
1937
|
+
<div class="ui-card__body">
|
|
1938
|
+
<a class="ui-card__link" href="#b8">Popup variant 9</a>
|
|
1939
|
+
<span class="ui-card__meta">#128 · 2 errors</span>
|
|
1940
|
+
</div>
|
|
1941
|
+
</article>
|
|
1942
|
+
</li>
|
|
1943
|
+
<li>
|
|
1944
|
+
<article class="ui-card ui-card--media">
|
|
1945
|
+
<div class="ui-card__body">
|
|
1946
|
+
<a class="ui-card__link" href="#b9">Popup variant 10</a>
|
|
1947
|
+
<span class="ui-card__meta">#129 · 2 errors</span>
|
|
1948
|
+
</div>
|
|
1949
|
+
</article>
|
|
1950
|
+
</li>
|
|
1951
|
+
<li>
|
|
1952
|
+
<article class="ui-card ui-card--media">
|
|
1953
|
+
<div class="ui-card__body">
|
|
1954
|
+
<a class="ui-card__link" href="#b10">Popup variant 11</a>
|
|
1955
|
+
<span class="ui-card__meta">#130 · 2 errors</span>
|
|
1956
|
+
</div>
|
|
1957
|
+
</article>
|
|
1958
|
+
</li>
|
|
1959
|
+
<li>
|
|
1960
|
+
<article class="ui-card ui-card--media">
|
|
1961
|
+
<div class="ui-card__body">
|
|
1962
|
+
<a class="ui-card__link" href="#b11">Popup variant 12</a>
|
|
1963
|
+
<span class="ui-card__meta">#131 · 2 errors</span>
|
|
1964
|
+
</div>
|
|
1965
|
+
</article>
|
|
1966
|
+
</li>
|
|
1967
|
+
</ol>
|
|
1968
|
+
<details class="ui-board__more">
|
|
1969
|
+
<summary class="ui-btn ui-btn--sm">Show 2 more</summary>
|
|
1970
|
+
<ol class="ui-board__list">
|
|
1971
|
+
<li>
|
|
1972
|
+
<article class="ui-card ui-card--media">
|
|
1973
|
+
<div class="ui-card__body">
|
|
1974
|
+
<a class="ui-card__link" href="#b12">Popup variant 13</a>
|
|
1975
|
+
<span class="ui-card__meta">#132 · 2 errors</span>
|
|
1976
|
+
</div>
|
|
1977
|
+
</article>
|
|
1978
|
+
</li>
|
|
1979
|
+
<li>
|
|
1980
|
+
<article class="ui-card ui-card--media">
|
|
1981
|
+
<div class="ui-card__body">
|
|
1982
|
+
<a class="ui-card__link" href="#b13">Popup variant 14</a>
|
|
1983
|
+
<span class="ui-card__meta">#133 · 2 errors</span>
|
|
1984
|
+
</div>
|
|
1985
|
+
</article>
|
|
1986
|
+
</li>
|
|
1987
|
+
</ol>
|
|
1988
|
+
</details>
|
|
1989
|
+
</section>
|
|
1990
|
+
<section class="ui-board__col" aria-labelledby="ui-board-review">
|
|
1991
|
+
<header class="ui-board__head">
|
|
1992
|
+
<span class="ui-board__dot ui-board__dot--info" aria-hidden="true">
|
|
1993
|
+
</span>
|
|
1994
|
+
<span class="ui-board__name" id="ui-board-review">Review</span>
|
|
1995
|
+
<span class="ui-board__count">2</span>
|
|
1996
|
+
</header>
|
|
1997
|
+
<ol class="ui-board__list">
|
|
1998
|
+
<li>
|
|
1999
|
+
<article class="ui-card ui-card--media">
|
|
2000
|
+
<div class="ui-card__body">
|
|
2001
|
+
<a class="ui-card__link" href="#b40">Countdown bar, 6 frames</a>
|
|
2002
|
+
<span class="ui-card__meta">#160 · 2 errors</span>
|
|
2003
|
+
</div>
|
|
2004
|
+
</article>
|
|
2005
|
+
</li>
|
|
2006
|
+
<li>
|
|
2007
|
+
<article class="ui-card ui-card--media">
|
|
2008
|
+
<div class="ui-card__body">
|
|
2009
|
+
<a class="ui-card__link" href="#b41">Spin to win, no bait</a>
|
|
2010
|
+
<span class="ui-card__meta">#161 · 2 errors</span>
|
|
2011
|
+
</div>
|
|
2012
|
+
</article>
|
|
2013
|
+
</li>
|
|
2014
|
+
</ol>
|
|
2015
|
+
</section>
|
|
2016
|
+
<section class="ui-board__col" aria-labelledby="ui-board-done">
|
|
2017
|
+
<header class="ui-board__head">
|
|
2018
|
+
<span class="ui-board__dot ui-board__dot--success" aria-hidden="true">
|
|
2019
|
+
</span>
|
|
2020
|
+
<span class="ui-board__name" id="ui-board-done">Done</span>
|
|
2021
|
+
<span class="ui-board__count">0</span>
|
|
2022
|
+
</header>
|
|
2023
|
+
<p class="ui-board__empty">Nothing here</p>
|
|
2024
|
+
</section>
|
|
2025
|
+
</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"></head><body><div style="padding:16px"><div class="ui-board" role="region" aria-label="Element pipeline"><section class="ui-board__col" 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" 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" 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">
|
|
2026
|
+
<div class="ui-board" role="region" aria-label="Element pipeline">
|
|
2027
|
+
<section class="ui-board__col" aria-labelledby="ui-board-todo">
|
|
2028
|
+
<header class="ui-board__head">
|
|
2029
|
+
<span class="ui-board__dot" aria-hidden="true">
|
|
2030
|
+
</span>
|
|
2031
|
+
<span class="ui-board__name" id="ui-board-todo">To do</span>
|
|
2032
|
+
<span class="ui-board__count">14</span>
|
|
2033
|
+
</header>
|
|
2034
|
+
<ol class="ui-board__list">
|
|
2035
|
+
<li>
|
|
2036
|
+
<article class="ui-card ui-card--media">
|
|
2037
|
+
<div class="ui-card__body">
|
|
2038
|
+
<a class="ui-card__link" href="#b0">Popup variant 1</a>
|
|
2039
|
+
<span class="ui-card__meta">#120 · 2 errors</span>
|
|
2040
|
+
</div>
|
|
2041
|
+
</article>
|
|
2042
|
+
</li>
|
|
2043
|
+
<li>
|
|
2044
|
+
<article class="ui-card ui-card--media">
|
|
2045
|
+
<div class="ui-card__body">
|
|
2046
|
+
<a class="ui-card__link" href="#b1">Popup variant 2</a>
|
|
2047
|
+
<span class="ui-card__meta">#121 · 2 errors</span>
|
|
2048
|
+
</div>
|
|
2049
|
+
</article>
|
|
2050
|
+
</li>
|
|
2051
|
+
<li>
|
|
2052
|
+
<article class="ui-card ui-card--media">
|
|
2053
|
+
<div class="ui-card__body">
|
|
2054
|
+
<a class="ui-card__link" href="#b2">Popup variant 3</a>
|
|
2055
|
+
<span class="ui-card__meta">#122 · 2 errors</span>
|
|
2056
|
+
</div>
|
|
2057
|
+
</article>
|
|
2058
|
+
</li>
|
|
2059
|
+
<li>
|
|
2060
|
+
<article class="ui-card ui-card--media">
|
|
2061
|
+
<div class="ui-card__body">
|
|
2062
|
+
<a class="ui-card__link" href="#b3">Popup variant 4</a>
|
|
2063
|
+
<span class="ui-card__meta">#123 · 2 errors</span>
|
|
2064
|
+
</div>
|
|
2065
|
+
</article>
|
|
2066
|
+
</li>
|
|
2067
|
+
<li>
|
|
2068
|
+
<article class="ui-card ui-card--media">
|
|
2069
|
+
<div class="ui-card__body">
|
|
2070
|
+
<a class="ui-card__link" href="#b4">Popup variant 5</a>
|
|
2071
|
+
<span class="ui-card__meta">#124 · 2 errors</span>
|
|
2072
|
+
</div>
|
|
2073
|
+
</article>
|
|
2074
|
+
</li>
|
|
2075
|
+
<li>
|
|
2076
|
+
<article class="ui-card ui-card--media">
|
|
2077
|
+
<div class="ui-card__body">
|
|
2078
|
+
<a class="ui-card__link" href="#b5">Popup variant 6</a>
|
|
2079
|
+
<span class="ui-card__meta">#125 · 2 errors</span>
|
|
2080
|
+
</div>
|
|
2081
|
+
</article>
|
|
2082
|
+
</li>
|
|
2083
|
+
<li>
|
|
2084
|
+
<article class="ui-card ui-card--media">
|
|
2085
|
+
<div class="ui-card__body">
|
|
2086
|
+
<a class="ui-card__link" href="#b6">Popup variant 7</a>
|
|
2087
|
+
<span class="ui-card__meta">#126 · 2 errors</span>
|
|
2088
|
+
</div>
|
|
2089
|
+
</article>
|
|
2090
|
+
</li>
|
|
2091
|
+
<li>
|
|
2092
|
+
<article class="ui-card ui-card--media">
|
|
2093
|
+
<div class="ui-card__body">
|
|
2094
|
+
<a class="ui-card__link" href="#b7">Popup variant 8</a>
|
|
2095
|
+
<span class="ui-card__meta">#127 · 2 errors</span>
|
|
2096
|
+
</div>
|
|
2097
|
+
</article>
|
|
2098
|
+
</li>
|
|
2099
|
+
<li>
|
|
2100
|
+
<article class="ui-card ui-card--media">
|
|
2101
|
+
<div class="ui-card__body">
|
|
2102
|
+
<a class="ui-card__link" href="#b8">Popup variant 9</a>
|
|
2103
|
+
<span class="ui-card__meta">#128 · 2 errors</span>
|
|
2104
|
+
</div>
|
|
2105
|
+
</article>
|
|
2106
|
+
</li>
|
|
2107
|
+
<li>
|
|
2108
|
+
<article class="ui-card ui-card--media">
|
|
2109
|
+
<div class="ui-card__body">
|
|
2110
|
+
<a class="ui-card__link" href="#b9">Popup variant 10</a>
|
|
2111
|
+
<span class="ui-card__meta">#129 · 2 errors</span>
|
|
2112
|
+
</div>
|
|
2113
|
+
</article>
|
|
2114
|
+
</li>
|
|
2115
|
+
<li>
|
|
2116
|
+
<article class="ui-card ui-card--media">
|
|
2117
|
+
<div class="ui-card__body">
|
|
2118
|
+
<a class="ui-card__link" href="#b10">Popup variant 11</a>
|
|
2119
|
+
<span class="ui-card__meta">#130 · 2 errors</span>
|
|
2120
|
+
</div>
|
|
2121
|
+
</article>
|
|
2122
|
+
</li>
|
|
2123
|
+
<li>
|
|
2124
|
+
<article class="ui-card ui-card--media">
|
|
2125
|
+
<div class="ui-card__body">
|
|
2126
|
+
<a class="ui-card__link" href="#b11">Popup variant 12</a>
|
|
2127
|
+
<span class="ui-card__meta">#131 · 2 errors</span>
|
|
2128
|
+
</div>
|
|
2129
|
+
</article>
|
|
2130
|
+
</li>
|
|
2131
|
+
</ol>
|
|
2132
|
+
<details class="ui-board__more">
|
|
2133
|
+
<summary class="ui-btn ui-btn--sm">Show 2 more</summary>
|
|
2134
|
+
<ol class="ui-board__list">
|
|
2135
|
+
<li>
|
|
2136
|
+
<article class="ui-card ui-card--media">
|
|
2137
|
+
<div class="ui-card__body">
|
|
2138
|
+
<a class="ui-card__link" href="#b12">Popup variant 13</a>
|
|
2139
|
+
<span class="ui-card__meta">#132 · 2 errors</span>
|
|
2140
|
+
</div>
|
|
2141
|
+
</article>
|
|
2142
|
+
</li>
|
|
2143
|
+
<li>
|
|
2144
|
+
<article class="ui-card ui-card--media">
|
|
2145
|
+
<div class="ui-card__body">
|
|
2146
|
+
<a class="ui-card__link" href="#b13">Popup variant 14</a>
|
|
2147
|
+
<span class="ui-card__meta">#133 · 2 errors</span>
|
|
2148
|
+
</div>
|
|
2149
|
+
</article>
|
|
2150
|
+
</li>
|
|
2151
|
+
</ol>
|
|
2152
|
+
</details>
|
|
2153
|
+
</section>
|
|
2154
|
+
<section class="ui-board__col" aria-labelledby="ui-board-review">
|
|
2155
|
+
<header class="ui-board__head">
|
|
2156
|
+
<span class="ui-board__dot ui-board__dot--info" aria-hidden="true">
|
|
2157
|
+
</span>
|
|
2158
|
+
<span class="ui-board__name" id="ui-board-review">Review</span>
|
|
2159
|
+
<span class="ui-board__count">2</span>
|
|
2160
|
+
</header>
|
|
2161
|
+
<ol class="ui-board__list">
|
|
2162
|
+
<li>
|
|
2163
|
+
<article class="ui-card ui-card--media">
|
|
2164
|
+
<div class="ui-card__body">
|
|
2165
|
+
<a class="ui-card__link" href="#b40">Countdown bar, 6 frames</a>
|
|
2166
|
+
<span class="ui-card__meta">#160 · 2 errors</span>
|
|
2167
|
+
</div>
|
|
2168
|
+
</article>
|
|
2169
|
+
</li>
|
|
2170
|
+
<li>
|
|
2171
|
+
<article class="ui-card ui-card--media">
|
|
2172
|
+
<div class="ui-card__body">
|
|
2173
|
+
<a class="ui-card__link" href="#b41">Spin to win, no bait</a>
|
|
2174
|
+
<span class="ui-card__meta">#161 · 2 errors</span>
|
|
2175
|
+
</div>
|
|
2176
|
+
</article>
|
|
2177
|
+
</li>
|
|
2178
|
+
</ol>
|
|
2179
|
+
</section>
|
|
2180
|
+
<section class="ui-board__col" aria-labelledby="ui-board-done">
|
|
2181
|
+
<header class="ui-board__head">
|
|
2182
|
+
<span class="ui-board__dot ui-board__dot--success" aria-hidden="true">
|
|
2183
|
+
</span>
|
|
2184
|
+
<span class="ui-board__name" id="ui-board-done">Done</span>
|
|
2185
|
+
<span class="ui-board__count">0</span>
|
|
2186
|
+
</header>
|
|
2187
|
+
<p class="ui-board__empty">Nothing here</p>
|
|
2188
|
+
</section>
|
|
2189
|
+
</div>
|
|
2190
|
+
</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">
|
|
2191
|
+
<label class="gemboss-field gemboss-field--group" style="flex:1 1 220px">
|
|
2192
|
+
<input class="gemboss-field__bare" value="serum" aria-label="Search">
|
|
2193
|
+
</label>
|
|
2194
|
+
<div class="ui-chips">
|
|
2195
|
+
<button type="button" class="ui-chip" aria-pressed="true">Likely factory <span class="ui-chip__x" aria-hidden="true">✕</span>
|
|
2196
|
+
</button>
|
|
2197
|
+
<button type="button" class="ui-chip">Has WhatsApp</button>
|
|
2198
|
+
</div>
|
|
2199
|
+
<span class="ui-coll-count">0 of 4,558</span>
|
|
2200
|
+
</div>
|
|
2201
|
+
<div class="ui-table-wrap">
|
|
2202
|
+
<table class="ui-table">
|
|
2203
|
+
<caption class="ui-sr-only">Suppliers</caption>
|
|
2204
|
+
<thead>
|
|
2205
|
+
<tr>
|
|
2206
|
+
<th scope="col" aria-sort="none">
|
|
2207
|
+
<a class="ui-table__sort" href="#collections">Source</a>
|
|
2208
|
+
</th>
|
|
2209
|
+
<th scope="col" class="is-num" aria-sort="none">
|
|
2210
|
+
<a class="ui-table__sort" href="#collections">Visits</a>
|
|
2211
|
+
</th>
|
|
2212
|
+
<th scope="col" class="is-num">Orders</th>
|
|
2213
|
+
<th scope="col" class="is-num">Conversion</th>
|
|
2214
|
+
<th scope="col" class="is-num">Revenue</th>
|
|
2215
|
+
</tr>
|
|
2216
|
+
</thead>
|
|
2217
|
+
</table>
|
|
2218
|
+
<div class="ui-empty ui-empty--no-match">
|
|
2219
|
+
<p class="ui-empty__title">No suppliers match these filters</p>
|
|
2220
|
+
<p class="ui-empty__body">Try fewer filters or another word.</p>
|
|
2221
|
+
<button type="button" class="ui-btn">Clear filters</button>
|
|
2222
|
+
</div>
|
|
2223
|
+
</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">
|
|
2224
|
+
<div class="ui-empty">
|
|
2225
|
+
<p class="ui-empty__title">No candidates yet</p>
|
|
2226
|
+
<p class="ui-empty__body">Run the LinkedIn search to fill the pool.</p>
|
|
2227
|
+
<button type="button" class="ui-btn ui-btn--primary">Run search</button>
|
|
2228
|
+
</div>
|
|
2229
|
+
</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">
|
|
2230
|
+
<table class="ui-table">
|
|
2231
|
+
<caption class="ui-sr-only">Keywords</caption>
|
|
2232
|
+
<thead>
|
|
2233
|
+
<tr>
|
|
2234
|
+
<th scope="col" aria-sort="none">
|
|
2235
|
+
<a class="ui-table__sort" href="#collections">Source</a>
|
|
2236
|
+
</th>
|
|
2237
|
+
<th scope="col" class="is-num" aria-sort="none">
|
|
2238
|
+
<a class="ui-table__sort" href="#collections">Visits</a>
|
|
2239
|
+
</th>
|
|
2240
|
+
<th scope="col" class="is-num">Orders</th>
|
|
2241
|
+
<th scope="col" class="is-num">Conversion</th>
|
|
2242
|
+
<th scope="col" class="is-num">Revenue</th>
|
|
2243
|
+
</tr>
|
|
2244
|
+
</thead>
|
|
2245
|
+
</table>
|
|
2246
|
+
<div class="ui-notice ui-notice--danger ui-coll-error" role="alert">
|
|
2247
|
+
<div>
|
|
2248
|
+
<b>Couldn&#x27;t load keywords.</b> SerpAPI answered 429.<span class="ui-muted"> Showing data as of 14:05.</span>
|
|
2249
|
+
</div>
|
|
2250
|
+
<button type="button" class="ui-btn ui-btn--sm">Try again</button>
|
|
2251
|
+
</div>
|
|
2252
|
+
</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">
|
|
2253
|
+
<div class="ui-index__sortbar" role="group" aria-label="Sort">
|
|
2254
|
+
<span aria-hidden="true">Sort</span>
|
|
2255
|
+
<a class="ui-chip" href="#collections" aria-current="true">Supplier ↑</a>
|
|
2256
|
+
<a class="ui-chip" href="#collections">Score</a>
|
|
2257
|
+
</div>
|
|
2258
|
+
<div class="ui-bulkbar" hidden>
|
|
2259
|
+
<label class="ui-table__checkbox">
|
|
2260
|
+
<input type="checkbox" data-gb-select-all aria-label="Select all">
|
|
2261
|
+
</label>
|
|
2262
|
+
<span class="ui-bulkbar__count" data-gb-count="{n} selected" aria-live="polite">0 selected</span>
|
|
2263
|
+
<span class="ui-bulkbar__actions">
|
|
2264
|
+
<button type="button" class="ui-btn ui-btn--sm">Add to outreach</button>
|
|
2265
|
+
<button type="button" class="ui-btn ui-btn--sm ui-btn--critical">Archive</button>
|
|
2266
|
+
</span>
|
|
2267
|
+
</div>
|
|
2268
|
+
<div class="ui-table-wrap">
|
|
2269
|
+
<table class="ui-table ui-table--index" data-gb-sort="client">
|
|
2270
|
+
<caption class="ui-sr-only">Suppliers</caption>
|
|
2271
|
+
<thead>
|
|
2272
|
+
<tr>
|
|
2273
|
+
<th class="ui-table__check" scope="col">
|
|
2274
|
+
<label class="ui-table__checkbox">
|
|
2275
|
+
<input type="checkbox" data-gb-select-all aria-label="Select all">
|
|
2276
|
+
</label>
|
|
2277
|
+
</th>
|
|
2278
|
+
<th class="ui-table__primary" scope="col" aria-sort="ascending">
|
|
2279
|
+
<button type="button" class="ui-table__sort">Supplier</button>
|
|
2280
|
+
</th>
|
|
2281
|
+
<th scope="col">Location</th>
|
|
2282
|
+
<th scope="col">Verdict</th>
|
|
2283
|
+
<th scope="col" class="is-num" aria-sort="none">
|
|
2284
|
+
<button type="button" class="ui-table__sort">Score</button>
|
|
2285
|
+
</th>
|
|
2286
|
+
<th scope="col">Ads</th>
|
|
2287
|
+
<th class="ui-table__actions" scope="col">
|
|
2288
|
+
<span class="ui-sr-only">Actions</span>
|
|
2289
|
+
</th>
|
|
2290
|
+
</tr>
|
|
2291
|
+
</thead>
|
|
2292
|
+
<tbody>
|
|
2293
|
+
<tr data-href="#c1">
|
|
2294
|
+
<td class="ui-table__check">
|
|
2295
|
+
<label class="ui-table__checkbox">
|
|
2296
|
+
<input type="checkbox" data-gb-select value="c1" aria-label="Select Guangzhou Yanmei Cosmetics">
|
|
2297
|
+
</label>
|
|
2298
|
+
</td>
|
|
2299
|
+
<td class="ui-table__primary">
|
|
2300
|
+
<a class="ui-table__title" href="#c1" title="Guangzhou Yanmei Cosmetics">Guangzhou Yanmei Cosmetics</a>
|
|
2301
|
+
<span class="ui-sub">OEM · Skincare</span>
|
|
2302
|
+
</td>
|
|
2303
|
+
<td data-label="In">Guangzhou</td>
|
|
2304
|
+
<td>
|
|
2305
|
+
<span class="ui-tag ui-tag--success">Likely factory</span>
|
|
2306
|
+
</td>
|
|
2307
|
+
<td class="is-num" data-label="Score" data-sort-value="86">86</td>
|
|
2308
|
+
<td data-condensed="hide">TikTok</td>
|
|
2309
|
+
<td class="ui-table__actions">
|
|
2310
|
+
<span class="ui-row-actions">
|
|
2311
|
+
<button type="button" class="ui-btn ui-btn--sm">Contact</button>
|
|
2312
|
+
<details class="ui-menu ui-menu--end">
|
|
2313
|
+
<summary class="ui-btn ui-btn--icon" aria-label="More actions for Guangzhou Yanmei Cosmetics">
|
|
2314
|
+
<svg viewBox="0 0 20 20" aria-hidden="true">
|
|
2315
|
+
<circle cx="5" cy="10" r="1.5"/>
|
|
2316
|
+
<circle cx="10" cy="10" r="1.5"/>
|
|
2317
|
+
<circle cx="15" cy="10" r="1.5"/>
|
|
2318
|
+
</svg>
|
|
2319
|
+
</summary>
|
|
2320
|
+
<div class="ui-menu__list gemboss-popover-surface">
|
|
2321
|
+
<button type="button" class="ui-menu__item">Copy link</button>
|
|
2322
|
+
<button type="button" class="ui-menu__item">Archive</button>
|
|
2323
|
+
</div>
|
|
2324
|
+
</details>
|
|
2325
|
+
</span>
|
|
2326
|
+
</td>
|
|
2327
|
+
</tr>
|
|
2328
|
+
<tr data-href="#c2">
|
|
2329
|
+
<td class="ui-table__check">
|
|
2330
|
+
<label class="ui-table__checkbox">
|
|
2331
|
+
<input type="checkbox" data-gb-select value="c2" aria-label="Select Shantou Lianfeng Biotech Co., Ltd. (formerly Lianfeng Daily Chemical Factory)">
|
|
2332
|
+
</label>
|
|
2333
|
+
</td>
|
|
2334
|
+
<td class="ui-table__primary">
|
|
2335
|
+
<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>
|
|
2336
|
+
<span class="ui-sub">ODM · Haircare</span>
|
|
2337
|
+
</td>
|
|
2338
|
+
<td data-label="In">Shantou</td>
|
|
2339
|
+
<td>
|
|
2340
|
+
<span class="ui-tag ui-tag--warning">Maybe</span>
|
|
2341
|
+
</td>
|
|
2342
|
+
<td class="is-num" data-label="Score" data-sort-value="64">64</td>
|
|
2343
|
+
<td data-condensed="hide">Meta</td>
|
|
2344
|
+
<td class="ui-table__actions">
|
|
2345
|
+
<span class="ui-row-actions">
|
|
2346
|
+
<button type="button" class="ui-btn ui-btn--sm">Contact</button>
|
|
2347
|
+
<details class="ui-menu ui-menu--end">
|
|
2348
|
+
<summary class="ui-btn ui-btn--icon" aria-label="More actions for Shantou Lianfeng Biotech Co., Ltd. (formerly Lianfeng Daily Chemical Factory)">
|
|
2349
|
+
<svg viewBox="0 0 20 20" aria-hidden="true">
|
|
2350
|
+
<circle cx="5" cy="10" r="1.5"/>
|
|
2351
|
+
<circle cx="10" cy="10" r="1.5"/>
|
|
2352
|
+
<circle cx="15" cy="10" r="1.5"/>
|
|
2353
|
+
</svg>
|
|
2354
|
+
</summary>
|
|
2355
|
+
<div class="ui-menu__list gemboss-popover-surface">
|
|
2356
|
+
<button type="button" class="ui-menu__item">Copy link</button>
|
|
2357
|
+
<button type="button" class="ui-menu__item">Archive</button>
|
|
2358
|
+
</div>
|
|
2359
|
+
</details>
|
|
2360
|
+
</span>
|
|
2361
|
+
</td>
|
|
2362
|
+
</tr>
|
|
2363
|
+
</tbody>
|
|
2364
|
+
</table>
|
|
2365
|
+
</div>
|
|
2366
|
+
</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">
|
|
2367
|
+
<div class="ui-table-wrap ui-skeleton--table" aria-busy="true">
|
|
2368
|
+
<span class="ui-sr-only" role="status">Loading…</span>
|
|
2369
|
+
<table class="ui-table" aria-hidden="true">
|
|
2370
|
+
<thead>
|
|
2371
|
+
<tr>
|
|
2372
|
+
<th>Source</th>
|
|
2373
|
+
<th class="is-num">Visits</th>
|
|
2374
|
+
<th class="is-num">Orders</th>
|
|
2375
|
+
<th class="is-num">Conversion</th>
|
|
2376
|
+
<th class="is-num">Revenue</th>
|
|
2377
|
+
</tr>
|
|
2378
|
+
</thead>
|
|
2379
|
+
<tbody>
|
|
2380
|
+
<tr>
|
|
2381
|
+
<td>
|
|
2382
|
+
<span class="ui-skeleton__line">
|
|
2383
|
+
</span>
|
|
2384
|
+
</td>
|
|
2385
|
+
<td>
|
|
2386
|
+
<span class="ui-skeleton__line">
|
|
2387
|
+
</span>
|
|
2388
|
+
</td>
|
|
2389
|
+
<td>
|
|
2390
|
+
<span class="ui-skeleton__line">
|
|
2391
|
+
</span>
|
|
2392
|
+
</td>
|
|
2393
|
+
<td>
|
|
2394
|
+
<span class="ui-skeleton__line">
|
|
2395
|
+
</span>
|
|
2396
|
+
</td>
|
|
2397
|
+
<td>
|
|
2398
|
+
<span class="ui-skeleton__line">
|
|
2399
|
+
</span>
|
|
2400
|
+
</td>
|
|
2401
|
+
</tr>
|
|
2402
|
+
<tr>
|
|
2403
|
+
<td>
|
|
2404
|
+
<span class="ui-skeleton__line">
|
|
2405
|
+
</span>
|
|
2406
|
+
</td>
|
|
2407
|
+
<td>
|
|
2408
|
+
<span class="ui-skeleton__line">
|
|
2409
|
+
</span>
|
|
2410
|
+
</td>
|
|
2411
|
+
<td>
|
|
2412
|
+
<span class="ui-skeleton__line">
|
|
2413
|
+
</span>
|
|
2414
|
+
</td>
|
|
2415
|
+
<td>
|
|
2416
|
+
<span class="ui-skeleton__line">
|
|
2417
|
+
</span>
|
|
2418
|
+
</td>
|
|
2419
|
+
<td>
|
|
2420
|
+
<span class="ui-skeleton__line">
|
|
2421
|
+
</span>
|
|
2422
|
+
</td>
|
|
2423
|
+
</tr>
|
|
2424
|
+
<tr>
|
|
2425
|
+
<td>
|
|
2426
|
+
<span class="ui-skeleton__line">
|
|
2427
|
+
</span>
|
|
2428
|
+
</td>
|
|
2429
|
+
<td>
|
|
2430
|
+
<span class="ui-skeleton__line">
|
|
2431
|
+
</span>
|
|
2432
|
+
</td>
|
|
2433
|
+
<td>
|
|
2434
|
+
<span class="ui-skeleton__line">
|
|
2435
|
+
</span>
|
|
2436
|
+
</td>
|
|
2437
|
+
<td>
|
|
2438
|
+
<span class="ui-skeleton__line">
|
|
2439
|
+
</span>
|
|
2440
|
+
</td>
|
|
2441
|
+
<td>
|
|
2442
|
+
<span class="ui-skeleton__line">
|
|
2443
|
+
</span>
|
|
2444
|
+
</td>
|
|
2445
|
+
</tr>
|
|
2446
|
+
</tbody>
|
|
2447
|
+
</table>
|
|
2448
|
+
</div>
|
|
2449
|
+
<div class="ui-table-wrap ui-skeleton--table ui-index" aria-busy="true">
|
|
2450
|
+
<span class="ui-sr-only" role="status">Loading…</span>
|
|
2451
|
+
<table class="ui-table ui-table--index" aria-hidden="true">
|
|
2452
|
+
<thead>
|
|
2453
|
+
<tr>
|
|
2454
|
+
<th>Supplier</th>
|
|
2455
|
+
<th>Location</th>
|
|
2456
|
+
<th>Verdict</th>
|
|
2457
|
+
<th class="is-num">Score</th>
|
|
2458
|
+
<th>Ads</th>
|
|
2459
|
+
</tr>
|
|
2460
|
+
</thead>
|
|
2461
|
+
<tbody>
|
|
2462
|
+
<tr>
|
|
2463
|
+
<td>
|
|
2464
|
+
<span class="ui-skeleton__line">
|
|
2465
|
+
</span>
|
|
2466
|
+
</td>
|
|
2467
|
+
<td>
|
|
2468
|
+
<span class="ui-skeleton__line">
|
|
2469
|
+
</span>
|
|
2470
|
+
</td>
|
|
2471
|
+
<td>
|
|
2472
|
+
<span class="ui-skeleton__line">
|
|
2473
|
+
</span>
|
|
2474
|
+
</td>
|
|
2475
|
+
<td>
|
|
2476
|
+
<span class="ui-skeleton__line">
|
|
2477
|
+
</span>
|
|
2478
|
+
</td>
|
|
2479
|
+
<td>
|
|
2480
|
+
<span class="ui-skeleton__line">
|
|
2481
|
+
</span>
|
|
2482
|
+
</td>
|
|
2483
|
+
</tr>
|
|
2484
|
+
<tr>
|
|
2485
|
+
<td>
|
|
2486
|
+
<span class="ui-skeleton__line">
|
|
2487
|
+
</span>
|
|
2488
|
+
</td>
|
|
2489
|
+
<td>
|
|
2490
|
+
<span class="ui-skeleton__line">
|
|
2491
|
+
</span>
|
|
2492
|
+
</td>
|
|
2493
|
+
<td>
|
|
2494
|
+
<span class="ui-skeleton__line">
|
|
2495
|
+
</span>
|
|
2496
|
+
</td>
|
|
2497
|
+
<td>
|
|
2498
|
+
<span class="ui-skeleton__line">
|
|
2499
|
+
</span>
|
|
2500
|
+
</td>
|
|
2501
|
+
<td>
|
|
2502
|
+
<span class="ui-skeleton__line">
|
|
2503
|
+
</span>
|
|
2504
|
+
</td>
|
|
2505
|
+
</tr>
|
|
2506
|
+
<tr>
|
|
2507
|
+
<td>
|
|
2508
|
+
<span class="ui-skeleton__line">
|
|
2509
|
+
</span>
|
|
2510
|
+
</td>
|
|
2511
|
+
<td>
|
|
2512
|
+
<span class="ui-skeleton__line">
|
|
2513
|
+
</span>
|
|
2514
|
+
</td>
|
|
2515
|
+
<td>
|
|
2516
|
+
<span class="ui-skeleton__line">
|
|
2517
|
+
</span>
|
|
2518
|
+
</td>
|
|
2519
|
+
<td>
|
|
2520
|
+
<span class="ui-skeleton__line">
|
|
2521
|
+
</span>
|
|
2522
|
+
</td>
|
|
2523
|
+
<td>
|
|
2524
|
+
<span class="ui-skeleton__line">
|
|
2525
|
+
</span>
|
|
2526
|
+
</td>
|
|
2527
|
+
</tr>
|
|
2528
|
+
</tbody>
|
|
2529
|
+
</table>
|
|
2530
|
+
</div>
|
|
2531
|
+
<div aria-busy="true">
|
|
2532
|
+
<span class="ui-sr-only" role="status">Loading…</span>
|
|
2533
|
+
<ul class="ui-list ui-skeleton--list" aria-hidden="true">
|
|
2534
|
+
<li class="ui-list__item">
|
|
2535
|
+
<span class="ui-skeleton__block">
|
|
2536
|
+
</span>
|
|
2537
|
+
<span class="ui-list__body">
|
|
2538
|
+
<span class="ui-skeleton__line">
|
|
2539
|
+
</span>
|
|
2540
|
+
<span class="ui-skeleton__line">
|
|
2541
|
+
</span>
|
|
2542
|
+
</span>
|
|
2543
|
+
</li>
|
|
2544
|
+
<li class="ui-list__item">
|
|
2545
|
+
<span class="ui-skeleton__block">
|
|
2546
|
+
</span>
|
|
2547
|
+
<span class="ui-list__body">
|
|
2548
|
+
<span class="ui-skeleton__line">
|
|
2549
|
+
</span>
|
|
2550
|
+
<span class="ui-skeleton__line">
|
|
2551
|
+
</span>
|
|
2552
|
+
</span>
|
|
2553
|
+
</li>
|
|
2554
|
+
<li class="ui-list__item">
|
|
2555
|
+
<span class="ui-skeleton__block">
|
|
2556
|
+
</span>
|
|
2557
|
+
<span class="ui-list__body">
|
|
2558
|
+
<span class="ui-skeleton__line">
|
|
2559
|
+
</span>
|
|
2560
|
+
<span class="ui-skeleton__line">
|
|
2561
|
+
</span>
|
|
2562
|
+
</span>
|
|
2563
|
+
</li>
|
|
2564
|
+
</ul>
|
|
2565
|
+
</div>
|
|
2566
|
+
<div aria-busy="true">
|
|
2567
|
+
<span class="ui-sr-only" role="status">Loading…</span>
|
|
2568
|
+
<ul class="ui-list ui-skeleton--list" aria-hidden="true">
|
|
2569
|
+
<li class="ui-list__item">
|
|
2570
|
+
<span class="ui-skeleton__block ui-skeleton__block--round">
|
|
2571
|
+
</span>
|
|
2572
|
+
<span class="ui-list__body">
|
|
2573
|
+
<span class="ui-skeleton__line">
|
|
2574
|
+
</span>
|
|
2575
|
+
<span class="ui-skeleton__line">
|
|
2576
|
+
</span>
|
|
2577
|
+
</span>
|
|
2578
|
+
</li>
|
|
2579
|
+
<li class="ui-list__item">
|
|
2580
|
+
<span class="ui-skeleton__block ui-skeleton__block--round">
|
|
2581
|
+
</span>
|
|
2582
|
+
<span class="ui-list__body">
|
|
2583
|
+
<span class="ui-skeleton__line">
|
|
2584
|
+
</span>
|
|
2585
|
+
<span class="ui-skeleton__line">
|
|
2586
|
+
</span>
|
|
2587
|
+
</span>
|
|
2588
|
+
</li>
|
|
2589
|
+
<li class="ui-list__item">
|
|
2590
|
+
<span class="ui-skeleton__block ui-skeleton__block--round">
|
|
2591
|
+
</span>
|
|
2592
|
+
<span class="ui-list__body">
|
|
2593
|
+
<span class="ui-skeleton__line">
|
|
2594
|
+
</span>
|
|
2595
|
+
<span class="ui-skeleton__line">
|
|
2596
|
+
</span>
|
|
2597
|
+
</span>
|
|
2598
|
+
</li>
|
|
2599
|
+
</ul>
|
|
2600
|
+
</div>
|
|
2601
|
+
<div aria-busy="true">
|
|
2602
|
+
<span class="ui-sr-only" role="status">Loading…</span>
|
|
2603
|
+
<ul class="ui-list ui-list--compact ui-skeleton--compact" aria-hidden="true">
|
|
2604
|
+
<li class="ui-list__item">
|
|
2605
|
+
<span class="ui-list__row">
|
|
2606
|
+
<span class="ui-skeleton__block" style="width:16px;height:16px">
|
|
2607
|
+
</span>
|
|
2608
|
+
<span class="ui-skeleton__line">
|
|
2609
|
+
</span>
|
|
2610
|
+
</span>
|
|
2611
|
+
</li>
|
|
2612
|
+
<li class="ui-list__item">
|
|
2613
|
+
<span class="ui-list__row">
|
|
2614
|
+
<span class="ui-skeleton__block" style="width:16px;height:16px">
|
|
2615
|
+
</span>
|
|
2616
|
+
<span class="ui-skeleton__line">
|
|
2617
|
+
</span>
|
|
2618
|
+
</span>
|
|
2619
|
+
</li>
|
|
2620
|
+
<li class="ui-list__item">
|
|
2621
|
+
<span class="ui-list__row">
|
|
2622
|
+
<span class="ui-skeleton__block" style="width:16px;height:16px">
|
|
2623
|
+
</span>
|
|
2624
|
+
<span class="ui-skeleton__line">
|
|
2625
|
+
</span>
|
|
2626
|
+
</span>
|
|
2627
|
+
</li>
|
|
2628
|
+
</ul>
|
|
2629
|
+
</div>
|
|
2630
|
+
<div aria-busy="true">
|
|
2631
|
+
<span class="ui-sr-only" role="status">Loading…</span>
|
|
2632
|
+
<div class="ui-cardgrid ui-skeleton--grid" aria-hidden="true">
|
|
2633
|
+
<div class="ui-card ui-card--media">
|
|
2634
|
+
<span class="ui-card__media">
|
|
2635
|
+
</span>
|
|
2636
|
+
<span class="ui-card__body">
|
|
2637
|
+
<span class="ui-skeleton__line">
|
|
2638
|
+
</span>
|
|
2639
|
+
<span class="ui-skeleton__line">
|
|
2640
|
+
</span>
|
|
2641
|
+
</span>
|
|
2642
|
+
</div>
|
|
2643
|
+
<div class="ui-card ui-card--media">
|
|
2644
|
+
<span class="ui-card__media">
|
|
2645
|
+
</span>
|
|
2646
|
+
<span class="ui-card__body">
|
|
2647
|
+
<span class="ui-skeleton__line">
|
|
2648
|
+
</span>
|
|
2649
|
+
<span class="ui-skeleton__line">
|
|
2650
|
+
</span>
|
|
2651
|
+
</span>
|
|
2652
|
+
</div>
|
|
2653
|
+
<div class="ui-card ui-card--media">
|
|
2654
|
+
<span class="ui-card__media">
|
|
2655
|
+
</span>
|
|
2656
|
+
<span class="ui-card__body">
|
|
2657
|
+
<span class="ui-skeleton__line">
|
|
2658
|
+
</span>
|
|
2659
|
+
<span class="ui-skeleton__line">
|
|
2660
|
+
</span>
|
|
2661
|
+
</span>
|
|
2662
|
+
</div>
|
|
2663
|
+
</div>
|
|
2664
|
+
</div>
|
|
2665
|
+
<div aria-busy="true">
|
|
2666
|
+
<span class="ui-sr-only" role="status">Loading…</span>
|
|
2667
|
+
<div class="ui-board ui-skeleton--board" aria-hidden="true">
|
|
2668
|
+
<div class="ui-board__col">
|
|
2669
|
+
<span class="ui-board__head">
|
|
2670
|
+
<span class="ui-skeleton__line" style="width:40%">
|
|
2671
|
+
</span>
|
|
2672
|
+
</span>
|
|
2673
|
+
<ol class="ui-board__list">
|
|
2674
|
+
<li>
|
|
2675
|
+
</li>
|
|
2676
|
+
<li>
|
|
2677
|
+
</li>
|
|
2678
|
+
<li>
|
|
2679
|
+
</li>
|
|
2680
|
+
</ol>
|
|
2681
|
+
</div>
|
|
2682
|
+
<div class="ui-board__col">
|
|
2683
|
+
<span class="ui-board__head">
|
|
2684
|
+
<span class="ui-skeleton__line" style="width:40%">
|
|
2685
|
+
</span>
|
|
2686
|
+
</span>
|
|
2687
|
+
<ol class="ui-board__list">
|
|
2688
|
+
<li>
|
|
2689
|
+
</li>
|
|
2690
|
+
<li>
|
|
2691
|
+
</li>
|
|
2692
|
+
<li>
|
|
2693
|
+
</li>
|
|
2694
|
+
</ol>
|
|
2695
|
+
</div>
|
|
2696
|
+
<div class="ui-board__col">
|
|
2697
|
+
<span class="ui-board__head">
|
|
2698
|
+
<span class="ui-skeleton__line" style="width:40%">
|
|
2699
|
+
</span>
|
|
2700
|
+
</span>
|
|
2701
|
+
<ol class="ui-board__list">
|
|
2702
|
+
<li>
|
|
2703
|
+
</li>
|
|
2704
|
+
<li>
|
|
2705
|
+
</li>
|
|
2706
|
+
<li>
|
|
2707
|
+
</li>
|
|
2708
|
+
</ol>
|
|
2709
|
+
</div>
|
|
2710
|
+
</div>
|
|
2711
|
+
</div>
|
|
2712
|
+
</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">
|
|
2713
|
+
<table class="ui-table">
|
|
2714
|
+
<caption class="ui-sr-only">Long content</caption>
|
|
2715
|
+
<thead>
|
|
2716
|
+
<tr>
|
|
2717
|
+
<th scope="col">Page</th>
|
|
2718
|
+
<th scope="col">Research note</th>
|
|
2719
|
+
<th scope="col" class="is-num">Views</th>
|
|
2720
|
+
</tr>
|
|
2721
|
+
</thead>
|
|
2722
|
+
<tbody>
|
|
2723
|
+
<tr>
|
|
2724
|
+
<th scope="row" class="ui-table__rowhead">
|
|
2725
|
+
<span class="ui-trunc" style="--ui-trunc:260px">/products/the-extremely-long-handle-of-a-limited-edition-holiday-bundle-with-three-serums</span>
|
|
2726
|
+
</th>
|
|
2727
|
+
<td>
|
|
2728
|
+
<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>
|
|
2729
|
+
</td>
|
|
2730
|
+
<td class="is-num">1,284</td>
|
|
2731
|
+
</tr>
|
|
2732
|
+
</tbody>
|
|
2733
|
+
</table>
|
|
2734
|
+
</div></code></pre></details></figure></section>
|
|
594
2735
|
<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">
|
|
595
2736
|
<div style="padding:12px;background:var(--gemboss-surface)">Danh sách</div>
|
|
596
2737
|
<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">
|
|
@@ -620,7 +2761,7 @@ body{margin:0;background:var(--gemboss-app-bg,#f1f1f1);color:var(--gemboss-text)
|
|
|
620
2761
|
<button type="button" class="ui-btn ui-btn--primary">Xoá</button>
|
|
621
2762
|
</div>
|
|
622
2763
|
</div></code></pre></details></figure></section>
|
|
623
|
-
<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">
|
|
2764
|
+
<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"></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">
|
|
624
2765
|
<header class="gemboss-platform-topbar">
|
|
625
2766
|
<div class="gemboss-topbar-start">
|
|
626
2767
|
<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:">
|
|
@@ -752,7 +2893,7 @@ body{margin:0;background:var(--gemboss-app-bg,#f1f1f1);color:var(--gemboss-text)
|
|
|
752
2893
|
</div>
|
|
753
2894
|
</main>
|
|
754
2895
|
</div></code></pre></details></figure></section>
|
|
755
|
-
<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">
|
|
2896
|
+
<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"></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">
|
|
756
2897
|
<header class="gemboss-platform-topbar">
|
|
757
2898
|
<div class="gemboss-topbar-start">
|
|
758
2899
|
<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:">
|
|
@@ -872,7 +3013,7 @@ body{margin:0;background:var(--gemboss-app-bg,#f1f1f1);color:var(--gemboss-text)
|
|
|
872
3013
|
</span>
|
|
873
3014
|
</div>
|
|
874
3015
|
</div></code></pre></details></figure></section>
|
|
875
|
-
<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">
|
|
3016
|
+
<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"></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">
|
|
876
3017
|
<header class="gemboss-platform-topbar">
|
|
877
3018
|
<div class="gemboss-topbar-start">
|
|
878
3019
|
<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:">
|
|
@@ -966,7 +3107,7 @@ body{margin:0;background:var(--gemboss-app-bg,#f1f1f1);color:var(--gemboss-text)
|
|
|
966
3107
|
</div>
|
|
967
3108
|
</div>
|
|
968
3109
|
</main>
|
|
969
|
-
</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">
|
|
3110
|
+
</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"></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">
|
|
970
3111
|
<header class="gemboss-platform-topbar">
|
|
971
3112
|
<div class="gemboss-topbar-start">
|
|
972
3113
|
<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:">
|
|
@@ -1063,7 +3204,7 @@ body{margin:0;background:var(--gemboss-app-bg,#f1f1f1);color:var(--gemboss-text)
|
|
|
1063
3204
|
</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">
|
|
1064
3205
|
<div class="ui-card">Một mục trong feed, cột 720px.</div>
|
|
1065
3206
|
</div></code></pre></details></figure></section>
|
|
1066
|
-
<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">
|
|
3207
|
+
<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"></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">
|
|
1067
3208
|
<header class="gemboss-platform-topbar">
|
|
1068
3209
|
<div class="gemboss-topbar-start">
|
|
1069
3210
|
<a class="gb-brand" href="/" aria-label="GemFeedback home">
|
|
@@ -1219,7 +3360,7 @@ body{margin:0;background:var(--gemboss-app-bg,#f1f1f1);color:var(--gemboss-text)
|
|
|
1219
3360
|
</section>
|
|
1220
3361
|
</div>
|
|
1221
3362
|
</div>
|
|
1222
|
-
</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">
|
|
3363
|
+
</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"></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">
|
|
1223
3364
|
<header class="gemboss-platform-topbar">
|
|
1224
3365
|
<div class="gemboss-topbar-start">
|
|
1225
3366
|
<a class="gb-brand" href="/" aria-label="GemFeedback home">
|
|
@@ -1479,7 +3620,7 @@ body{margin:0;background:var(--gemboss-app-bg,#f1f1f1);color:var(--gemboss-text)
|
|
|
1479
3620
|
</a>
|
|
1480
3621
|
</li>
|
|
1481
3622
|
</ol></code></pre></details></figure></section>
|
|
1482
|
-
<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">
|
|
3623
|
+
<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"></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">
|
|
1483
3624
|
<div class="gb-auth-split">
|
|
1484
3625
|
<div class="gb-auth-stage">
|
|
1485
3626
|
<div class="gb-auth-card">
|
|
@@ -1577,7 +3718,7 @@ body{margin:0;background:var(--gemboss-app-bg,#f1f1f1);color:var(--gemboss-text)
|
|
|
1577
3718
|
<button type="submit" aria-label="Gửi">↑</button>
|
|
1578
3719
|
</form>
|
|
1579
3720
|
</div></code></pre></details></figure></section>
|
|
1580
|
-
<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">
|
|
3721
|
+
<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">27/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">
|
|
1581
3722
|
<aside class="gemboss-assistant-rail">
|
|
1582
3723
|
<div class="gemboss-assistant-rail-top">
|
|
1583
3724
|
<button type="button" class="gemboss-assistant-newchat" title="Phiên mới">
|
|
@@ -1626,7 +3767,7 @@ body{margin:0;background:var(--gemboss-app-bg,#f1f1f1);color:var(--gemboss-text)
|
|
|
1626
3767
|
</svg>
|
|
1627
3768
|
<span class="gemboss-assistant-thread-title">So sánh advertorial với listicle</span>
|
|
1628
3769
|
</span>
|
|
1629
|
-
<span class="gemboss-assistant-thread-meta">
|
|
3770
|
+
<span class="gemboss-assistant-thread-meta">27/8/2026</span>
|
|
1630
3771
|
</button>
|
|
1631
3772
|
<div class="gemboss-assistant-thread-actions">
|
|
1632
3773
|
<button type="button" class="gemboss-assistant-thread-act" aria-label="Options">
|