salix-front/src/components/ui/VnOutForm.vue

33 lines
832 B
Vue

<script setup>
const emit = defineEmits(['submit']);
defineProps({
icon: { type: String, required: false, default: 'phonelink_lock' },
title: { type: String, required: true },
});
</script>
<template>
<QForm @submit="emit('submit')" class="q-gutter-y-md q-pa-lg formCard">
<div class="column items-center">
<QIcon v-if="icon != false" :name="icon" size="xl" color="primary" />
<h5 class="text-center q-my-md">
{{ title }}
</h5>
</div>
<slot></slot>
<div class="q-mt-lg">
<slot name="buttons"></slot>
</div>
</QForm>
</template>
<style lang="scss" scoped>
.formCard {
max-width: 350px;
min-width: 300px;
}
@media (max-width: $breakpoint-xs-max) {
.formCard {
min-width: 100%;
}
}
</style>