Fullscreen bar
The Fullscreen bar is a header component that should be presented at the top of an app when it is in fullscreen mode. This is designed to ensure a uniform placement for a button to exit that mode. The Fullscreen bar can be customized by adding children
.
Use to provide structure for the top of an application while in fullscreen mode.
vue
<template>
<div style="height: 250px; width: 100%">
<FullscreenBar v-if="isFullscreen" @action="handleActionClick">
<div
:style="style"
>
<Badge tone="info">Draft</Badge>
<div style="marginLeft: 1rem; flexGrow: 1">
<Text variant="headingLg" as="p">
Page title
</Text>
</div>
<ButtonGroup>
<Button>Secondary Action</Button>
<Button variant="primary">
Primary Action
</Button>
</ButtonGroup>
</div>
</FullscreenBar>
<div style="padding: 1rem">
<Button v-if="!isFullscreen" @click="setFullscreen(true)">Go Fullscreen</Button>
<Text variant="headingLg" as="p">
Page content
</Text>
</div>
</div>
</template>
<script setup lang="ts">
import { ref } from 'vue';
const style = {
display: 'flex',
flexGrow: 1,
justifyContent: 'space-between',
alignItems: 'center',
paddingLeft: '1rem',
paddingRight: '1rem',
}
const isFullscreen = ref(true);
const setFullscreen = (value: boolean) => {
isFullscreen.value = value;
};
const handleActionClick = () => {
setFullscreen(false);
};
</script>
vue
<template>
<div style="height: 250px; width: 100%">
<FullscreenBar v-if="isFullscreen" @action="handleActionClick">
</FullscreenBar>
<div style="padding: 1rem">
<Button v-if="!isFullscreen" @click="setFullscreen(true)">Go Fullscreen</Button>
<Text variant="headingLg" as="p">
Page content
</Text>
</div>
</div>
</template>
<script setup lang="ts">
import { ref } from 'vue';
const isFullscreen = ref(true);
const setFullscreen = (value: boolean) => {
isFullscreen.value = value;
};
const handleActionClick = () => {
setFullscreen(false);
};
</script>
Slots
No slots found for this component, run `yarn gen:docs` to generate component meta first.
Events
FullscreenBar events
Best practices
The Fullscreen bar component should:
- Be presented when an App is in fullscreen mode as a means of exiting that mode.
- Fire an action to exit fullscreen mode.
Related components
- To provide quick, at-a-glance feedback on the outcome of an action, use the App Bridge Toast API component.
- To indicate to merchants that a page is loading or an upload is processing, use the App Bridge Loading API component.