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.

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

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