Version: v7

ion-footer

フッターは、ページの下部に配置されるページのルートコンポーネントです。1つ以上のツールバーのラッパーとして使用することが推奨されますが、あらゆる要素をラップするために使用することができます。ツールバーがフッターの中で使用される場合、コンテンツは正しいサイズに調整され、フッターはデバイスセーフエリアを考慮したものになります。

基本的な使い方

<ion-content class="ion-padding">
  <h1>Content</h1>
</ion-content>
<ion-footer>
  <ion-toolbar>
    <ion-title>Footer</ion-title>
  </ion-toolbar>
</ion-footer>

半透明のフッター

フッターは、translucentプロパティを設定することで、ネイティブのiOSアプリケーションに見られるような透明度に合わせることができます。フッターの後ろにスクロールするコンテンツを見るには、コンテンツに fullscreen プロパティを設定する必要があります。この効果は、モードが "ios" で、デバイスが backdrop-filter をサポートしている場合にのみ適用されます。

<ion-content [fullscreen]="true" class="ion-padding">
  <h1>Animal Facts</h1>

  <h2>Rhinoceros</h2>
  <img
    alt="rhino standing near grass"
    src="https://images.unsplash.com/flagged/photo-1556983257-71fddc36bc75?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1742&q=80"
  />
  <p>
    The rhinoceros gets its name from one of its most notable features: its horns. The word rhinoceros come from the
    Greek words rhino meaning “nose” and ceros meaning “horn.” The number of horns that a rhino has varies on the
    species. The two African species (the black rhino and the white rhino) and the Sumatran rhino have two horns, while
    the Javan rhino and one-horned rhino have one horn.
  </p>

  <h2>Sea Turtle</h2>
  <img
    alt="brown sea turtle in water"
    src="https://images.unsplash.com/photo-1573551089778-46a7abc39d9f?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1974&q=80"
  />
  <p>
    Sea turtles are characterized by a large, streamlined shell and non-retractile head and limbs. Unlike other turtles,
    sea turtles cannot pull their limbs and head inside their shells. Their limbs are flippers that are adapted for
    swimming, so they are vulnerable while on land.
  </p>

  <h2>Giraffe</h2>
  <img
    alt="giraffe sticking its tongue out"
    src="https://images.unsplash.com/photo-1577114995803-d8ce0e2b4aa9?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1746&q=80"
  />
  <p>
    Giraffes are known for their long, tall appearance. They have a small hump on their back like a camel and have a
    spotted pattern similar to that of a leopard. Because of the combination of these features, some people called the
    giraffe a “camel-leopard.” That’s where the giraffe’s species name “camelopardalis” comes from.
  </p>

  <h2>Elephant</h2>
  <img
    alt="two grey elephants on grass plains during sunset"
    src="https://images.unsplash.com/photo-1564760055775-d63b17a55c44?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1754&q=80"
  />
  <p>
    Elephants are the largest existing land animal, with massive bodies, large ears, and long trunks. Elephants’ long
    trunks are multifunctional. They are used to pick up objects, trumpet warnings, greet other elephants, or suck up
    water for drinking or bathing.
  </p>

  <h2>Dolphin</h2>
  <img
    alt="black and white dolphin in water"
    src="https://images.unsplash.com/photo-1607153333879-c174d265f1d2?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1742&q=80"
  />
  <p>
    Dolphins range in color depending on the species, from white, pearl, and pink to darker shades of brown, gray, blue,
    and black. They have smooth skin, flippers, and a dorsal fin. They have a long, slender snout with about 100 teeth
    and a streamlined body. They have a single blowhole on top of their head, which has a flap that opens to reveal a
    pair of nostrils. The dolphin uses these nostrils for breathing when it surfaces.
  </p>
</ion-content>
<ion-footer [translucent]="true">
  <ion-toolbar>
    <ion-title>Footer</ion-title>
  </ion-toolbar>
</ion-footer>

フェードフッター

多くのネイティブiOSアプリケーションは、ツールバーにフェード効果を持たせています。これは、フッターの collapse プロパティを "fade" に設定することで実現できます。コンテンツが最後までスクロールされると、フッターの背景とボーダーはフェードアウトします。この効果は、モードが "ios" のときだけ適用されます。

<ion-content class="ion-padding">
  <h1>Animal Facts</h1>

  <h2>Rhinoceros</h2>
  <img
    alt="rhino standing near grass"
    src="https://images.unsplash.com/flagged/photo-1556983257-71fddc36bc75?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1742&q=80"
  />
  <p>
    The rhinoceros gets its name from one of its most notable features: its horns. The word rhinoceros come from the
    Greek words rhino meaning “nose” and ceros meaning “horn.” The number of horns that a rhino has varies on the
    species. The two African species (the black rhino and the white rhino) and the Sumatran rhino have two horns, while
    the Javan rhino and one-horned rhino have one horn.
  </p>

  <h2>Sea Turtle</h2>
  <img
    alt="brown sea turtle in water"
    src="https://images.unsplash.com/photo-1573551089778-46a7abc39d9f?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1974&q=80"
  />
  <p>
    Sea turtles are characterized by a large, streamlined shell and non-retractile head and limbs. Unlike other turtles,
    sea turtles cannot pull their limbs and head inside their shells. Their limbs are flippers that are adapted for
    swimming, so they are vulnerable while on land.
  </p>

  <h2>Giraffe</h2>
  <img
    alt="giraffe sticking its tongue out"
    src="https://images.unsplash.com/photo-1577114995803-d8ce0e2b4aa9?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1746&q=80"
  />
  <p>
    Giraffes are known for their long, tall appearance. They have a small hump on their back like a camel and have a
    spotted pattern similar to that of a leopard. Because of the combination of these features, some people called the
    giraffe a “camel-leopard.” That’s where the giraffe’s species name “camelopardalis” comes from.
  </p>

  <h2>Elephant</h2>
  <img
    alt="two grey elephants on grass plains during sunset"
    src="https://images.unsplash.com/photo-1564760055775-d63b17a55c44?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1754&q=80"
  />
  <p>
    Elephants are the largest existing land animal, with massive bodies, large ears, and long trunks. Elephants’ long
    trunks are multifunctional. They are used to pick up objects, trumpet warnings, greet other elephants, or suck up
    water for drinking or bathing.
  </p>

  <h2>Dolphin</h2>
  <img
    alt="black and white dolphin in water"
    src="https://images.unsplash.com/photo-1607153333879-c174d265f1d2?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1742&q=80"
  />
  <p>
    Dolphins range in color depending on the species, from white, pearl, and pink to darker shades of brown, gray, blue,
    and black. They have smooth skin, flippers, and a dorsal fin. They have a long, slender snout with about 100 teeth
    and a streamlined body. They have a single blowhole on top of their head, which has a flap that opens to reveal a
    pair of nostrils. The dolphin uses these nostrils for breathing when it surfaces.
  </p>
</ion-content>
<ion-footer collapse="fade">
  <ion-toolbar>
    <ion-title>Footer</ion-title>
  </ion-toolbar>
</ion-footer>

仮想スクロールでの使用方法

フェードフッターを正しく動作させるためには、スクロールコンテナが必要です。仮想スクロールソリューションを使用する場合は、カスタムスクロールターゲットを提供する必要があります。コンテンツのスクロールを無効にし、スクロールを担当する要素に .ion-content-scroll-host クラスを追加する必要があります。

src/app/example.component.html
src/app/example.component.css

<ion-content [scrollY]="false">
  <div class="ion-content-scroll-host ion-padding">
    <h1>Animal Facts</h1>

    <h2>Rhinoceros</h2>
    <img
      alt="rhino standing near grass"
      src="https://images.unsplash.com/flagged/photo-1556983257-71fddc36bc75?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1742&q=80"
    />
    <p>
      The rhinoceros gets its name from one of its most notable features: its horns. The word rhinoceros come from the
      Greek words rhino meaning “nose” and ceros meaning “horn.” The number of horns that a rhino has varies on the
      species. The two African species (the black rhino and the white rhino) and the Sumatran rhino have two horns,
      while the Javan rhino and one-horned rhino have one horn.
    </p>

    <h2>Sea Turtle</h2>
    <img
      alt="brown sea turtle in water"
      src="https://images.unsplash.com/photo-1573551089778-46a7abc39d9f?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1974&q=80"
    />
    <p>
      Sea turtles are characterized by a large, streamlined shell and non-retractile head and limbs. Unlike other
      turtles, sea turtles cannot pull their limbs and head inside their shells. Their limbs are flippers that are
      adapted for swimming, so they are vulnerable while on land.
    </p>

    <h2>Giraffe</h2>
    <img
      alt="giraffe sticking its tongue out"
      src="https://images.unsplash.com/photo-1577114995803-d8ce0e2b4aa9?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1746&q=80"
    />
    <p>
      Giraffes are known for their long, tall appearance. They have a small hump on their back like a camel and have a
      spotted pattern similar to that of a leopard. Because of the combination of these features, some people called the
      giraffe a “camel-leopard.” That’s where the giraffe’s species name “camelopardalis” comes from.
    </p>

    <h2>Elephant</h2>
    <img
      alt="two grey elephants on grass plains during sunset"
      src="https://images.unsplash.com/photo-1564760055775-d63b17a55c44?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1754&q=80"
    />
    <p>
      Elephants are the largest existing land animal, with massive bodies, large ears, and long trunks. Elephants’ long
      trunks are multifunctional. They are used to pick up objects, trumpet warnings, greet other elephants, or suck up
      water for drinking or bathing.
    </p>

    <h2>Dolphin</h2>
    <img
      alt="black and white dolphin in water"
      src="https://images.unsplash.com/photo-1607153333879-c174d265f1d2?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1742&q=80"
    />
    <p>
      Dolphins range in color depending on the species, from white, pearl, and pink to darker shades of brown, gray,
      blue, and black. They have smooth skin, flippers, and a dorsal fin. They have a long, slender snout with about 100
      teeth and a streamlined body. They have a single blowhole on top of their head, which has a flap that opens to
      reveal a pair of nostrils. The dolphin uses these nostrils for breathing when it surfaces.
    </p>
  </div>
</ion-content>
<ion-footer collapse="fade">
  <ion-toolbar>
    <ion-title>Footer</ion-title>
  </ion-toolbar>
</ion-footer>

.ion-content-scroll-host {
  position: absolute;
  top: 0;
  left: 0;

  height: 100%;
  width: 100%;
  overflow-y: auto;
}

ボーダー

"md"モードでは、フッターは上部に box-shadow が表示されます。"ios"モードでは、上部に border が表示されます。これらは、フッターに .ion-no-border クラスを追加することで削除することができます。

<ion-content class="ion-padding">
  <h1>Content</h1>
</ion-content>
<ion-footer class="ion-no-border">
  <ion-toolbar>
    <ion-title>Footer</ion-title>
  </ion-toolbar>
</ion-footer>

プロパティ

collapse

Description	フッターに適用されるスクロール効果を記述します。iOS modeでのみ適用されます。
Attribute	`collapse`
Type	`"fade" ｜ undefined`
Default	`undefined`

mode

Description	modeは、どのプラットフォームのスタイルを使用するかを決定します。
Attribute	`mode`
Type	`"ios" ｜ "md"`
Default	`undefined`

translucent

Description	`true`の場合、フッターは半透明になります。modeが `"ios"` で、デバイスが `backdrop-filter` をサポートしている場合のみ適用されます。注意：フッターの後ろにコンテンツをスクロールさせるためには、コンテンツに `fullscreen` 属性が設定されている必要があります。
Attribute	`translucent`
Type	`boolean`
Default	`false`

イベント

No events available for this component.

メソッド

No public methods available for this component.

CSS Shadow Parts

No CSS shadow parts available for this component.

CSSカスタムプロパティ

No CSS custom properties available for this component.

Slots

No slots available for this component.

基本的な使い方​

半透明のフッター​

フェードフッター​

仮想スクロールでの使用方法​

ボーダー​

プロパティ​

collapse​

mode​

translucent​

イベント​

メソッド​

CSS Shadow Parts​

CSSカスタムプロパティ​

Slots​

Contents