javascript/element-plus
1
0
Fork 0
mirror of https://github.com/element-plus/element-plus.git synced 2026-03-13 07:51:17 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(theme-chalk): [form] remove default width of Input in inline form (#13375)

Browse Source
This commit is contained in:
qiang
2023-06-30 21:56:03 +08:00
committed by GitHub
parent 0a358d6570
commit 37e0b10e80
4 changed files with 38 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
docs/en-US/component/form.md
View File

@@ -37,7 +37,7 @@ To prevent this behavior, you can add `@submit.prevent` on `<el-form>`.
When the vertical space is limited and the form is relatively simple, you can put it in one line.
:::demo Set the `inline` attribute to `true` and the form will be inline. After ^(2.3.6), the ElInput component will get a fixed width to avoid the width change caused by the clearable icon.
:::demo Set the `inline` attribute to `true` and the form will be inline.
form/inline-form
@@ -125,25 +125,24 @@ form/accessibility
### Form Attributes
| Name | Description | Type | Default |
| ------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------- | ------- |
| model | Data of form component. | ^[object]`Record<string, any>` | — |
| rules | Validation rules of form. | ^[object]`FormRules` | — |
| inline | Whether the form is inline. | ^[boolean] | false |
| label-position | Position of label. If set to `'left'` or `'right'`, `label-width` prop is also required. | ^[enum]`'left' \| 'right' \| 'top'` | right |
| label-width | Width of label, e.g. `'50px'`. All its direct child form items will inherit this value. `auto` is supported. | ^[string] / ^[number] | '' |
| label-suffix | Suffix of the label. | ^[string] | '' |
| hide-required-asterisk | Whether to hide required fields should have a red asterisk (star) beside their labels. | ^[boolean] | false |
| require-asterisk-position | Position of asterisk. | ^[enum]`'left' \| 'right'` | left |
| show-message | Whether to show the error message. | ^[boolean] | true |
| inline-message | Whether to display the error message inline with the form item. | ^[boolean] | false |
| status-icon | Whether to display an icon indicating the validation result. | ^[boolean] | false |
| validate-on-rule-change | Whether to trigger validation when the `rules` prop is changed. | ^[boolean] | true |
| size | Control the size of components in this form. | ^[enum]`'' \| 'large' \| 'default' \| 'small'` | — |
| disabled | Whether to disable all components in this form. If set to `true`, it will override the `disabled` prop of the inner component. | ^[boolean] | false |
| scroll-to-error | When validation fails, scroll to the first error form entry. | ^[boolean] | false |
| scroll-into-view-options | When validation fails, it scrolls to the first error item based on the scrollIntoView option. [scrollIntoView](https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView). | ^[object]`Record<string, any>` / ^[boolean] | — |
| Name | Description | Type | Default |
| ------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------- | ------- |
| model | Data of form component. | ^[object]`Record<string, any>` | — |
| rules | Validation rules of form. | ^[object]`FormRules` | — |
| inline | Whether the form is inline. | ^[boolean] | false |
| label-position | Position of label. If set to `'left'` or `'right'`, `label-width` prop is also required. | ^[enum]`'left' \| 'right' \| 'top'` | right |
| label-width | Width of label, e.g. `'50px'`. All its direct child form items will inherit this value. `auto` is supported. | ^[string] / ^[number] | '' |
| label-suffix | Suffix of the label. | ^[string] | '' |
| hide-required-asterisk | Whether to hide required fields should have a red asterisk (star) beside their labels. | ^[boolean] | false |
| require-asterisk-position | Position of asterisk. | ^[enum]`'left' \| 'right'` | left |
| show-message | Whether to show the error message. | ^[boolean] | true |
| inline-message | Whether to display the error message inline with the form item. | ^[boolean] | false |
| status-icon | Whether to display an icon indicating the validation result. | ^[boolean] | false |
| validate-on-rule-change | Whether to trigger validation when the `rules` prop is changed. | ^[boolean] | true |
| size | Control the size of components in this form. | ^[enum]`'' \| 'large' \| 'default' \| 'small'` | — |
| disabled | Whether to disable all components in this form. If set to `true`, it will override the `disabled` prop of the inner component. | ^[boolean] | false |
| scroll-to-error | When validation fails, scroll to the first error form entry. | ^[boolean] | false |
| scroll-into-view-options | When validation fails, it scrolls to the first error item based on the scrollIntoView option. [scrollIntoView](https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView). | ^[object]`Record<string, any>` / ^[boolean] | — |
### Form Events
@@ -237,6 +236,6 @@ interface FormItemRule extends RuleItem {
trigger?: Arrayable<string>
}
type FormRules = Partial<Record<string, Arrayable<FormItemRule>>>
```
</details>

12
docs/en-US/component/input.md
View File

@@ -183,3 +183,15 @@ input/length-limiting
| select | select the text in input element | ^[Function]`() => void` |
| textarea | HTML textarea element | ^[object]`Ref<HTMLTextAreaElement>` |
| textareaStyle | style of textarea | ^[object]`Ref<StyleValue>` |
## FAQ
#### Why is the width of the ElInput component expanded by clearable?
Typical issue: [#7287](https://github.com/element-plus/element-plus/issues/7287)
PS: Since the ElInput component does not have a default width, when the clearable icon is displayed, the width of the component will be expanded, which can be solved by setting width.
```vue
<el-input v-model="input" clearable style="width: 200px" />
```

6
docs/examples/form/inline-form.vue
View File

@@ -40,3 +40,9 @@ const onSubmit = () => {
console.log('submit!')
}
</script>
<style>
.demo-form-inline .el-input {
--el-input-width: 220px;
}
</style>

7
packages/theme-chalk/src/form.scss
View File

@@ -91,13 +91,6 @@ $form-item-label-top-margin-bottom: map.merge(
display: block;
}
}
.#{$namespace}-input {
@include set-css-var-value(
'input-width',
getCssVar('form-inline-content-width')
);
}
}
@each $size in (large, default, small) {