mirror of
https://git.hmsn.ink/kospo/svcm/oa.git
synced 2026-03-20 08:13:40 +09:00
65 lines
1.3 KiB
Markdown
65 lines
1.3 KiB
Markdown
### 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.
|
|
|
|
<!--code-->
|
|
|
|
```vue
|
|
<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>
|
|
```
|
|
|
|
<!--/code-->
|
|
|
|
<!--example-->
|
|
|
|
<div class="field">
|
|
<div class="control">
|
|
<div class="l-card">
|
|
<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>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!--/example-->
|