MiuiX 组件演示 | Yeliqin666

🎨 色彩 Token

从 MiuiX Colors.kt 精确提取，亮色/暗色自动切换。

<div class="demo-color-swatch" style="background:var(--miuix-primary);color:#fff">primary</div>
<div class="demo-color-swatch" style="background:var(--miuix-primary-container);color:#fff">primaryContainer</div>
<div class="demo-color-swatch" style="background:var(--miuix-error);color:#fff">error</div>
<div class="demo-color-swatch" style="background:var(--miuix-secondary);color:var(--miuix-on-secondary)">secondary</div>
<div class="demo-color-swatch" style="background:var(--miuix-secondary-variant);color:var(--miuix-on-secondary-variant)">secondaryVariant</div>
<div class="demo-color-swatch" style="background:var(--miuix-surface);color:var(--miuix-on-surface)">surface</div>
<div class="demo-color-swatch" style="background:var(--miuix-surface-variant);color:var(--miuix-on-surface)">surfaceVariant</div>
<div class="demo-color-swatch" style="background:var(--miuix-background);color:var(--miuix-on-background)">background</div>
<div class="demo-color-swatch" style="background:var(--miuix-surface-container);color:var(--miuix-on-surface-container)">surfaceContainer</div>
<div class="demo-color-swatch" style="background:var(--miuix-surface-container-highest);color:var(--miuix-on-surface-container-highest)">containerHighest</div>
<div class="demo-color-swatch" style="background:var(--miuix-outline);color:#fff">outline</div>
<div class="demo-color-swatch" style="background:var(--miuix-divider-line);color:#fff">divider</div>

🌙 暗色模式切换

<div class="demo-row">
    <button class="miuix-btn primary" onclick="MiuixTheme.set('dark')">🌙 暗色</button>
    <button class="miuix-btn primary" onclick="MiuixTheme.set('light')">☀️ 亮色</button>
    <button class="miuix-btn" onclick="MiuixTheme.set('auto')">🔄 跟随系统</button>
    <button class="miuix-btn" onclick="MiuixTheme.toggle()">切换</button>
</div>

🔘 Switch 开关

源码: Switch.kt — 49×28dp 胶囊, 弹簧回弹 (dampingRatio=0.6, stiffness=987)

<div class="demo-row">
    <span class="demo-label">默认关闭</span>
    <label class="miuix-switch">
        <input type="checkbox">
        <span class="track"></span>
    </label>
</div>
<div class="demo-row">
    <span class="demo-label">默认开启</span>
    <label class="miuix-switch">
        <input type="checkbox" checked>
        <span class="track"></span>
    </label>
</div>
<div class="demo-row">
    <span class="demo-label">禁用关</span>
    <label class="miuix-switch">
        <input type="checkbox" disabled>
        <span class="track"></span>
    </label>
</div>
<div class="demo-row">
    <span class="demo-label">禁用开</span>
    <label class="miuix-switch">
        <input type="checkbox" checked disabled>
        <span class="track"></span>
    </label>
</div>

☑️ Checkbox 复选框

MIUI 风格圆角方框 + 弹跳勾选动画

<div class="demo-row">
    <label class="miuix-checkbox">
        <input type="checkbox">
        <span class="checkmark"></span>
    </label>
    <span>未选中</span>
</div>
<div class="demo-row">
    <label class="miuix-checkbox">
        <input type="checkbox" checked>
        <span class="checkmark"></span>
    </label>
    <span>已选中</span>
</div>
<div class="demo-row">
    <label class="miuix-checkbox">
        <input type="checkbox" disabled>
        <span class="checkmark"></span>
    </label>
    <span>禁用</span>
</div>

🔵 Button 按钮

源码: Button.kt — 16dp 圆角, 58×40dp 最小尺寸, Sink 按压反馈

<div class="demo-row">
    <button class="miuix-btn primary">主要按钮</button>
    <button class="miuix-btn">次要按钮</button>
    <button class="miuix-btn text">文本按钮</button>
</div>
<div class="demo-row">
    <button class="miuix-btn primary" disabled>禁用主要</button>
    <button class="miuix-btn" disabled>禁用次要</button>
</div>

📦 Card 卡片

源码: Card.kt — 16dp 圆角, surfaceContainer 背景, Sink / Tilt 按压反馈

<div class="miuix-card pressable demo-showcase-card">
    <h4>Sink 按压反馈</h4>
    <p>点击/长按会产生 scale(0.97) 下沉效果，松开弹回。</p>
</div>
<div class="miuix-card tiltable demo-showcase-card">
    <h4>Tilt 倾斜反馈</h4>
    <p>3D perspective 倾斜效果，模拟实体卡片手感。</p>
</div>
<div class="miuix-card demo-showcase-card">
    <h4>普通卡片</h4>
    <p>无按压反馈，用于纯展示信息。</p>
</div>

📋 ListItem 列表项

HyperOS 设置页 SuperArrow — 标题 + 摘要 + 右侧箭头

<div class="miuix-card" style="overflow:hidden">
    <div class="miuix-small-title">通用</div>
    <div class="miuix-list-item">
        <div class="miuix-list-item-content">
            <div class="miuix-list-item-title">WLAN</div>
            <div class="miuix-list-item-summary">已连接到 HyperOS-5G</div>
        </div>
        <div class="miuix-list-item-arrow"></div>
    </div>
    <hr class="miuix-divider">
    <div class="miuix-list-item">
        <div class="miuix-list-item-content">
            <div class="miuix-list-item-title">蓝牙</div>
            <div class="miuix-list-item-summary">已关闭</div>
        </div>
        <label class="miuix-switch" style="flex-shrink:0">
            <input type="checkbox"><span class="track"></span>
        </label>
    </div>
    <hr class="miuix-divider">
    <div class="miuix-list-item">
        <div class="miuix-list-item-content">
            <div class="miuix-list-item-title">移动网络</div>
            <div class="miuix-list-item-summary">中国移动 · 5G</div>
        </div>
        <div class="miuix-list-item-arrow"></div>
    </div>
    <div class="miuix-small-title">系统</div>
    <div class="miuix-list-item">
        <div class="miuix-list-item-content">
            <div class="miuix-list-item-title">显示与亮度</div>
        </div>
        <div class="miuix-list-item-arrow"></div>
    </div>
    <hr class="miuix-divider">
    <div class="miuix-list-item">
        <div class="miuix-list-item-content">
            <div class="miuix-list-item-title">声音与振动</div>
        </div>
        <div class="miuix-list-item-arrow"></div>
    </div>
</div>

🔍 SearchBar 搜索框

<div class="miuix-searchbar" style="max-width:400px">
    <svg class="miuix-searchbar-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"/><path d="M21 21l-4.35-4.35"/></svg>
    <input type="text" placeholder="搜索设置项…">
</div>

📑 Tabs 标签栏

<div class="miuix-tabs" id="demo-tabs">
    <button class="miuix-tab active" onclick="switchTab(this)">全部</button>
    <button class="miuix-tab" onclick="switchTab(this)">推荐</button>
    <button class="miuix-tab" onclick="switchTab(this)">应用</button>
    <button class="miuix-tab" onclick="switchTab(this)">游戏</button>
</div>

🎚️ Slider 滑块

<div style="max-width:300px">
    <input type="range" class="miuix-slider" value="60" min="0" max="100">
</div>

⏳ Progress 进度

<div class="demo-row">
    <span class="demo-label">圆形</span>
    <div class="miuix-spinner"></div>
</div>
<div class="demo-row">
    <span class="demo-label">线性 60%</span>
    <div class="miuix-progress" style="width:200px">
        <div class="miuix-progress-bar" style="width:60%"></div>
    </div>
</div>
<div class="demo-row">
    <span class="demo-label">不定量</span>
    <div class="miuix-progress indeterminate" style="width:200px">
        <div class="miuix-progress-bar"></div>
    </div>
</div>

📢 Snackbar 消息条

<div class="demo-row">
    <button class="miuix-btn primary" onclick="MiuixSnackbar.show('这是一条消息', {duration:3000})">普通消息</button>
    <button class="miuix-btn" onclick="MiuixSnackbar.show('操作已完成', {action:'撤销', onAction:function(){alert('已撤销')}})">带操作</button>
</div>

📄 BottomSheet 半屏弹窗

<button class="miuix-btn primary" onclick="MiuixBottomSheet.open('demo-sheet')">打开半屏弹窗</button>

<div class="miuix-bottomsheet-handle"></div>
<div class="miuix-bottomsheet-content">
    <h3 style="font-size:20px;margin-bottom:12px">分享到</h3>
    <div class="miuix-list-item" onclick="MiuixBottomSheet.close('demo-sheet')">
        <div class="miuix-list-item-content">
            <div class="miuix-list-item-title">微信</div>
        </div>
        <div class="miuix-list-item-arrow"></div>
    </div>
    <hr class="miuix-divider">
    <div class="miuix-list-item" onclick="MiuixBottomSheet.close('demo-sheet')">
        <div class="miuix-list-item-content">
            <div class="miuix-list-item-title">QQ</div>
        </div>
        <div class="miuix-list-item-arrow"></div>
    </div>
    <hr class="miuix-divider">
    <div class="miuix-list-item" onclick="MiuixBottomSheet.close('demo-sheet')">
        <div class="miuix-list-item-content">
            <div class="miuix-list-item-title">复制链接</div>
        </div>
        <div class="miuix-list-item-arrow"></div>
    </div>
    <div style="height:16px"></div>
    <button class="miuix-btn" style="width:100%" onclick="MiuixBottomSheet.close('demo-sheet')">取消</button>
</div>

💬 Dialog 对话框

<button class="miuix-btn primary" onclick="MiuixDialog.open('demo-dialog')">打开对话框</button>

<div class="miuix-dialog">
    <div class="miuix-dialog-header">
        <div class="miuix-dialog-title">确认操作</div>
        <div class="miuix-dialog-subtitle">此操作将删除所有数据，且不可恢复。是否继续？</div>
    </div>
    <div class="miuix-dialog-actions">
        <button class="miuix-btn" onclick="MiuixDialog.close('demo-dialog')">取消</button>
        <button class="miuix-btn primary" onclick="MiuixDialog.close('demo-dialog');MiuixSnackbar.show('已确认')">确认</button>
    </div>
</div>

🏷️ FAB 悬浮按钮

<div class="demo-row">
    <button class="miuix-fab" style="position:relative">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
    </button>
</div>

MiuiX Design System CSS 复刻 · 源自 compose-miuix-ui/miuix v0.8.5