CSS 实用工具

Ionic Framework 提供了一组 CSS 实用程序类，可在任何元素上使用，以便修改文本、元素位置或调整填充和边距。

¥Ionic Framework provides a set of CSS utility classes that can be used on any element in order to modify the text, element placement or adjust the padding and margin.

注意

如果你的应用不是使用可用的 Ionic Framework 启动器启动的，则需要包含 全局样式表的可选部分 中列出的样式表才能使这些样式正常工作。

¥If your app was not started using an available Ionic Framework starter, the stylesheets listed in the optional section of the global stylesheets will need to be included in order for these styles to work.

文本修改

¥Text Modification

文本对齐

¥Text Alignment

<ion-grid>
  <ion-row>
    <ion-col>
      <div class="ion-text-start">
        <h3>text-start</h3>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac vehicula lorem.
      </div>
    </ion-col>
    <ion-col>
      <div class="ion-text-end">
        <h3>text-end</h3>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac vehicula lorem.
      </div>
    </ion-col>
    <ion-col>
      <div class="ion-text-center">
        <h3>text-center</h3>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac vehicula lorem.
      </div>
    </ion-col>
  </ion-row>
  <ion-row>
    <ion-col>
      <div class="ion-text-justify">
        <h3>text-justify</h3>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac vehicula lorem.
      </div>
    </ion-col>
    <ion-col>
      <div class="ion-text-wrap">
        <h3>text-wrap</h3>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac vehicula lorem.
      </div>
    </ion-col>
    <ion-col>
      <div class="ion-text-nowrap">
        <h3>text-nowrap</h3>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
      </div>
    </ion-col>
  </ion-row>
</ion-grid>

类	风格规则	描述
.ion-text-left	text-align: left	内联内容与行框的左边缘对齐。
.ion-text-right	text-align: right	内联内容与行框的右边缘对齐。
.ion-text-start	text-align: start	如果方向是从左到右，则与 text-left 相同；如果方向是从右到左，则与 text-right 相同。
.ion-text-end	text-align: end	如果方向是从左到右，则与 text-right 相同；如果方向是从右到左，则与 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	与 normal 一样折叠空白，但抑制文本内的换行符（文本换行）。

文本转换

¥Text Transformation

<ion-grid>
  <ion-row>
    <ion-col>
      <div class="ion-text-uppercase">
        <h3>text-uppercase</h3>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac vehicula lorem.
      </div>
    </ion-col>
    <ion-col>
      <div class="ion-text-lowercase">
        <h3>text-lowercase</h3>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac vehicula lorem.
      </div>
    </ion-col>
    <ion-col>
      <div class="ion-text-capitalize">
        <h3>text-capitalize</h3>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac vehicula lorem.
      </div>
    </ion-col>
  </ion-row>
</ion-grid>

类	风格规则	描述
.ion-text-uppercase	text-transform: uppercase	强制将所有字符转换为大写。
.ion-text-lowercase	text-transform: lowercase	强制将所有字符转换为小写。
.ion-text-capitalize	text-transform: capitalize	强制将每个单词的第一个字母转换为大写。

响应式文本类

¥Responsive Text Classes

上面列出的所有文本类都有附加类来根据屏幕尺寸修改文本。使用 text-{breakpoint}- 代替每个类中的 text-，仅在特定屏幕尺寸上使用该类，其中 {breakpoint} 是 Ionic 断点 中列出的断点名称之一。

¥All of the text classes listed above have additional classes to modify the text based on the screen size. Instead of text- in each class, use text-{breakpoint}- to only use the class on specific screen sizes, where {breakpoint} is one of the breakpoint names listed in Ionic Breakpoints.

下表显示了默认行为，其中 {modifier} 是以下任意一项：left、right、start、end、center、justify、wrap、nowrap、uppercase、lowercase 或 capitalize，如上所述。

¥The table below shows the default behavior, where {modifier} is any of the following: left, right, start, end, center, justify, wrap, nowrap, uppercase, lowercase, or capitalize, as they are described above.

类	描述
.ion-text-{modifier}	将修改器应用于所有屏幕尺寸上的元素。
.ion-text-sm-{modifier}	当 min-width: 576px 时，将修饰符应用于元素。
.ion-text-md-{modifier}	当 min-width: 768px 时，将修饰符应用于元素。
.ion-text-lg-{modifier}	当 min-width: 992px 时，将修饰符应用于元素。
.ion-text-xl-{modifier}	当 min-width: 1200px 时，将修饰符应用于元素。

元素放置

¥Element Placement

浮动元素

¥Float Elements

float CSS 属性指定元素应放置在其容器的左侧或右侧，其中文本和内联元素将环绕该元素。这样，该元素就取自网页的正常流程，但仍保留为流程的一部分，这与绝对定位相反。

¥The float CSS property specifies that an element should be placed along the left or right side of its container, where text and inline elements will wrap around it. This way, the element is taken from the normal flow of the web page, though still remaining a part of the flow, contrary to absolute positioning.

<ion-grid>
  <ion-row>
    <ion-col>
      <h3>no float</h3>
      <img
        alt="Silhouette of a person's head"
        src="https://ionic.nodejs.cn/img/demos/avatar.svg"
        height="50px"
      />
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac vehicula lorem.
    </ion-col>
    <ion-col>
      <h3>float-left</h3>
      <img
        alt="Silhouette of a person's head"
        src="https://ionic.nodejs.cn/img/demos/avatar.svg"
        height="50px"
        class="ion-float-left"
      />
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac vehicula lorem.
    </ion-col>
    <ion-col>
      <h3>float-right</h3>
      <img
        alt="Silhouette of a person's head"
        src="https://ionic.nodejs.cn/img/demos/avatar.svg"
        height="50px"
        class="ion-float-right"
      />
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac vehicula lorem.
    </ion-col>
  </ion-row>
</ion-grid>

类	风格规则	描述
.ion-float-left	float: left	该元素将浮动在其包含块的左侧。
.ion-float-right	float: right	该元素将浮动在其包含块的右侧。
.ion-float-start	float: left/float: right	如果方向是从左到右，则与 float-left 相同；如果方向是从右到左，则与 float-right 相同。
.ion-float-end	float: left/float: right	如果方向是从左到右，则与 float-right 相同；如果方向是从右到左，则与 float-left 相同。

响应式浮动类

¥Responsive Float Classes

上面列出的所有浮动类都有附加类来根据屏幕尺寸修改浮动。使用 float-{breakpoint}- 代替每个类中的 float-，仅在特定屏幕尺寸上使用该类，其中 {breakpoint} 是 Ionic 断点 中列出的断点名称之一。

¥All of the float classes listed above have additional classes to modify the float based on the screen size. Instead of float- in each class, use float-{breakpoint}- to only use the class on specific screen sizes, where {breakpoint} is one of the breakpoint names listed in Ionic Breakpoints.

下表显示了默认行为，其中 {modifier} 是以下任意一项：left、right、start 或 end，如上所述。

¥The table below shows the default behavior, where {modifier} is any of the following: left, right, start, or end, as they are described above.

类	描述
.ion-float-{modifier}	将修改器应用于所有屏幕尺寸上的元素。
.ion-float-sm-{modifier}	当 min-width: 576px 时，将修饰符应用于元素。
.ion-float-md-{modifier}	当 min-width: 768px 时，将修饰符应用于元素。
.ion-float-lg-{modifier}	当 min-width: 992px 时，将修饰符应用于元素。
.ion-float-xl-{modifier}	当 min-width: 1200px 时，将修饰符应用于元素。

元素显示

¥Element Display

CSS 的 display 属性决定元素是否可见。如果元素被隐藏，该元素仍将位于 DOM 中，但不会渲染。

¥The display CSS property determines if an element should be visible or not. The element will still be in the DOM, but not rendered, if it is hidden.

<ion-grid>
  <ion-row>
    <ion-col class="ion-hide">
      <div>
        <h3>hidden</h3>
        You can't see me.
      </div>
    </ion-col>
    <ion-col>
      <div>
        <h3>not-hidden</h3>
        You can see me!
      </div>
    </ion-col>
  </ion-row>
</ion-grid>

类	风格规则	描述
.ion-hide	display: none	该元素将被隐藏。

响应式显示属性

¥Responsive Display Attributes

还有其他类可以根据屏幕尺寸修改可见性。使用 .ion-hide-{breakpoint}-{dir} 来仅在特定屏幕尺寸上使用该类，而不是仅对所有屏幕尺寸使用 .ion-hide，其中 {breakpoint} 是 Ionic 断点 中列出的断点名称之一，{dir} 是该元素是否应在上面的所有屏幕尺寸上隐藏 (up) 或低于 (down) 指定的断点。

¥There are also additional classes to modify the visibility based on the screen size. Instead of just .ion-hide for all screen sizes, use .ion-hide-{breakpoint}-{dir} to only use the class on specific screen sizes, where {breakpoint} is one of the breakpoint names listed in Ionic Breakpoints, and {dir} is whether the element should be hidden on all screen sizes above (up) or below (down) the specified breakpoint.

类	描述
.ion-hide-sm-{dir}	当 min-width: 576px (up) 或 max-width: 576px (down) 时，将修饰符应用于元素。
.ion-hide-md-{dir}	当 min-width: 768px (up) 或 max-width: 768px (down) 时，将修饰符应用于元素。
.ion-hide-lg-{dir}	当 min-width: 992px (up) 或 max-width: 992px (down) 时，将修饰符应用于元素。
.ion-hide-xl-{dir}	当 min-width: 1200px (up) 或 max-width: 1200px (down) 时，将修饰符应用于元素。

内容空间

¥Content Space

元素填充

¥Element Padding

padding 类设置元素的填充区域。填充区域是元素内容与其边框之间的空间。

¥The padding class sets the padding area of an element. The padding area is the space between the content of the element and its border.

要应用的 padding 的默认量是 16px，并由 --ion-padding 变量设置。有关如何更改这些值的更多信息，请参阅 CSS 变量 部分。

¥The default amount of padding to be applied is 16px and is set by the --ion-padding variable. See the CSS Variables section for more information on how to change these values.

<ion-grid>
  <ion-row>
    <ion-col class="ion-padding">
      <div>padding</div>
    </ion-col>
    <ion-col class="ion-padding-top">
      <div>padding-top</div>
    </ion-col>
    <ion-col class="ion-padding-start">
      <div>padding-start</div>
    </ion-col>
    <ion-col class="ion-padding-end">
      <div>padding-end</div>
    </ion-col>
  </ion-row>
  <ion-row>
    <ion-col class="ion-padding-bottom">
      <div>padding-bottom</div>
    </ion-col>
    <ion-col class="ion-padding-vertical">
      <div>padding-vertical</div>
    </ion-col>
    <ion-col class="ion-padding-horizontal">
      <div>padding-horizontal</div>
    </ion-col>
    <ion-col class="ion-no-padding">
      <div>no-padding</div>
    </ion-col>
  </ion-row>
</ion-grid>

类	风格规则	描述
.ion-padding	padding: 16px	对所有面应用填充。
.ion-padding-top	padding-top: 16px	将填充应用于顶部。
.ion-padding-start	padding-start: 16px	将填充应用于开头。
.ion-padding-end	padding-end: 16px	将填充应用到末尾。
.ion-padding-bottom	padding-bottom: 16px	将填充应用到底部。
.ion-padding-vertical	padding: 16px 0	将填充应用于顶部和底部。
.ion-padding-horizontal	padding: 0 16px	对左侧和右侧应用填充。
.ion-no-padding	padding: 0	不对所有边应用填充。

元素边距

¥Element Margin

边距区域用一个空白区域扩展了边框区域，该空白区域用于将元素与其相邻元素分开。

¥The margin area extends the border area with an empty area used to separate the element from its neighbors.

要应用的 margin 的默认量是 16px，并由 --ion-margin 变量设置。有关如何更改这些值的更多信息，请参阅 CSS 变量 部分。

¥The default amount of margin to be applied is 16px and is set by the --ion-margin variable. See the CSS Variables section for more information on how to change these values.

<ion-grid>
  <ion-row>
    <ion-col class="ion-margin">
      <div>margin</div>
    </ion-col>
    <ion-col class="ion-margin-top">
      <div>margin-top</div>
    </ion-col>
    <ion-col class="ion-margin-start">
      <div>margin-start</div>
    </ion-col>
    <ion-col class="ion-margin-end">
      <div>margin-end</div>
    </ion-col>
  </ion-row>
  <ion-row>
    <ion-col class="ion-margin-bottom">
      <div>margin-bottom</div>
    </ion-col>
    <ion-col class="ion-margin-vertical">
      <div>margin-vertical</div>
    </ion-col>
    <ion-col class="ion-margin-horizontal">
      <div>margin-horizontal</div>
    </ion-col>
    <ion-col class="ion-no-margin">
      <div>no-margin</div>
    </ion-col>
  </ion-row>
</ion-grid>

类	风格规则	描述
.ion-margin	margin: 16px	对所有边应用边距。
.ion-margin-top	margin-top: 16px	将边距应用于顶部。
.ion-margin-start	margin-start: 16px	应用左侧边距。
.ion-margin-end	margin-end: 16px	将边距应用于右侧。
.ion-margin-bottom	margin-bottom: 16px	将边距应用于底部。
.ion-margin-vertical	margin: 16px 0	将边距应用于顶部和底部。
.ion-margin-horizontal	margin: 0 16px	对左侧和右侧应用边距。
.ion-no-margin	margin: 0	不对所有边应用边距。

弹性属性

¥Flex Properties

弹性容器属性

¥Flex Container Properties

<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 # # #</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 # # #</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 # # #</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 # # #</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 # # #</div>
    </ion-col>
  </ion-row>
</ion-grid>

类	风格规则	描述
.ion-justify-content-start	justify-content: flex-start	物品朝着主轴的起点排列。
.ion-justify-content-end	justify-content: flex-end	物品被封装在主轴的末端。
.ion-justify-content-center	justify-content: center	项目沿主轴居中。
.ion-justify-content-around	justify-content: space-around	项目均匀分布在主轴上，周围空间相等。
.ion-justify-content-between	justify-content: space-between	项目均匀分布在主轴上。
.ion-justify-content-evenly	justify-content: space-evenly	项目的分布使得任意两个项目之间的间距相等。
.ion-align-items-start	align-items: flex-start	物品从横轴的起点开始排列。
.ion-align-items-end	align-items: flex-end	物品被封装在横轴的末端。
.ion-align-items-center	align-items: center	项目沿横轴居中。
.ion-align-items-baseline	align-items: baseline	项目已对齐，以便它们的基线对齐。
.ion-align-items-stretch	align-items: stretch	物品被拉伸以填充容器。
.ion-nowrap	flex-wrap: nowrap	项目将全部排在一行上。
.ion-wrap	flex-wrap: wrap	项目将从上到下换行为多行。
.ion-wrap-reverse	flex-wrap: wrap-reverse	项目将从下到上换行为多行。

弹性条目属性

¥Flex Item Properties

<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 # # #</div>
    </ion-col>
  </ion-row>
</ion-grid>

类	风格规则	描述
.ion-align-self-start	align-self: flex-start	项目朝横轴上的起点封装。
.ion-align-self-end	align-self: flex-end	物品封装在横轴的末端。
.ion-align-self-center	align-self: center	项目沿横轴居中。
.ion-align-self-baseline	align-self: baseline	项目已对齐，以便其基线与其他项目基线对齐。
.ion-align-self-stretch	align-self: stretch	物品被拉伸以填充容器。
.ion-align-self-auto	align-self: auto	项目根据父级的 align-items 值定位。

边框显示

¥Border Display

边框显示 CSS 属性确定边框是否可见。该属性可应用于 ion-header 和 ion-footer。

¥The border display CSS property determines if the border should be visible or not. The property can be applied to the ion-header and the ion-footer.

<ion-header class="ion-no-border">
  <ion-toolbar>
    <ion-title>Header - No Border</ion-title>
  </ion-toolbar>
</ion-header>

<ion-footer class="ion-no-border">
  <ion-toolbar>
    <ion-title>Footer - No Border</ion-title>
  </ion-toolbar>
</ion-footer>

类	描述
.ion-no-border	该元素将没有边框。

Ionic 断点

¥Ionic Breakpoints

Ionic 在媒体查询中使用断点，以便根据屏幕尺寸设置不同的应用样式。以下断点名称用在上面列出的实用程序类中，当宽度满足时，该类将应用。

¥Ionic uses breakpoints in media queries in order to style an application differently based on the screen size. The following breakpoint names are used in the utility classes listed above, where the class will apply when the width is met.

断点名称	宽度
xs	0
sm	576px
md	768px
lg	992px
xl	1200px