mirror of
https://github.com/ant-design/ant-design.git
synced 2025-08-05 23:46:28 +08:00
style: optimization form rtl and demo (#22621)
This commit is contained in:
xrkffgg
GitHub
parent
e504fa19c0
commit
fd7e7d3695
@ -262,7 +262,7 @@ exports[`renders ./components/form/demo/advanced-search.md correctly 1`] = `
|
||||
</button>
|
||||
<button
|
||||
class="ant-btn"
|
||||
style="margin-left:8px"
|
||||
style="margin:0 8px"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
@ -270,7 +270,7 @@ exports[`renders ./components/form/demo/advanced-search.md correctly 1`] = `
|
||||
</span>
|
||||
</button>
|
||||
<a
|
||||
style="margin-left:8px;font-size:12px"
|
||||
style="font-size:12px"
|
||||
>
|
||||
<span
|
||||
aria-label="down"
|
||||
@ -835,13 +835,13 @@ exports[`renders ./components/form/demo/customized-form-controls.md correctly 1`
|
||||
<span>
|
||||
<input
|
||||
class="ant-input"
|
||||
style="width:100px;margin-right:8px"
|
||||
style="width:100px"
|
||||
type="text"
|
||||
value="0"
|
||||
/>
|
||||
<div
|
||||
class="ant-select ant-select-single ant-select-show-arrow"
|
||||
style="width:80px"
|
||||
style="width:80px;margin:0 8px"
|
||||
>
|
||||
<div
|
||||
class="ant-select-selector"
|
||||
@ -1259,7 +1259,7 @@ exports[`renders ./components/form/demo/form-context.md correctly 1`] = `
|
||||
</button>
|
||||
<button
|
||||
class="ant-btn"
|
||||
style="margin-left:8px"
|
||||
style="margin:0 8px"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
@ -5941,7 +5941,7 @@ exports[`renders ./components/form/demo/validate-static.md correctly 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
<span
|
||||
style="display:inline-block;width:24px;text-align:center"
|
||||
style="display:inline-block;width:24px;line-height:32px;text-align:center"
|
||||
>
|
||||
-
|
||||
</span>
|
||||
|
||||
@ -68,7 +68,7 @@ const AdvancedSearchForm = () => {
|
||||
Search
|
||||
</Button>
|
||||
<Button
|
||||
style={{ marginLeft: 8 }}
|
||||
style={{ margin: '0 8px' }}
|
||||
onClick={() => {
|
||||
form.resetFields();
|
||||
}}
|
||||
@ -76,7 +76,7 @@ const AdvancedSearchForm = () => {
|
||||
Clear
|
||||
</Button>
|
||||
<a
|
||||
style={{ marginLeft: 8, fontSize: 12 }}
|
||||
style={{ fontSize: 12 }}
|
||||
onClick={() => {
|
||||
setExpand(!expand);
|
||||
}}
|
||||
|
||||
@ -74,7 +74,7 @@ const Demo = () => {
|
||||
<Input style={{ width: 160 }} placeholder="Please input" />
|
||||
</Form.Item>
|
||||
<Tooltip title="Useful information">
|
||||
<a href="#API" style={{ marginLeft: 8 }}>
|
||||
<a href="#API" style={{ margin: '0 8px' }}>
|
||||
Need Help?
|
||||
</a>
|
||||
</Tooltip>
|
||||
@ -104,14 +104,14 @@ const Demo = () => {
|
||||
<Form.Item
|
||||
name="year"
|
||||
rules={[{ required: true }]}
|
||||
style={{ display: 'inline-block', width: 'calc(50% - 5px)', marginRight: 8 }}
|
||||
style={{ display: 'inline-block', width: 'calc(50% - 8px)' }}
|
||||
>
|
||||
<Input placeholder="Input birth year" />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
name="month"
|
||||
rules={[{ required: true }]}
|
||||
style={{ display: 'inline-block', width: 'calc(50% - 5px)' }}
|
||||
style={{ display: 'inline-block', width: 'calc(50% - 8px)', margin: '0 8px' }}
|
||||
>
|
||||
<Input placeholder="Input birth month" />
|
||||
</Form.Item>
|
||||
|
||||
@ -69,9 +69,13 @@ const PriceInput: React.FC<PriceInputProps> = ({ value = {}, onChange }) => {
|
||||
type="text"
|
||||
value={value.number || number}
|
||||
onChange={onNumberChange}
|
||||
style={{ width: 100, marginRight: 8 }}
|
||||
style={{ width: 100 }}
|
||||
/>
|
||||
<Select value={value.currency || currency} style={{ width: 80 }} onChange={onCurrencyChange}>
|
||||
<Select
|
||||
value={value.currency || currency}
|
||||
style={{ width: 80, margin: '0 8px' }}
|
||||
onChange={onCurrencyChange}
|
||||
>
|
||||
<Option value="rmb">RMB</Option>
|
||||
<Option value="dollar">Dollar</Option>
|
||||
</Select>
|
||||
|
||||
@ -64,11 +64,12 @@ const DynamicFieldSet = () => {
|
||||
]}
|
||||
noStyle
|
||||
>
|
||||
<Input placeholder="passenger name" style={{ width: '60%', marginRight: 8 }} />
|
||||
<Input placeholder="passenger name" style={{ width: '60%' }} />
|
||||
</Form.Item>
|
||||
{fields.length > 1 ? (
|
||||
<MinusCircleOutlined
|
||||
className="dynamic-delete-button"
|
||||
style={{ margin: '0 8px' }}
|
||||
onClick={() => {
|
||||
remove(field.name);
|
||||
}}
|
||||
|
||||
@ -129,7 +129,7 @@ const Demo = () => {
|
||||
<Button htmlType="submit" type="primary">
|
||||
Submit
|
||||
</Button>
|
||||
<Button htmlType="button" style={{ marginLeft: 8 }} onClick={showUserModal}>
|
||||
<Button htmlType="button" style={{ margin: '0 8px' }} onClick={showUserModal}>
|
||||
Add User
|
||||
</Button>
|
||||
</Form.Item>
|
||||
|
||||
@ -75,6 +75,9 @@ ReactDOM.render(<NormalLoginForm />, mountNode);
|
||||
#components-form-demo-normal-login .login-form-forgot {
|
||||
float: right;
|
||||
}
|
||||
#components-form-demo-normal-login .ant-col-rtl .login-form-forgot {
|
||||
float: left;
|
||||
}
|
||||
#components-form-demo-normal-login .login-form-button {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@ -111,7 +111,11 @@ ReactDOM.render(
|
||||
>
|
||||
<DatePicker />
|
||||
</Form.Item>
|
||||
<span style={{ display: 'inline-block', width: '24px', textAlign: 'center' }}>-</span>
|
||||
<span
|
||||
style={{ display: 'inline-block', width: '24px', lineHeight: '32px', textAlign: 'center' }}
|
||||
>
|
||||
-
|
||||
</span>
|
||||
<Form.Item style={{ display: 'inline-block', width: 'calc(50% - 12px)' }}>
|
||||
<DatePicker />
|
||||
</Form.Item>
|
||||
|
||||
@ -22,7 +22,7 @@
|
||||
// ==============================================================
|
||||
&-label {
|
||||
.@{form-prefix-cls}-rtl & {
|
||||
text-align: right;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
> label {
|
||||
@ -32,6 +32,11 @@
|
||||
margin-left: 4px;
|
||||
}
|
||||
}
|
||||
&::after {
|
||||
.@{form-prefix-cls}-rtl & {
|
||||
margin: 0 @form-item-label-colon-margin-left 0 @form-item-label-colon-margin-right;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user