Addon

前缀/后缀插件

基本用法

因为当前浏览器不支持使用 Custom Elements 定义内置的部件，如 所以不能使用 Custom Elements，只能使用编程式开发。

prepend

$ 
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, {}, [
    w(Addon, {value: '$'});
    w(TextInput, {type: 'number'});
]);

append

$ 
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, {}, [
    w(TextInput, {type: 'number'});
    w(Addon, {value: '$', position: 'append'});
]);

Multiple addons

$
0.00
$
0.00
$
0.00 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
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: '$'});
    w(Addon, {value: '0.00'});
    w(TextInput, {type: 'number'});
]);
w(InputGroup, {}, [
    w(TextInput, {type: 'number'});
    w(Addon, {value: '$', position: 'append'});
    w(Addon, {value: '0.00', position: 'append'});
]);
w(InputGroup, {}, [
    w(Addon, {value: '$'});
    w(TextInput, {type: 'number'});
    w(Addon, {value: '0.00', position: 'append'});
]);

With textarea

With textarea 
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 Textarea from 'widgets-web/textarea/index';

w(InputGroup, {}, [
    w(Addon, {value: 'With textarea'});
    w(Textarea, {});
]);

With Checkbox and Radio

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
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';
import CheckBox from 'widgets-web/checkbox/index';
import Radio from 'widgets-web/radio/index';

w(InputGroup, {}, [
    w(Addon, {}, [
        w(CheckBox, {});
    ]);
    w(TextInput, {});
]);
w(InputGroup, {}, [
    w(Addon, {}, [
        w(Radio, {});
    ]);
    w(TextInput, {});
]);

Button addons

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
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';
import Button from 'widgets-web/button/index';

w(InputGroup, {}, [
    w(Addon, {}, [
        w(Button, { appearance: 'outline-secondary', value: 'Button'});
    ]);
    w(TextInput, {});
]);
w(InputGroup, {}, [
    w(TextInput, {});
    w(Addon, { position:'append' }, [
        w(Button, { appearance: 'outline-secondary', value: 'Button'});
    ]);
]);

通用属性

  1. Colors

属性

名称 说明 默认值 可选值 值类型
widgetId 标识 string
value 值 string
position 位置 default prepend, append, default string
  1. 支持子部件
  2. 只能放在 InputGroup 中
  3. 如果要将 Addon 放在 TextInput 后面，则除了要设置 position 属性值为 append 外，在排版代码时还需将 Addon 放在 TextInput 后面。