UIkit panel学习记录

面板干啥的

如图,一个面板由3部分组成


UIkit panel学习记录_第1张图片
image.png

举个例子
如下,首先创建面板组件,再div中添加uk-panel类可以。接下来创建面板徽章。添加uk-badge类。之后是面板标题,以及内容。

Hot

Title

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

结果如下

UIkit panel学习记录_第2张图片
image.png

在grid中创建面板

既然grid是用来布局的,那么布局里面当然是可以放面板的。
首先创建grid。
然后在创建两块区域,uk-width-1-2之后分别把面板嵌套在这两块区域里面。

Hot

Title

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.
Hot

Title

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.

结果如下

UIkit panel学习记录_第3张图片
image.png

给面板添加修饰

比如uk-panel-box可以为面板添加边框。当然你也可以利用传统的css自定义边框。

    
Hot

Title

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.

结果如下可以看到这个uk-panel-box还自带阴影效果。

UIkit panel学习记录_第4张图片
image.png

面板添加背景色,只要加上uk-panel-box-primary 类即可,结果背景色变了

UIkit panel学习记录_第5张图片
image.png

鼠标经过效果

什么意思呢?就是说鼠经过面板之前面板是一个风格,经过面板时是另一个风格,类似hover 。这个添加uk-panerl-hover类就可以

给标题和内容添加分割线


    
Hot

Title

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.

结果如下

UIkit panel学习记录_第6张图片
image.png

就是添加一个uk-panel-header而已。

带图标的面板

    
Hot

Title

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.

在面板标题内添加一个图标即可。
结果如下

UIkit panel学习记录_第7张图片
image.png

带图片的面板

    
Hot

Title

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.

结果如下

UIkit panel学习记录_第8张图片
image.png

这个得添加一个div,这个div还得添加一个叫做uk-panel-teaser的类,然后把图片嵌在里面就好了。

参考

面板 - UIkit 中文文档

你可能感兴趣的:(UIkit panel学习记录)