五、核心组件详解
UIkit 提供了 30 多个模块化和可扩展的组件，可以分为以下几个大类：
5.1 基础组件
5.1.1 按钮（Button）
<!-- 按钮类型 -->
<a class="uk-button uk-button-default" href="#">默认按钮</a>
<a class="uk-button uk-button-primary" href="#">主要按钮</a>
<a class="uk-button uk-button-secondary" href="#">次要按钮</a>
<a class="uk-button uk-button-danger" href="#">危险按钮</a>
<a class="uk-button uk-button-text" href="#">文本按钮</a>
<a class="uk-button uk-button-link" href="#">链接按钮</a>
<!-- 按钮尺寸 -->
<a class="uk-button uk-button-default uk-button-small" href="#">小按钮</a>
<a class="uk-button uk-button-default" href="#">默认按钮</a>
<a class="uk-button uk-button-default uk-button-large" href="#">大按钮</a>
<!-- 禁用状态 -->
<button class="uk-button uk-button-default" disabled>禁用按钮</button>
<!-- 按钮组 -->
<div class="uk-button-group">
<button class="uk-button uk-button-default">按钮1</button>
<button class="uk-button uk-button-default">按钮2</button>
<button class="uk-button uk-button-default">按钮3</button>
</div>
5.1.2 图标（Icon）
https://xgmoi.cn/
UIkit 内置了 600+ 图标，通过 uk-icon 属性和图标名称使用。
<!-- 基础图标 -->
<span uk-icon="icon: home"></span>
<span uk-icon="icon: user"></span>
<span uk-icon="icon: settings"></span>
<span uk-icon="icon: heart"></span>
<!-- 自定义图标大小 -->
<span uk-icon="icon: star; ratio: 2"></span>
<span uk-icon="icon: star; ratio: 3"></span>
<!-- 带颜色的图标 -->
<span uk-icon="icon: star" class="uk-text-primary"></span>
<span uk-icon="icon: star" class="uk-text-danger"></span>
<!-- 按钮中的图标 -->
<button class="uk-button uk-button-primary" type="button">
<span uk-icon="icon: plus"></span> 添加
</button>
5.1.3 徽章（Badge）
<!-- 基础徽章 -->
<span class="uk-badge">10<\/span>
<!-- 徽章变体 -->
<span class="uk-badge uk-badge-primary">主要徽章</span>
<span class="uk-badge uk-badge-success">成功徽章</span>
<span class="uk-badge uk-badge-warning">警告徽章</span>
<span class="uk-badge uk-badge-danger">危险徽章</span>
<!-- 带圆形的徽章 -->
<span class="uk-badge" style="border-radius: 50%; width: 24px; display: inline-block;">5</span>
<!-- 按钮上的徽章 -->
<button class="uk-button uk-button-default">
消息 <span class="uk-badge">3</span>
</button>
5.2 导航组件
5.2.1 导航栏（Navbar）
<nav class="uk-navbar-container" uk-navbar>
<div class="uk-navbar-left">
<a class="uk-navbar-item uk-logo" href="#">Logo</a>
<ul class="uk-navbar-nav">
<li class="uk-active"><a href="#">首页</a></li>
<li><a href="#">产品</a></li>
<li><a href="#">关于</a></li>
</ul>
</div>
<div class="uk-navbar-right">
<a class="uk-navbar-toggle" href="#" uk-search-icon></a>
<div class="uk-navbar-item">
<button class="uk-button uk-button-small">登录</button>
</div>
</div>
</nav>
5.2.2 面包屑（Breadcrumb）
<ul class="uk-breadcrumb">
<li><a href="#">首页</a></li>
<li><a href="#">产品中心</a></li>
<li><span>当前页面</span></li>
</ul>
5.2.3 分页（Pagination）
<ul class="uk-pagination">
<li><a href="#"><span uk-pagination-previous></span></a></li>
<li><a href="#">1</a></li>
<li class="uk-active"><span>2</span></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#"><span uk-pagination-next></span></a></li>
</ul>
5.3 布局组件
5.3.1 卡片（Card）
<div class="uk-card uk-card-default uk-card-body">
<h3 class="uk-card-title">卡片标题</h3>
<p>这是卡片的内容区域。</p>
</div>
<div class="uk-card uk-card-primary uk-card-body">
<h3 class="uk-card-title">主要卡片</h3>
<p>这是主要样式卡片。</p>
</div>
<div class="uk-card uk-card-secondary uk-card-hover uk-card-body">
<h3 class="uk-card-title">可悬停卡片</h3>
<p>鼠标悬停时有阴影效果。</p>
</div>
<!-- 带图片的卡片 -->
<div class="uk-card uk-card-default">
<div class="uk-card-media-top">
<img src="image.jpg" alt="封面">
</div>
<div class="uk-card-body">
<h3 class="uk-card-title">卡片标题</h3>
<p>卡片描述文字。</p>
<a href="#" class="uk-button uk-button-text">阅读更多</a>
</div>
</div>
5.3.2 容器（Container）
<!-- 容器中心内容 -->
<div class="uk-container">
<p>内容在容器中居中显示。</p>
</div>
<!-- 全宽容器 -->
<div class="uk-container-expand">
<p>容器宽度扩展至全宽。</p>
</div>
<!-- 小/大/特大容器 -->
<div class="uk-container uk-container-small">小容器</div>
<div class="uk-container uk-container-large">大容器</div>
<div class="uk-container uk-container-xlarge">特大容器</div>
5.3.3 面板（Panel）
<div class="uk-panel">
<h3 class="uk-panel-title">面板标题</h3>
<p>面板内容区域。</p>
</div>
<!-- 渐变背景面板 -->
<div class="uk-panel uk-panel-box">
<h3 class="uk-panel-title">带背景面板</h3>
<p>面板带渐变背景。</p>
</div>
5.4 表单组件
5.4.1 输入框（Input）
<!-- 基础输入框 -->
<input class="uk-input" type="text" placeholder="文本输入">
<!-- 文本域 -->
<textarea class="uk-textarea" rows="5" placeholder="多行文本"></textarea>
<!-- 选择框 -->
<select class="uk-select">
<option>选项1</option>
<option>选项2</option>
</select>
<!-- 复选框 -->
<label><input class="uk-checkbox" type="checkbox"> 复选框</label>
<!-- 单选框 -->
<label><input class="uk-radio" type="radio" name="radio"> 单选框</label>
<!-- 范围滑块 -->
<input class="uk-range" type="range" value="50">
<!-- 表单状态 -->
<input class="uk-input uk-form-success" type="text" placeholder="成功状态">
<input class="uk-input uk-form-danger" type="text" placeholder="错误状态">
<input class="uk-input uk-form-blank" type="text" placeholder="空白状态">
5.4.2 表单布局
<form class="uk-form-stacked">
<div class="uk-margin">
<label class="uk-form-label">用户名</label>
<div class="uk-form-controls">
<input class="uk-input" type="text" placeholder="请输入用户名">
</div>
</div>
<div class="uk-margin">
<label class="uk-form-label">密码</label>
<div class="uk-form-controls">
<input class="uk-input" type="password" placeholder="请输入密码">
</div>
</div>
<div class="uk-margin">
<div class="uk-form-controls">
<label><input class="uk-checkbox" type="checkbox"> 记住我</label>
</div>
</div>
<div class="uk-margin">
<div class="uk-form-controls">
<button class="uk-button uk-button-primary">登录</button>
</div>
</div>
</form>
5.5 覆盖层组件
5.5.1 模态框（Modal）
<!-- 模态框触发按钮 -->
<button class="uk-button uk-button-primary" type="button" uk-toggle="target: #my-modal">打开模态框</button>
<!-- 模态框内容 -->
<div id="my-modal" uk-modal>
<div class="uk-modal-dialog uk-modal-body">
<h2 class="uk-modal-title">模态框标题</h2>
<p>这是模态框的内容区域。</p>
<p class="uk-text-right">
<button class="uk-button uk-button-default uk-modal-close" type="button">取消</button>
<button class="uk-button uk-button-primary" type="button">确认</button>
</p>
</div>
</div>
5.5.2 工具提示（Tooltip）
<!-- 基础工具提示 -->
<button class="uk-button uk-button-default" uk-tooltip="这是一个工具提示">悬停我</button>
<!-- 带箭头 -->
<button class="uk-button uk-button-default" uk-tooltip="title: 带箭头的提示; pos: top-left">悬停我</button>
<!-- 自定义位置 -->
<button class="uk-button uk-button-default" uk-tooltip="title: 左侧提示; pos: left">左</button>
<button class="uk-button uk-button-default" uk-tooltip="title: 右侧提示; pos: right">右</button>
<button class="uk-button uk-button-default" uk-tooltip="title: 底部提示; pos: bottom">下</button>
工具提示位置选项：top、top-left、top-right、bottom、bottom-left、bottom-right、left、right。
5.5.3 下拉菜单（Dropdown）
<!-- 下拉菜单触发器 -->
<div uk-dropdown>
<ul class="uk-nav uk-dropdown-nav">
<li class="uk-active"><a href="#">首页</a></li>
<li><a href="#">产品</a></li>
<li><a href="#">关于</a></li>
<li><a href="#">联系</a></li>
</ul>
</div>
5.6 数据展示组件
5.6.1 表格（Table）
<!-- 基础表格 -->
<table class="uk-table">
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>城市</th>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<td>25</td>
<td>北京</td>
</tr>
</tbody>
</table>
<!-- 斑马纹表格 -->
<table class="uk-table uk-table-striped">
<!-- ... -->
</table>
<!-- 带分割线的表格 -->
<table class="uk-table uk-table-divider">
<!-- ... -->
</table>
<!-- 悬停高亮表格 -->
<table class="uk-table uk-table-hover">
<!-- ... -->
</table>
<!-- 响应式表格 -->
<div class="uk-overflow-auto">
<table class="uk-table">
<!-- 宽表格内容 -->
</table>
</div>
5.6.2 列表（List）
<!-- 无序列表 -->
<ul class="uk-list">
<li>列表项 1</li>
<li>列表项 2</li>
<li>列表项 3</li>
</ul>
<!-- 带圆点标记的列表 -->
<ul class="uk-list uk-list-bullet">
<li>列表项 1</li>
<li>列表项 2</li>
<li>列表项 3</li>
</ul>
<!-- 带分割线的列表 -->
<ul class="uk-list uk-list-divider">
<li>列表项 1</li>
<li>列表项 2</li>
<li>列表项 3</li>
</ul>
<!-- 带条纹的列表 -->
<ul class="uk-list uk-list-striped">
<li>列表项 1</li>
<li>列表项 2</li>
<li>列表项 3</li>
</ul>
