ZUI 3 Documentation

ZUI 3 is an open-source UI component library designed for maximum customization without dependency on any specific JS framework. It can be used in any web application using native methods.

Key Features

• Unified UI Configuration: Global UI configuration implemented via CSS variables, providing a consistent style foundation and supporting dark mode for easy theme customization.
• Rich CSS Utility Classes: Provides extensive CSS utility classes based on Tailwind CSS, including semantic appearance utilities for layout, typography, animations, and appearance definitions.
• Practical CSS Components: A large collection of CSS components that provide basic interface functionality (e.g., buttons, forms, navigation, cards, tables) without requiring JavaScript.
• Powerful JS Components: Advanced components implemented via JS, such as dropdown menus, tooltips, dialogs, data tables, and file uploads.
• Flexible Usage: Framework-agnostic. CSS utility classes are ready to use out of the box. JS components support native calls. Supports ESM imports, direct browser references (JS and CSS), or custom bundled versions.

The ZUI Data Table component provides a high-performance grid with the following capabilities:

Core Features

• Structure: Adaptive width/height, fixed headers, and virtual scrolling for large datasets.
• Rows: Customizable row height, hover effects, and clickable row URLs.
• Columns: Column width settings (fixed and adaptive), hover effects, and left/right column pinning.
• Cells: Custom rendering interfaces and type-based cell rendering.
• States: Loading states and table footers.

Advanced Features

• Selection: Checkbox selection, row clicking, drag-to-select, and keyboard range selection.
• Hierarchy: Multi-level structures with support for collapsing/expanding and asynchronous data loading.
• Interactivity: Column resizing via drag-and-drop, direct cell editing, and cell calculation.
• Data Management: Sorting, asynchronous loading, and footer statistical updates.
• Cell Types: Support for multi-selection, drag-selection, and spanning cells across multiple columns.

ZUI 3 is an open-source UI component library that provides a rich set of practical components with flexible customization. It is framework-agnostic and can be used natively in any Web application without dependency on specific JavaScript frameworks.

Key features include:

• Unified UI Configuration: Global UI configuration implemented via CSS variables, supporting dark mode and easy theme customization.
• Rich CSS Utility Classes: Built on Tailwind CSS, providing semantic utility classes for layout, typography, animations, and appearance.
• CSS Components: Many components (buttons, forms, navigation, cards, tables) work with CSS alone without requiring JavaScript.
• Powerful JS Components: Advanced functionality (dropdowns, tooltips, dialogs, data tables, file uploads) is provided via JavaScript.
• Flexible Usage: Supports ESM imports, direct browser references (JS/CSS), and custom bundled versions.

The ZUI 3 documentation website is organized into a two-level hierarchy: top-level navigation and left-side vertical navigation groups. The structure is categorized as follows:

• Guide (guide): Includes Getting Started (start), Design Concepts (concepts), Configuration (config), Customization (customize), Contributing (contributes), and About (about).
• CSS Utilities (utilities): Covers Style (style), Backgrounds (backgrounds), Borders (borders), Layout (layout), Flex (flex), Spacing (spacing), Sizing (sizing), Typography (typography), Effects (effects), and Interactivity (interactivity).
• Components (lib): Covers Layout (layout), Content (content), Icons (icons), Forms (forms), Components (components), and JS Helpers (helpers).
• Themes (themes): Covers Official Themes (official), Community Themes (community), and Theme Creation (create).

ZUI 3 relies on several open-source libraries for its core functionality. Understanding these dependencies can help you understand the underlying technologies used for UI components, styling, and DOM manipulation.

Runtime Dependencies

These libraries are included in the ZUI final products:

For detailed license information, refer to the /licenses directory in the repository.

Advanced appearances use custom styling for a consistent cross-browser experience. Use .checkbox-primary for checkboxes and .radio-primary for radio buttons.

Customization

• Color: Use the CSS variable --checkbox-color to set a custom color.
• Indeterminate State: Add the .indeterminate class to the container for checkboxes.
• Programmatic Control: If you do not include an <input> element, you must manually toggle the .checked class on the container to change the state.

<!-- Primary Checkbox with custom color and indeterminate state -->
<div class="checkbox-primary" style="--checkbox-color: var(--color-success-500)">
  <input type="checkbox" checked="checked" id="primaryCheckbox5">
  <label for="primaryCheckbox5">自定义颜色</label>
</div>

<div class="checkbox-primary indeterminate">
  <input type="checkbox" id="primaryCheckbox6">
  <label for="primaryCheckbox6">Indeterminate</label>
</div>

<!-- Programmatic Checkbox (No input element) -->
<div class="checkbox-primary checked">
  <label>选中</label>
</div>

<!-- Primary Radio Button -->
<div class="radio-primary">
  <input type="radio" name="primaryRadioGroup1" id="primaryradio1">
  <label for="primaryradio1">选项一</label>
</div>