@mijadesign/nut-mcp 1.0.0-alpha.0

package/docs/docs/components/dentry/textarea/index.md

@@ -0,0 +1,231 @@
+---
+order: 26
+demoUrl: 'https://frontend.mishudata.com/mobile/demo/#/dentry/pages/textarea/index'
+group:
+    title: 数据录入
+    order: 5
+---
+
+# TextArea 文本域 <Badge>2.0.0</Badge>
+
+
+文本框内输入或编辑文字，支持限制输入数量。
+
+## 引入
+
+```tsx
+import { TextArea } from '@mijadesign/mjui-react-taro';
+```
+
+## 示例代码
+
+### 基础样式
+
+
+```tsx
+import { TextArea } from '@mijadesign/mjui-react-taro'
+import React from 'react'
+
+const Demo1 = () => {
+  return (
+    <>
+      <h4>通栏</h4>
+      <TextArea
+        align="left"
+        onChange={(value) => console.log('change', value)}
+        onBlur={() => console.log('blur')}
+        onFocus={() => console.log('focus')}
+        autoSize
+        underline
+      />
+      <h4>卡片</h4>
+      <TextArea
+        align="left"
+        type="card"
+        underline={false}
+        onChange={(value) => console.log('change', value)}
+        onBlur={() => console.log('blur')}
+        onFocus={() => console.log('focus')}
+        autoSize
+      />
+    </>
+  )
+}
+export default Demo1
+
+```
+    
+### 对齐方式
+
+
+```tsx
+import React from 'react'
+import { TextArea } from '@mijadesign/mjui-react-taro'
+
+const Demo8 = () => {
+  return (
+    <>
+      <h4>左对齐</h4>
+      <TextArea align="left" underline />
+      <h4>右对齐</h4>
+      <TextArea underline />
+    </>
+  )
+}
+export default Demo8
+
+```
+    
+### 自定义字数限制
+
+
+```tsx
+import React from 'react'
+import { ConfigProvider, TextArea } from '@mijadesign/mjui-react-taro'
+
+const Demo5 = () => {
+  const customTheme = {
+    nutuiTextareaTextCurrorColor: `red`,
+    nutuiTextareaLimitColor: `red`,
+  }
+  return (
+    <ConfigProvider theme={customTheme}>
+      <TextArea align="left" underline showCount maxLength={30} />
+    </ConfigProvider>
+  )
+}
+export default Demo5
+
+```
+    
+### 自定义字数统计文本颜色
+
+
+```tsx
+import React from 'react'
+import { TextArea } from '@mijadesign/mjui-react-taro'
+
+const Demo9 = () => {
+  return (
+    <div style={{ '--nutui-color-text-help': 'red' }}>
+      <TextArea showCount maxLength={20} underline align="left" />
+    </div>
+  )
+}
+export default Demo9
+
+```
+    
+### 只读
+
+
+```tsx
+import React from 'react'
+import { TextArea } from '@mijadesign/mjui-react-taro'
+
+const Demo6 = () => {
+  return (
+    <>
+      <TextArea underline readOnly align="left" defaultValue="这是一段仅只读状态的文本内容" />
+    </>
+  )
+}
+export default Demo6
+
+```
+    
+### 禁用 
+
+
+```tsx
+import React from 'react'
+import { TextArea } from '@mijadesign/mjui-react-taro'
+
+const Demo7 = () => {
+  return (
+    <>
+      <TextArea underline disabled defaultValue="这是一段禁用状态的文本内容" align="left" />
+    </>
+  )
+}
+export default Demo7
+
+```
+    
+### 受控方式
+
+
+```tsx
+import React, { useState } from 'react'
+import { TextArea } from '@mijadesign/mjui-react-taro'
+
+const Demo2 = () => {
+  const [value, setValue] = useState('')
+  return <TextArea underline value={value} onChange={(value) => setValue(value)} />
+}
+export default Demo2
+
+```
+    
+### 显示字数统计
+
+
+```tsx
+import React from 'react'
+import { TextArea } from '@mijadesign/mjui-react-taro'
+
+const Demo3 = () => {
+  return <TextArea underline showCount maxLength={20} />
+}
+export default Demo3
+
+```
+    
+### 自定义行数，设置自动高度
+
+
+```tsx
+import React from 'react'
+import { TextArea } from '@mijadesign/mjui-react-taro'
+
+const Demo4 = () => {
+  return <TextArea underline rows={1} autoSize />
+}
+export default Demo4
+
+```
+    
+## TextArea
+
+### Props
+
+| 属性 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| value | 输入框内容，受控 | `string` | `-` |
+| defaultValue | 初始默认值，非受控 | `string` | `-` |
+| placeholder | 设置占位提示文字 | `string` | `请输入内容` |
+| maxLength | 限制最长输入字符，-1 表示无限制 | `number` | `140` |
+| rows | textarea 的行数（仅支持H5） | `number` | `2` |
+| align | textarea布局 | `left` \| `right` | `right` |
+| showCount | textarea 是否展示输入字符。须配合`maxLength`使用 | `boolean` | `false` |
+| autoSize | 高度是否可拉伸 | `boolean` | `false` |
+| readOnly | 只读属性 | `boolean` | `false` |
+| disabled | 禁用属性 | `boolean` | `false` |
+| onChange | 输入内容时触发 | `(value) => void` | `-` |
+| onFocus | 聚焦时触发 | `(event) => void` | `-` |
+| onBlur | 失焦时触发 | `(event) => void` | `-` |
+
+## 主题定制
+
+### 样式变量
+
+组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/component/configprovider)。
+
+| 名称 | 说明 | 默认值 |
+| --- | --- | --- |
+| \--nutui-textarea-font | 字体大小 | `$font-size-2` |
+| \--nutui-textarea-padding | 内边距 | `12px` |
+| \--nutui-textarea-limit-color | 字数统计颜色 | `$color-text` |
+| \--nutui-textarea-text-color | 文本颜色 | `$color-title` |
+| \--nutui-textarea-text-curror-color | 光标颜色 | `$color-title` |
+| \--nutui-textarea-disabled-color | 禁用颜色 | `$color-text-disabled` |