博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
UIKit的手风琴菜单,单条展开和多条同时展开
阅读量:7135 次
发布时间:2019-06-28

本文共 3970 字,大约阅读时间需要 13 分钟。

这个也要进来看看哈。

记得加多个属性时的用法就可以了。

因为官网提供太多的SAPMLE啦。。

http://www.getuikit.net/docs/accordion.html

使用手风琴菜单,为容器元素添加 uk-accordion 类和 data-uk-accordion 属性就行。然后为容器内的每项内容添加uk-accordion-content类。最后,为标题或者其他元素添加 uk-accordion-title 类来创建拨动器。

 

还要注意,JQUERY一定要导入才能用哟。

        
Accordion - UIkit tests

N多选项可用:

JavaScript 选项选项    可用值    默认值    描述showfirst    boolean    true    初始化时首先显示collapse    boolean    true    允许同时展开多条animate    boolean    true    拨动动画easing    string    swing    动画功能duration    integer    300    动画持续时间toggle    string    .uk-accordion-title    拨动器的Css选择器containers    string    .uk-accordion-content    内容容器的Css选择器clsactive    string    uk-active    条目被激活时添加这个Class

好吧,,来个单条和多条的东东:

Heading 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Heading 2

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Heading 3

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.


多条Example

Heading 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Heading 2

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Heading 3

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

好吧,看看它丑陋的样子咯~~

转载地址:http://cbcrl.baihongyu.com/

你可能感兴趣的文章
全栈前端入门必看 koa2+mysql+vue+vant 构建简单版移动端博客
查看>>
Swift 返回一个渐变的 UIImageView
查看>>
Activiti-master activiti5 在线java web流程设计器画布整合视频教程
查看>>
webpack4入门
查看>>
学习Java笔记2018.3.31
查看>>
加快你的网站响应速度-Vue懒加载
查看>>
综合扫描及安全评估
查看>>
浅谈eval函数
查看>>
每周分享五个 PyCharm 使用技巧(一)
查看>>
遗传算法学习总结
查看>>
react 服务端渲染
查看>>
[译]What's New in HTML 5.2
查看>>
Vue-CLI and Leaflet: 添加 marker, polyline, polygon
查看>>
mongodb使用笔记
查看>>
阿里面试,我挂在了第四轮……
查看>>
iOS H5秒开技术实战(一)综述
查看>>
CMOS BIOS
查看>>
vue excel导入导出
查看>>
Flutter 上实现 WebRTC | 掘金技术征文
查看>>
Storm-HolleWorld(二)
查看>>