Inputs texte et nombre

Cette page couvre :

• TextInput
• TextareaInput
• NumberInput

Props

TextInput

• placeholder?: string

TextareaInput

• placeholder?: string

NumberInput

• placeholder?: string
• min?: number
• max?: number
• step?: number

Variables CSS exposées

TextInput

• --DFV-text-input-width
• --DFV-text-input-background
• --DFV-text-input-foreground
• --DFV-text-input-border-color
• --DFV-text-input-hover-border-color
• --DFV-text-input-focus-border-color
• --DFV-text-input-focus
• --DFV-text-input-placeholder

TextareaInput

• --DFV-text-area-width
• --DFV-text-area-background
• --DFV-text-area-foreground
• --DFV-text-area-border-color
• --DFV-text-area-hover-border-color
• --DFV-text-area-focus-border-color
• --DFV-text-area-focus
• --DFV-text-area-placeholder

NumberInput

• --DFV-number-input-width
• --DFV-number-input-background
• --DFV-number-input-foreground
• --DFV-number-input-border-color
• --DFV-number-input-hover-border-color
• --DFV-number-input-focus-border-color
• --DFV-number-input-focus
• --DFV-number-input-placeholder

Exemple

vue

<script setup lang="ts">
import {
	NumberInput,
	TextInput,
	TextareaInput,
} from "@duplojs/form/vueDesignSystem";
import { ref } from "vue";

const text = ref("Hello");
const number = ref(42);
const description = ref("A longer message");
</script>

<template>
	<div style="display: grid; gap: 12px;">
		<TextInput
			v-model="text"
			placeholder="Your name"
		/>

		<NumberInput
			v-model="number"
			:min="0"
			:max="100"
		/>

		<TextareaInput
			v-model="description"
			placeholder="Description"
		/>
	</div>
</template>

Conseil de thème

Pour garder un rendu homogène, surchargez ces trois composants ensemble si vous changez les champs de saisie principaux.