zWebUI
v0.1.0 中 Dark

Navigation

Tabs

Three visual variants: underline (with animated indicator), pills, and cards. Keyboard accessible.

Account settings content. Password change form. Notification preferences. Billing (disabled).
Show Code 
<z-tabs variant="underline">
  <z-tab-panel label="Account">...</z-tab-panel>
  <z-tab-panel label="Password">...</z-tab-panel>
</z-tabs>

Pagination

Page navigation with smart ellipsis, sibling count control, and keyboard navigation.

Show Code 
<!-- 总记录数驱动页数；show-info 信息区；show-page-size 页容量选择器 -->
<z-pagination
  current="1"
  total-records="256"
  page-size="10"
  show-info info-template="{start}-{end} of {total}"
  show-page-size>
</z-pagination>

// pageSizes 为 property（默认 [10,20,50,100]），可覆盖
pag.pageSizes = [5, 10, 25]

Accordion

Expandable sections with single or multiple open modes. Composable accordion-item children with title slot and smooth animation.

zWebUI is a lightweight, framework-agnostic Web Component UI library built with native Custom Elements. Import the ESM module or individual components. No bundler config required. Yes, React wrappers are provided for all components.
Show Code 
<z-accordion bordered>
  <z-accordion-item title="Section 1" open>
    Content...
  </z-accordion-item>
</z-accordion>