feat(input): update demo for input

site/mobile/components/Header.jsx

@@ -1,17 +1,17 @@
-import React from "react";
+import React from 'react';
 
 const THeader = (prop) => {
-
   const { title } = prop;
-
- return <>
-    {
-      title ? (<div v-show="title" className="tdesign-demo-topnav">
-        <div className="tdesign-demo-topnav-title">{ title }</div>
-        {/* <chevron-left-icon className="tdesign-demo-topnav__back" name="chevron-left"/> */}
-        </div>) : null
-    }
-  </>
-}
+  return (
+    <>
+      {title ? (
+        <div className="tdesign-demo-topnav">
+          <div className="tdesign-demo-topnav-title">{title}</div>
+          {/* <chevron-left-icon className="tdesign-demo-topnav__back" name="chevron-left"/> */}
+        </div>
+      ) : null}
+    </>
+  );
+};
 
 export default THeader;

src/input/_example/align.jsx

@@ -0,0 +1,45 @@
+import React, { useState } from 'react';
+import { Input, CellGroup } from 'tdesign-mobile-react';
+
+export default function Base() {
+  const [value1, setValue1] = useState('');
+  const [value2, setValue2] = useState('');
+  const [value3, setValue3] = useState('');
+
+  return (
+    <>
+      <CellGroup>
+        <Input
+          label={'左对齐'}
+          placeholder="请输入文字"
+          value={value1}
+          onChange={(value) => {
+            setValue1(value);
+          }}
+        />
+      </CellGroup>
+      <CellGroup>
+        <Input
+          label={'居中'}
+          placeholder="请输入文字"
+          align="center"
+          value={value2}
+          onChange={(value) => {
+            setValue2(value);
+          }}
+        />
+      </CellGroup>
+      <CellGroup>
+        <Input
+          label={'右对齐'}
+          placeholder="请输入文字"
+          align="right"
+          value={value3}
+          onChange={(value) => {
+            setValue3(value);
+          }}
+        />
+      </CellGroup>
+    </>
+  );
+}

src/input/_example/index.jsx

@@ -1,10 +1,42 @@
 import React from 'react';
-import BaseDemo from './base';
+import TypeDemo from './type';
+import StatusDemo from './status';
+import SpecialDemo from './special';
+import SizeDemo from './size';
+import AlignDemo from './align';
+import LimitDemo from './limit';
+import TDemoHeader from '../../../site/mobile/components/DemoHeader';
+import TDemoBlock from '../../../site/mobile/components/DemoBlock';
+import './style/index.less';
 
 export default function RadioDemo() {
   return (
     <div className="tdesign-mobile-demo">
-      <BaseDemo />
+      <TDemoHeader title="Input 输入框" summary="空状态时的占位提示。" />
+
+      <TDemoBlock title="01 类型">
+        <TypeDemo />
+      </TDemoBlock>
+
+      <TDemoBlock title="02 状态" summary="文本框状态">
+        <StatusDemo />
+      </TDemoBlock>
+
+      <TDemoBlock title="03 特殊类型" summary="特殊文本框类型">
+        <SpecialDemo />
+      </TDemoBlock>
+
+      <TDemoBlock title="04 规格" summary="文本框尺寸规格">
+        <SizeDemo />
+      </TDemoBlock>
+
+      <TDemoBlock title="05 内容位置" summary="文本框内容位置">
+        <AlignDemo />
+      </TDemoBlock>
+
+      <TDemoBlock title="06 字数限制" summary="文本框字数限制">
+        <LimitDemo />
+      </TDemoBlock>
     </div>
   );
 }

src/input/_example/limit.jsx

@@ -0,0 +1,32 @@
+import React, { useState } from 'react';
+import { Input, CellGroup } from 'tdesign-mobile-react';
+
+export default function Base() {
+  const [value1, setValue1] = useState('');
+  const [value2, setValue2] = useState('');
+
+  return (
+    <>
+      <CellGroup>
+        <Input
+          placeholder="最大输入10个字符"
+          maxlength={10}
+          value={value1}
+          onChange={(value) => {
+            setValue1(value);
+          }}
+        />
+      </CellGroup>
+      <CellGroup>
+        <Input
+          placeholder="最大输入10个字符，汉字算两个"
+          maxcharacter={10}
+          value={value2}
+          onChange={(value) => {
+            setValue2(value);
+          }}
+        />
+      </CellGroup>
+    </>
+  );
+}