Ana içeriğe atla
Frutjam logo Frutjam
v2.2.2
Theme

Metin Alanı Bileşeni

Son güncelleme:

Birincil, ikincil, vurgulu ve anlamsal renk çeşitlerine sahip, yalnızca CSS'ye özgü Tailwind CSS metin alanı. Boyutları xs-xl, hayalet tarzı. WCAG AA'ya erişilebilir; Django, HTMX, Laravel, React ve herhangi bir yığınla çalışır.

Textarea bileşenleri kullanıcılardan gelen çok satırlı metin girişini yakalar; mesajlar, yorumlar, açıklamalar ve uzun biçimli içerik için mükemmeldir. Yerel HTML textarea öğeleriyle oluşturulan ve Tailwind CSS stiliyle geliştirilen textarea'ler birden fazla boyutu, rengi ve durumu destekler. Erişilebilir ve tamamen özelleştirilebilirler; formlara ve iletişim arayüzlerine sorunsuz bir şekilde entegre olurlar.

Yalnızca CSS, JavaScript gerekmez. WCAG AA erişilebilir ve çerçeveden bağımsız — Django, HTMX, Laravel, React ve tüm yığınlarla çalışır.

Sınıf Tip Tanım
textareaTemelStilize edilmiş çok satırlı metin girişi
textarea-softStilSessiz renkli arka plan
textarea-ghostStilOdaklanana kadar görünür kenarlık yok
textarea-dashedStilKesikli kenarlık stili
textarea-xsBoyutEkstra küçük
textarea-smBoyutKüçük
textarea-mdBoyutOrta (varsayılan)
textarea-lgBoyutBüyük
textarea-xlBoyutEkstra büyük
textarea-2xlBoyut2× ekstra büyük
textarea-primaryRenkBirincil tema renk sınırı
textarea-secondaryRenkİkincil tema renk sınırı
textarea-accentRenkVurgu teması renk sınırı
textarea-neutralRenkNötr tema renkli kenarlık
textarea-infoRenkBilgi anlamsal renk sınırı
textarea-successRenkBaşarı anlamsal renk sınırı
textarea-warningRenkUyarı anlamsal renk sınırı
textarea-errorRenkHata anlamsal renk sınırı

Temel Kullanım

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

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

Metin Alanı Boyutları

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>

Metin Alanı Renkleri

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>

Metin Alanı Stilleri

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>

Devre Dışı Metin Alanı

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

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

Etiketli Metin Alanı

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

Karakter Sayımı ile Textarea

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>

Gelişmiş İşaretleme Düzenleyicisi

Herhangi bir metin alanını tam bir işaretleme düzenleyicisine dönüştürmek için markdown-text-editor'ü kullanın. İki mod mevcuttur: düz (ham Markdown sözdizimi) ve karma (biçimlendirmeyi siz yazdıkça canlı olarak işler). Daha fazla yapılandırma seçeneği için eklenti belgelerine bakın.

Düz Mod

Ham Markdown sözdizimini görüntüler. Kullanıcılar Markdown'ı doğrudan metin alanına yazar.

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

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

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

Hibrit Mod

Siz yazarken biçimlendirmeyi canlı olarak işler; kalın, başlıklar, listeler ve daha fazlası satır içi stilde görünür.

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

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

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

Claude Code, Cursor veya başka bir AI düzenleyiciyi mi kullanıyorsunuz?

Cherry MCP, AI editörünüze talep üzerine tam Metin alanı sınıf adlarını ve yapısını verir. Artık halüsinasyonlu dersler yok.

Cherry MCP'yi deneyin