donghym
1268 lines
48 KiB
Markdown
1268 lines
48 KiB
Markdown
---
|
||
nav: 组件
|
||
title: 组件总览
|
||
---
|
||
|
||
<style>
|
||
.overview-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
|
||
gap: 20px;
|
||
margin: 24px 0 48px;
|
||
}
|
||
.overview-card {
|
||
display: flex;
|
||
flex-direction: column;
|
||
border: 1px solid #e8e8e8;
|
||
border-radius: 8px;
|
||
text-decoration: none;
|
||
color: inherit;
|
||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||
background: #fff;
|
||
overflow: hidden;
|
||
}
|
||
.overview-card:hover {
|
||
border-color: #1890ff;
|
||
box-shadow: 0 4px 16px rgba(24, 144, 255, 0.15);
|
||
transform: translateY(-2px);
|
||
}
|
||
.overview-preview {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding: 28px 16px 20px;
|
||
background: #fafafa;
|
||
min-height: 80px;
|
||
border-bottom: 1px solid #f0f0f0;
|
||
flex-wrap: wrap;
|
||
gap: 8px;
|
||
}
|
||
.overview-info {
|
||
padding: 14px 16px;
|
||
}
|
||
.overview-title {
|
||
font-weight: 500;
|
||
font-size: 14px;
|
||
color: rgba(0, 0, 0, 0.88);
|
||
margin-bottom: 2px;
|
||
}
|
||
.overview-desc {
|
||
font-size: 12px;
|
||
color: rgba(0, 0, 0, 0.45);
|
||
line-height: 1.4;
|
||
}
|
||
|
||
/* Preview elements */
|
||
.prev-btn {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding: 4px 12px;
|
||
border: 1px solid #d9d9d9;
|
||
border-radius: 4px;
|
||
font-size: 12px;
|
||
background: #fff;
|
||
font-weight: 500;
|
||
}
|
||
.prev-btn-primary { background: #1677ff; color: #fff; border-color: #1677ff; }
|
||
.prev-btn-danger { background: #ff4d4f; color: #fff; border-color: #ff4d4f; }
|
||
.prev-circle {
|
||
width: 32px; height: 32px; border-radius: 50%; background: #1677ff;
|
||
display: flex; align-items: center; justify-content: center;
|
||
color: #fff; font-size: 16px; font-weight: 600;
|
||
box-shadow: 0 2px 8px rgba(22,119,255,0.3);
|
||
}
|
||
.prev-circle-green { background: #52c41a; }
|
||
.prev-circle-light {
|
||
width: 32px; height: 32px; border-radius: 50%; background: #f5f5f5;
|
||
border: 1px solid #d9d9d9; display: flex; align-items: center; justify-content: center;
|
||
font-size: 14px;
|
||
}
|
||
.prev-icon { font-size: 22px; }
|
||
.prev-icon-blue { color: #1677ff; }
|
||
.prev-icon-gold { color: #faad14; }
|
||
.prev-icon-red { color: #ff4d4f; }
|
||
.prev-text { font-size: 14px; line-height: 1; }
|
||
.prev-label {
|
||
display: inline-block; padding: 2px 8px; border-radius: 3px; font-size: 11px;
|
||
}
|
||
.prev-label-blue { background: #e6f4ff; color: #1677ff; border: 1px solid #91caff; }
|
||
.prev-label-gray { background: #f5f5f5; color: #666; }
|
||
.prev-tag {
|
||
display: inline-block; padding: 1px 6px; border-radius: 3px; font-size: 11px; font-weight: 500;
|
||
}
|
||
.prev-tag-blue { background: #e6f4ff; color: #1677ff; }
|
||
.prev-tag-green { background: #f6ffed; color: #52c41a; }
|
||
.prev-tag-red { background: #fff2f0; color: #ff4d4f; }
|
||
.prev-input {
|
||
border: 1px solid #d9d9d9; border-radius: 4px; padding: 4px 10px; font-size: 12px;
|
||
background: #fff; color: #999;
|
||
}
|
||
.prev-divider { width: 100%; border-top: 1px solid #e8e8e8; }
|
||
.prev-switch {
|
||
width: 32px; height: 18px; border-radius: 9px; background: #1677ff; position: relative;
|
||
}
|
||
.prev-switch::after {
|
||
content: ''; position: absolute; top: 2px; right: 2px;
|
||
width: 14px; height: 14px; border-radius: 50%; background: #fff;
|
||
}
|
||
.prev-avatar {
|
||
border-radius: 50%; display: flex; align-items: center; justify-content: center;
|
||
color: #fff; font-weight: 600;
|
||
}
|
||
.prev-avatar-32 { width: 32px; height: 32px; font-size: 13px; }
|
||
.prev-avatar-blue { background: #1677ff; }
|
||
.prev-avatar-green { background: #52c41a; }
|
||
.prev-avatar-gray { background: #bfbfbf; }
|
||
.prev-rate { color: #faad14; font-size: 16px; letter-spacing: 2px; }
|
||
.prev-slider {
|
||
width: 100px; height: 4px; background: #e8e8e8; border-radius: 2px; position: relative;
|
||
}
|
||
.prev-slider::after {
|
||
content: ''; position: absolute; left: 30%; top: -4px;
|
||
width: 12px; height: 12px; border-radius: 50%; background: #1677ff;
|
||
border: 2px solid #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.2);
|
||
}
|
||
.prev-radio {
|
||
width: 14px; height: 14px; border-radius: 50%; border: 2px solid #1677ff;
|
||
display: inline-flex; align-items: center; justify-content: center; vertical-align: middle;
|
||
}
|
||
.prev-radio::after {
|
||
content: ''; width: 7px; height: 7px; border-radius: 50%; background: #1677ff;
|
||
}
|
||
.prev-check {
|
||
width: 14px; height: 14px; border-radius: 3px; border: 2px solid #1677ff;
|
||
background: #1677ff; display: inline-flex; align-items: center; justify-content: center;
|
||
vertical-align: middle; color: #fff; font-size: 10px;
|
||
}
|
||
.prev-progress { width: 100%; height: 6px; background: #f0f0f0; border-radius: 3px; overflow: hidden; }
|
||
.prev-progress-bar { height: 100%; background: #1677ff; border-radius: 3px; }
|
||
.prev-alert {
|
||
width: 100%; padding: 6px 12px; border-radius: 6px; font-size: 12px;
|
||
display: flex; align-items: center; gap: 6px;
|
||
}
|
||
.prev-alert-success { background: #f6ffed; border: 1px solid #b7eb8f; color: #52c41a; }
|
||
.prev-alert-info { background: #e6f4ff; border: 1px solid #91caff; color: #1677ff; }
|
||
.prev-spin {
|
||
width: 20px; height: 20px; border: 2px solid #f0f0f0;
|
||
border-top: 2px solid #1677ff; border-radius: 50%;
|
||
animation: prev-spin 1s linear infinite;
|
||
}
|
||
@keyframes prev-spin { to { transform: rotate(360deg); } }
|
||
.prev-result { text-align: center; padding: 4px 0; }
|
||
.prev-result-icon {
|
||
width: 36px; height: 36px; border-radius: 50%; display: inline-flex;
|
||
align-items: center; justify-content: center; font-size: 18px; margin-bottom: 4px;
|
||
}
|
||
.prev-result-success { background: #f6ffed; color: #52c41a; }
|
||
.prev-skeleton-line { height: 10px; background: #f0f0f0; border-radius: 3px; margin-bottom: 4px; }
|
||
.prev-stat { font-size: 22px; font-weight: 600; color: #1677ff; line-height: 1; }
|
||
.prev-stat-label { font-size: 11px; color: #999; margin-top: 2px; }
|
||
.prev-breadcrumb { font-size: 12px; color: #999; }
|
||
.prev-breadcrumb .current { color: rgba(0,0,0,0.65); }
|
||
.prev-step { display: flex; gap: 4px; align-items: center; font-size: 11px; }
|
||
.prev-step-dot {
|
||
width: 18px; height: 18px; border-radius: 50%; display: flex;
|
||
align-items: center; justify-content: center; font-size: 10px;
|
||
}
|
||
.prev-step-dot-done { background: #1677ff; color: #fff; }
|
||
.prev-step-dot-active { background: #1677ff; color: #fff; }
|
||
.prev-step-dot-pending { background: #f0f0f0; color: #999; }
|
||
.prev-step-line { width: 20px; height: 1px; background: #e8e8e8; }
|
||
.prev-step-line-done { background: #1677ff; }
|
||
.prev-tab-bar { display: flex; gap: 0; border-bottom: 1px solid #f0f0f0; }
|
||
.prev-tab-item { padding: 4px 12px; font-size: 12px; }
|
||
.prev-tab-active { color: #1677ff; border-bottom: 2px solid #1677ff; }
|
||
.prev-tab-inactive { color: #999; }
|
||
.prev-pagination { display: flex; gap: 2px; align-items: center; font-size: 11px; }
|
||
.prev-page {
|
||
min-width: 22px; height: 22px; display: flex; align-items: center; justify-content: center;
|
||
border-radius: 4px; border: 1px solid #d9d9d9;
|
||
}
|
||
.prev-page-active { background: #1677ff; color: #fff; border-color: #1677ff; }
|
||
.prev-dropdown {
|
||
display: flex; align-items: center; gap: 4px; padding: 4px 10px;
|
||
border: 1px solid #d9d9d9; border-radius: 4px; font-size: 12px;
|
||
}
|
||
.prev-menu-item { padding: 2px 8px; font-size: 12px; border-radius: 3px; }
|
||
.prev-menu-active { background: #e6f4ff; color: #1677ff; }
|
||
.prev-split {
|
||
display: flex; width: 100%; height: 34px; border-radius: 4px;
|
||
overflow: hidden; border: 1px solid #e8e8e8;
|
||
}
|
||
.prev-split-handle { width: 4px; background: #1677ff; }
|
||
.prev-card-mini {
|
||
width: 100%; border: 1px solid #f0f0f0; border-radius: 6px; overflow: hidden;
|
||
}
|
||
.prev-card-header {
|
||
padding: 6px 10px; background: #fafafa; font-size: 12px; font-weight: 500;
|
||
border-bottom: 1px solid #f0f0f0;
|
||
}
|
||
.prev-card-body { padding: 6px 10px; font-size: 11px; color: #666; }
|
||
.prev-collapse { width: 100%; }
|
||
.prev-collapse-item { border: 1px solid #f0f0f0; border-radius: 4px; overflow: hidden; margin-bottom: 2px; }
|
||
.prev-collapse-header {
|
||
padding: 4px 10px; background: #fafafa; font-size: 12px;
|
||
display: flex; justify-content: space-between;
|
||
}
|
||
.prev-collapse-content { padding: 4px 10px; font-size: 11px; color: #666; }
|
||
.prev-timeline { font-size: 12px; padding-left: 12px; border-left: 2px solid #1677ff; }
|
||
.prev-timeline-item { padding: 2px 0 2px 12px; position: relative; }
|
||
.prev-timeline-item::before {
|
||
content: ''; position: absolute; left: -18px; top: 7px;
|
||
width: 6px; height: 6px; border-radius: 50%; background: #1677ff;
|
||
}
|
||
.prev-table { width: 100%; border-collapse: collapse; font-size: 11px; }
|
||
.prev-table th {
|
||
padding: 3px 8px; text-align: left; border-bottom: 1px solid #f0f0f0;
|
||
color: #999; font-weight: 500;
|
||
}
|
||
.prev-table td { padding: 3px 8px; border-bottom: 1px solid #fafafa; }
|
||
.prev-tree { padding-left: 8px; font-size: 12px; line-height: 1.8; }
|
||
.prev-tree-item { color: #666; }
|
||
.prev-tree-item::before { content: '├ '; color: #d9d9d9; }
|
||
.prev-tree-item.prev-tree-root::before { content: ''; }
|
||
.prev-modal {
|
||
width: 100%; border: 1px solid #d9d9d9; border-radius: 6px; overflow: hidden;
|
||
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
|
||
}
|
||
.prev-modal-header {
|
||
padding: 6px 12px; border-bottom: 1px solid #f0f0f0; font-size: 12px; font-weight: 500;
|
||
}
|
||
.prev-modal-body { padding: 8px 12px; font-size: 11px; color: #666; }
|
||
.prev-modal-footer {
|
||
padding: 6px 12px; border-top: 1px solid #f0f0f0; text-align: right; font-size: 11px;
|
||
}
|
||
.prev-drawer {
|
||
width: 100%; height: 36px; background: #fafafa; border: 1px solid #e8e8e8;
|
||
border-radius: 4px; position: relative; overflow: hidden;
|
||
}
|
||
.prev-drawer-panel {
|
||
position: absolute; right: 0; top: 0; width: 34px; height: 100%;
|
||
background: #fff; border-left: 1px solid #e8e8e8; border-radius: 0 4px 4px 0;
|
||
display: flex; align-items: center; justify-content: center; color: #999; font-size: 12px;
|
||
}
|
||
.prev-badge-wrap { position: relative; display: inline-block; }
|
||
.prev-badge-dot { position: absolute; top: -2px; right: -4px; }
|
||
.prev-badge-count {
|
||
background: #ff4d4f; color: #fff; border-radius: 10px; padding: 0 5px;
|
||
font-size: 10px; min-width: 16px; height: 16px; display: flex;
|
||
align-items: center; justify-content: center; box-shadow: 0 0 0 1px #fff;
|
||
}
|
||
.prev-calendar { display: grid; grid-template-columns: repeat(7,1fr); gap: 2px; text-align: center; font-size: 11px; }
|
||
.prev-calendar-header { color: #1677ff; font-weight: 500; padding: 2px 0; }
|
||
.prev-calendar-day { padding: 1px 0; border-radius: 3px; }
|
||
.prev-calendar-today { background: #1677ff; color: #fff; }
|
||
.prev-masonry { display: grid; grid-template-columns: repeat(3,1fr); gap: 3px; width: 100%; }
|
||
.prev-masonry-item { border-radius: 2px; }
|
||
.prev-masonry-block-1 { height: 24px; background: #1677ff; }
|
||
.prev-masonry-block-2 { height: 32px; background: #69b1ff; }
|
||
.prev-masonry-block-3 { height: 20px; background: #91caff; }
|
||
.prev-segmented { display: flex; border: 1px solid #d9d9d9; border-radius: 4px; overflow: hidden; font-size: 12px; }
|
||
.prev-segmented-item { padding: 3px 10px; }
|
||
.prev-segmented-active { background: #1677ff; color: #fff; }
|
||
.prev-segmented-inactive { background: #fff; color: #666; border-right: 1px solid #f0f0f0; }
|
||
.prev-transfer-box { padding: 3px 10px; border: 1px solid #d9d9d9; border-radius: 3px; font-size: 11px; color: #666; min-width: 50px; text-align: center; }
|
||
.prev-tooltip-target { border-bottom: 1px dashed #1677ff; font-size: 12px; color: #1677ff; }
|
||
.prev-tooltip-bubble { background: #333; color: #fff; padding: 2px 8px; border-radius: 3px; font-size: 10px; white-space: nowrap; }
|
||
.prev-popover-wrap { display: flex; align-items: flex-start; gap: 6px; }
|
||
.prev-popover-dot { width: 8px; height: 8px; border-radius: 50%; background: #1677ff; margin-top: 25px; flex-shrink: 0; }
|
||
.prev-popover-card { background: #fff; border: 1px solid #d9d9d9; border-radius: 6px; padding: 6px 10px; font-size: 12px; box-shadow: 0 1px 4px rgba(0,0,0,0.1); }
|
||
.prev-empty { text-align: center; padding: 8px 0; }
|
||
.prev-empty-icon { font-size: 28px; color: #d9d9d9; margin-bottom: 4px; }
|
||
.prev-empty-text { font-size: 12px; color: #999; }
|
||
.prev-tour-steps { display: flex; gap: 6px; align-items: center; font-size: 12px; }
|
||
.prev-tour-dot { width: 14px; height: 14px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 9px; }
|
||
.prev-tour-dot-active { background: #1677ff; color: #fff; }
|
||
.prev-tour-dot-pending { border: 1px solid #d9d9d9; color: #999; }
|
||
.prev-image-placeholder { width: 60px; height: 40px; background: #f5f5f5; border: 1px solid #e8e8e8; border-radius: 4px; display: flex; align-items: center; justify-content: center; color: #ccc; font-size: 20px; }
|
||
.prev-qrcode { width: 48px; height: 48px; background: #000; display: grid; grid-template-columns: repeat(5,1fr); gap: 1px; padding: 2px; border-radius: 3px; }
|
||
.prev-qrcode-w { background: #fff; }
|
||
.prev-qrcode-b { background: #000; }
|
||
.prev-list-item { padding: 3px 8px; border-bottom: 1px solid #fafafa; font-size: 12px; }
|
||
.prev-list-item:last-child { border-bottom: none; }
|
||
.prev-carousel-slide { height: 32px; background: linear-gradient(135deg, #1677ff, #69b1ff); border-radius: 4px; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 12px; }
|
||
.prev-carousel-dots { display: flex; justify-content: center; gap: 4px; margin-top: 4px; }
|
||
.prev-carousel-dot { width: 6px; height: 6px; border-radius: 50%; }
|
||
.prev-carousel-dot-active { background: #1677ff; }
|
||
.prev-carousel-dot-inactive { background: #d9d9d9; }
|
||
.prev-descriptions { font-size: 12px; width: 100%; }
|
||
.prev-descriptions-row { display: flex; gap: 8px; padding: 2px 0; border-bottom: 1px solid #fafafa; }
|
||
.prev-descriptions-label { color: #999; min-width: 40px; }
|
||
.prev-notification { width: 100%; background: #fff; border: 1px solid #d9d9d9; border-radius: 6px; padding: 8px 12px; box-shadow: 0 2px 8px rgba(0,0,0,0.08); }
|
||
.prev-notification-title { font-size: 12px; font-weight: 500; margin-bottom: 2px; }
|
||
.prev-notification-desc { font-size: 11px; color: #666; }
|
||
.prev-popconfirm { position: relative; }
|
||
.prev-popconfirm-trigger { padding: 4px 10px; border: 1px solid #ff4d4f; border-radius: 4px; font-size: 12px; color: #ff4d4f; }
|
||
.prev-popconfirm-bubble { position: absolute; top: -28px; left: 0; background: #fff; border: 1px solid #d9d9d9; border-radius: 4px; padding: 2px 8px; font-size: 10px; box-shadow: 0 2px 6px rgba(0,0,0,0.1); white-space: nowrap; }
|
||
</style>
|
||
|
||
# 组件总览
|
||
|
||
RustUI 提供了丰富的组件库，覆盖通用、布局、导航、数据录入、数据展示和反馈等场景。
|
||
|
||
## 通用 10 个组件
|
||
|
||
<div class="overview-grid">
|
||
|
||
<a href="/components/common/button" class="overview-card">
|
||
<div class="overview-preview">
|
||
<span class="prev-btn prev-btn-primary">Primary</span>
|
||
<span class="prev-btn">Default</span>
|
||
<span class="prev-btn prev-btn-danger">Danger</span>
|
||
</div>
|
||
<div class="overview-info">
|
||
<div class="overview-title">Button 按钮</div>
|
||
<div class="overview-desc">触发操作的按钮组件</div>
|
||
</div>
|
||
</a>
|
||
|
||
<a href="/components/common/float-button" class="overview-card">
|
||
<div class="overview-preview">
|
||
<div class="prev-circle">+</div>
|
||
<div class="prev-circle prev-circle-green">✓</div>
|
||
<div class="prev-circle-light">?</div>
|
||
</div>
|
||
<div class="overview-info">
|
||
<div class="overview-title">FloatButton 悬浮按钮</div>
|
||
<div class="overview-desc">悬浮在页面边缘的操作按钮</div>
|
||
</div>
|
||
</a>
|
||
|
||
<a href="/components/common/icon" class="overview-card">
|
||
<div class="overview-preview">
|
||
<span class="prev-icon prev-icon-blue">🔍</span>
|
||
<span class="prev-icon prev-icon-gold">🔔</span>
|
||
<span class="prev-icon prev-icon-red">⭐</span>
|
||
</div>
|
||
<div class="overview-info">
|
||
<div class="overview-title">Icon 图标</div>
|
||
<div class="overview-desc">语义化的矢量图形</div>
|
||
</div>
|
||
</a>
|
||
|
||
<a href="/components/common/typography" class="overview-card">
|
||
<div class="overview-preview">
|
||
<span class="prev-text" style="font-size:18px;font-weight:600;color:rgba(0,0,0,0.88)">Aa</span>
|
||
<span class="prev-text" style="font-size:13px;color:#999">Bb</span>
|
||
<span class="prev-text" style="font-size:13px;color:#ff4d4f">Cc</span>
|
||
</div>
|
||
<div class="overview-info">
|
||
<div class="overview-title">Typography 排版</div>
|
||
<div class="overview-desc">标题、段落、文本组件</div>
|
||
</div>
|
||
</a>
|
||
|
||
<a href="/components/common/affix" class="overview-card">
|
||
<div class="overview-preview">
|
||
<span style="font-size:28px">📌</span>
|
||
<span class="prev-label prev-label-gray">Fixed</span>
|
||
</div>
|
||
<div class="overview-info">
|
||
<div class="overview-title">Affix 固钉</div>
|
||
<div class="overview-desc">将元素固定在可视范围</div>
|
||
</div>
|
||
</a>
|
||
|
||
<a href="/components/common/anchor" class="overview-card">
|
||
<div class="overview-preview">
|
||
<div style="display:flex;flex-direction:column;gap:3px;font-size:12px;color:#666">
|
||
<span style="color:#1677ff">▸ Section 1</span>
|
||
<span style="padding-left:8px">Section 2</span>
|
||
<span style="padding-left:8px">Section 3</span>
|
||
</div>
|
||
</div>
|
||
<div class="overview-info">
|
||
<div class="overview-title">Anchor 锚点</div>
|
||
<div class="overview-desc">页面内锚点导航</div>
|
||
</div>
|
||
</a>
|
||
|
||
<a href="/components/common/app" class="overview-card">
|
||
<div class="overview-preview">
|
||
<span class="prev-label prev-label-blue">App Container</span>
|
||
</div>
|
||
<div class="overview-info">
|
||
<div class="overview-title">App 包裹组件</div>
|
||
<div class="overview-desc">提供全局化配置的包裹组件</div>
|
||
</div>
|
||
</a>
|
||
|
||
<a href="/components/common/back-top" class="overview-card">
|
||
<div class="overview-preview">
|
||
<div style="width:36px;height:36px;border-radius:8px;background:#1677ff;display:flex;align-items:center;justify-content:center;color:#fff;font-size:18px;box-shadow:0 2px 8px rgba(22,119,255,0.3)">↑</div>
|
||
</div>
|
||
<div class="overview-info">
|
||
<div class="overview-title">BackTop 回到顶部</div>
|
||
<div class="overview-desc">返回页面顶部的快捷按钮</div>
|
||
</div>
|
||
</a>
|
||
|
||
<a href="/components/common/config-provider" class="overview-card">
|
||
<div class="overview-preview">
|
||
<div style="display:flex;gap:6px">
|
||
<div style="width:20px;height:20px;border-radius:4px;background:#1677ff"></div>
|
||
<div style="width:20px;height:20px;border-radius:4px;background:#52c41a"></div>
|
||
<div style="width:20px;height:20px;border-radius:4px;background:#ff4d4f"></div>
|
||
</div>
|
||
</div>
|
||
<div class="overview-info">
|
||
<div class="overview-title">ConfigProvider 全局配置</div>
|
||
<div class="overview-desc">全局化配置</div>
|
||
</div>
|
||
</a>
|
||
|
||
<a href="/components/common/watermark" class="overview-card">
|
||
<div class="overview-preview">
|
||
<div style="position:relative;padding:12px 20px;border:1px dashed #d9d9d9;border-radius:4px;font-size:12px;color:#999;text-align:center">
|
||
<span style="position:absolute;top:4px;left:8px;font-size:10px;color:rgba(0,0,0,0.06);transform:rotate(-15deg);pointer-events:none">RustUI</span>
|
||
<span style="position:absolute;top:8px;left:60px;font-size:10px;color:rgba(0,0,0,0.06);transform:rotate(-15deg);pointer-events:none">RustUI</span>
|
||
Content Area
|
||
</div>
|
||
</div>
|
||
<div class="overview-info">
|
||
<div class="overview-title">Watermark 水印</div>
|
||
<div class="overview-desc">页面水印</div>
|
||
</div>
|
||
</a>
|
||
|
||
</div>
|
||
|
||
## 布局 8 个组件
|
||
|
||
<div class="overview-grid">
|
||
|
||
<a href="/components/layout/divider" class="overview-card">
|
||
<div class="overview-preview" style="flex-direction:column;align-items:stretch">
|
||
<span style="font-size:12px;color:#666;margin-bottom:4px">Above</span>
|
||
<div class="prev-divider"></div>
|
||
<span style="font-size:12px;color:#666;margin-top:4px">Below</span>
|
||
</div>
|
||
<div class="overview-info">
|
||
<div class="overview-title">Divider 分割线</div>
|
||
<div class="overview-desc">区隔内容的分割线</div>
|
||
</div>
|
||
</a>
|
||
|
||
<a href="/components/layout/flex" class="overview-card">
|
||
<div class="overview-preview">
|
||
<div style="display:flex;gap:6px;align-items:end;height:40px">
|
||
<div style="width:32px;height:28px;background:#1677ff;border-radius:3px"></div>
|
||
<div style="width:32px;height:36px;background:#69b1ff;border-radius:3px"></div>
|
||
<div style="width:32px;height:20px;background:#91caff;border-radius:3px"></div>
|
||
</div>
|
||
</div>
|
||
<div class="overview-info">
|
||
<div class="overview-title">Flex 弹性布局</div>
|
||
<div class="overview-desc">弹性布局容器</div>
|
||
</div>
|
||
</a>
|
||
|
||
<a href="/components/layout/grid" class="overview-card">
|
||
<div class="overview-preview">
|
||
<div style="display:flex;gap:4px;width:100%">
|
||
<div style="flex:8;height:32px;background:#1677ff;border-radius:3px"></div>
|
||
<div style="flex:8;height:32px;background:#69b1ff;border-radius:3px"></div>
|
||
<div style="flex:8;height:32px;background:#91caff;border-radius:3px"></div>
|
||
</div>
|
||
</div>
|
||
<div class="overview-info">
|
||
<div class="overview-title">Grid 栅格</div>
|
||
<div class="overview-desc">24 栅格系统</div>
|
||
</div>
|
||
</a>
|
||
|
||
<a href="/components/layout/layout" class="overview-card">
|
||
<div class="overview-preview">
|
||
<div style="width:100%;background:#f5f5f5;border-radius:4px;overflow:hidden">
|
||
<div style="height:16px;background:#1677ff;border-radius:4px 4px 0 0"></div>
|
||
<div style="display:flex;height:36px">
|
||
<div style="width:28px;background:#e6f4ff;border-right:1px solid #d6e4ff"></div>
|
||
<div style="flex:1;background:#fff"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="overview-info">
|
||
<div class="overview-title">Layout 布局</div>
|
||
<div class="overview-desc">页面级布局</div>
|
||
</div>
|
||
</a>
|
||
|
||
<a href="/components/layout/space" class="overview-card">
|
||
<div class="overview-preview">
|
||
<div style="display:flex;gap:8px;align-items:center">
|
||
<div style="width:22px;height:22px;border-radius:3px;background:#1677ff"></div>
|
||
<div style="width:22px;height:22px;border-radius:3px;background:#69b1ff"></div>
|
||
<div style="width:22px;height:22px;border-radius:3px;background:#91caff"></div>
|
||
</div>
|
||
</div>
|
||
<div class="overview-info">
|
||
<div class="overview-title">Space 间距</div>
|
||
<div class="overview-desc">组件间距</div>
|
||
</div>
|
||
</a>
|
||
|
||
<a href="/components/layout/splitter" class="overview-card">
|
||
<div class="overview-preview">
|
||
<div class="prev-split">
|
||
<div style="flex:1;background:#fafafa"></div>
|
||
<div class="prev-split-handle"></div>
|
||
<div style="flex:1;background:#fafafa"></div>
|
||
</div>
|
||
</div>
|
||
<div class="overview-info">
|
||
<div class="overview-title">Splitter 分割面板</div>
|
||
<div class="overview-desc">可拖拽的面板分割</div>
|
||
</div>
|
||
</a>
|
||
|
||
<a href="/components/layout/masonry" class="overview-card">
|
||
<div class="overview-preview">
|
||
<div class="prev-masonry">
|
||
<div class="prev-masonry-item prev-masonry-block-1"></div>
|
||
<div class="prev-masonry-item prev-masonry-block-2"></div>
|
||
<div class="prev-masonry-item prev-masonry-block-3"></div>
|
||
<div class="prev-masonry-item prev-masonry-block-3"></div>
|
||
<div class="prev-masonry-item prev-masonry-block-1"></div>
|
||
<div class="prev-masonry-item prev-masonry-block-2"></div>
|
||
</div>
|
||
</div>
|
||
<div class="overview-info">
|
||
<div class="overview-title">Masonry 瀑布流</div>
|
||
<div class="overview-desc">瀑布流布局</div>
|
||
</div>
|
||
</a>
|
||
|
||
<a href="/components/layout/stack" class="overview-card">
|
||
<div class="overview-preview">
|
||
<div style="position:relative;width:100px;height:48px">
|
||
<div style="position:absolute;top:0;left:0;width:80px;height:36px;background:#1677ff;border-radius:4px;opacity:0.9"></div>
|
||
<div style="position:absolute;top:6px;left:6px;width:80px;height:36px;background:#69b1ff;border-radius:4px;opacity:0.7"></div>
|
||
<div style="position:absolute;top:12px;left:12px;width:80px;height:36px;background:#91caff;border-radius:4px;opacity:0.5"></div>
|
||
</div>
|
||
</div>
|
||
<div class="overview-info">
|
||
<div class="overview-title">Stack 堆栈布局</div>
|
||
<div class="overview-desc">堆栈式布局</div>
|
||
</div>
|
||
</a>
|
||
|
||
</div>
|
||
|
||
## 导航 6 个组件
|
||
|
||
<div class="overview-grid">
|
||
|
||
<a href="/components/nav/breadcrumb" class="overview-card">
|
||
<div class="overview-preview">
|
||
<div class="prev-breadcrumb">
|
||
🏠 <span style="margin:0 4px;color:#ccc">/</span> Page <span style="margin:0 4px;color:#ccc">/</span> <span class="current">Detail</span>
|
||
</div>
|
||
</div>
|
||
<div class="overview-info">
|
||
<div class="overview-title">Breadcrumb 面包屑</div>
|
||
<div class="overview-desc">页面路径导航</div>
|
||
</div>
|
||
</a>
|
||
|
||
<a href="/components/nav/dropdown" class="overview-card">
|
||
<div class="overview-preview">
|
||
<div class="prev-dropdown">
|
||
Actions <span style="font-size:10px">▼</span>
|
||
</div>
|
||
</div>
|
||
<div class="overview-info">
|
||
<div class="overview-title">Dropdown 下拉菜单</div>
|
||
<div class="overview-desc">下拉菜单</div>
|
||
</div>
|
||
</a>
|
||
|
||
<a href="/components/nav/menu" class="overview-card">
|
||
<div class="overview-preview">
|
||
<div style="display:flex;flex-direction:column;gap:4px">
|
||
<div class="prev-menu-item prev-menu-active">Home</div>
|
||
<div class="prev-menu-item">Products</div>
|
||
<div class="prev-menu-item">Settings</div>
|
||
</div>
|
||
</div>
|
||
<div class="overview-info">
|
||
<div class="overview-title">Menu 导航菜单</div>
|
||
<div class="overview-desc">侧边/顶部导航菜单</div>
|
||
</div>
|
||
</a>
|
||
|
||
<a href="/components/nav/pagination" class="overview-card">
|
||
<div class="overview-preview">
|
||
<div class="prev-pagination">
|
||
<span class="prev-page">‹</span>
|
||
<span class="prev-page prev-page-active">1</span>
|
||
<span class="prev-page">2</span>
|
||
<span class="prev-page">3</span>
|
||
<span class="prev-page">›</span>
|
||
</div>
|
||
</div>
|
||
<div class="overview-info">
|
||
<div class="overview-title">Pagination 分页</div>
|
||
<div class="overview-desc">数据分页</div>
|
||
</div>
|
||
</a>
|
||
|
||
<a href="/components/nav/steps" class="overview-card">
|
||
<div class="overview-preview">
|
||
<div class="prev-step">
|
||
<span class="prev-step-dot prev-step-dot-done">1</span>
|
||
<span class="prev-step-line prev-step-line-done"></span>
|
||
<span class="prev-step-dot prev-step-dot-active">2</span>
|
||
<span class="prev-step-line"></span>
|
||
<span class="prev-step-dot prev-step-dot-pending">3</span>
|
||
</div>
|
||
</div>
|
||
<div class="overview-info">
|
||
<div class="overview-title">Steps 步骤条</div>
|
||
<div class="overview-desc">步骤指示器</div>
|
||
</div>
|
||
</a>
|
||
|
||
<a href="/components/nav/tabs" class="overview-card">
|
||
<div class="overview-preview">
|
||
<div class="prev-tab-bar">
|
||
<span class="prev-tab-item prev-tab-active">Tab 1</span>
|
||
<span class="prev-tab-item prev-tab-inactive">Tab 2</span>
|
||
<span class="prev-tab-item prev-tab-inactive">Tab 3</span>
|
||
</div>
|
||
</div>
|
||
<div class="overview-info">
|
||
<div class="overview-title">Tabs 标签页</div>
|
||
<div class="overview-desc">选项卡切换</div>
|
||
</div>
|
||
</a>
|
||
|
||
</div>
|
||
|
||
## 数据录入 19 个组件
|
||
|
||
<div class="overview-grid">
|
||
|
||
<a href="/components/entry/auto-complete" class="overview-card">
|
||
<div class="overview-preview">
|
||
<span class="prev-input">Search...</span>
|
||
</div>
|
||
<div class="overview-info">
|
||
<div class="overview-title">AutoComplete 自动完成</div>
|
||
<div class="overview-desc">自动补全输入</div>
|
||
</div>
|
||
</a>
|
||
|
||
<a href="/components/entry/cascader" class="overview-card">
|
||
<div class="overview-preview">
|
||
<span class="prev-input">Select... ▾</span>
|
||
</div>
|
||
<div class="overview-info">
|
||
<div class="overview-title">Cascader 级联选择</div>
|
||
<div class="overview-desc">级联选择器</div>
|
||
</div>
|
||
</a>
|
||
|
||
<a href="/components/entry/choice" class="overview-card">
|
||
<div class="overview-preview">
|
||
<span class="prev-check">✓</span>
|
||
<span style="font-size:12px;margin-left:4px">Check</span>
|
||
</div>
|
||
<div class="overview-info">
|
||
<div class="overview-title">Checkbox 多选框</div>
|
||
<div class="overview-desc">多选选择框</div>
|
||
</div>
|
||
</a>
|
||
|
||
<a href="/components/entry/date-picker" class="overview-card">
|
||
<div class="overview-preview">
|
||
<span class="prev-input">📅 Pick date</span>
|
||
</div>
|
||
<div class="overview-info">
|
||
<div class="overview-title">DatePicker 日期选择器</div>
|
||
<div class="overview-desc">日期选择</div>
|
||
</div>
|
||
</a>
|
||
|
||
<a href="/components/entry/form" class="overview-card">
|
||
<div class="overview-preview" style="flex-direction:column;align-items:stretch;gap:6px">
|
||
<span class="prev-input">Username</span>
|
||
<span class="prev-input">Password</span>
|
||
<span class="prev-btn prev-btn-primary">Submit</span>
|
||
</div>
|
||
<div class="overview-info">
|
||
<div class="overview-title">Form 表单</div>
|
||
<div class="overview-desc">表单组件</div>
|
||
</div>
|
||
</a>
|
||
|
||
<a href="/components/entry/input" class="overview-card">
|
||
<div class="overview-preview">
|
||
<span class="prev-input">Type here...</span>
|
||
</div>
|
||
<div class="overview-info">
|
||
<div class="overview-title">Input 输入框</div>
|
||
<div class="overview-desc">文本输入框</div>
|
||
</div>
|
||
</a>
|
||
|
||
<a href="/components/entry/input-number" class="overview-card">
|
||
<div class="overview-preview">
|
||
<div style="display:flex;align-items:center;border:1px solid #d9d9d9;border-radius:4px;overflow:hidden;font-size:12px">
|
||
<span style="padding:4px 8px;background:#f5f5f5;border-right:1px solid #d9d9d9">−</span>
|
||
<span style="padding:4px 14px">10</span>
|
||
<span style="padding:4px 8px;background:#f5f5f5;border-left:1px solid #d9d9d9">+</span>
|
||
</div>
|
||
</div>
|
||
<div class="overview-info">
|
||
<div class="overview-title">InputNumber 数字输入框</div>
|
||
<div class="overview-desc">数字输入</div>
|
||
</div>
|
||
</a>
|
||
|
||
<a href="/components/entry/mention" class="overview-card">
|
||
<div class="overview-preview">
|
||
<span class="prev-label prev-label-blue">@username</span>
|
||
</div>
|
||
<div class="overview-info">
|
||
<div class="overview-title">Mention 提及</div>
|
||
<div class="overview-desc">@提及</div>
|
||
</div>
|
||
</a>
|
||
|
||
<a href="/components/entry/choice" class="overview-card">
|
||
<div class="overview-preview">
|
||
<span class="prev-radio"></span>
|
||
<span style="font-size:12px;margin-left:4px">Option</span>
|
||
</div>
|
||
<div class="overview-info">
|
||
<div class="overview-title">Radio 单选框</div>
|
||
<div class="overview-desc">单选选择框</div>
|
||
</div>
|
||
</a>
|
||
|
||
<a href="/components/entry/range-picker" class="overview-card">
|
||
<div class="overview-preview">
|
||
<span class="prev-input">📅 Date range</span>
|
||
</div>
|
||
<div class="overview-info">
|
||
<div class="overview-title">RangePicker 范围选择器</div>
|
||
<div class="overview-desc">日期范围选择</div>
|
||
</div>
|
||
</a>
|
||
|
||
<a href="/components/entry/rate" class="overview-card">
|
||
<div class="overview-preview">
|
||
<span class="prev-rate">★★★☆☆</span>
|
||
</div>
|
||
<div class="overview-info">
|
||
<div class="overview-title">Rate 评分</div>
|
||
<div class="overview-desc">评分组件</div>
|
||
</div>
|
||
</a>
|
||
|
||
<a href="/components/entry/select" class="overview-card">
|
||
<div class="overview-preview">
|
||
<span class="prev-input">Choose... ▾</span>
|
||
</div>
|
||
<div class="overview-info">
|
||
<div class="overview-title">Select 选择器</div>
|
||
<div class="overview-desc">下拉选择器</div>
|
||
</div>
|
||
</a>
|
||
|
||
<a href="/components/entry/slider" class="overview-card">
|
||
<div class="overview-preview">
|
||
<div class="prev-slider"></div>
|
||
</div>
|
||
<div class="overview-info">
|
||
<div class="overview-title">Slider 滑动输入条</div>
|
||
<div class="overview-desc">滑动输入</div>
|
||
</div>
|
||
</a>
|
||
|
||
<a href="/components/entry/choice" class="overview-card">
|
||
<div class="overview-preview">
|
||
<div class="prev-switch"></div>
|
||
<span style="font-size:12px;margin-left:6px;color:#666">Toggle</span>
|
||
</div>
|
||
<div class="overview-info">
|
||
<div class="overview-title">Switch 开关</div>
|
||
<div class="overview-desc">开关切换</div>
|
||
</div>
|
||
</a>
|
||
|
||
<a href="/components/entry/textarea" class="overview-card">
|
||
<div class="overview-preview">
|
||
<div style="width:100%;border:1px solid #d9d9d9;border-radius:4px;padding:6px 10px;min-height:40px;font-size:12px;color:#999">Multi-line text...</div>
|
||
</div>
|
||
<div class="overview-info">
|
||
<div class="overview-title">TextArea 文本域</div>
|
||
<div class="overview-desc">多行文本输入</div>
|
||
</div>
|
||
</a>
|
||
|
||
<a href="/components/entry/time-picker" class="overview-card">
|
||
<div class="overview-preview">
|
||
<span class="prev-input">🕐 Pick time</span>
|
||
</div>
|
||
<div class="overview-info">
|
||
<div class="overview-title">TimePicker 时间选择器</div>
|
||
<div class="overview-desc">时间选择</div>
|
||
</div>
|
||
</a>
|
||
|
||
<a href="/components/entry/transfer" class="overview-card">
|
||
<div class="overview-preview">
|
||
<div style="display:flex;gap:8px;align-items:center;font-size:12px">
|
||
<span class="prev-transfer-box">Left</span>
|
||
<span>⇄</span>
|
||
<span class="prev-transfer-box">Right</span>
|
||
</div>
|
||
</div>
|
||
<div class="overview-info">
|
||
<div class="overview-title">Transfer 穿梭框</div>
|
||
<div class="overview-desc">双栏穿梭选择</div>
|
||
</div>
|
||
</a>
|
||
|
||
<a href="/components/entry/tree-select" class="overview-card">
|
||
<div class="overview-preview">
|
||
<div class="prev-tree">
|
||
<div class="prev-tree-item prev-tree-root">Root</div>
|
||
<div class="prev-tree-item">Child 1</div>
|
||
<div class="prev-tree-item">Child 2</div>
|
||
</div>
|
||
</div>
|
||
<div class="overview-info">
|
||
<div class="overview-title">TreeSelect 树选择</div>
|
||
<div class="overview-desc">树形选择</div>
|
||
</div>
|
||
</a>
|
||
|
||
<a href="/components/entry/upload" class="overview-card">
|
||
<div class="overview-preview">
|
||
<div style="border:1px dashed #d9d9d9;border-radius:4px;padding:8px 16px;font-size:12px;color:#666;text-align:center">+ Upload</div>
|
||
</div>
|
||
<div class="overview-info">
|
||
<div class="overview-title">Upload 上传</div>
|
||
<div class="overview-desc">文件上传</div>
|
||
</div>
|
||
</a>
|
||
|
||
</div>
|
||
|
||
## 数据展示 20 个组件
|
||
|
||
<div class="overview-grid">
|
||
|
||
<a href="/components/display/avatar" class="overview-card">
|
||
<div class="overview-preview">
|
||
<div class="prev-avatar prev-avatar-32 prev-avatar-blue">U</div>
|
||
<div class="prev-avatar prev-avatar-32 prev-avatar-green">A</div>
|
||
<div class="prev-avatar prev-avatar-32 prev-avatar-gray">C</div>
|
||
</div>
|
||
<div class="overview-info">
|
||
<div class="overview-title">Avatar 头像</div>
|
||
<div class="overview-desc">用户头像</div>
|
||
</div>
|
||
</a>
|
||
|
||
<a href="/components/display/badge" class="overview-card">
|
||
<div class="overview-preview">
|
||
<div class="prev-badge-wrap">
|
||
<span class="prev-icon">📧</span>
|
||
<span class="prev-badge-dot">
|
||
<span class="prev-badge-count">5</span>
|
||
</span>
|
||
</div>
|
||
</div>
|
||
<div class="overview-info">
|
||
<div class="overview-title">Badge 徽标</div>
|
||
<div class="overview-desc">徽标数</div>
|
||
</div>
|
||
</a>
|
||
|
||
<a href="/components/display/calendar" class="overview-card">
|
||
<div class="overview-preview">
|
||
<div class="prev-calendar">
|
||
<span class="prev-calendar-header">M</span><span class="prev-calendar-header">T</span><span class="prev-calendar-header">W</span><span class="prev-calendar-header">T</span><span class="prev-calendar-header">F</span><span class="prev-calendar-header">S</span><span class="prev-calendar-header">S</span>
|
||
<span class="prev-calendar-day">1</span><span class="prev-calendar-day">2</span><span class="prev-calendar-day prev-calendar-today">3</span><span class="prev-calendar-day">4</span><span class="prev-calendar-day">5</span><span class="prev-calendar-day">6</span><span class="prev-calendar-day">7</span>
|
||
</div>
|
||
</div>
|
||
<div class="overview-info">
|
||
<div class="overview-title">Calendar 日历</div>
|
||
<div class="overview-desc">日历</div>
|
||
</div>
|
||
</a>
|
||
|
||
<a href="/components/display/card" class="overview-card">
|
||
<div class="overview-preview">
|
||
<div class="prev-card-mini">
|
||
<div class="prev-card-header">Card Title</div>
|
||
<div class="prev-card-body">Card content area</div>
|
||
</div>
|
||
</div>
|
||
<div class="overview-info">
|
||
<div class="overview-title">Card 卡片</div>
|
||
<div class="overview-desc">内容容器</div>
|
||
</div>
|
||
</a>
|
||
|
||
<a href="/components/display/carousel" class="overview-card">
|
||
<div class="overview-preview" style="flex-direction:column">
|
||
<div class="prev-carousel-slide">Slide 1</div>
|
||
<div class="prev-carousel-dots">
|
||
<span class="prev-carousel-dot prev-carousel-dot-active"></span>
|
||
<span class="prev-carousel-dot prev-carousel-dot-inactive"></span>
|
||
<span class="prev-carousel-dot prev-carousel-dot-inactive"></span>
|
||
</div>
|
||
</div>
|
||
<div class="overview-info">
|
||
<div class="overview-title">Carousel 走马灯</div>
|
||
<div class="overview-desc">轮播</div>
|
||
</div>
|
||
</a>
|
||
|
||
<a href="/components/display/collapse" class="overview-card">
|
||
<div class="overview-preview">
|
||
<div class="prev-collapse">
|
||
<div class="prev-collapse-item">
|
||
<div class="prev-collapse-header">Section 1 <span>▾</span></div>
|
||
<div class="prev-collapse-content">Content here...</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="overview-info">
|
||
<div class="overview-title">Collapse 折叠面板</div>
|
||
<div class="overview-desc">可折叠内容</div>
|
||
</div>
|
||
</a>
|
||
|
||
<a href="/components/display/descriptions" class="overview-card">
|
||
<div class="overview-preview">
|
||
<div class="prev-descriptions">
|
||
<div class="prev-descriptions-row">
|
||
<span class="prev-descriptions-label">Name:</span><span>John</span>
|
||
</div>
|
||
<div class="prev-descriptions-row">
|
||
<span class="prev-descriptions-label">Age:</span><span>28</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="overview-info">
|
||
<div class="overview-title">Descriptions 描述列表</div>
|
||
<div class="overview-desc">描述列表</div>
|
||
</div>
|
||
</a>
|
||
|
||
<a href="/components/display/empty" class="overview-card">
|
||
<div class="overview-preview">
|
||
<div class="prev-empty">
|
||
<div class="prev-empty-icon">📭</div>
|
||
<div class="prev-empty-text">No Data</div>
|
||
</div>
|
||
</div>
|
||
<div class="overview-info">
|
||
<div class="overview-title">Empty 空状态</div>
|
||
<div class="overview-desc">空状态占位</div>
|
||
</div>
|
||
</a>
|
||
|
||
<a href="/components/display/image" class="overview-card">
|
||
<div class="overview-preview">
|
||
<div class="prev-image-placeholder">🖼</div>
|
||
</div>
|
||
<div class="overview-info">
|
||
<div class="overview-title">Image 图片</div>
|
||
<div class="overview-desc">图片展示</div>
|
||
</div>
|
||
</a>
|
||
|
||
<a href="/components/display/list" class="overview-card">
|
||
<div class="overview-preview" style="flex-direction:column;align-items:stretch">
|
||
<div class="prev-list-item">Item 1</div>
|
||
<div class="prev-list-item">Item 2</div>
|
||
<div class="prev-list-item">Item 3</div>
|
||
</div>
|
||
<div class="overview-info">
|
||
<div class="overview-title">List 列表</div>
|
||
<div class="overview-desc">列表</div>
|
||
</div>
|
||
</a>
|
||
|
||
<a href="/components/display/popover" class="overview-card">
|
||
<div class="overview-preview">
|
||
<div class="prev-popover-wrap">
|
||
<div class="prev-popover-dot"></div>
|
||
<div class="prev-popover-card">Tip content</div>
|
||
</div>
|
||
</div>
|
||
<div class="overview-info">
|
||
<div class="overview-title">Popover 气泡卡片</div>
|
||
<div class="overview-desc">气泡弹出</div>
|
||
</div>
|
||
</a>
|
||
|
||
<a href="/components/display/qrcode" class="overview-card">
|
||
<div class="overview-preview">
|
||
<div class="prev-qrcode">
|
||
<span class="prev-qrcode-w"></span><span class="prev-qrcode-w"></span><span class="prev-qrcode-b"></span><span class="prev-qrcode-w"></span><span class="prev-qrcode-w"></span>
|
||
<span class="prev-qrcode-w"></span><span class="prev-qrcode-b"></span><span class="prev-qrcode-w"></span><span class="prev-qrcode-b"></span><span class="prev-qrcode-w"></span>
|
||
<span class="prev-qrcode-b"></span><span class="prev-qrcode-w"></span><span class="prev-qrcode-w"></span><span class="prev-qrcode-w"></span><span class="prev-qrcode-b"></span>
|
||
<span class="prev-qrcode-w"></span><span class="prev-qrcode-b"></span><span class="prev-qrcode-w"></span><span class="prev-qrcode-b"></span><span class="prev-qrcode-w"></span>
|
||
<span class="prev-qrcode-w"></span><span class="prev-qrcode-w"></span><span class="prev-qrcode-b"></span><span class="prev-qrcode-w"></span><span class="prev-qrcode-w"></span>
|
||
</div>
|
||
</div>
|
||
<div class="overview-info">
|
||
<div class="overview-title">QRCode 二维码</div>
|
||
<div class="overview-desc">二维码生成</div>
|
||
</div>
|
||
</a>
|
||
|
||
<a href="/components/display/segmented" class="overview-card">
|
||
<div class="overview-preview">
|
||
<div class="prev-segmented">
|
||
<span class="prev-segmented-item prev-segmented-active">Day</span>
|
||
<span class="prev-segmented-item prev-segmented-inactive">Week</span>
|
||
<span class="prev-segmented-item prev-segmented-inactive" style="border-right:none">Month</span>
|
||
</div>
|
||
</div>
|
||
<div class="overview-info">
|
||
<div class="overview-title">Segmented 分段控制器</div>
|
||
<div class="overview-desc">分段选择</div>
|
||
</div>
|
||
</a>
|
||
|
||
<a href="/components/display/statistic" class="overview-card">
|
||
<div class="overview-preview" style="flex-direction:column;text-align:center">
|
||
<span class="prev-stat">1,234</span>
|
||
<span class="prev-stat-label">Active Users</span>
|
||
</div>
|
||
<div class="overview-info">
|
||
<div class="overview-title">Statistic 统计数值</div>
|
||
<div class="overview-desc">统计数值展示</div>
|
||
</div>
|
||
</a>
|
||
|
||
<a href="/components/display/table" class="overview-card">
|
||
<div class="overview-preview">
|
||
<table class="prev-table">
|
||
<thead><tr><th>Name</th><th>Age</th></tr></thead>
|
||
<tbody>
|
||
<tr><td>Alice</td><td>24</td></tr>
|
||
<tr><td>Bob</td><td>28</td></tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
<div class="overview-info">
|
||
<div class="overview-title">Table 表格</div>
|
||
<div class="overview-desc">数据表格</div>
|
||
</div>
|
||
</a>
|
||
|
||
<a href="/components/display/tag" class="overview-card">
|
||
<div class="overview-preview">
|
||
<span class="prev-tag prev-tag-blue">Tag 1</span>
|
||
<span class="prev-tag prev-tag-green">Tag 2</span>
|
||
<span class="prev-tag prev-tag-red">Tag 3</span>
|
||
</div>
|
||
<div class="overview-info">
|
||
<div class="overview-title">Tag 标签</div>
|
||
<div class="overview-desc">标签</div>
|
||
</div>
|
||
</a>
|
||
|
||
<a href="/components/display/timeline" class="overview-card">
|
||
<div class="overview-preview" style="flex-direction:column;align-items:flex-start">
|
||
<div class="prev-timeline">
|
||
<div class="prev-timeline-item">Event 1</div>
|
||
<div class="prev-timeline-item">Event 2</div>
|
||
<div class="prev-timeline-item">Event 3</div>
|
||
</div>
|
||
</div>
|
||
<div class="overview-info">
|
||
<div class="overview-title">Timeline 时间轴</div>
|
||
<div class="overview-desc">时间轴</div>
|
||
</div>
|
||
</a>
|
||
|
||
<a href="/components/display/tooltip" class="overview-card">
|
||
<div class="overview-preview">
|
||
<div style="position:relative">
|
||
<span class="prev-tooltip-target">Hover me</span>
|
||
<div style="position:absolute;top:-20px;left:0">
|
||
<span class="prev-tooltip-bubble">Tooltip text</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="overview-info">
|
||
<div class="overview-title">Tooltip 文字提示</div>
|
||
<div class="overview-desc">文字提示</div>
|
||
</div>
|
||
</a>
|
||
|
||
<a href="/components/display/tour" class="overview-card">
|
||
<div class="overview-preview">
|
||
<div class="prev-tour-steps">
|
||
<span class="prev-tour-dot prev-tour-dot-active">1</span>
|
||
<span class="prev-tour-dot prev-tour-dot-pending">2</span>
|
||
<span class="prev-tour-dot prev-tour-dot-pending">3</span>
|
||
</div>
|
||
</div>
|
||
<div class="overview-info">
|
||
<div class="overview-title">Tour 漫游式引导</div>
|
||
<div class="overview-desc">分步引导</div>
|
||
</div>
|
||
</a>
|
||
|
||
<a href="/components/display/tree" class="overview-card">
|
||
<div class="overview-preview">
|
||
<div class="prev-tree">
|
||
<div class="prev-tree-item prev-tree-root">Root</div>
|
||
<div class="prev-tree-item">Node 1</div>
|
||
<div class="prev-tree-item">Node 2</div>
|
||
</div>
|
||
</div>
|
||
<div class="overview-info">
|
||
<div class="overview-title">Tree 树形控件</div>
|
||
<div class="overview-desc">树形结构</div>
|
||
</div>
|
||
</a>
|
||
|
||
</div>
|
||
|
||
## 反馈 10 个组件
|
||
|
||
<div class="overview-grid">
|
||
|
||
<a href="/components/feedback/alert" class="overview-card">
|
||
<div class="overview-preview" style="flex-direction:column;align-items:stretch">
|
||
<div class="prev-alert prev-alert-success">✓ Success Tips</div>
|
||
</div>
|
||
<div class="overview-info">
|
||
<div class="overview-title">Alert 警告提示</div>
|
||
<div class="overview-desc">警告提示</div>
|
||
</div>
|
||
</a>
|
||
|
||
<a href="/components/feedback/drawer" class="overview-card">
|
||
<div class="overview-preview">
|
||
<div class="prev-drawer">
|
||
<div class="prev-drawer-panel">☰</div>
|
||
</div>
|
||
</div>
|
||
<div class="overview-info">
|
||
<div class="overview-title">Drawer 抽屉</div>
|
||
<div class="overview-desc">侧边抽屉</div>
|
||
</div>
|
||
</a>
|
||
|
||
<a href="/components/feedback/message" class="overview-card">
|
||
<div class="overview-preview" style="flex-direction:column;align-items:stretch">
|
||
<div class="prev-alert prev-alert-info">ℹ This is a message</div>
|
||
</div>
|
||
<div class="overview-info">
|
||
<div class="overview-title">Message 全局提示</div>
|
||
<div class="overview-desc">全局消息提示</div>
|
||
</div>
|
||
</a>
|
||
|
||
<a href="/components/feedback/modal" class="overview-card">
|
||
<div class="overview-preview">
|
||
<div class="prev-modal">
|
||
<div class="prev-modal-header">Dialog Title</div>
|
||
<div class="prev-modal-body">Content area</div>
|
||
<div class="prev-modal-footer">
|
||
<span style="color:#999;margin-right:8px">Cancel</span>
|
||
<span style="color:#1677ff">OK</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="overview-info">
|
||
<div class="overview-title">Modal 对话框</div>
|
||
<div class="overview-desc">模态对话框</div>
|
||
</div>
|
||
</a>
|
||
|
||
<a href="/components/feedback/notification" class="overview-card">
|
||
<div class="overview-preview">
|
||
<div class="prev-notification">
|
||
<div class="prev-notification-title">🔔 Notification Title</div>
|
||
<div class="prev-notification-desc">Description text here</div>
|
||
</div>
|
||
</div>
|
||
<div class="overview-info">
|
||
<div class="overview-title">Notification 通知提醒框</div>
|
||
<div class="overview-desc">通知提醒</div>
|
||
</div>
|
||
</a>
|
||
|
||
<a href="/components/feedback/popconfirm" class="overview-card">
|
||
<div class="overview-preview">
|
||
<div class="prev-popconfirm">
|
||
<span class="prev-popconfirm-trigger">Delete</span>
|
||
<div class="prev-popconfirm-bubble">Are you sure?</div>
|
||
</div>
|
||
</div>
|
||
<div class="overview-info">
|
||
<div class="overview-title">Popconfirm 气泡确认框</div>
|
||
<div class="overview-desc">气泡确认</div>
|
||
</div>
|
||
</a>
|
||
|
||
<a href="/components/feedback/progress" class="overview-card">
|
||
<div class="overview-preview" style="flex-direction:column;align-items:stretch;gap:4px">
|
||
<div style="display:flex;justify-content:space-between;font-size:11px;color:#999">
|
||
<span>Progress</span><span>68%</span>
|
||
</div>
|
||
<div class="prev-progress">
|
||
<div class="prev-progress-bar" style="width:68%"></div>
|
||
</div>
|
||
</div>
|
||
<div class="overview-info">
|
||
<div class="overview-title">Progress 进度条</div>
|
||
<div class="overview-desc">进度展示</div>
|
||
</div>
|
||
</a>
|
||
|
||
<a href="/components/feedback/result" class="overview-card">
|
||
<div class="overview-preview">
|
||
<div class="prev-result">
|
||
<div class="prev-result-icon prev-result-success">✓</div>
|
||
<div style="font-size:14px;font-weight:500">Success</div>
|
||
<div style="font-size:11px;color:#999">Operation completed</div>
|
||
</div>
|
||
</div>
|
||
<div class="overview-info">
|
||
<div class="overview-title">Result 结果</div>
|
||
<div class="overview-desc">操作结果反馈</div>
|
||
</div>
|
||
</a>
|
||
|
||
<a href="/components/feedback/skeleton" class="overview-card">
|
||
<div class="overview-preview">
|
||
<div style="width:100%">
|
||
<div class="prev-skeleton-line" style="width:60%"></div>
|
||
<div class="prev-skeleton-line"></div>
|
||
<div class="prev-skeleton-line" style="width:80%"></div>
|
||
</div>
|
||
</div>
|
||
<div class="overview-info">
|
||
<div class="overview-title">Skeleton 骨架屏</div>
|
||
<div class="overview-desc">加载占位</div>
|
||
</div>
|
||
</a>
|
||
|
||
<a href="/components/feedback/spin" class="overview-card">
|
||
<div class="overview-preview">
|
||
<div class="prev-spin"></div>
|
||
</div>
|
||
<div class="overview-info">
|
||
<div class="overview-title">Spin 加载中</div>
|
||
<div class="overview-desc">加载状态</div>
|
||
</div>
|
||
</a>
|
||
|
||
</div>
|