ion-content

Contents

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

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

利用方法

<ion-content
  [scrollEvents]="true"
  (ionScrollStart)="logScrollStart()"
  (ionScroll)="logScrolling($event)"
  (ionScrollEnd)="logScrollEnd()">
</ion-content>
<ion-content></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.FunctionComponent = () => (
  <IonContent
    scrollEvents={true}
    onIonScrollStart={() => {}}
    onIonScroll={() => {}}
    onIonScrollEnd={() => {}}>
  </IonContent>
);
<template>
  <ion-content
    :scrollEvents="true"
    @ionScrollStart="logScrollStart()"
    @ionScroll="logScrolling($event)"
    @ionScrollEnd="logScrollEnd()">
  </ion-content>
</template>

プロパティ

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.

Attributecolor
Typestring | 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.

Attributeforce-overscroll
Typeboolean | 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.

Attributefullscreen
Typeboolean
Defaultfalse

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.

Attributescroll-events
Typeboolean
Defaultfalse

scrollX

Description

If you want to enable the content scrolling in the X axis, set this property to true.

Attributescroll-x
Typeboolean
Defaultfalse

scrollY

Description

If you want to disable the content scrolling in the Y axis, set this property to false.

Attributescroll-y
Typeboolean
Defaulttrue

イベント

NameDescription
ionScrollEmitted while scrolling. This event is disabled by default. Look at the property: `scrollEvents`
ionScrollEndEmitted when the scroll has ended.
ionScrollStartEmitted when the scroll has started.

メソッド

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.

SignaturegetScrollElement() => Promise<HTMLElement>

scrollByPoint

Description

Scroll by a specified X/Y distance in the component.

SignaturescrollByPoint(x: number, y: number, duration: number) => Promise<void>

scrollToBottom

Description

Scroll to the bottom of the component.

SignaturescrollToBottom(duration?: number) => Promise<void>

scrollToPoint

Description

Scroll to a specified X/Y location in the component.

SignaturescrollToPoint(x: number | null | undefined, y: number | null | undefined, duration?: number) => Promise<void>

scrollToTop

Description

Scroll to the top of the component.

SignaturescrollToTop(duration?: number) => Promise<void>

CSSカスタムプロパティ

NameDescription
--backgroundBackground of the content
--colorColor of the content
--keyboard-offsetKeyboard offset of the content
--offset-bottomOffset bottom of the content
--offset-topOffset top of the content
--padding-bottomBottom padding of the content
--padding-endRight padding if direction is left-to-right, and left padding if direction is right-to-left of the content
--padding-startLeft padding if direction is left-to-right, and right padding if direction is right-to-left of the content
--padding-topTop padding of the content

slot属性

NameDescription
Content is placed in the scrollable area if provided without a slot.
"fixed"Should be used for fixed content that should not scroll.
View Source