1.0.0-beta.2 • Published 11 months ago
@ugent-ui/textfield v1.0.0-beta.2
Textfield
Een input webcomponent voor UGent webapplicaties.
Inleiding
Dit pakket exporteert een aanpasbare input webcomponent voor verschillende text-based user inputs, met ondersteuning voor validation, size, disabled, readonly, en help text.
Demo
https://ugentui.github.io/textfield
Installatie
npm add @ugent-ui/textfield
!NOTE Zorg steeds dat de UGent UI CSS Reset de eerste stylesheet op je pagina is om te zorgen voor een consistente styling. Voeg het
data-color-mode
attribute toe aan de HTML tag voorlight
anddark
mode ondersteuning. Instaleer indien nodig:
npm add @ugent-ui/css-reset
Gebruik
<!DOCTYPE html>
<html lang="en" data-color-mode="light">
<head>
<meta charset="UTF-8" />
<title></title>
<link
rel="stylesheet"
href="node_modules/@ugent-ui/css-reset/dist/assets/reset.css"
/>
<script
type="module"
src="node_modules/@ugent-ui/textfield/dist/assets/textfield.js"
></script>
</head>
<body>
<ug-textfield
label="Email address"
placeholder="name@example"
required
invalid
>
<div slot="help-text">Please enter a valid email address.</div>
</ug-textfield>
</body>
</html>
Component tag
Gebruik de volgende tag om de component in je HTML op te nemen:
<ug-textfield></ug-textfield>
Component properties
label
:string
- Het label van het invoerveld.placeholder
:string
- De placeholder tekst van het invoerveld.value
:string
- De waarde van het invoerveld.disabled
:boolean
- Of het invoerveld disabled is.readonly
:boolean
- Of het invoerveld readonly is.type
:string
- Het type van het invoerveld (mogelijkheden: text, url, email, password, number, tel).required
:boolean
- Of het invoerveld verplicht is.size
:string
- De grootte van het invoerveld (mogelijkheden: small, large).valid
:boolean
- Of het invoerveld geldig is.invalid
:boolean
- Of het invoerveld ongeldig is.
Component Events
focus
blur
input
change
Component slots
help-text
: Hulptekst die onder het invoerveld wordt weergegeven.
1.0.0-beta.2
11 months ago
1.0.0-beta.1
11 months ago