DtLazyShow is essentially a combination of a v-if and v-show. This means that the child slot will not be rendered/initialized until the first time show is true, after which the slot will stay in the DOM and be hidden/shown with the v-show directive. This is useful to prevent elements which are hidden from being rendered immediately, but keeping them alive when toggled later.
The lazy show wraps the slot in a parent div in order to achieve this. It also wraps the v-show in a transition, so you can pass any valid Vue transition class to control the enter/leave transitions.
<dt-button @click="isShown = !isShown"> Toggle </dt-button> <dt-lazy-show transition="fade" :show="isShown" > I'm Lazy! </dt-lazy-show>
import { DtLazyShow } from '@dialpad/dialtone-vue';
Name
|
Type
|
|---|---|
default | Slot for main content |
Name
|
Default
|
Type
|
|---|---|---|
appear | false |
"true"
|
"false"
Enable/Disable transition animation |
show | false |
"true"
|
"false"
Whether the child slot is shown. |
transition | null | string A valid Vue enter/leave CSS transition name. |
Lazy Show documentation last updated Friday, September 4, 2026
fix/popover-modal-zindex-scope