Version: v7

ion-content

Contentコンポーネントは、スクロール可能領域を制御するいくつかの便利なメソッドを備えた、使いやすいコンテンツ領域を提供します。 1つのビューに表示できるコンテンツは1つだけです。

Contentは、他の多くのIonicコンポーネントと同様に、 CSS Utilities で提供されるグローバルスタイルを使用するか、CSSおよび使用可能な CSS Custom Properties を使用して個別にスタイル設定することによって、padding や margin などを変更するようにカスタマイズできます。

基本的な使い方

<ion-content class="ion-padding">
  <h1>Heading 1</h1>
  <h2>Heading 2</h2>
  <h3>Heading 3</h3>
  <h4>Heading 4</h4>
  <h5>Heading 5</h5>
  <h6>Heading 6</h6>

  <p>Here's a small text description for the content. Nothing more, nothing less.</p>
</ion-content>

コンテンツは、ページ内の唯一のトップレベル・コンポーネントとすることも、ヘッダー、フッター、またはその両方と一緒に使用することも可能です。ヘッダーやフッターと一緒に使用すると、残りの高さを埋めるようにサイズが調整されます。

<ion-header>
  <ion-toolbar>
    <ion-title> Header </ion-title>
  </ion-toolbar>
</ion-header>
<ion-content class="ion-padding">
  <h1>Heading 1</h1>
  <h2>Heading 2</h2>
  <h3>Heading 3</h3>
  <h4>Heading 4</h4>
  <h5>Heading 5</h5>
  <h6>Heading 6</h6>

  <p>Here's a small text description for the content. Nothing more, nothing less.</p>
</ion-content>
<ion-footer>
  <ion-toolbar>
    <ion-title> Footer </ion-title>
  </ion-toolbar>
</ion-footer>

Fullscreen Content

デフォルトでは、コンテンツはヘッダーとフッターの間のスペースを埋めますが、それらの背景にまわることはありません。例えば、ヘッダーとフッターのどちらかに translucent プロパティを設定した場合や、ツールバーに opacity を設定した場合など、特定のケースでは、コンテンツをヘッダーとフッターの後ろにスクロールさせることが望まれるかもしれない。これは、コンテンツの fullscreen プロパティを true に設定することで実現することができます。

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

<ion-header>
  <ion-toolbar>
    <ion-title> Header </ion-title>
  </ion-toolbar>
</ion-header>
<ion-content [fullscreen]="true" class="ion-padding">
  <h1>Scroll the content and notice that the text goes behind the header and footer.</h1>

  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sed tellus nec mauris auctor dignissim fermentum in
    risus. Sed nec convallis sapien, id tincidunt enim. Mauris ornare eleifend nunc id mattis. Fusce augue diam,
    sagittis nec posuere at, consectetur tempor lectus. Nulla at lectus eget mauris iaculis malesuada mollis sed neque.
    Curabitur et risus tristique, malesuada mauris finibus, elementum massa. Proin lacinia mauris quis ligula blandit
    ullamcorper. Donec ut posuere lorem. In volutpat magna vitae tellus posuere pulvinar. Nam varius ligula justo, nec
    placerat lacus pharetra ac. Aenean massa orci, tristique in nisl ut, aliquet consectetur libero. Etiam luctus
    placerat vulputate. Aliquam ipsum massa, porttitor at mollis ut, pretium sit amet mi. In neque mauris, placerat et
    neque vel, tempor interdum dolor. Suspendisse gravida malesuada tellus, vel dapibus nisl dignissim vel. Cras ut
    nulla sit amet erat malesuada euismod vel a nulla.
  </p>
  <p>
    Phasellus sit amet iaculis odio, eget feugiat erat. Etiam sit amet turpis sit amet massa viverra maximus. Aenean
    venenatis porttitor pharetra. Fusce vulputate urna purus, vel efficitur mauris auctor non. Etiam libero odio,
    sodales in velit a, faucibus venenatis erat. Ut convallis sit amet urna in ultrices. Cras neque est, vehicula sed
    lorem ac, placerat commodo elit. Praesent turpis metus, elementum eget iaculis ac, elementum in odio. Nunc et elit
    faucibus, condimentum mauris consequat, ornare dolor. Sed ac lectus a est blandit tempor. Etiam lobortis tristique
    maximus.
  </p>
  <p>
    Quisque tempus porttitor massa, vel condimentum risus finibus a. Aliquam viverra maximus odio, id ornare justo
    tristique ac. Mauris euismod arcu eget neque sagittis rutrum. Ut vehicula porta lacus nec lobortis. Vestibulum et
    elit ultrices, lacinia metus in, lobortis est. Vivamus nisi justo, venenatis sit amet arcu ac, congue faucibus
    justo. Duis volutpat posuere enim, vel sagittis elit dictum et. Sed et congue mauris. Nam venenatis venenatis risus,
    ac condimentum neque sagittis sed. In eget nulla ultricies urna sollicitudin posuere. Aenean sagittis congue mauris.
    Proin nec libero mi. In hac habitasse platea dictumst. Praesent nunc nulla, dictum id molestie sed, pretium vitae
    turpis.
  </p>
  <p>
    Pellentesque vitae dapibus lacus. Nullam suscipit ornare risus quis ullamcorper. Nullam feugiat, sapien et sodales
    fermentum, risus ligula semper risus, id efficitur ligula augue id diam. Suspendisse lobortis est sit amet quam
    facilisis, ut vestibulum nunc dignissim. Donec at vestibulum magna. Maecenas maximus pretium metus. Phasellus congue
    sapien vel odio imperdiet, nec mollis odio euismod. Sed vel eros ut sapien accumsan condimentum vehicula vitae
    lectus. Donec sed efficitur lorem. Aenean tristique mi libero, eleifend tincidunt libero finibus at. Mauris
    condimentum fermentum rutrum.
  </p>
  <p>
    Nulla tristique ultricies suscipit. Donec non ornare elit. Vivamus id pretium mauris, nec sagittis leo. Fusce mattis
    eget est id sollicitudin. Suspendisse dictum sem magna, in imperdiet metus suscipit et. Suspendisse enim enim,
    venenatis et orci eu, suscipit congue lacus. Praesent vel ligula non eros tempor interdum. Proin justo orci,
    ultricies vitae diam sed, semper consectetur ligula. Aenean finibus ante velit, nec efficitur libero cursus cursus.
    Duis mi nunc, imperdiet sed condimentum vel, porttitor ut lacus. Quisque dui ipsum, vehicula sed vestibulum id,
    semper vel libero. Suspendisse tincidunt mollis condimentum. Nulla facilisi. Etiam neque nisl, egestas nec iaculis
    sed, tristique faucibus sem. Sed mollis dui quis ligula cursus rutrum.
  </p>
</ion-content>
<ion-footer>
  <ion-toolbar>
    <ion-title> Footer </ion-title>
  </ion-toolbar>
</ion-footer>

ion-toolbar {
  --opacity: 0.5;
}

コンテンツの固定

スクロール可能な領域の外側に要素を配置するには、fixedスロットに割り当てます。そうすることで、その要素はコンテンツの左上に絶対位置されます。要素の位置を変えるには、CSSのtop, right, bottom, leftプロパティを使ってスタイルを設定することができます。

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

<ion-content class="ion-padding">
  <h1>Scroll the content and notice that the fixed button does not scroll.</h1>

  <ion-button>Normal Button</ion-button>
  <ion-button slot="fixed">Fixed Button</ion-button>

  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sed tellus nec mauris auctor dignissim fermentum in
    risus. Sed nec convallis sapien, id tincidunt enim. Mauris ornare eleifend nunc id mattis. Fusce augue diam,
    sagittis nec posuere at, consectetur tempor lectus. Nulla at lectus eget mauris iaculis malesuada mollis sed neque.
    Curabitur et risus tristique, malesuada mauris finibus, elementum massa. Proin lacinia mauris quis ligula blandit
    ullamcorper. Donec ut posuere lorem. In volutpat magna vitae tellus posuere pulvinar. Nam varius ligula justo, nec
    placerat lacus pharetra ac. Aenean massa orci, tristique in nisl ut, aliquet consectetur libero. Etiam luctus
    placerat vulputate. Aliquam ipsum massa, porttitor at mollis ut, pretium sit amet mi. In neque mauris, placerat et
    neque vel, tempor interdum dolor. Suspendisse gravida malesuada tellus, vel dapibus nisl dignissim vel. Cras ut
    nulla sit amet erat malesuada euismod vel a nulla.
  </p>
  <p>
    Phasellus sit amet iaculis odio, eget feugiat erat. Etiam sit amet turpis sit amet massa viverra maximus. Aenean
    venenatis porttitor pharetra. Fusce vulputate urna purus, vel efficitur mauris auctor non. Etiam libero odio,
    sodales in velit a, faucibus venenatis erat. Ut convallis sit amet urna in ultrices. Cras neque est, vehicula sed
    lorem ac, placerat commodo elit. Praesent turpis metus, elementum eget iaculis ac, elementum in odio. Nunc et elit
    faucibus, condimentum mauris consequat, ornare dolor. Sed ac lectus a est blandit tempor. Etiam lobortis tristique
    maximus.
  </p>
  <p>
    Quisque tempus porttitor massa, vel condimentum risus finibus a. Aliquam viverra maximus odio, id ornare justo
    tristique ac. Mauris euismod arcu eget neque sagittis rutrum. Ut vehicula porta lacus nec lobortis. Vestibulum et
    elit ultrices, lacinia metus in, lobortis est. Vivamus nisi justo, venenatis sit amet arcu ac, congue faucibus
    justo. Duis volutpat posuere enim, vel sagittis elit dictum et. Sed et congue mauris. Nam venenatis venenatis risus,
    ac condimentum neque sagittis sed. In eget nulla ultricies urna sollicitudin posuere. Aenean sagittis congue mauris.
    Proin nec libero mi. In hac habitasse platea dictumst. Praesent nunc nulla, dictum id molestie sed, pretium vitae
    turpis.
  </p>
  <p>
    Pellentesque vitae dapibus lacus. Nullam suscipit ornare risus quis ullamcorper. Nullam feugiat, sapien et sodales
    fermentum, risus ligula semper risus, id efficitur ligula augue id diam. Suspendisse lobortis est sit amet quam
    facilisis, ut vestibulum nunc dignissim. Donec at vestibulum magna. Maecenas maximus pretium metus. Phasellus congue
    sapien vel odio imperdiet, nec mollis odio euismod. Sed vel eros ut sapien accumsan condimentum vehicula vitae
    lectus. Donec sed efficitur lorem. Aenean tristique mi libero, eleifend tincidunt libero finibus at. Mauris
    condimentum fermentum rutrum.
  </p>
  <p>
    Nulla tristique ultricies suscipit. Donec non ornare elit. Vivamus id pretium mauris, nec sagittis leo. Fusce mattis
    eget est id sollicitudin. Suspendisse dictum sem magna, in imperdiet metus suscipit et. Suspendisse enim enim,
    venenatis et orci eu, suscipit congue lacus. Praesent vel ligula non eros tempor interdum. Proin justo orci,
    ultricies vitae diam sed, semper consectetur ligula. Aenean finibus ante velit, nec efficitur libero cursus cursus.
    Duis mi nunc, imperdiet sed condimentum vel, porttitor ut lacus. Quisque dui ipsum, vehicula sed vestibulum id,
    semper vel libero. Suspendisse tincidunt mollis condimentum. Nulla facilisi. Etiam neque nisl, egestas nec iaculis
    sed, tristique faucibus sem. Sed mollis dui quis ligula cursus rutrum.
  </p>
</ion-content>

ion-button[slot='fixed'] {
  top: 50%;
  right: 20px;
}

スクロールメソッド

コンテンツにはメソッドが用意されており、これを呼び出すことでコンテンツを下、上、または特定のポイントにスクロールさせることができます。これらのメソッドには duration を渡すことができ、瞬時に位置を変更するのではなく、スムーズに移行することができます。

src/app/example.component.html
src/app/example.component.ts

<ion-content class="ion-padding">
  <h1>Click on the buttons to scroll the content.</h1>

  <ion-button expand="block" (click)="scrollToBottom()">Scroll to Bottom</ion-button>

  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sed tellus nec mauris auctor dignissim fermentum in
    risus. Sed nec convallis sapien, id tincidunt enim. Mauris ornare eleifend nunc id mattis. Fusce augue diam,
    sagittis nec posuere at, consectetur tempor lectus. Nulla at lectus eget mauris iaculis malesuada mollis sed neque.
    Curabitur et risus tristique, malesuada mauris finibus, elementum massa. Proin lacinia mauris quis ligula blandit
    ullamcorper. Donec ut posuere lorem. In volutpat magna vitae tellus posuere pulvinar. Nam varius ligula justo, nec
    placerat lacus pharetra ac. Aenean massa orci, tristique in nisl ut, aliquet consectetur libero. Etiam luctus
    placerat vulputate. Aliquam ipsum massa, porttitor at mollis ut, pretium sit amet mi. In neque mauris, placerat et
    neque vel, tempor interdum dolor. Suspendisse gravida malesuada tellus, vel dapibus nisl dignissim vel. Cras ut
    nulla sit amet erat malesuada euismod vel a nulla.
  </p>
  <p>
    Phasellus sit amet iaculis odio, eget feugiat erat. Etiam sit amet turpis sit amet massa viverra maximus. Aenean
    venenatis porttitor pharetra. Fusce vulputate urna purus, vel efficitur mauris auctor non. Etiam libero odio,
    sodales in velit a, faucibus venenatis erat. Ut convallis sit amet urna in ultrices. Cras neque est, vehicula sed
    lorem ac, placerat commodo elit. Praesent turpis metus, elementum eget iaculis ac, elementum in odio. Nunc et elit
    faucibus, condimentum mauris consequat, ornare dolor. Sed ac lectus a est blandit tempor. Etiam lobortis tristique
    maximus.
  </p>
  <p>
    Quisque tempus porttitor massa, vel condimentum risus finibus a. Aliquam viverra maximus odio, id ornare justo
    tristique ac. Mauris euismod arcu eget neque sagittis rutrum. Ut vehicula porta lacus nec lobortis. Vestibulum et
    elit ultrices, lacinia metus in, lobortis est. Vivamus nisi justo, venenatis sit amet arcu ac, congue faucibus
    justo. Duis volutpat posuere enim, vel sagittis elit dictum et. Sed et congue mauris. Nam venenatis venenatis risus,
    ac condimentum neque sagittis sed. In eget nulla ultricies urna sollicitudin posuere. Aenean sagittis congue mauris.
    Proin nec libero mi. In hac habitasse platea dictumst. Praesent nunc nulla, dictum id molestie sed, pretium vitae
    turpis.
  </p>
  <p>
    Pellentesque vitae dapibus lacus. Nullam suscipit ornare risus quis ullamcorper. Nullam feugiat, sapien et sodales
    fermentum, risus ligula semper risus, id efficitur ligula augue id diam. Suspendisse lobortis est sit amet quam
    facilisis, ut vestibulum nunc dignissim. Donec at vestibulum magna. Maecenas maximus pretium metus. Phasellus congue
    sapien vel odio imperdiet, nec mollis odio euismod. Sed vel eros ut sapien accumsan condimentum vehicula vitae
    lectus. Donec sed efficitur lorem. Aenean tristique mi libero, eleifend tincidunt libero finibus at. Mauris
    condimentum fermentum rutrum.
  </p>
  <p>
    Nulla tristique ultricies suscipit. Donec non ornare elit. Vivamus id pretium mauris, nec sagittis leo. Fusce mattis
    eget est id sollicitudin. Suspendisse dictum sem magna, in imperdiet metus suscipit et. Suspendisse enim enim,
    venenatis et orci eu, suscipit congue lacus. Praesent vel ligula non eros tempor interdum. Proin justo orci,
    ultricies vitae diam sed, semper consectetur ligula. Aenean finibus ante velit, nec efficitur libero cursus cursus.
    Duis mi nunc, imperdiet sed condimentum vel, porttitor ut lacus. Quisque dui ipsum, vehicula sed vestibulum id,
    semper vel libero. Suspendisse tincidunt mollis condimentum. Nulla facilisi. Etiam neque nisl, egestas nec iaculis
    sed, tristique faucibus sem. Sed mollis dui quis ligula cursus rutrum.
  </p>

  <ion-button expand="block" (click)="scrollToTop()">Scroll to Top</ion-button>
</ion-content>

import { Component, ViewChild } from '@angular/core';
import { IonContent } from '@ionic/angular';

@Component({
  selector: 'app-example',
  templateUrl: 'example.component.html',
})
export class ExampleComponent {
  @ViewChild(IonContent) content: IonContent;

  scrollToBottom() {
    // Passing a duration to the method makes it so the scroll slowly
    // goes to the bottom instead of instantly
    this.content.scrollToBottom(500);
  }

  scrollToTop() {
    // Passing a duration to the method makes it so the scroll slowly
    // goes to the top instead of instantly
    this.content.scrollToTop(500);
  }
}

Scroll Events

スクロールイベントは、パフォーマンス上、コンテンツに対してデフォルトで無効化されています。しかし、scrollEvents を true に設定することで、有効にすることができます。これは、スクロールイベントを聞く前に必要です。

src/app/example.component.html
src/app/example.component.ts

<!-- Scroll events are disabled by default for content for performance reasons, enable them to listen to them -->
<!-- Casting $event to $any is a temporary fix for this bug https://github.com/ionic-team/ionic-framework/issues/24245 -->
<ion-content
  [scrollEvents]="true"
  (ionScrollStart)="handleScrollStart()"
  (ionScroll)="handleScroll($any($event))"
  (ionScrollEnd)="handleScrollEnd()"
  class="ion-padding"
>
  <h1>Scroll to fire the scroll events and view them in the console.</h1>

  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sed tellus nec mauris auctor dignissim fermentum in
    risus. Sed nec convallis sapien, id tincidunt enim. Mauris ornare eleifend nunc id mattis. Fusce augue diam,
    sagittis nec posuere at, consectetur tempor lectus. Nulla at lectus eget mauris iaculis malesuada mollis sed neque.
    Curabitur et risus tristique, malesuada mauris finibus, elementum massa. Proin lacinia mauris quis ligula blandit
    ullamcorper. Donec ut posuere lorem. In volutpat magna vitae tellus posuere pulvinar. Nam varius ligula justo, nec
    placerat lacus pharetra ac. Aenean massa orci, tristique in nisl ut, aliquet consectetur libero. Etiam luctus
    placerat vulputate. Aliquam ipsum massa, porttitor at mollis ut, pretium sit amet mi. In neque mauris, placerat et
    neque vel, tempor interdum dolor. Suspendisse gravida malesuada tellus, vel dapibus nisl dignissim vel. Cras ut
    nulla sit amet erat malesuada euismod vel a nulla.
  </p>
  <p>
    Phasellus sit amet iaculis odio, eget feugiat erat. Etiam sit amet turpis sit amet massa viverra maximus. Aenean
    venenatis porttitor pharetra. Fusce vulputate urna purus, vel efficitur mauris auctor non. Etiam libero odio,
    sodales in velit a, faucibus venenatis erat. Ut convallis sit amet urna in ultrices. Cras neque est, vehicula sed
    lorem ac, placerat commodo elit. Praesent turpis metus, elementum eget iaculis ac, elementum in odio. Nunc et elit
    faucibus, condimentum mauris consequat, ornare dolor. Sed ac lectus a est blandit tempor. Etiam lobortis tristique
    maximus.
  </p>
  <p>
    Quisque tempus porttitor massa, vel condimentum risus finibus a. Aliquam viverra maximus odio, id ornare justo
    tristique ac. Mauris euismod arcu eget neque sagittis rutrum. Ut vehicula porta lacus nec lobortis. Vestibulum et
    elit ultrices, lacinia metus in, lobortis est. Vivamus nisi justo, venenatis sit amet arcu ac, congue faucibus
    justo. Duis volutpat posuere enim, vel sagittis elit dictum et. Sed et congue mauris. Nam venenatis venenatis risus,
    ac condimentum neque sagittis sed. In eget nulla ultricies urna sollicitudin posuere. Aenean sagittis congue mauris.
    Proin nec libero mi. In hac habitasse platea dictumst. Praesent nunc nulla, dictum id molestie sed, pretium vitae
    turpis.
  </p>
  <p>
    Pellentesque vitae dapibus lacus. Nullam suscipit ornare risus quis ullamcorper. Nullam feugiat, sapien et sodales
    fermentum, risus ligula semper risus, id efficitur ligula augue id diam. Suspendisse lobortis est sit amet quam
    facilisis, ut vestibulum nunc dignissim. Donec at vestibulum magna. Maecenas maximus pretium metus. Phasellus congue
    sapien vel odio imperdiet, nec mollis odio euismod. Sed vel eros ut sapien accumsan condimentum vehicula vitae
    lectus. Donec sed efficitur lorem. Aenean tristique mi libero, eleifend tincidunt libero finibus at. Mauris
    condimentum fermentum rutrum.
  </p>
  <p>
    Nulla tristique ultricies suscipit. Donec non ornare elit. Vivamus id pretium mauris, nec sagittis leo. Fusce mattis
    eget est id sollicitudin. Suspendisse dictum sem magna, in imperdiet metus suscipit et. Suspendisse enim enim,
    venenatis et orci eu, suscipit congue lacus. Praesent vel ligula non eros tempor interdum. Proin justo orci,
    ultricies vitae diam sed, semper consectetur ligula. Aenean finibus ante velit, nec efficitur libero cursus cursus.
    Duis mi nunc, imperdiet sed condimentum vel, porttitor ut lacus. Quisque dui ipsum, vehicula sed vestibulum id,
    semper vel libero. Suspendisse tincidunt mollis condimentum. Nulla facilisi. Etiam neque nisl, egestas nec iaculis
    sed, tristique faucibus sem. Sed mollis dui quis ligula cursus rutrum.
  </p>
</ion-content>

import { Component } from '@angular/core';
import { ScrollDetail } from '@ionic/angular';

@Component({
  selector: 'app-example',
  templateUrl: 'example.component.html',
})
export class ExampleComponent {
  handleScrollStart() {
    console.log('scroll start');
  }

  handleScroll(ev: CustomEvent<ScrollDetail>) {
    console.log('scroll', ev.detail);
  }

  handleScrollEnd() {
    console.log('scroll end');
  }
}

テーマ

Colors

<ion-content color="primary" class="ion-padding">
  <h1>Primary content</h1>
  <p>Here's a small text description for the content. Nothing more, nothing less.</p>
</ion-content>
<ion-content color="secondary" class="ion-padding">
  <h1>Secondary content</h1>
  <p>Here's a small text description for the content. Nothing more, nothing less.</p>
</ion-content>
<ion-content color="tertiary" class="ion-padding">
  <h1>Tertiary content</h1>
  <p>Here's a small text description for the content. Nothing more, nothing less.</p>
</ion-content>
<ion-content color="success" class="ion-padding">
  <h1>Success content</h1>
  <p>Here's a small text description for the content. Nothing more, nothing less.</p>
</ion-content>
<ion-content color="warning" class="ion-padding">
  <h1>Warning content</h1>
  <p>Here's a small text description for the content. Nothing more, nothing less.</p>
</ion-content>
<ion-content color="danger" class="ion-padding">
  <h1>Danger content</h1>
  <p>Here's a small text description for the content. Nothing more, nothing less.</p>
</ion-content>
<ion-content color="light" class="ion-padding">
  <h1>Light content</h1>
  <p>Here's a small text description for the content. Nothing more, nothing less.</p>
</ion-content>
<ion-content color="medium" class="ion-padding">
  <h1>Medium content</h1>
  <p>Here's a small text description for the content. Nothing more, nothing less.</p>
</ion-content>
<ion-content color="dark" class="ion-padding">
  <h1>Dark content</h1>
  <p>Here's a small text description for the content. Nothing more, nothing less.</p>
</ion-content>

CSS Shadow Parts

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

<ion-content class="ion-padding">
  <h1>Heading 1</h1>
  <h2>Heading 2</h2>
  <h3>Heading 3</h3>
  <h4>Heading 4</h4>
  <h5>Heading 5</h5>
  <h6>Heading 6</h6>

  <p>Here's a small text description for the content. Nothing more, nothing less.</p>
</ion-content>

ion-content::part(background) {
  background: #d31373;
}

ion-content::part(scroll) {
  color: #fff;
}

CSSカスタムプロパティ

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

<ion-content class="ion-padding">
  <h1>Heading 1</h1>
  <h2>Heading 2</h2>
  <h3>Heading 3</h3>
  <h4>Heading 4</h4>
  <h5>Heading 5</h5>
  <h6>Heading 6</h6>

  <p>Here's a small text description for the content. Nothing more, nothing less.</p>
</ion-content>

ion-content {
  --background: #d31373;
  --color: #fff;
}

Interfaces

ScrollBaseDetail

interface ScrollBaseDetail {
  isScrolling: boolean;
}

ScrollDetail

interface ScrollDetail extends GestureDetail, ScrollBaseDetail {
  scrollTop: number;
  scrollLeft: number;
}

ScrollBaseCustomEvent

必須ではありませんが、ionScrollStart と ionScrollEnd イベントをより強く型付けするために、CustomEvent インターフェースの代わりにこのインターフェースを利用することが可能です。

interface ScrollBaseCustomEvent extends CustomEvent {
  detail: ScrollBaseDetail;
  target: HTMLIonContentElement;
}

ScrollCustomEvent

必須ではありませんが、ionScroll イベントをより強く型付けするために、CustomEvent インターフェースの代わりにこのインターフェースを利用することが可能です。

interface ScrollCustomEvent extends ScrollBaseCustomEvent {
  detail: ScrollDetail;
}

プロパティ

color

Description	アプリケーションのカラーパレットから使用する色を指定します。デフォルトのオプションは以下の通りです。 `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, と `"dark"` です．色に関する詳しい情報は theming を参照してください。
Attribute	`color`
Type	`"danger" ｜ "dark" ｜ "light" ｜ "medium" ｜ "primary" ｜ "secondary" ｜ "success" ｜ "tertiary" ｜ "warning" ｜ string & Record<never, never> ｜ undefined`
Default	`undefined`

forceOverscroll

Description	`true`で、コンテンツがオーバーフロースクロールを引き起こさない場合、スクロールインタラクションはバウンスを引き起こします。コンテンツがionContentの境界を超えた場合、何も変化しません。なお、これはiOSのシステムバウンスを無効にするものではありません。これはOSレベルの設定です。
Attribute	`force-overscroll`
Type	`boolean ｜ undefined`
Default	`undefined`

fullscreen

Description	`true`の場合、コンテンツはヘッダーとフッターの後ろにスクロールされます。この効果は、ツールバーを透明に設定することで簡単に確認することができます。
Attribute	`fullscreen`
Type	`boolean`
Default	`false`

scrollEvents

Description	パフォーマンス上の理由から、ionScrollイベントはデフォルトで無効になっています。ionScrollイベントを有効にして(ionScroll)からリスニングを開始するには、このプロパティを`true`に設定します。
Attribute	`scroll-events`
Type	`boolean`
Default	`false`

scrollX

Description	X軸方向のコンテンツスクロールを有効にしたい場合は、このプロパティを`true`に設定します。
Attribute	`scroll-x`
Type	`boolean`
Default	`false`

scrollY

Description	Y軸方向のコンテンツスクロールを無効にしたい場合は、このプロパティに`false`を設定します。
Attribute	`scroll-y`
Type	`boolean`
Default	`true`

イベント

Name	Description
`ionScroll`	スクロール中に発行されます。このイベントはデフォルトで無効になっています。有効にするには `scrollEvents` に `true` を設定します。
`ionScrollEnd`	スクロールが終了したときに発行されます。このイベントはデフォルトで無効になっている。有効にするには `scrollEvents` に `true` を設定します。
`ionScrollStart`	スクロールが開始されたときに発行されます。このイベントはデフォルトで無効になっている。有効にするには `scrollEvents` に `true` を設定してください。

メソッド

getScrollElement

Description 実際のスクロールが行われる要素を取得します。この要素を使用して、scroll イベントを購読したり、scrollTop を手動で変更したりすることができる。スクロールイベントには ionScroll, ionScrollStart, ionScrollEnd を、コンテンツを特定のポイントにスクロールさせるには scrollToPoint() を使用することが推奨されます。

Signature getScrollElement() => Promise<HTMLElement>

scrollByPoint

Description	コンポーネントを指定したX/Y距離だけスクロールさせる。
Signature	`scrollByPoint(x: number, y: number, duration: number) => Promise<void>`

scrollToBottom

Description	コンポーネントの一番下までスクロールします。
Signature	`scrollToBottom(duration?: number) => Promise<void>`

scrollToPoint

Description	コンポーネント内の指定したX/Y位置までスクロールします。
Signature	`scrollToPoint(x: number ｜ undefined ｜ null, y: number ｜ undefined ｜ null, duration?: number) => Promise<void>`

scrollToTop

Description	コンポーネントの上部にスクロールします。
Signature	`scrollToTop(duration?: number) => Promise<void>`

CSS Shadow Parts

Name	Description
`background`	コンテンツの背景です。
`scroll`	コンテンツのスクロール可能なコンテナ。

CSSカスタムプロパティ

Name	Description
`--background`	コンテンツの背景
`--color`	コンテンツの色
`--keyboard-offset`	コンテンツのキーボードオフセット
`--offset-bottom`	コンテンツのオフセットボトム
`--offset-top`	コンテンツのオフセットトップ
`--padding-bottom`	コンテンツのBottom Padding
`--padding-end`	コンテンツの方向が左から右の場合はRight Padding、右から左の場合はLeft Paddingとなります。
`--padding-start`	コンテンツの方向が左から右の場合はLeft Padding、右から左の場合はRight Paddingとなります。
`--padding-top`	コンテンツのTop Padding

Slots

Name	Description
``	slotなしで提供される場合、コンテンツはスクロール可能な領域に配置されます。
`fixed`	スクロールしてはいけない固定コンテンツに使用する必要があります。

ion-content

基本的な使い方

Header & Footer

Fullscreen Content

コンテンツの固定

スクロールメソッド

Scroll Events

テーマ

Colors

CSS Shadow Parts

CSSカスタムプロパティ

Interfaces

ScrollBaseDetail

ScrollDetail

ScrollBaseCustomEvent

ScrollCustomEvent

プロパティ

color

forceOverscroll

fullscreen

scrollEvents

scrollX

scrollY

イベント

メソッド

getScrollElement

scrollByPoint

scrollToBottom

scrollToPoint

scrollToTop

CSS Shadow Parts

CSSカスタムプロパティ

Slots

Contents

基本的な使い方​

Header & Footer​

Fullscreen Content​

コンテンツの固定​

スクロールメソッド​

Scroll Events​

テーマ​

Colors​

CSS Shadow Parts​

CSSカスタムプロパティ​

Interfaces​

ScrollBaseDetail​

ScrollDetail​

ScrollBaseCustomEvent​

ScrollCustomEvent​

プロパティ​

color​

forceOverscroll​

fullscreen​

scrollEvents​

scrollX​

scrollY​

イベント​

メソッド​

getScrollElement​

scrollByPoint​

scrollToBottom​

scrollToPoint​

scrollToTop​

CSS Shadow Parts​

CSSカスタムプロパティ​

Slots​

Contents

基本的な使い方

Header & Footer

Fullscreen Content

コンテンツの固定

スクロールメソッド

Scroll Events

テーマ

Colors

CSS Shadow Parts

CSSカスタムプロパティ

Interfaces

ScrollBaseDetail

ScrollDetail

ScrollBaseCustomEvent

ScrollCustomEvent

プロパティ

color

forceOverscroll

fullscreen

scrollEvents

scrollX

scrollY

イベント

メソッド

getScrollElement

scrollByPoint

scrollToBottom

scrollToPoint

scrollToTop

CSS Shadow Parts

CSSカスタムプロパティ

Slots