Buttons

多种样式与尺寸的按钮，适用于不同层级操作。

Variants
<button class="au-btn">Primary</button>
<button class="au-btn au-btn-secondary">Secondary</button>
<button class="au-btn au-btn-outline">Outline</button>
<button class="au-btn au-btn-ghost">Ghost</button>
<button class="au-btn au-btn-glass">Glass</button>
<button class="au-btn au-btn-danger">Danger</button>
Sizes
<button class="au-btn au-btn-xs">XS</button>
<button class="au-btn au-btn-sm">SM</button>
<button class="au-btn au-btn-lg">LG</button>
<button class="au-btn au-btn-xl">XL</button>

Cards

信息容器，支持实色、玻璃态与交互效果。

Card Styles

Default Card

标准卡片样式，带有阴影和悬停效果。

Glass Card

玻璃态效果，适用于特殊主题。

Interactive

可点击卡片，带有悬浮位移动画。

<div class="au-card">...</div>
<div class="au-card au-card-glass">...</div>
<div class="au-card au-card-interactive">...</div>

Forms

完整的表单组件集合。

Input & Textarea
<input type="text" class="au-input" placeholder="...">
<input class="au-input au-input-error">
<textarea class="au-input au-textarea"></textarea>
Select
<select class="au-input au-select">
  <option>...</option>
</select>
Checkbox & Radio
<label class="au-checkbox">
  <input type="checkbox">
  <span class="au-checkbox-box"></span>
  Label
</label>
Switch
<label class="au-switch">
  <input type="checkbox">
  <span class="au-switch-track"><span class="au-switch-thumb"></span></span>
</label>

Feedback

向用户传达状态与结果。

Alert
This is an informational message.
Operation completed successfully.
Please review your input before continuing.
An error occurred while processing your request.
<div class="au-alert au-alert-info">...</div>
<div class="au-alert au-alert-success">...</div>
Toast
AppleUI.toast.info('Message');
AppleUI.toast.success('Message');
AppleUI.toast.error('Message');
AppleUI.toast.warning('Message');
Progress & Spinner
Loading...
<div class="au-progress">
  <div class="au-progress-bar" style="width:60%"></div>
</div>
<div class="au-spinner"></div>
Skeleton
<div class="au-skeleton" style="width:100%;height:16px;"></div>

Data Display

展示数据、状态与列表。

Table
NameRoleStatus
Alice ChenDesignerActive
Bob LiuDeveloperPending
Carol WuManagerReview
<div class="au-table-wrapper">
  <table class="au-table">...</table>
</div>
Badge & Tag
1 OK ! 3 Default Success Warning Danger
<span class="au-badge">1</span>
<span class="au-tag au-tag-success">...</span>
Avatar
A
B
C
D
E
<div class="au-avatar au-avatar-lg">A</div>
List
  • Account Settings
  • Preferences
  • Favorites
<ul class="au-list">
  <li class="au-list-item au-list-item-interactive">...</li>
</ul>

Overlay

模态框、工具提示与下拉菜单。

Modal
<button data-modal-open="myModal">Open</button>

<div id="myModal" class="au-modal-overlay">
  <div class="au-modal">...</div>
</div>
Tooltip
Hover me Tooltip text
<span class="au-tooltip">
  Hover me
  <span class="au-tooltip-text">Tooltip</span>
</span>
Dropdown
Edit
Copy
Delete
<div class="au-dropdown">
  <button class="au-dropdown-trigger">...</button>
  <div class="au-dropdown-menu">...</div>
</div>

Icons

内置 30+ CSS-only SVG 图标。

Icon Library
home
user
settings
heart
star
search
edit
trash
plus
check
close
arrow
<i class="au-icon au-icon-home au-icon-lg au-icon-primary"></i>

Animations

预置动画工具类，快速添加动态效果。

Animation Classes
Fade In
Slide Up
Scale In
Bounce
Pulse
<div class="au-animate-fade">Fade</div>
<div class="au-animate-slide-up">Slide</div>
<div class="au-animate-bounce">Bounce</div>

Liquid Glass

鼠标跟随高光边框、动态折射与弹性交互的高级玻璃效果。

Basic Effect
Small
Medium
Large
<div class="au-liquid-glass au-liquid-glass-md">
  <span>Content</span>
</div>
Interactive
Hover Me
Click Me
<div class="au-liquid-glass au-liquid-glass-interactive">
  <span>Interactive</span>
</div>
Card Effect

Glass Card

Advanced glass morphism with mouse-reactive highlight borders.

Over Light

Enhanced contrast variant for light backgrounds.

<div class="au-liquid-glass au-liquid-glass-card">
  <h4>Title</h4>
  <p>Content...</p>
</div>
Button Effect
<button class="au-liquid-glass au-liquid-glass-interactive">Action</button>