zWebUI
v0.1.0 中 Dark

Data Display

Table

Data-driven table with sortable columns, striped/bordered variants, two sizes, loading and empty states.

Toggle Striped Toggle Bordered Toggle Size Show Code 
// Set data via JavaScript properties
const table = document.querySelector('z-table');
table.columns = [
  { key: 'name', header: 'Name', sortable: true },
  { key: 'role', header: 'Role', align: 'center' },
  { key: 'ops', header: 'Actions', align: 'center',
    render: (v, row) => `<span class="z-table__btn-group">
      <z-button size="sm" variant="outline" data-action="edit" data-id="${row.name}">Edit</z-button>
      <z-button size="sm" variant="danger" data-action="delete" data-id="${row.name}">Delete</z-button>
    </span>` },
];
table.data = [
  { name: 'Alice', role: 'Admin' },
  { name: 'Bob', role: 'Editor' },
];

// Buttons emit z-click through the shadow DOM
table.addEventListener('z-click', (e) => {
  const { action, id } = e.target.dataset;
  console.log(`${action}: ${id}`);
});

Badge

Small inline label for statuses, categories, or counts. 5 variants, 2 sizes.

Default Primary Success Warning Danger
Small Small Small
Show Code 
<z-badge variant="primary">Primary</z-badge>
<z-badge variant="success">Success</z-badge>
<z-badge size="sm">Small</z-badge>

Card

Content container with optional header, footer, cover image, border, and shadow slots.

Card Title

This is the card body content.

Footer actions
Bordered Card

A card with a visible border.
Shadow Card

A card with shadow elevation.
Show Code 
<z-card>
  <div slot="header">Title</div>
  <p>Body</p>
  <div slot="footer">Footer</div>
</z-card>

Tag

Label with optional close button. 5 color variants, 2 sizes, disabled state.

Default Primary Success Warning Danger
Small Small Closable Disabled
Show Code 
<z-tag variant="primary">Primary</z-tag>
<z-tag closable>Closable</z-tag>

Avatar

User avatar with image, initials fallback, and custom fallback slot. 5 sizes, circle/square shapes.

Show Code 
<z-avatar initials="JD"></z-avatar>
<z-avatar src="..."></z-avatar>

Divider

Visual separator with optional label text. Horizontal and vertical orientations.

Content above

Content below

OR

More content

Left Right
Show Code 
<z-divider></z-divider>
<z-divider>OR</z-divider>
<z-divider orientation="vertical"></z-divider>

Tree 树形控件

层级树形视图，适用于组织架构、文件浏览器、嵌套菜单等场景。支持展开/收起、单选/多选、级联选择、键盘导航。

多选模式 级联选择 Show Code 
<z-tree>
  <z-tree-node label="技术部" has-children open>
    <z-tree-node slot="children" label="前端组" level="1" has-children>
      <z-tree-node slot="children" label="Web 应用" level="2"></z-tree-node>
    </z-tree-node>
  </z-tree-node>
</z-tree>