Security News
RubyGems.org Adds New Maintainer Role
RubyGems.org has added a new "maintainer" role that allows for publishing new versions of gems. This new permission type is aimed at improving security for gem owners and the service overall.
@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 251 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 3 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
RubyGems.org has added a new "maintainer" role that allows for publishing new versions of gems. This new permission type is aimed at improving security for gem owners and the service overall.
Security News
Node.js will be enforcing stricter semver-major PR policies a month before major releases to enhance stability and ensure reliable release candidates.
Security News
Research
Socket's threat research team has detected five malicious npm packages targeting Roblox developers, deploying malware to steal credentials and personal data.