全栈工程师_java全栈工程师_全栈开发者学习经验总结

  • 首页
  • 开发工具
    • 软件安装
    • 软件使用
  • 前端
    • Ionic
    • Android
    • Capacitor
    • Angular
    • Vue
    • 苹果开发者账号
  • 后端
    • Java
    • Python
    • MyBatis
    • Spring
    • SpringBoot
    • SpringMVC
    • SpringCloud
  • 服务器
    • Linux
    • MySQL
    • Nginx
    • Tomcat
    • Docker
  • 其他
    • 生活碎片
    • 报错专区
  • 我
lipsuper
专注产出高质量原创手打文章
  1. 首页
  2. 前端
  3. Ionic
  4. 正文

盘点Ionic官方开箱即用的CSS类

2020年12月10日 775点热度 0人点赞 0条评论

Ionic官方提供了很多开箱即用的CSS类,我们要尽可能地经常使用他们,这样能让我们轻松一些,少些一些CSS代码。

用法示例:

<div class="ion-text-left">
    balabalabala
</div>

 

 

文本对齐类

Class Style Rule Description
.ion-text-left text-align: left 文字靠左。
.ion-text-right text-align: right 文字靠右。
.ion-text-start text-align: start 如果排布顺序为从左至右的话和 ion-text-left 效果一样,反之与 ion-text-right 效果一样。
.ion-text-end text-align: end 如果排布顺序为从左至右的话和 ion-text-right 效果一样,反之与 ion-text-left 效果一样。
.ion-text-center text-align: center 文字居中。
.ion-text-justify text-align: justify 文字两端对齐。
.ion-text-wrap white-space: normal 大概就是一行剩下的空间不足以放下一整个完整的单词的时候,就换行。不知道对中文有没有效果。
.ion-text-nowrap white-space: nowrap 不换行,超出的文字会被隐藏掉。

 

文本对齐类(在指定的屏幕大小下生效)

Class Description
.ion-text-{modifier} 所有的屏幕尺寸小都会生效。
.ion-text-sm-{modifier} 屏幕尺寸大于 576px才会生效。
.ion-text-md-{modifier} 屏幕尺寸大于768px才会生效。
.ion-text-lg-{modifier} 屏幕尺寸大于992px才会生效。
.ion-text-xl-{modifier} 屏幕尺寸大于1200px才会生效。

这里大括号里面的modifier可以是上一张表里面的right,left,center等等。

 

大小写转换类

Class Style Rule Description
.ion-text-uppercase text-transform: uppercase 强制转换为大写字母。
.ion-text-lowercase text-transform: lowercase 强制转换为小写字母。
.ion-text-capitalize text-transform: capitalize 强制把每个单词的首字母转为大写。

 

元素对齐类

Class Style Rule Description
.ion-float-left float: left 元素会漂浮在包含它的块级元素的左侧。
.ion-float-right float: right 元素会漂浮在包含它的块级元素的右侧。
.ion-float-start float: left / float: right 元素会漂浮在起始侧。
.ion-float-end float: left / float: right 元素会漂浮在尾部。

 

元素对齐类(在指定屏幕大小下生效)

Class Description
.ion-float-{modifier} 所有的屏幕尺寸小都会生效。
.ion-float-sm-{modifier} 屏幕尺寸大于 576px才会生效。
.ion-float-md-{modifier} 屏幕尺寸大于768px才会生效。
.ion-float-lg-{modifier} 屏幕尺寸大于992px才会生效。
.ion-float-xl-{modifier} 屏幕尺寸大于1200px才会生效。

 

元素展示类

Class Style Rule Description
.ion-hide display: none 元素会被隐藏。

元素展示类(在指定屏幕大小下生效)

Class Description
.ion-hide-sm-{dir} min-width: 576px (up) or max-width: 576px (down)的情况下生效(没有用过,不知道咋翻译,要用的话,自己去试一试。)
.ion-hide-md-{dir} min-width: 768px (up) or max-width: 768px (down)的情况下生效。
.ion-hide-lg-{dir} min-width: 992px (up) or max-width: 992px (down)的情况下生效。
.ion-hide-xl-{dir} min-width: 1200px (up) or max-width: 1200px (down)的情况下生效。

 

内容间距控制类(内边距)

Class Style Rule Description
.ion-padding padding: 16px 四边的内边距为16px。
.ion-padding-top padding-top: 16px 顶部内边距为16px。
.ion-padding-start padding-start: 16px 起始边内边距为16px。
.ion-padding-end padding-end: 16px 尾部内边距为16px。
.ion-padding-bottom padding-bottom: 16px 底部内边距为16px。
.ion-padding-vertical padding: 16px 0 上下内边距为16px,左右为0。
.ion-padding-horizontal padding: 0 16px 左右内边距为16px,上下为0。
.ion-no-padding padding: 0 四边内边距都为0。

 

内容间距控制类(外边距)

Class Style Rule Description
.ion-margin margin: 16px 四边的外边距为16px。
.ion-margin-top margin-top: 16px 顶部外边距为16px。
.ion-margin-start margin-start: 16px 起始边外边距为16px。
.ion-margin-end margin-end: 16px 尾部外边距为16px。
.ion-margin-bottom margin-bottom: 16px 底部外边距为16px。
.ion-margin-vertical margin: 16px 0 上下外边距为16px,左右为0。
.ion-margin-horizontal margin: 0 16px 左右外边距为16px,上下为0。
.ion-no-margin margin: 0 四边外边距都为0。

 

请注意:以上两个表格的边距默认都是16px,这个是可以自己改的。在@ionic/angular/css/padding.css中就可以修改。

 

容器弹性布局

Class Style Rule Description
.ion-justify-content-start justify-content: flex-start Items are packed toward the start on the main axis.
.ion-justify-content-end justify-content: flex-end Items are packed toward the end on the main axis.
.ion-justify-content-center justify-content: center Items are centered along the main axis.
.ion-justify-content-around justify-content: space-around Items are evenly distributed on the main axis with equal space around them.
.ion-justify-content-between justify-content: space-between Items are evenly distributed on the main axis.
.ion-justify-content-evenly justify-content: space-evenly Items are distributed so that the spacing between any two items is equal.
.ion-align-items-start align-items: flex-start Items are packed toward the start on the cross axis.
.ion-align-items-end align-items: flex-end Items are packed toward the end on the cross axis.
.ion-align-items-center align-items: center Items are centered along the cross axis.
.ion-align-items-baseline align-items: baseline Items are aligned so that their baselines align.
.ion-align-items-stretch align-items: stretch Items are stretched to fill the container.
.ion-nowrap flex-wrap: nowrap Items will all be on one line.
.ion-wrap flex-wrap: wrap Items will wrap onto multiple lines, from top to bottom.
.ion-wrap-reverse flex-wrap: wrap-reverse Items will wrap onto multiple lines, from bottom to top.

这里确实不好解释,下面的代码拷贝过去一看就明白了:

<ion-grid>
  <ion-row class="ion-justify-content-start">
    <ion-col size="3">
      <div>
        1 of 2
      </div>
    </ion-col>
    <ion-col size="3">
      <div>
        2 of 2
      </div>
    </ion-col>
  </ion-row>

  <ion-row class="ion-justify-content-center">
    <ion-col size="3">
      <div>
        1 of 2
      </div>
    </ion-col>
    <ion-col size="3">
      <div>
        2 of 2
      </div>
    </ion-col>
  </ion-row>

  <ion-row class="ion-justify-content-end">
    <ion-col size="3">
      <div>
        1 of 2
      </div>
    </ion-col>
    <ion-col size="3">
      <div>
        2 of 2
      </div>
    </ion-col>
  </ion-row>

  <ion-row class="ion-justify-content-around">
    <ion-col size="3">
      <div>
        1 of 2
      </div>
    </ion-col>
    <ion-col size="3">
      <div>
        2 of 2
      </div>
    </ion-col>
  </ion-row>

  <ion-row class="ion-justify-content-between">
    <ion-col size="3">
      <div>
        1 of 2
      </div>
    </ion-col>
    <ion-col size="3">
      <div>
        2 of 2
      </div>
    </ion-col>
  </ion-row>

  <ion-row class="ion-justify-content-evenly">
    <ion-col size="3">
      <div>
        1 of 2
      </div>
    </ion-col>
    <ion-col size="3">
      <div>
        2 of 2
      </div>
    </ion-col>
  </ion-row>
</ion-grid>

<ion-grid>
  <ion-row class="ion-align-items-start">
    <ion-col>
      <div>
        1 of 4
      </div>
    </ion-col>
    <ion-col>
      <div>
        2 of 4
      </div>
    </ion-col>
    <ion-col>
      <div>
        3 of 4
      </div>
    </ion-col>
    <ion-col>
      <div>
        4 of 4 <br>
        # <br>
        # <br>
        #
      </div>
    </ion-col>
  </ion-row>

  <ion-row class="ion-align-items-end">
    <ion-col>
      <div>
        1 of 4
      </div>
    </ion-col>
    <ion-col>
      <div>
        2 of 4
      </div>
    </ion-col>
    <ion-col>
      <div>
        3 of 4
      </div>
    </ion-col>
    <ion-col>
      <div>
        4 of 4 <br>
        # <br>
        # <br>
        #
      </div>
    </ion-col>
  </ion-row>

  <ion-row class="ion-align-items-center">
    <ion-col>
      <div>
        1 of 4
      </div>
    </ion-col>
    <ion-col>
      <div>
        2 of 4
      </div>
    </ion-col>
    <ion-col>
      <div>
        3 of 4
      </div>
    </ion-col>
    <ion-col>
      <div>
        4 of 4 <br>
        # <br>
        # <br>
        #
      </div>
    </ion-col>
  </ion-row>

  <ion-row class="ion-align-items-baseline">
    <ion-col>
      <div>
        1 of 4
      </div>
    </ion-col>
    <ion-col>
      <div>
        2 of 4
      </div>
    </ion-col>
    <ion-col>
      <div>
        3 of 4
      </div>
    </ion-col>
    <ion-col>
      <div>
        4 of 4 <br>
        # <br>
        # <br>
        #
      </div>
    </ion-col>
  </ion-row>

  <ion-row class="ion-align-items-stretch">
    <ion-col>
      <div>
        1 of 4
      </div>
    </ion-col>
    <ion-col>
      <div>
        2 of 4
      </div>
    </ion-col>
    <ion-col>
      <div>
        3 of 4
      </div>
    </ion-col>
    <ion-col>
      <div>
        4 of 4 <br>
        # <br>
        # <br>
        #
      </div>
    </ion-col>
  </ion-row>
</ion-grid>

 

条目弹性布局

Class Style Rule Description
.ion-align-self-start align-self: flex-start Item is packed toward the start on the cross axis.
.ion-align-self-end align-self: flex-end Item is packed toward the end on the cross axis.
.ion-align-self-center align-self: center Item is centered along the cross axis.
.ion-align-self-baseline align-self: baseline Item is aligned so that its baseline aligns with other item baselines.
.ion-align-self-stretch align-self: stretch Item is stretched to fill the container.
.ion-align-self-auto align-self: auto Item is positioned according to the parent's align-items value.

这里也是,直接拷贝代码过去看:

<ion-grid>
  <ion-row>
    <ion-col class="ion-align-self-start">
      <div>
        1 of 4
      </div>
    </ion-col>
    <ion-col class="ion-align-self-center">
      <div>
        2 of 4
      </div>
    </ion-col>
    <ion-col class="ion-align-self-end">
      <div>
        3 of 4
      </div>
    </ion-col>
    <ion-col>
      <div>
        4 of 4 <br>
        # <br>
        # <br>
        #
      </div>
    </ion-col>
  </ion-row>
</ion-grid>

 

边框控制类

Class Description
.ion-no-border 元素的边框会被隐藏(经常用于隐藏header和footer的边框)。

 

屏幕大小分水岭

Breakpoint Name Width
xs 0
sm 576px
md 768px
lg 992px
xl 1200px

本作品采用 知识共享署名 4.0 国际许可协议 进行许可
标签: 小技巧
最后更新:2020年12月10日

lipsuper

这个人很懒,什么都没留下

点赞
< 上一篇
下一篇 >

文章评论

取消回复

COPYRIGHT © 2021 lipsuper.com. ALL RIGHTS RESERVED.

Theme Kratos Made By Seaton Jiang

渝ICP备2021004735号-1

渝公网安备 50011202502306号