Masukan
Tampilan
Umpan Balik
Media
Responsive Dialog
Dialog yang berubah bentuk mengikuti lebar layar: kotak di tengah pada desktop, laci dari bawah pada ponsel.
Persempit jendela sampai di bawah 48rem: dialognya berganti jadi laci dari bawah — bukan dialog yang diberi gaya lain, melainkan komponen yang berbeda.
Instalasi
bash
npx shadcn-vue@latest add https://kliping.pro/r/responsive-dialog.jsonPenggunaan
vue
<script setup lang="ts">
import { ResponsiveDialog, ResponsiveDialogClose, ResponsiveDialogContent, ResponsiveDialogDescription, ResponsiveDialogFooter, ResponsiveDialogHeader, ResponsiveDialogOverlay, ResponsiveDialogTitle, ResponsiveDialogTrigger } from '@/dice/responsive-dialog'
</script>Bagian
| Bagian | Berkas |
|---|---|
ResponsiveDialog | src/dice/responsive-dialog/ResponsiveDialog.vue |
ResponsiveDialogClose | src/dice/responsive-dialog/ResponsiveDialogClose.vue |
ResponsiveDialogContent | src/dice/responsive-dialog/ResponsiveDialogContent.vue |
ResponsiveDialogDescription | src/dice/responsive-dialog/ResponsiveDialogDescription.vue |
ResponsiveDialogFooter | src/dice/responsive-dialog/ResponsiveDialogFooter.vue |
ResponsiveDialogHeader | src/dice/responsive-dialog/ResponsiveDialogHeader.vue |
ResponsiveDialogOverlay | src/dice/responsive-dialog/ResponsiveDialogOverlay.vue |
ResponsiveDialogTitle | src/dice/responsive-dialog/ResponsiveDialogTitle.vue |
ResponsiveDialogTrigger | src/dice/responsive-dialog/ResponsiveDialogTrigger.vue |
Asalnya
Ditulis ulang untuk Vue dari Dice UI, MIT, Copyright (c) 2024 Sadman Sakib. Rincian kewajiban lisensinya ada di halaman kredit.