CSS 工具程式

Ionic Framework 提供一組 CSS 工具類別，可用於任何元素以修改文字、元素位置或調整邊距和內距。

注意

如果您的應用程式不是使用可用的 Ionic Framework 起始程式開始的，則需要包含全域樣式表的選用區段中列出的樣式表，這些樣式才能運作。

文字修改

文字對齊

<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 一樣摺疊空白字元，但會抑制文字內的換行符號 (文字換行)。

文字轉換

<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	強制將每個單字的第一個字母轉換為大寫。

響應式文字類別

上面列出的所有文字類別都有其他類別，可根據螢幕大小修改文字。在每個類別中，不要使用 text-，而應使用 text-{breakpoint}-，以便僅在特定螢幕大小上使用類別，其中 {breakpoint} 是Ionic 斷點中列出的斷點名稱之一。

下表顯示預設行為，其中 {modifier} 是下列任何一項：left、right、start、end、center、justify、wrap、nowrap、uppercase、lowercase 或 capitalize，如上所述。

類別	描述
.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 時，將修飾詞套用至元素。

元素位置

浮動元素

float CSS 屬性指定元素應放置在其容器的左側或右側，其中文字和內嵌元素將會環繞它。如此一來，元素會從網頁的正常流程中取出，但仍然是流程的一部分，與絕對位置相反。

<ion-grid>
  <ion-row>
    <ion-col>
      <h3>no float</h3>
      <img
        alt="Silhouette of a person's head"
        src="https://ionic.dev.org.tw/docs/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.dev.org.tw/docs/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.dev.org.tw/docs/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 相同。

響應式浮動類別

上面列出的所有浮動類別都有其他類別，可根據螢幕大小修改浮動。在每個類別中，不要使用 float-，而應使用 float-{breakpoint}-，以便僅在特定螢幕大小上使用類別，其中 {breakpoint} 是Ionic 斷點中列出的斷點名稱之一。

下表顯示預設行為，其中 {modifier} 是下列任何一項：left、right、start 或 end，如上所述。

類別	描述
.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 時，將修飾詞套用至元素。

元素顯示

display CSS 屬性會決定元素是否應可見。如果元素已隱藏，則該元素仍會在 DOM 中，但不會呈現。

<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	元素將會隱藏。

響應式顯示屬性

還有其他類別可根據螢幕大小修改可見度。不要對所有螢幕大小只使用 .ion-hide，而應使用 .ion-hide-{breakpoint}-{dir}，以便僅在特定螢幕大小上使用類別，其中 {breakpoint} 是Ionic 斷點中列出的斷點名稱之一，而 {dir} 是指元素是否應在指定斷點之上 (up) 或之下 (down) 的所有螢幕大小上隱藏。

類別	描述
.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) 時，將修飾符套用至元素。

內容空間

元素內距

內距類別設定元素的內距區域。內距區域是元素內容與其邊框之間的空間。

要套用的預設 padding 量為 16px，並由 --ion-padding 變數設定。請參閱 CSS 變數 章節，以取得有關如何變更這些值的更多資訊。

<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	在所有邊都不套用內距。

元素外距

外距區域使用空白區域延伸邊框區域，以將元素與其相鄰元素分隔開來。

要套用的預設 margin 量為 16px，並由 --ion-margin 變數設定。請參閱 CSS 變數 章節，以取得有關如何變更這些值的更多資訊。

<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	在所有邊都不套用外距。

彈性屬性

彈性容器屬性

<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	項目將從下到上換行到多行。

彈性項目屬性

<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 值定位。

邊框顯示

邊框顯示 CSS 屬性決定是否應顯示邊框。此屬性可以套用到 ion-header 和 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 在媒體查詢中使用斷點，以便根據螢幕大小以不同的方式設定應用程式的樣式。以下斷點名稱用於上面列出的公用程式類別中，當達到寬度時，該類別將套用。

斷點名稱	寬度
xs	0
sm	576px
md	768px
lg	992px
xl	1200px