17 lines
594 B
Vue
17 lines
594 B
Vue
<script setup lang="ts">
|
|
withDefaults(defineProps<{ columns?: 1 | 2; ariaLabel?: string }>(), {
|
|
columns: 2,
|
|
ariaLabel: '입력 항목'
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<div class="ks-form-grid" :data-columns="columns" role="group" :aria-label="ariaLabel"><slot /></div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.ks-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ks-space-4); align-items: start; }
|
|
.ks-form-grid[data-columns='1'] { grid-template-columns: minmax(0, 1fr); }
|
|
@media (max-width: 56rem) { .ks-form-grid { grid-template-columns: minmax(0, 1fr); } }
|
|
</style>
|