Version: v7 (beta)

ion-content

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

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

Basic Usage

Content can be the only top-level component in a page, or it can be used alongside a header, footer, or both. When used with a header or footer, it will adjust its size to fill the remaining height.

Fullscreen Content

By default, content fills the space between a header and footer but does not go behind them. In certain cases, it may be desired to have the content scroll behind the header and footer, such as when the translucent property is set on either of them, or opacity is set on the toolbar. This can be achieved by setting the fullscreen property on the content to true.

Fixed Content

To place elements outside of the scrollable area, assign them to the fixed slot. Doing so will absolutely position the element to the top left of the content. In order to change the position of the element, it can be styled using the top, right, bottom, and left CSS properties.

Scroll Methods

Content provides methods that can be called to scroll the content to the bottom, top, or to a specific point. They can be passed a duration in order to smoothly transition instead of instantly changing the position.

Scroll Events

Scroll events are disabled by default for content due to performance. However, they can be enabled by setting scrollEvents to true. This is necessary before listening to any of the scroll events.

Theming

Colors

CSS Shadow Parts

CSS Custom Properties

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;
}

<<<<<<< HEAD

使い方

<ion-content
  [scrollEvents]="true"
  (ionScrollStart)="logScrollStart()"
  (ionScroll)="logScrolling($event)"
  (ionScrollEnd)="logScrollEnd()">
    <h1>Main Content</h1>

    <div slot="fixed">
      <h1>Fixed Content</h1>
    </div>
</ion-content>

<ion-content>
  <h1>Main Content</h1>

  <div slot="fixed">
    <h1>Fixed Content</h1>
  </div>
</ion-content>

var content = document.querySelector('ion-content');
content.scrollEvents = true;
content.addEventListener('ionScrollStart', () => console.log('scroll start'));
content.addEventListener('ionScroll', (ev) => console.log('scroll', ev.detail));
content.addEventListener('ionScrollEnd', () => console.log('scroll end'));

import React from 'react';
import { IonContent } from '@ionic/react';

const ContentExample: React.FC = () => (
  <IonContent
    scrollEvents={true}
    onIonScrollStart={() => {}}
    onIonScroll={() => {}}
    onIonScrollEnd={() => {}}>
      <h1>Main Content</h1>

      <div slot="fixed">
        <h1>Fixed Content</h1>
      </div>
  </IonContent>
);

import { Component, h } from '@stencil/core';

@Component({
  tag: 'content-example',
  styleUrl: 'content-example.css'
})
export class ContentExample {
  logScrollStart() {
    console.log('Scroll start');
  }

  logScrolling(ev) {
    console.log('Scrolling', ev);
  }

  logScrollEnd() {
    console.log('Scroll end');
  }

  render() {
    return [
      <ion-content
        scrollEvents={true}
        onIonScrollStart={() => this.logScrollStart()}
        onIonScroll={(ev) => this.logScrolling(ev)}
        onIonScrollEnd={() => this.logScrollEnd()}>
          <h1>Main Content</h1>

          <div slot="fixed">
            <h1>Fixed Content</h1>
          </div>
      </ion-content>
    ];
  }
}

<template>
  <ion-content
    :scroll-events="true"
    @ionScrollStart="logScrollStart()"
    @ionScroll="logScrolling($event)"
    @ionScrollEnd="logScrollEnd()">
      <h1>Main Content</h1>

      <div slot="fixed">
        <h1>Fixed Content</h1>
      </div>
  </ion-content>
</template>

<script>
import { IonContent } from '@ionic/vue';
import { defineComponent } from 'vue';

export default defineComponent({
  components: { IonContent }
});
</script>

Properties

color

Description	The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see theming.
Attribute	`color`
Type	`"danger" ｜ "dark" ｜ "light" ｜ "medium" ｜ "primary" ｜ "secondary" ｜ "success" ｜ "tertiary" ｜ "warning" ｜ string & Record<never, never> ｜ undefined`
Default	`undefined`

forceOverscroll

Description	If `true` and the content does not cause an overflow scroll, the scroll interaction will cause a bounce. If the content exceeds the bounds of ionContent, nothing will change. Note, the does not disable the system bounce on iOS. That is an OS level setting.
Attribute	`force-overscroll`
Type	`boolean ｜ undefined`
Default	`undefined`

fullscreen

Description	If `true`, the content will scroll behind the headers and footers. This effect can easily be seen by setting the toolbar to transparent.
Attribute	`fullscreen`
Type	`boolean`
Default	`false`

scrollEvents

Description	Because of performance reasons, ionScroll events are disabled by default, in order to enable them and start listening from (ionScroll), set this property to `true`.
Attribute	`scroll-events`
Type	`boolean`
Default	`false`

scrollX

Description	If you want to enable the content scrolling in the X axis, set this property to `true`.
Attribute	`scroll-x`
Type	`boolean`
Default	`false`

scrollY

Description	If you want to disable the content scrolling in the Y axis, set this property to `false`.
Attribute	`scroll-y`
Type	`boolean`
Default	`true`

イベント

Name	Description
`ionScroll`	Emitted while scrolling. This event is disabled by default. Set `scrollEvents` to `true` to enable.
`ionScrollEnd`	Emitted when the scroll has ended. This event is disabled by default. Set `scrollEvents` to `true` to enable.
`ionScrollStart`	Emitted when the scroll has started. This event is disabled by default. Set `scrollEvents` to `true` to enable.

メソッド

getScrollElement

Description	Get the element where the actual scrolling takes place. This element can be used to subscribe to `scroll` events or manually modify `scrollTop`. However, it's recommended to use the API provided by `ion-content`: i.e. Using `ionScroll`, `ionScrollStart`, `ionScrollEnd` for scrolling events and `scrollToPoint()` to scroll the content into a certain point.
Signature	`getScrollElement() => Promise<HTMLElement>`

scrollByPoint

Description	Scroll by a specified X/Y distance in the component.
Signature	`scrollByPoint(x: number, y: number, duration: number) => Promise<void>`

scrollToBottom

Description	Scroll to the bottom of the component.
Signature	`scrollToBottom(duration?: number) => Promise<void>`

scrollToPoint

Description	Scroll to a specified X/Y location in the component.
Signature	`scrollToPoint(x: number ｜ undefined ｜ null, y: number ｜ undefined ｜ null, duration?: number) => Promise<void>`

scrollToTop

Description	Scroll to the top of the component.
Signature	`scrollToTop(duration?: number) => Promise<void>`

CSS Shadow Parts

Name	Description
`background`	The background of the content.
`scroll`	The scrollable container of the content.

CSSカスタムプロパティ

Name	Description
`--background`	Background of the content
`--color`	Color of the content
`--keyboard-offset`	Keyboard offset of the content
`--offset-bottom`	Offset bottom of the content
`--offset-top`	Offset top of the content
`--padding-bottom`	Bottom padding of the content
`--padding-end`	Right padding if direction is left-to-right, and left padding if direction is right-to-left of the content
`--padding-start`	Left padding if direction is left-to-right, and right padding if direction is right-to-left of the content
`--padding-top`	Top padding of the content

Slots

Name	Description
``	Content is placed in the scrollable area if provided without a slot.
`fixed`	Should be used for fixed content that should not scroll.

ion-content

Basic Usage

Header & Footer

Fullscreen Content

Fixed Content

Scroll Methods

Scroll Events

Theming

Colors

CSS Shadow Parts

CSS Custom Properties

Interfaces

ScrollBaseDetail

ScrollDetail

ScrollBaseCustomEvent

ScrollCustomEvent

使い方

Properties

color

forceOverscroll

fullscreen

scrollEvents

scrollX

scrollY

イベント

メソッド

getScrollElement

scrollByPoint

scrollToBottom

scrollToPoint

scrollToTop

CSS Shadow Parts

CSSカスタムプロパティ

Slots

Contents

Basic Usage​

Header & Footer​

Fullscreen Content​

Fixed Content​

Scroll Methods​

Scroll Events​

Theming​

Colors​

CSS Shadow Parts​

CSS Custom Properties​

Interfaces​

ScrollBaseDetail​

ScrollDetail​

ScrollBaseCustomEvent​

ScrollCustomEvent​

使い方​

Properties​

color​

forceOverscroll​

fullscreen​

scrollEvents​

scrollX​

scrollY​

イベント​

メソッド​

getScrollElement​

scrollByPoint​

scrollToBottom​

scrollToPoint​

scrollToTop​

CSS Shadow Parts​

CSSカスタムプロパティ​

Slots​

Contents

Basic Usage

Header & Footer

Fullscreen Content

Fixed Content

Scroll Methods

Scroll Events

Theming

Colors

CSS Shadow Parts

CSS Custom Properties

Interfaces

ScrollBaseDetail

ScrollDetail

ScrollBaseCustomEvent

ScrollCustomEvent

使い方

Properties

color

forceOverscroll

fullscreen

scrollEvents

scrollX

scrollY

イベント

メソッド

getScrollElement

scrollByPoint

scrollToBottom

scrollToPoint

scrollToTop

CSS Shadow Parts

CSSカスタムプロパティ

Slots