Textarea 多行文本域

使用场景#

当需要多行输入时可以使用文本输入框。

示例#

基本示例#

盒马是阿里巴巴集团旗下，以数据和技术驱动的新零售平台。盒马以鲜活水产和新鲜蔬果为主打，开创了“不卖隔夜菜”的“盒马日日鲜”等系列心智商品，为您提供最快30分钟极速送达的智能购物体验。盒马希望为消费者打造社区化的一站式新零售体验中心，期待用科技和人情味带给盒区居民“鲜美生活”，让远亲更近，让近邻更亲！

inline

function Basic() {
  const text =
    '盒马是阿里巴巴集团旗下，以数据和技术驱动的新零售平台。盒马以鲜活水产和新鲜蔬果为主打，开创了“不卖隔夜菜”的“盒马日日鲜”等系列心智商品，为您提供最快30分钟极速送达的智能购物体验。盒马希望为消费者打造社区化的一站式新零售体验中心，期待用科技和人情味带给盒区居民“鲜美生活”，让远亲更近，让近邻更亲！';
  return (
    <Flex direction="column" spacing="m">
      <Textarea onChange={console.log} />

      <Textarea defaultValue={text} onChange={console.log} />

      <Textarea defaultValue={text} onChange={console.log} readOnly />

      <Textarea defaultValue={text} onChange={console.log} disabled />
    </Flex>
  );
}

function Basic() {
  const text =
    '盒马是阿里巴巴集团旗下，以数据和技术驱动的新零售平台。盒马以鲜活水产和新鲜蔬果为主打，开创了“不卖隔夜菜”的“盒马日日鲜”等系列心智商品，为您提供最快30分钟极速送达的智能购物体验。盒马希望为消费者打造社区化的一站式新零售体验中心，期待用科技和人情味带给盒区居民“鲜美生活”，让远亲更近，让近邻更亲！';
  return (
    <Flex direction="column" spacing="m">
      <Textarea onChange={console.log} />

      <Textarea defaultValue={text} onChange={console.log} />

      <Textarea defaultValue={text} onChange={console.log} readOnly />

      <Textarea defaultValue={text} onChange={console.log} disabled />
    </Flex>
  );
}

多行#

inline

function Rows() {
  return (
    <Group>
      <Textarea rows={2} />
      <Textarea rows={5} />
    </Group>
  );
}

function Rows() {
  return (
    <Group>
      <Textarea rows={2} />
      <Textarea rows={5} />
    </Group>
  );
}

API#

字段	描述
rows	`number`
readOnly	`boolean`
disabled	`boolean`
status	`FormValidateStatusType`
placeholder	`string`
value	`string`
defaultValue	`string`
onChange	`(val: string) => void`
style	`CSSProperties`
className	`string`