Files
oa/documentation/block/v-block-center-responsive-documentation.md
2025-05-24 01:49:48 +09:00

1.3 KiB

Tablet responsive

<VBlock /> can be made responsive for the tablet portrait viewport by adding the tResponsive prop to the component. When set to responsive mode, the flex block elements stack to fit in the available space. Resize your screen to see it in action.

<template>
  <VBlock
    title="Team Tasks"
    subtitle="View all tasks"
    center
    m-responsive
    t-responsive
  >
    <template #icon>
      <VIconBox
        color="info"
        size="medium"
        rounded
      >
        <VIcon icon="lucide:chrome" />
      </VIconBox>
    </template>
    <template #action>
      <VButton color="primary" elevated>
        View
      </VButton>
    </template>
  </VBlock>
</template>
View