Security News
The Unpaid Backbone of Open Source: Solo Maintainers Face Increasing Security Demands
Solo open source maintainers face burnout and security challenges, with 60% unpaid and 60% considering quitting.
@fremtind/jkl-text-input-react
Advanced tools
@fremtind/jkl-text-input-react
Bruk og prinsipper er beskrevet i @fremtind/jkl-text-input
stil-pakken.
Lær hvordan du kan ta i bruk Jøkul
Installèr pakken med yarn add @fremtind/jkl-text-input-react
eller npm i @fremtind/jkl-text-input-react
. Stil-pakken blir automatisk installert som en avhengighet.
Importer både React-pakken (velg komponenten(e) du trenger) og stil-pakken i prosjektet ditt:
import { TextField, TextArea, ActionTextField, InlineTextField, BaseInputField } from "@fremtind/jkl-text-input-react";
import "@fremtind/jkl-text-input/text-input.min.css";
Du må spesifisere en label
for TextField
, TextArea
, ActionTextField
og InlineTextField
. Etiketten vil ikke vises for sistnevnte, men blir fortsatt tatt i bruk til skjermlesere.
Størrelsen på etiketten kan settes ved prop-en variant
, hvor størrelsene er definert ved "small" | "medium" | "large"
. Hvis komponentene skal brukes på mobile flater eller av andre årsaker trenger å være fremvist i sin kompakte variant må man ta i bruk forceCompact
.
Det er to måter å avgrense den fysiske størrelsen til inndata-feltet, enten ved å bruke width
eller maxLength
. maxLength
vil kun bestemme fysisk størrelse hvis width
ikke er definert, siden width
tar prioritet. Merk at maxLength
fortsatt vil bestemme hvor mange tegn som kan tastes inn i feltet.
if (width) {
return { width }; // prioritize width prop
}
if (maxLength && maxLength < 15) {
return { width: `${maxLength + 3}ch` }; // else use maxLength if not large
}
Komponentene tar imot hjelpe- og feilmeldinger gjennom helpLabel
og errorLabel
. Dersom errorLabel
finnes vises kun denne. Disse vil ikke vises for komponenten InlineTextField
og må fremvises på andre måter. Siden komponenten ikke har feil- og hjelpetekst brukes prop-en invalid
for å sette feiltilstand.
Handlingen/Ikonet som skal brukes på et ActionTextField
gis gjennom prop-en action
:
type action = {
icon: IconVariant, // "clear" | "search"
label: string,
onClick: (event: MouseEvent) => void,
};
Denne er kun eksponert for å dekke spesielle behov og anbefales ikke å brukes.
Skal denne brukes frittstående må den akkompagneres av en Label
fra @fremtind/jkl-typography-react
hvor standAlone
og htmlFor
skal være spesifisert. Eksempel på hvordan denne kan brukes:
<Label standAlone htmlFor="complicatedquestion">
Lorem ipsum...
</Label>
<p className="description" id="longdescription">...dolor sit amet</p>
<BaseInputField id="complicatedquestion" ariaDescribedby="longdescription" />
<SupportLabel errorLabel={error && "Oida, her gikk noe galt!"}>
FAQs
Jøkul react text input component
The npm package @fremtind/jkl-text-input-react receives a total of 241 weekly downloads. As such, @fremtind/jkl-text-input-react popularity was classified as not popular.
We found that @fremtind/jkl-text-input-react demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Solo open source maintainers face burnout and security challenges, with 60% unpaid and 60% considering quitting.
Security News
License exceptions modify the terms of open source licenses, impacting how software can be used, modified, and distributed. Developers should be aware of the legal implications of these exceptions.
Security News
A developer is accusing Tencent of violating the GPL by modifying a Python utility and changing its license to BSD, highlighting the importance of copyleft compliance.