For AI agents: the complete documentation index is available at https://a3s-lab.github.io/UI/v0.1.0/llms.txt, the full documentation bundle is available at https://a3s-lab.github.io/UI/v0.1.0/llms-full.txt, and this page is available as Markdown at https://a3s-lab.github.io/UI/v0.1.0/components/textarea.md.
  • 简体中文
  • v0.1.0
  • 文本区域

    Live previewHTML · CSS · JavaScript

    用途

    Include CSS

    导入 Tailwind 和一个完整的 A3S UI 样式包。

    @import "tailwindcss";
    @import "@a3s-lab/ui/a3s.css";

    或者只导入基本CSS、Textarea组件CSS和一个样式包。

    @import "tailwindcss";
    @import "@a3s-lab/ui/base.css";
    @import "@a3s-lab/ui/components/textarea.css";
    @import "@a3s-lab/ui/styles/a3s.css";

    使用CDN或批量程序导入?请参见安装页

    Add your textarea HTML

    Add class="textarea" to a <textarea> element. Textareas inside a class="field" container also receive the same styling automatically.

    使用原生 HTML 属性进行:disabled 用于取消文本区域,aria-invalid="true" 用于无效状态行为样式。

    <textarea class="textarea" aria-label="消息" placeholder="Type your message here"></textarea>

    文本区域通过原生浏览器方向处理支持从右到左的布局。

    示例

    现场

    使用带有标签和说明的 field 创建可访问的文本区域。

    Live previewHTML · CSS · JavaScript

    Write a short message.

    已禁用

    Live previewHTML · CSS · JavaScript

    无效

    Live previewHTML · CSS · JavaScript

    Message is required.

    按钮

    Live previewHTML · CSS · JavaScript

    表格

    Live previewHTML · CSS · JavaScript

    You can @mention other users and organizations.

    RTL

    dir="rtl" 添加到文本区域、字段或祖先。

    Live previewHTML · CSS · JavaScript

    شاركنا أفكارك حول الخدمة.