Dialog | DialogBody

DialogBody#

Description#

  • Dialog body that scrolls on its own, between a header and footer that stay put. When content overflows, it becomes tabbable with a region name so arrow keys can scroll it.

Props#

  • padding ('none'|'sm'|'md') — Vertical padding of the body. Default: 'md'.
  • label (string) — Region name when scrolling. Falls back to the catalog (dialog.body) or “Content”.

Usage#

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19

<script setup lang="ts">
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogBody, DialogFooter, ActionButton } from '@vasakgroup/vue-libvasak'
</script>

<template>
  <Dialog v-model:open="open">
    <DialogContent>
      <DialogHeader>
        <DialogTitle>View license</DialogTitle>
      </DialogHeader>
      <DialogBody padding="sm" label="License text">
        <p>Extensive license content...</p>
      </DialogBody>
      <DialogFooter>
        <ActionButton label="Close" @click="open = false" />
      </DialogFooter>
    </DialogContent>
  </Dialog>
</template>

Notes#

  • With a DialogBody inside, DialogContent switches to a column layout and stops scrolling itself; the body becomes the scroller.
  • The region role only exists when content overflows: if everything fits, there is no tabindex or role.
← Previous
Dialog | DialogDescription
Next →
Text | Kbd