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

Komponent obszaru tekstowego

Ostatnia aktualizacja:

Obszar tekstowy CSS Tailwind obejmujący wyłącznie CSS z podstawowymi, dodatkowymi, akcentowanymi i semantycznymi wariantami kolorów. Rozmiary xs-xl, fason duch. Dostępny WCAG AA, współpracuje z Django, HTMX, Laravel, React i dowolnym stosem.

Komponenty Textarea przechwytują wieloliniowy tekst wprowadzany przez użytkowników, co doskonale sprawdza się w przypadku wiadomości, komentarzy, opisów i długich treści. Zbudowane z natywnych elementów obszaru tekstowego HTML i ulepszone stylami CSS Tailwind, obszary tekstowe obsługują wiele rozmiarów, kolorów i stanów. Dostępne i w pełni konfigurowalne, płynnie integrują się z formularzami i interfejsami komunikacyjnymi.

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
textareaOpieraćStylowe, wielowierszowe wprowadzanie tekstu
textarea-softStylStonowane przyciemnione tło
textarea-ghostStylBrak widocznej granicy, dopóki nie zostanie ustawiona ostrość
textarea-dashedStylStyl przerywanej granicy
textarea-xsRozmiarBardzo mały
textarea-smRozmiarMały
textarea-mdRozmiarŚredni (domyślny)
textarea-lgRozmiarDuży
textarea-xlRozmiarBardzo duży
textarea-2xlRozmiar2× bardzo duże
textarea-primaryKolorObramowanie koloru podstawowego motywu
textarea-secondaryKolorRamka koloru motywu dodatkowego
textarea-accentKolorObramowanie koloru motywu akcentującego
textarea-neutralKolorNeutralna granica koloru motywu
textarea-infoKolorInformacje semantyczne obramowanie koloru
textarea-successKolorSukces semantycznej granicy koloru
textarea-warningKolorOstrzeżenie semantyczna granica koloru
textarea-errorKolorBłąd semantycznego obramowania koloru

Podstawowe użycie

<textarea class="textarea" placeholder="Enter your message here..."></textarea>

<textarea className="textarea" placeholder="Enter your message here..."></textarea>

Rozmiary obszaru tekstowego

html 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
<textarea class="textarea textarea-xs" placeholder="Extra Small"></textarea>

<textarea class="textarea textarea-sm" placeholder="Small"></textarea>

<textarea class="textarea textarea-md" placeholder="Medium"></textarea>

<textarea class="textarea textarea-lg" placeholder="Large"></textarea>

<textarea class="textarea textarea-xl" placeholder="Extra Large"></textarea>

<textarea class="textarea textarea-2xl" placeholder="2X Large"></textarea>

Kolory obszaru tekstowego

html 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
<textarea class="textarea" placeholder="Default"></textarea>

<textarea class="textarea textarea-primary" placeholder="Primary"></textarea>

<textarea class="textarea textarea-secondary" placeholder="Secondary"></textarea>

<textarea class="textarea textarea-accent" placeholder="Accent"></textarea>

<textarea class="textarea textarea-info" placeholder="Info"></textarea>

<textarea class="textarea textarea-success" placeholder="Success"></textarea>

<textarea class="textarea textarea-warning" placeholder="Warning"></textarea>

<textarea class="textarea textarea-error" placeholder="Error"></textarea>

Style obszaru tekstowego

html 
1
2
3
4
5
6
7
<textarea class="textarea" placeholder="Default style"></textarea>

<textarea class="textarea textarea-soft" placeholder="Soft style"></textarea>

<textarea class="textarea textarea-dashed" placeholder="Dashed style"></textarea>

<textarea class="textarea textarea-ghost" placeholder="Ghost style"></textarea>

Wyłączony obszar tekstowy

html 
1
2
3
<textarea class="textarea" placeholder="Enabled textarea"></textarea>

<textarea class="textarea" placeholder="Disabled textarea" disabled></textarea>

Obszar tekstowy z etykietą

html 
1
2
3
4
<label>
  <span>Your feedback</span>
  <textarea class="textarea w-full" placeholder="Share your thoughts..."></textarea>
</label>

Obszar tekstowy z liczbą znaków

html 
1
2
3
4
5
<label>
  <span>Write a message (max 200 characters)</span>
  <textarea class="textarea w-full" placeholder="Type here..." maxlength="200"></textarea>
  <span>Characters remaining</span>
</label>

Zaawansowany edytor Markdown

Użyj markdown-text-editor, aby zamienić dowolny obszar tekstowy w pełny edytor przecen. Dostępne są dwa tryby: zwykły (surowa składnia Markdown) i hybrydowy (renderuje formatowanie na żywo podczas pisania). Więcej opcji konfiguracji znajdziesz w dokumentacji wtyczek.

Tryb zwykły

Wyświetla surową składnię Markdown. Użytkownicy piszą Markdown bezpośrednio w obszarze tekstowym.

<textarea id="plain-markdown-editor" name="content"></textarea>

1
2
3
import MarkdownEditor from "markdown-text-editor";

new MarkdownEditor('#plain-markdown-editor');

Tryb hybrydowy

Renderuje formatowanie na żywo podczas pisania — pogrubienie, nagłówki, listy i inne elementy są wyświetlane w formie wbudowanej.

<textarea id="hybrid-markdown-editor" name="content"></textarea>

1
2
3
import MarkdownEditor from "markdown-text-editor";

new MarkdownEditor('#hybrid-markdown-editor', { mode: 'hybrid' });

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

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

Try Cherry MCP