六、JavaScript 组件
UIkit 的 JavaScript 组件为静态页面提供了丰富的交互能力，包括模态框、下拉菜单、工具提示、滑动面板等。
6.1 模态框（Modal）- 完整交互示例
模态框是通过 uk-modal 属性创建的覆盖层窗口，用于在现有页面之上显示内容。
<!-- 模态框触发器 -->
<button class="uk-button uk-button-primary" uk-toggle="target: #modal-example">打开模态框</button>
<!-- 模态框结构 -->
<div id="modal-example" uk-modal>
<div class="uk-modal-dialog">
<button class="uk-modal-close-default" type="button" uk-close></button>
<div class="uk-modal-header">
<h2 class="uk-modal-title">模态框标题</h2>
</div>
<div class="uk-modal-body">
<p>这是模态框内容。</p>
<p>可以放置任意 HTML 内容。</p>
</div>
<div class="uk-modal-footer uk-text-right">
<button class="uk-button uk-button-default uk-modal-close">取消</button>
<button class="uk-button uk-button-primary">确认</button>
</div>
</div>
</div>
6.2 通知（Notification）
UIkit 提供了全局通知组件，用于显示临时消息。
// 基础通知
UIkit.notification('操作成功！');
// 带配置的通知
UIkit.notification({
message: '数据已保存',
status: 'success',
pos: 'top-right',
timeout: 3000
});
// 不同状态的通知
UIkit.notification('信息消息', { status: 'info' });
UIkit.notification('成功消息', { status: 'success' });
UIkit.notification('警告消息', { status: 'warning' });
UIkit.notification('错误消息', { status: 'danger' });
6.3 滑动面板（Off-canvas）
Off-canvas 是从屏幕侧边滑出的面板，常用于移动端菜单。
<!-- 滑动面板触发器 -->
<button class="uk-button uk-button-default" uk-toggle="target: #offcanvas-nav">打开菜单</button>
<!-- 滑动面板内容 -->
<div id="offcanvas-nav" uk-offcanvas>
<div class="uk-offcanvas-bar">
<button class="uk-offcanvas-close" type="button" uk-close></button>
<h3>菜单</h3>
<ul class="uk-nav uk-nav-default">
<li class="uk-active"><a href="#">首页</a></li>
<li><a href="#">产品</a></li>
<li><a href="#">关于</a></li>
</ul>
</div>
</div>
6.4 标签页（Tabs）
<!-- 标签页触发器 -->
<ul class="uk-tab" uk-tab>
<li class="uk-active"><a href="#">标签 1</a></li>
<li><a href="#">标签 2</a></li>
<li><a href="#">标签 3</a></li>
</ul>
<!-- 标签页内容 -->
<ul class="uk-switcher uk-margin">
<li>标签 1 的内容</li>
<li>标签 2 的内容</li>
<li>标签 3 的内容</li>
</ul>
6.5 手风琴（Accordion）
https://vhjpe.cn/
<ul class="uk-accordion" uk-accordion>
<li class="uk-open">
<a class="uk-accordion-title" href="#">第一部分</a>
<div class="uk-accordion-content">
<p>第一部分的内容。这部分默认是展开的。</p>
</div>
</li>
<li>
<a class="uk-accordion-title" href="#">第二部分</a>
<div class="uk-accordion-content">
<p>第二部分的内容。</p>
</div>
</li>
<li>
<a class="uk-accordion-title" href="#">第三部分</a>
<div class="uk-accordion-content">
<p>第三部分的内容。</p>
</div>
</li>
</ul>
6.6 图片库（Lightbox）
<!-- 单个图片 -->
<a class="uk-button uk-button-default" href="image.jpg" uk-lightbox>打开图片</a>
<!-- 图库 -->
<div class="uk-child-width-1-3 uk-grid-small" uk-grid>
<div>
<a href="image1.jpg" uk-lightbox="group: gallery">
<img src="image1_thumb.jpg" alt="">
</a>
</div>
<div>
<a href="image2.jpg" uk-lightbox="group: gallery">
<img src="image2_thumb.jpg" alt="">
</a>
</div>
<div>
<a href="image3.jpg" uk-lightbox="group: gallery">
<img src="image3_thumb.jpg" alt="">
</a>
</div>
</div>
七、实用工具类
7.1 文本
<!-- 文本对齐 -->
<p class="uk-text-left">左对齐</p>
<p class="uk-text-center">居中对齐</p>
<p class="uk-text-right">右对齐</p>
<p class="uk-text-justify">两端对齐</p>
<!-- 文本大小 -->
<p class="uk-text-small">小号文本</p>
<p class="uk-text-normal">正常文本</p>
<p class="uk-text-large">大号文本</p>
<p class="uk-text-lead">前导文本</p>
<!-- 文本颜色 -->
<p class="uk-text-primary">主要颜色</p>
<p class="uk-text-success">成功颜色</p>
<p class="uk-text-warning">警告颜色</p>
<p class="uk-text-danger">危险颜色</p>
<p class="uk-text-muted">柔色</p>
<!-- 文本截断 -->
<p class="uk-text-truncate">这是一段很长的文本，当超出容器宽度时会被截断并显示省略号。</p>
<!-- 文本换行 -->
<p class="uk-text-break">这是一段很长的文本，会在必要时自动换行。</p>
7.2 背景
<!-- 背景颜色 -->
<div class="uk-background-primary uk-padding">主要背景</div>
<div class="uk-background-secondary uk-padding">次要背景</div>
<div class="uk-background-muted uk-padding">柔色背景</div>
<!-- 背景图像 -->
<div class="uk-background-cover uk-height-medium uk-panel"
style="background-image: url(image.jpg);">
背景图像覆盖
</div>
<!-- 背景固定 -->
<div class="uk-background-fixed uk-height-medium uk-panel"
style="background-image: url(image.jpg);">
背景固定
</div>
7.3 间距
<!-- 边距 -->
<div class="uk-margin-small">小外边距</div>
<div class="uk-margin">默认外边距</div>
<div class="uk-margin-medium">中等外边距</div>
<div class="uk-margin-large">大外边距</div>
<!-- 内边距 -->
<div class="uk-padding-small">小内边距</div>
<div class="uk-padding">默认内边距</div>
<div class="uk-padding-large">大内边距</div>
<!-- 移除边距/内边距 -->
<div class="uk-margin-remove">无外边距</div>
<div class="uk-padding-remove">无内边距</div>
7.4 显示/隐藏
<!-- 显示/隐藏元素 -->
<div class="uk-visible@s">在平板及以上设备显示</div>
<div class="uk-visible@m">在桌面及以上设备显示</div>
<div class="uk-hidden@s">在平板及以上设备隐藏</div>
<div class="uk-hidden@m">在桌面及以上设备隐藏</div>
<!-- 响应式显示 -->
<div class="uk-display-block">块级显示</div>
<div class="uk-display-inline">内联显示</div>
<div class="uk-display-flex">Flex 显示</div>
