InputGroup

输入框组

基本用法

size

Small
Default
Large 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
import { w } from '@dojo/widget-core/d';
import InputGroup from 'widgets-web/input-group/index';
import Addon from 'widgets-web/addon/index';
import TextInput from 'widgets-web/text-input/index';

w(InputGroup, {size: 'small'}, [
    w(Addon, {value: 'Small'});
    w(TextInput, {name: 'small', widgetId: 'small', value: 'small', type: 'text'});
]);
w(InputGroup, {}, [
    w(Addon, {value: 'Default'});
    w(TextInput, {name: 'default', widgetId: 'default', value: 'default', type: 'text'});
]);
w(InputGroup, {size: 'large'}, [
    w(Addon, {value: 'Large'});
    w(TextInput, {name: 'large', widgetId: 'large', value: 'large', type: 'text'});
]);

Multiple inputs

First and last name 
1
2
3
4
5
6
7
8
9
10
import { w } from '@dojo/widget-core/d';
import InputGroup from 'widgets-web/input-group/index';
import Addon from 'widgets-web/addon/index';
import TextInput from 'widgets-web/text-input/index';

w(InputGroup, {}, [
    w(Addon, {value: 'First and last name'});
    w(TextInput, {type: 'text'});
    w(TextInput, {type: 'text'});
]);

labelPosition is left

tool 
1
2
3
4
5
6
7
8
9
import { w } from '@dojo/widget-core/d';
import InputGroup from 'widgets-web/input-group/index';
import Addon from 'widgets-web/addon/index';
import TextInput from 'widgets-web/text-input/index';

w(InputGroup, {label: 'Label', labelPosition: 'left'}, [
    w(Addon, {value: 'tool'});
    w(TextInput, {type: 'text'});
]);

通用属性

  1. Spacing
  2. Display
  3. Flex 中的 Flex item 相关属性
  4. Float

属性

名称 说明 默认值 可选值 值类型
widgetId 标识 string
size 尺寸 default small, large, default string
label 文本 string
labelPosition 文本位置 top top, left string
  1. InputGroup的label会覆盖TextInput的label属性值