Chuyển đến nội dung chính
Frutjam logo Frutjam
v2.2.2
Theme

Thành phần vùng văn bản

Cập nhật lần cuối:

Vùng văn bản CSS Tailwind chỉ có CSS ​​với các biến thể màu chính, phụ, dấu và ngữ nghĩa. Size xs-xl, kiểu ma quái. WCAG AA có thể truy cập được, hoạt động với Django, HTMX, Laravel, React và bất kỳ ngăn xếp nào.

Các thành phần vùng văn bản ghi lại nội dung nhập văn bản nhiều dòng từ người dùng, hoàn hảo cho tin nhắn, nhận xét, mô tả và nội dung dạng dài. Được xây dựng bằng các phần tử vùng văn bản HTML gốc và được cải tiến bằng kiểu CSS Tailwind, vùng văn bản hỗ trợ nhiều kích thước, màu sắc và trạng thái. Có thể truy cập và tùy chỉnh hoàn toàn, chúng tích hợp hoàn toàn vào các biểu mẫu và giao diện truyền thông.

Chỉ CSS, không cần JavaScript. WCAG AA có thể truy cập và không phụ thuộc vào khung — hoạt động với Django, HTMX, Laravel, React và bất kỳ ngăn xếp nào.

Lớp học Kiểu Sự miêu tả
textareaCăn cứKiểu nhập văn bản nhiều dòng
textarea-softPhong cáchNền màu bị tắt tiếng
textarea-ghostPhong cáchKhông có đường viền hiển thị cho đến khi được lấy nét
textarea-dashedPhong cáchKiểu đường viền nét đứt
textarea-xsKích cỡCực nhỏ
textarea-smKích cỡBé nhỏ
textarea-mdKích cỡTrung bình (mặc định)
textarea-lgKích cỡLớn
textarea-xlKích cỡCực lớn
textarea-2xlKích cỡ2× extra large
textarea-primaryMàu sắcĐường viền màu chủ đề chính
textarea-secondaryMàu sắcĐường viền màu chủ đề phụ
textarea-accentMàu sắcĐường viền màu chủ đề nổi bật
textarea-neutralMàu sắcĐường viền màu chủ đề trung tính
textarea-infoMàu sắcĐường viền màu ngữ nghĩa thông tin
textarea-successMàu sắcĐường viền màu ngữ nghĩa thành công
textarea-warningMàu sắcCảnh báo viền màu ngữ nghĩa
textarea-errorMàu sắcLỗi ngữ nghĩa viền màu

Cách sử dụng cơ bản

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

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

Kích thước vùng văn bản

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>

Màu vùng văn bản

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>

Kiểu vùng văn bản

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>

Vùng văn bản bị vô hiệu hóa

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

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

Vùng văn bản có nhãn

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

Vùng văn bản có số lượng ký tự

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>

Trình chỉnh sửa đánh dấu nâng cao

Sử dụng markdown-text-editor để biến bất kỳ vùng văn bản nào thành trình chỉnh sửa đánh dấu đầy đủ. Có hai chế độ: plain (cú pháp Markdown thô) và hybrid (hiển thị định dạng trực tiếp khi bạn nhập). Để biết thêm tùy chọn cấu hình, hãy xem tài liệu về plugin.

Chế độ đơn giản

Hiển thị cú pháp Markdown thô. Người dùng viết Markdown trực tiếp trong vùng văn bản.

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

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

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

Chế độ kết hợp

Hiển thị định dạng trực tiếp khi bạn nhập — in đậm, tiêu đề, danh sách, v.v. xuất hiện theo kiểu nội tuyến.

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

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

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

Using Claude Code, Cursor, or another AI editor?

Cherry MCP cung cấp cho trình soạn thảo AI của bạn tên và cấu trúc lớp Vùng văn bản chính xác theo yêu cầu. Không còn những lớp học ảo giác nữa.

Try Cherry MCP