ion-footer
Footerは、ページの最下部にあるページのルートコンポーネントです。
Footerは、コンテンツ領域が正しくサイズ設定されていることを確認するために、ion-toolbar
のラッパーとして使用できます。
利用方法
<ion-content></ion-content>
<!-- Footer without a border -->
<ion-footer class="ion-no-border">
<ion-toolbar>
<ion-title>Footer - No Border</ion-title>
</ion-toolbar>
</ion-footer>
<ion-footer>
<ion-toolbar>
<ion-title>Footer</ion-title>
</ion-toolbar>
</ion-footer>
CopyCopied
<ion-content></ion-content>
<!-- Footer without a border -->
<ion-footer class="ion-no-border">
<ion-toolbar>
<ion-title>Footer - No Border</ion-title>
</ion-toolbar>
</ion-footer>
<ion-footer>
<ion-toolbar>
<ion-title>Footer</ion-title>
</ion-toolbar>
</ion-footer>
CopyCopied
import React from 'react';
import { IonContent, IonFooter, IonToolbar, IonTitle } from '@ionic/react';
export const FooterExample: React.FC = () => (
<>
<IonContent />
{/*-- Footer without a border --*/}
<IonFooter className="ion-no-border">
<IonToolbar>
<IonTitle>Footer - No Border</IonTitle>
</IonToolbar>
</IonFooter>
<IonFooter>
<IonToolbar>
<IonTitle>Footer</IonTitle>
</IonToolbar>
</IonFooter>
</>
);
CopyCopied
import { Component, h } from '@stencil/core';
@Component({
tag: 'footer-example',
styleUrl: 'footer-example.css'
})
export class FooterExample {
render() {
return [
<ion-content></ion-content>,
// Footer without a border
<ion-footer class="ion-no-border">
<ion-toolbar>
<ion-title>Footer - No Border</ion-title>
</ion-toolbar>
</ion-footer>,
<ion-footer>
<ion-toolbar>
<ion-title>Footer</ion-title>
</ion-toolbar>
</ion-footer>
];
}
}
CopyCopied
<template>
<ion-content></ion-content>
<!-- Footer without a border -->
<ion-footer class="ion-no-border">
<ion-toolbar>
<ion-title>Footer - No Border</ion-title>
</ion-toolbar>
</ion-footer>
<ion-footer>
<ion-toolbar>
<ion-title>Footer</ion-title>
</ion-toolbar>
</ion-footer>
</template>
<script>
import { IonContent, IonFooter, IonTitle, IonToolbar } from '@ionic/vue';
import { defineComponent } from 'vue';
export default defineComponent({
components: { IonContent, IonFooter, IonTitle, IonToolbar }
});
</script>
CopyCopied
プロパティ
mode | |
---|---|
Description | The mode determines which platform styles to use. |
Attribute | mode |
Type | "ios" | "md" |
translucent | |
Description | If Note: In order to scroll content behind the footer, the |
Attribute | translucent |
Type | boolean |
Default | false |