DataType
/
omi
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

feat(@omiu/input): support block prop

This commit is contained in:
dntzhang 2020-04-25 09:15:18 +08:00
parent a94edf9d7e
commit a45bcf6ac9
8 changed files with 44 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
components/input/demos/js-demo/index.html
View File

@ -24,54 +24,54 @@
</style>
<div>
<o-input placeholder="请输入用户名"></o-input>
<o-input placeholder="Enter User Name"></o-input>
</div>
<div>
<o-input disabled placeholder="请输入用户名"></o-input>
<o-input disabled placeholder="Enter User Name"></o-input>
</div>
<div>
<o-input clearable placeholder="请输入用户名"></o-input>
<o-input clearable placeholder="Enter User Name"></o-input>
</div>
<div>
<o-input max-length="10" placeholder="请输入用户名"></o-input>
<o-input max-length="10" placeholder="Enter User Name"></o-input>
</div>
<div>
<o-input suffix-icon="ac-unit-outlined" placeholder="请输入用户名"></o-input>
<o-input suffix-icon="ac-unit-outlined" placeholder="Enter User Name"></o-input>
</div>
<div>
<o-input suffix-icon="ac-unit-outlined" placeholder="请输入用户名"></o-input>
<o-input suffix-icon="ac-unit-outlined" placeholder="Enter User Name"></o-input>
<o-input size="medium" suffix-icon="ac-unit-outlined" placeholder="请输入用户名"></o-input>
<o-input size="medium" suffix-icon="ac-unit-outlined" placeholder="Enter User Name"></o-input>
<o-input size="small" suffix-icon="ac-unit-outlined" placeholder="请输入用户名"></o-input>
<o-input size="small" suffix-icon="ac-unit-outlined" placeholder="Enter User Name"></o-input>
<o-input size="mini" suffix-icon="ac-unit-outlined" placeholder="请输入用户名"></o-input>
<o-input size="mini" suffix-icon="ac-unit-outlined" placeholder="Enter User Name"></o-input>
</div>
<div>
<o-input prefix-icon="ac-unit-outlined" placeholder="请输入用户名"></o-input>
<o-input prefix-icon="ac-unit-outlined" placeholder="Enter User Name"></o-input>
<o-input size="medium" prefix-icon="ac-unit-outlined" placeholder="请输入用户名"></o-input>
<o-input size="medium" prefix-icon="ac-unit-outlined" placeholder="Enter User Name"></o-input>
<o-input size="small" prefix-icon="ac-unit-outlined" placeholder="请输入用户名"></o-input>
<o-input size="small" prefix-icon="ac-unit-outlined" placeholder="Enter User Name"></o-input>
<o-input size="mini" prefix-icon="ac-unit-outlined" placeholder="请输入用户名"></o-input>
<o-input size="mini" prefix-icon="ac-unit-outlined" placeholder="Enter User Name"></o-input>
</div>
<o-input block placeholder="Enter User Name"></o-input>
</body>
</html>

7
components/input/src/index.css
View File

@ -1,6 +1,9 @@
:host {
display: inline-block; }
:host([block]) {
display: block; }
.o-textarea {
position: relative;
display: inline-block;
@ -395,3 +398,7 @@
position: absolute;
top: 0px;
right: 4px; }
.o-input.is-block {
display: block;
width: 100%; }

8
components/input/src/index.esm.js
View File

@ -71,6 +71,9 @@ function __decorate(decorators, target, key, desc) {
var css = `:host {
display: inline-block; }
:host([block]) {
display: block; }
.o-textarea {
position: relative;
display: inline-block;
@ -465,6 +468,10 @@ var css = `:host {
position: absolute;
top: 0px;
right: 4px; }
.o-input.is-block {
display: block;
width: 100%; }
`
@ -507,6 +514,7 @@ var Input = /** @class */ (function (_super) {
_a['is-disabled'] = this.props.disabled,
_a['o-input-suffix'] = suffixIcon,
_a['o-input-prefix'] = prefixIcon,
_a['is-block'] = props.block,
_a)), { onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave }),
(prefixIcon || suffixIcon) && h(this._tempTagName, __assign({ css: "svg{\n\t\t\t\t\t\twidth: 1em;\n\t\t\t\t\t}" }, extractClass(props, 'o-input__icon', {
'is-prefix': prefixIcon,

2
components/input/src/index.esm.js.map
View File

File diff suppressed because one or more lines are too long

3
components/input/src/index.js
View File

File diff suppressed because one or more lines are too long

2
components/input/src/index.js.map
View File

File diff suppressed because one or more lines are too long

9
components/input/src/index.scss
View File

@ -4,6 +4,10 @@
display: inline-block;
}
:host([block]) {
display: block;
}
.o-textarea {
position: relative;
display: inline-block;
@ -486,3 +490,8 @@
top:0px;
right: 4px;
}
.o-input.is-block {
display: block;
width: 100%;
}

3
components/input/src/index.tsx
View File

@ -87,7 +87,8 @@ export default class Input extends WeElement<Props>{
[`o-input--${size}`]: props.size,
'is-disabled': this.props.disabled,
'o-input-suffix': suffixIcon,
'o-input-prefix': prefixIcon
'o-input-prefix': prefixIcon,
'is-block': props.block
}
)
} onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave}>