zWebUI
v0.1.0 中 Dark

Feedback

Toast

Imperative notification system. Call ZToast.show() from anywhere. 4 types, auto-dismiss, hover-to-pause.

Success Error Warning Info Dismiss All
Show Code 
// Import the static API
import { ZToast } from 'zwebui/components/toast';

// Convenience methods
ZToast.success('Saved!');
ZToast.error('Failed!', 5000);
ZToast.warning('Careful!');
ZToast.info('New version available');

// Full options
ZToast.show({
  message: 'Custom toast',
  type: 'success',
  duration: 3000,
  placement: 'top-right',
});
ZToast.dismissAll();

Alert

Contextual banner for info, success, warning, and error messages. Optional title, close button, and custom icon slot.

This is an info alert with a title and close button. Operation completed successfully. This action may have unintended side effects. Something went wrong. Please try again.
Show Code 
<z-alert variant="info" title="Title" closable>
  Message text
</z-alert>

Spinner

Loading indicator with three animation variants (border, grow, dots) and three sizes.

Show Code 
<z-spinner size="md"></z-spinner>
<z-spinner variant="grow"></z-spinner>
<z-spinner variant="dots"></z-spinner>

Skeleton

Loading placeholder with text, circle, and rectangle variants. Optional shimmer animation.

Show Code 
<z-skeleton variant="text"></z-skeleton>
<z-skeleton variant="circle" width="48px"></z-skeleton>
<z-skeleton variant="rect" height="120px"></z-skeleton>

Progress

Progress bar with 4 color variants, 2 sizes, striped/animated modes, and optional percentage label.

Simulate Show Code 
<z-progress value="60"></z-progress>
<z-progress value="45" striped animated></z-progress>