继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

UIkit panel学习记录

aluckdog
关注TA
已关注
手记 307
粉丝 68
获赞 392

面板干啥的

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


webp

image.png


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

<div class="uk-panel">
  <div class="uk-panel-badge uk-badge uk-badge-success">Hot</div>
  <h3 class="uk-panel-title">Title</h3>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>

结果如下

webp

image.png

在grid中创建面板

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

<div class="uk-grid">
    <div class="uk-width-1-2">
        <div class="uk-panel">
            <div class="uk-panel-badge uk-badge uk-badge-success">Hot</div>
            <h3 class="uk-panel-title">Title</h3>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.    
        </div>
    </div>
    <div class="uk-width-1-2">
        <div class="uk-panel">
            <div class="uk-panel-badge uk-badge uk-badge-success">Hot</div>
            <h3 class="uk-panel-title">Title</h3>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.    
        </div>
    </div>
    </div>

结果如下

webp

image.png

给面板添加修饰

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

    <div class="uk-panel uk-panel-box">
            <div class="uk-panel-badge uk-badge uk-badge-success">Hot</div>
            <h3 class="uk-panel-title">Title</h3>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.    
        </div>
    </div>

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

webp

image.png

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

webp

image.png

鼠标经过效果

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

给标题和内容添加分割线

    <div class="uk-panel uk-panel-box uk-panel-box-primary uk-panel-header">
            <div class="uk-panel-badge uk-badge uk-badge-success">Hot</div>
            <h3 class="uk-panel-title">Title</h3>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.    
        </div>
    </div>

结果如下

webp

image.png


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

带图标的面板

    <div class="uk-panel uk-panel-box uk-panel-box-primary uk-panel-header">
            <div class="uk-panel-badge uk-badge uk-badge-success">Hot</div>
            <h3 class="uk-panel-title"><i class="uk-icon-user"></i>Title</h3>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.    
        </div>
    </div>

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

webp

image.png

带图片的面板

    <div class="uk-panel uk-panel-box uk-panel-box-primary uk-panel-header">
            <div class="uk-panel-teaser">
                <img src="data:image">
            </div>
            <div class="uk-panel-badge uk-badge uk-badge-success">Hot</div>
            <h3 class="uk-panel-title"><i class="uk-icon-user"></i>Title</h3>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.    
        </div>
    </div>

结果如下

webp

image.png

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



作者:鸭梨山大哎
链接:https://www.jianshu.com/p/06b6e7b4ec0d


打开App,阅读手记
0人推荐
发表评论
随时随地看视频慕课网APP