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 |
文章评论