Przejdź do głównej treści
Frutjam logo Frutjam
v2.2.2
Theme

Składnik wejściowy

Ostatnia aktualizacja:

Tylko CSS Dane wejściowe CSS Tailwind z podstawowymi, dodatkowymi, akcentowanymi i semantycznymi wariantami kolorów. Rozmiary xs-xl, miejsca na dodatki na przedrostki i sufiksy, styl ducha. Dostępny WCAG AA, współpracuje z Django, HTMX, Laravel, React i dowolnym stosem.

Komponenty wejściowe przechwytują dane użytkownika za pomocą pól tekstowych, adresu e-mail, hasła i innych typów danych wejściowych. System wejściowy Frutjam zapewnia semantyczne kontrolki formularzy HTML ze stylami CSS Tailwind dla wielu rozmiarów, kolorów i stanów sprawdzania poprawności. Zaprojektowane z myślą o dostępności i responsywności, dane wejściowe płynnie integrują się z bibliotekami i frameworkami sprawdzania poprawności formularzy.

Tylko CSS, nie wymaga JavaScript. Dostępny w WCAG AA i niezależny od frameworka — współpracuje z Django, HTMX, Laravel, React i dowolnym stosem.

Klasa Typ Opis
inputOpieraćStylizowane pole wprowadzania tekstu
input-outlineStylPrzezroczyste wypełnienie z widoczną krawędzią
input-softStylStonowane przyciemnione tło
input-ghostStylBrak widocznej granicy, dopóki nie zostanie ustawiona ostrość
input-dashedStylStyl przerywanej granicy
input-squareStylBrak promienia granicznego
input-disabledModyfikatorWyłączony wygląd elementów innych niż wejściowe
input-xsRozmiarBardzo mały
input-smRozmiarMały
input-mdRozmiarŚredni (domyślny)
input-lgRozmiarDuży
input-xlRozmiarBardzo duży
input-2xlRozmiar2× bardzo duże
input-primaryKolorObramowanie koloru podstawowego motywu
input-secondaryKolorRamka koloru motywu dodatkowego
input-accentKolorObramowanie koloru motywu akcentującego
input-neutralKolorNeutralna granica koloru motywu
input-infoKolorInformacje semantyczne obramowanie koloru
input-successKolorSukces semantycznej granicy koloru
input-warningKolorOstrzeżenie semantyczna granica koloru
input-errorKolorBłąd semantycznego obramowania koloru

Podstawowe użycie

<input type="text" placeholder="Enter your text here" class="input">

<input type="text" placeholder="Enter your text here" className="input">

Rozmiary wejściowe

html 
1
2
3
4
5
6
<input type="text" class="input input-xs" placeholder="Xsmall">
<input type="text" class="input input-sm" placeholder="Small">
<input type="text" class="input input-md" placeholder="Medium">
<input type="text" class="input input-lg" placeholder="Large">
<input type="text" class="input input-xl" placeholder="Xlarge">
<input type="text" class="input input-2xl" placeholder="2XLarge">

Kolory wejściowe

html 
1
2
3
4
5
6
7
8
9
<input type="text" class="input" placeholder="Default">
<input type="text" class="input input-primary" placeholder="Primary">
<input type="text" class="input input-secondary" placeholder="Secondary">
<input type="text" class="input input-accent" placeholder="Accent">
<input type="text" class="input input-neutral" placeholder="Neutral">
<input type="text" class="input input-info" placeholder="Info">
<input type="text" class="input input-success" placeholder="Success">
<input type="text" class="input input-warning" placeholder="Warning">
<input type="text" class="input input-error" placeholder="Error">

Style wprowadzania

html 
1
2
3
4
5
<input type="text" class="input" placeholder="Default">
<input type="text" class="input input-outline" placeholder="Outline">
<input type="text" class="input input-soft" placeholder="Soft">
<input type="text" class="input input-dashed" placeholder="Dashed">
<input type="text" class="input input-ghost" placeholder="Ghost">

Kwadrat wejściowy

Użyj input-square dla jednoznakowych danych wejściowych o stałej szerokości, takich jak pola OTP lub PIN.

html 
1
2
3
4
<input type="text" class="input input-square input-xs" maxlength="1" placeholder="0">
<input type="text" class="input input-square input-sm" maxlength="1" placeholder="0">
<input type="text" class="input input-square input-md" maxlength="1" placeholder="0">
<input type="text" class="input input-square input-lg" maxlength="1" placeholder="0">

Wyłączone wejście

html 
1
2
<input type="text" class="input" placeholder="Enabled input">
<input type="text" class="input input-disabled" placeholder="Disabled input" disabled>

Wejście z etykietą

html 
1
2
3
4
5
6
7
8
9
<label>
  <span>Email address</span>
  <input type="email" class="input input-outline w-full" placeholder="you@example.com">
</label>

<label>
  <span>Password</span>
  <input type="password" class="input input-outline input-primary w-full" placeholder="Enter password">
</label>

Używasz kodu Claude'a, kursora lub innego edytora AI?

Cherry MCP na żądanie udostępnia edytorowi AI dokładne nazwy i strukturę klas Wejście. Żadnych więcej zajęć z halucynacjami.

Try Cherry MCP