- 开始使用
- 功能组件
- 附加组件
- 教程
- 如何定制
- 布局示例
- 项目结构
- 使用 Less & Sass
- 创建主题
- 创建样式
- Customizer.json 变量
- JavaScript 示例
- 自定义前缀
- 基础
- 打印组件
- 网格组件
- 面板
- 块
- 文章
- 评论
- 效果
- Flex 布局
- 覆盖
- 导航菜单
- 导航栏
- 二级导航
- 面包屑
- 分页
- 选项卡
- 缩略图导航
- 列表
- 描述列表
- 表格组件
- 表单
- 按钮组件
- 图标
- 关闭
- 徽章
- 提示框组件
- 缩略图
- 遮罩
- 文本
- 列
- 动画组件
- 对比度
- 下拉菜单
- 模态对话框
- 抽屉
- 切换器
- 拨动组件
- 滚动监听
- 平滑滚动
- 动态网格
- 视差网格
- 圆点导航
- 滑动导航
- 动态分页
- 高级表单
- 文件表单
- 密码表单
- 选择表单
- 占位符
- 进度条
- 灯箱
- 自动完成
- 日期选择器
- HTML 编辑器
- 滚动条
- 滑块集
- 幻灯片
- 视差
- 手风琴
- 通知
- 搜索
- 可嵌套
- 可排序
- 附着
- 时间选择器
- 工具提示
- 上传
面板
创建拥有不同样式的布局盒。
UIKit使用面板勾勒网页内容中的某些部分,它可以拥有不同的样式。通常,面板被布置在网格组件的网格列中。
用法
面板组件由面板本身,面板标题和面板徽章组成。为了防止产生多余的空白,面板内容顶部和底部的maigin都被移除了。
Class | 描述 |
---|---|
.uk-panel | 为<div> 元素添加这个类,定义面板组件。 |
.uk-panel-title | 为标题元素添加这个类创建面板标题。 |
.uk-panel-badge | 为 <div> 元素添加这个类创建一个面板的徽章。风格化徽章样式最简单的方法,就是通过加入徽章组件中的修饰符类。 |
注意默认情况下,面板是空白的也没有样式。因此,为面板添加修饰符类的样式是很重要的。在例子中,我们使用了 .uk-panel-box
类。
Markup
<div class="uk-panel">
<div class="uk-panel-badge uk-badge">...</div>
<h3 class="uk-panel-title">...</h3>
...
</div>
网格中的面板Panels in a grid
这是一个关于如何在网格组件中使用面板的简单例子。两个面板都使用了.uk-width-medium-1-2
类。
Markup
<div class="uk-grid">
<div class="uk-width-medium-1-2">
<div class="uk-panel">...</div>
</div>
<div class="uk-width-medium-1-2">
<div class="uk-panel">...</div>
</div>
</div>
修饰
使用修饰类为面板添加一个特定的样式是很有必要的。UIkit含有多种面板修饰,你也可以自己创建。
面板框
添加 .uk-panel-box
类来创建一个可见的面板框。这是默认的面板修饰样式。
Markup
<div class="uk-panel uk-panel-box">...</div>
注意 为面板创建鼠标经过效果,只需添加 .uk-panel-box-hover
类。这将在使用锚文本时带来方便。
醒目的面板盒/Panel box primary
添加 .uk-panel-box-primary
类来修饰面板框,并以不同的颜色使其显得突出。
Markup
<div class="uk-panel uk-panel-box uk-panel-box-primary">...</div>
注意 为面板创建鼠标经过效果,只需添加 .uk-panel-box-primary-hover
类。这将在使用锚文本时带来方便。
次要的面板盒/Panel box secondary
为面板框添加 .uk-panel-box-secondary
类,给它一个白色的背景。
Markup
<div class="uk-panel uk-panel-box uk-panel-box-secondary">...</div>
注意 为面板创建鼠标经过效果,只需添加 .uk-panel-box-secondary-hover
类。这将在使用锚文本时带来方便。
鼠标经过面板/Panel hover
添加 .uk-panel-hover
类为面板天鼠标经过效果,这将为用作锚的面板带来便利。
Markup
<a class="uk-panel uk-panel-hover" href="">...</a>
面板标题/Panel header
添加.uk-panel-header
类,用一条水平线分隔面板的标题和内容。
Markup
<div class="uk-panel uk-panel-header">...</div>
面板间距
添加 .uk-panel-space
添加类来增加面板四周的间距。
<div class="uk-panel uk-panel-space">...</div>
面板分隔线
添加 .uk-panel-divider
类将垂直堆叠的面板用水平线进行分隔。
<div class="uk-grid">
<div class="uk-width-medium-1-2">
<div class="uk-panel uk-panel-divider">...</div>
<div class="uk-panel uk-panel-divider">...</div>
<div class="uk-panel uk-panel-divider">...</div>
</div>
</div>
注意使用网格组件 中的 .uk-grid-divider
类分隔网格列。
带图片预览的面板框
为了在一个面板内显示不带有任何边框的图片,仅需添加.uk-panel-teaser
类至该面板内部的<div>
元素。
Markup
<div class="uk-panel uk-panel-box">
<div class="uk-panel-teaser">
<img src="" alt="">
</div>
</div>
带图标的面板
在面板标题中为 <i>
或 <span>
元素添加一个 .uk-icon-*
类,可以轻松地将 图标组件中的图标应用在面板中。
<div class="uk-panel">
<h3 class="uk-panel-title"><i class="uk-icon-*"></i>...</h3>
</div>
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论