mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2025-06-11 03:22:59 +08:00
Code Issues Actions 43 Packages Projects Releases Wiki Activity

fix Input.Group style bug

Browse Source
This commit is contained in:
乐仪 2017-04-26 15:17:35 +08:00
parent 44c4d5c167
commit 09e66db264
3 changed files with 103 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

58
components/input/__tests__/__snapshots__/demo.test.js.snap
View File

@ -573,6 +573,64 @@ exports[`renders ./components/input/demo/group.md correctly 1`] = `
</div>
</div>
</span>
<br />
<span
class="ant-input-group ant-input-group-compact"
>
<div
class="ant-select ant-select-enabled"
style="width:30%;"
>
<div
aria-autocomplete="list"
aria-expanded="false"
aria-haspopup="true"
class="ant-select-selection
ant-select-selection--single"
role="combobox"
tabindex="0"
>
<div
class="ant-select-selection__rendered"
>
<div
class="ant-select-selection-selected-value"
style="display:block;opacity:1;"
title="Home"
>
Home
</div>
</div>
<span
class="ant-select-arrow"
style="user-select:none;-webkit-user-select:none;"
unselectable="unselectable"
>
<b />
</span>
</div>
</div>
<span
class="ant-cascader-picker"
style="width:70%;"
tabindex="0"
>
<input
autocomplete="off"
class="ant-input ant-cascader-input "
placeholder="Select Address"
readonly=""
type="text"
value=""
/>
<span
class="ant-cascader-picker-label"
/>
<i
class="anticon anticon-down ant-cascader-picker-arrow"
/>
</span>
</span>
</div>
`;

33
components/input/demo/group.md
View File

@ -18,10 +18,33 @@ Input.Group example
Note: You don't need `Col` to control the width in the `compact` mode.
````jsx
import { Input, Col, Select, InputNumber, DatePicker, AutoComplete } from 'antd';
import { Input, Col, Select, InputNumber, DatePicker, AutoComplete, Cascader } from 'antd';
const InputGroup = Input.Group;
const Option = Select.Option;
const options = [{
value: 'zhejiang',
label: 'Zhejiang',
children: [{
value: 'hangzhou',
label: 'Hangzhou',
children: [{
value: 'xihu',
label: 'West Lake',
}],
}],
}, {
value: 'jiangsu',
label: 'Jiangsu',
children: [{
value: 'nanjing',
label: 'Nanjing',
children: [{
value: 'zhonghuamen',
label: 'Zhong Hua Men',
}],
}],
}];
class CompactDemo extends React.Component {
state = {
@ -108,6 +131,14 @@ class CompactDemo extends React.Component {
placeholder="Email"
/>
</InputGroup>
<br />
<InputGroup compact>
<Select style={{ width: '30%' }} defaultValue="Home">
<Option value="Home">Home</Option>
<Option value="Company">Company</Option>
</Select>
<Cascader style={{ width: '70%' }} options={options} placeholder="Select Address" />
</InputGroup>
</div>
);
}

17
components/input/style/mixin.less
View File

@ -259,10 +259,13 @@
z-index: auto;
}
// reset border for Select, datePicker
// reset border for Select, DatePicker, AutoComplete, Cascader, Mention, TimePicker
& > .@{ant-prefix}-select > .@{ant-prefix}-select-selection,
& > .@{ant-prefix}-calendar-picker .@{ant-prefix}-input,
& > .@{ant-prefix}-select-auto-complete .@{ant-prefix}-input {
& > .@{ant-prefix}-select-auto-complete .@{ant-prefix}-input,
& > .@{ant-prefix}-cascader-picker .@{ant-prefix}-input,
& > .@{ant-prefix}-mention-wrapper .@{ant-prefix}-mention-editor,
& > .@{ant-prefix}-time-picker .@{ant-prefix}-time-picker-input {
border-radius: 0;
border-right-width: 0;
}
@ -270,7 +273,10 @@
& > *:first-child,
& > .@{ant-prefix}-select:first-child > .@{ant-prefix}-select-selection,
& > .@{ant-prefix}-calendar-picker:first-child .@{ant-prefix}-input,
& > .@{ant-prefix}-select-auto-complete:first-child .@{ant-prefix}-input {
& > .@{ant-prefix}-select-auto-complete:first-child .@{ant-prefix}-input,
& > .@{ant-prefix}-cascader-picker:first-child .@{ant-prefix}-input,
& > .@{ant-prefix}-mention-wrapper:first-child .@{ant-prefix}-mention-editor,
& > .@{ant-prefix}-time-picker:first-child .@{ant-prefix}-time-picker-input {
border-top-left-radius: @border-radius-base;
border-bottom-left-radius: @border-radius-base;
}
@ -278,7 +284,10 @@
& > *:last-child,
& > .@{ant-prefix}-select:last-child > .@{ant-prefix}-select-selection,
& > .@{ant-prefix}-calendar-picker:last-child .@{ant-prefix}-input,
& > .@{ant-prefix}-select-auto-complete:last-child .@{ant-prefix}-input {
& > .@{ant-prefix}-select-auto-complete:last-child .@{ant-prefix}-input,
& > .@{ant-prefix}-cascader-picker:last-child .@{ant-prefix}-input,
& > .@{ant-prefix}-mention-wrapper:last-child .@{ant-prefix}-mention-editor,
& > .@{ant-prefix}-time-picker:last-child .@{ant-prefix}-time-picker-input {
border-top-right-radius: @border-radius-base;
border-bottom-right-radius: @border-radius-base;
border-right-width: 1px;