diff options
Diffstat (limited to 'src/tools/qr-code-generator/qr-code-generator.vue')
| -rw-r--r-- | src/tools/qr-code-generator/qr-code-generator.vue | 53 |
1 files changed, 41 insertions, 12 deletions
diff --git a/src/tools/qr-code-generator/qr-code-generator.vue b/src/tools/qr-code-generator/qr-code-generator.vue index e23f00a..8f2161d 100644 --- a/src/tools/qr-code-generator/qr-code-generator.vue +++ b/src/tools/qr-code-generator/qr-code-generator.vue @@ -1,27 +1,56 @@ <template> <n-card> - <n-grid cols="3" x-gap="12"> + <n-grid + cols="3" + x-gap="12" + > <n-gi span="2"> - <n-form label-width="130" label-placement="left"> + <n-form + label-width="130" + label-placement="left" + > <n-form-item label="Text:"> - <n-input v-model:value="text" placeholder="Your link or text..." /> + <n-input + v-model:value="text" + placeholder="Your link or text..." + /> </n-form-item> <n-form-item label="Foreground color:"> - <n-color-picker v-model:value="foreground" :modes="['hex']" /> + <n-color-picker + v-model:value="foreground" + :modes="['hex']" + /> </n-form-item> <n-form-item label="Background color:"> - <n-color-picker v-model:value="background" :modes="['hex']" /> + <n-color-picker + v-model:value="background" + :modes="['hex']" + /> </n-form-item> <n-form-item label="Error resistance:"> - <n-select v-model:value="errorCorrectionLevel" - :options="errorCorrectionLevels.map((value) => ({ label: value, value }))" /> + <n-select + v-model:value="errorCorrectionLevel" + :options="errorCorrectionLevels.map((value) => ({ label: value, value }))" + /> </n-form-item> - </n-form> - </n-gi> + </n-form> + </n-gi> <n-gi> - <n-space justify="center" align="center" vertical> - <n-image :src="qrcode" width="200" /> - <n-button @click="download" secondary>Download qr-code</n-button> + <n-space + justify="center" + align="center" + vertical + > + <n-image + :src="qrcode" + width="200" + /> + <n-button + secondary + @click="download" + > + Download qr-code + </n-button> </n-space> </n-gi> </n-grid> |