Bài 14: Tìm hiểu Ion-App , Ion-content

  

Ion-App

Ứng dụng là một phần tử vùng chứa cho một ứng dụng Ionic. Chỉ nên có một <ion-app>phần tử cho mỗi dự án. Một ứng dụng có thể có nhiều thành phần Ionic bao gồm menu, tiêu đề, nội dung và chân trang. Các thành phần lớp phủ được thêm vào <ion-app>khi chúng được trình bày.

Ion-Content

Ion-Content cung cấp một vùng nội dung dễ sử dụng với một số phương pháp hữu ích để kiểm soát vùng có thể cuộn. Chỉ nên có một nội dung trong một chế độ xem.

Nội dung, cùng với nhiều thành phần Ionic khác, có thể được tùy chỉnh để sửa đổi phần đệm, lề và hơn thế nữa bằng cách sử dụng các kiểu toàn cầu được cung cấp trong CSS Utilities hoặc bằng cách tạo kiểu riêng cho nó bằng CSS và các CSS Custom Properties 

Fixed Content

Để đặt các phần tử bên ngoài vùng có thể cuộn, slot="fixed"có thể được thêm vào phần tử. Điều này sẽ hoàn toàn định vị phần tử đặt nó ở trên cùng bên trái. Để đặt phần tử ở một vị trí khác, hãy tạo kiểu cho phần tử đó bằng cách sử dụng Top,Right,buttom,left.

Usage

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

CopyCopied

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	string | 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
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

EVents

Name	Description
ionScroll	Emitted while scrolling. This event is disabled by default. Look at the property: `scrollEvents`
ionScrollEnd	Emitted when the scroll has ended.
ionScrollStart	Emitted when the scroll has started.

Methods

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 Custom Properties

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.