zoukankan      html  css  js  c++  java
  • semantic-ui 图标

      semantic-ui提供了很多的图标,基本常用的在官网上面都能找到。要想记住这么多图标是不可能的,但是也是有简便方法记忆。

      首先,图标其实和按钮的区别基本没有,要说有的话,也就是基础样式的大小不同吧,按钮较大一点,当然也是可以加大小的值来设置。

      学习semantic的图标有这个简洁方法:

      1、图标只能使用i标签,不能使用div、span、button标签。

      2、按钮的名称全部转为小写之后,下载class中,然后加一个icon即可。

    1、基础图标

    <i class="home icon"></i>
    <i class="setting icon"></i>
    <i class="alarm icon"></i>
    

      

    2、定义图标大小 

      在图标的class中直接添加大小值即可。

    <i class="home mini icon"></i>
    <i class="setting large icon"></i>
    <i class="alarm huge icon"></i>
    

      

    3、设置图标颜色

      和按钮没区别,直接在图标的class中加颜色即可

    <i class="home mini red icon"></i>
    <i class="setting large blue icon"></i>
    <i class="alarm huge pink icon"></i>
    

      

    4、动画按钮

      在semantic ui中,提供了三种按钮动画,分别是左右移动、上下移动、淡入淡出

      因为要加动画效果,所以class要加一个animated

      因为要动画,那么就必须有些东西是隐藏的,有些东西是显示的,所以显示的内容的class设置为visible content,隐藏的内容设置为hidden content。

      如果不指定动画,则默认是左右移动,那么上下移动和淡入淡出就是在外层的div或者span上加一个vartical,fade即可

    <div class="ui animated button">
    	<div class="visible content">家</div>
    	<i class="hidden content">
    		<i class="home icon"></i>
    	</i>
    </div>
    

      显示效果:略

     

      总结:

      其实图标和按钮真的没什么不同,按钮能用的样式,图标也能用,所以图标我只写了这么点样式的说明。

  • 相关阅读:
    Com组件的两种复用方式:包容与集合的区别
    LAPACK/CLAPACK超级无敌算法库
    转:.h头文件 .lib库文件 .dll动态链接库文件关系
    python中类的变量与对象的变量
    重温:Martin Fowler的持续集成
    转:OOD的五个设计原则
    文章资源分享
    代码奔腾 Code Rush
    非ie6、ie7和ie8中iframe在dom中位置改变会引起iframe的指向重新加载
    前端开发利器webStorm
  • 原文地址:https://www.cnblogs.com/-beyond/p/8984374.html
Copyright © 2011-2022 走看看