+
+ 
+
+
+
diff --git a/docs/.vitepress/vitepress/styles/mixins.scss b/docs/.vitepress/vitepress/styles/mixins.scss
index 27c85422b5..6946b2b60e 100644
--- a/docs/.vitepress/vitepress/styles/mixins.scss
+++ b/docs/.vitepress/vitepress/styles/mixins.scss
@@ -23,7 +23,7 @@ $breakpoints: (
) !default;
@mixin respond-to($breakpoint) {
- @if #{map.has-key($breakpoints, $breakpoints)} {
+ @if #{map.has-key($breakpoints, $breakpoint)} {
@media screen and (min-width: #{map.get($breakpoints, $breakpoint)}) {
@content;
}
diff --git a/docs/en-US/component/dialog.md b/docs/en-US/component/dialog.md
index 8af567c556..a3c8a1661c 100644
--- a/docs/en-US/component/dialog.md
+++ b/docs/en-US/component/dialog.md
@@ -121,6 +121,7 @@ When using `modal` = false, please make sure that `append-to-body` was set to **
| fullscreen | whether the Dialog takes up full screen | boolean | — | false |
| top | value for `margin-top` of Dialog CSS | string | — | 15vh |
| modal | whether a mask is displayed | boolean | — | true |
+| modal-class | custom class names for mask | string | — | — |
| append-to-body | whether to append Dialog itself to body. A nested Dialog should have this attribute set to `true` | boolean | — | false |
| lock-scroll | whether scroll of body is disabled while Dialog is displayed | boolean | — | true |
| custom-class ^(deprecated) | custom class names for Dialog | string | — | — |
diff --git a/docs/en-US/component/form.md b/docs/en-US/component/form.md
index a3639f6fa7..e40903ac93 100644
--- a/docs/en-US/component/form.md
+++ b/docs/en-US/component/form.md
@@ -37,7 +37,7 @@ To prevent this behavior, you can add `@submit.prevent` on ``.
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` | — |
-| 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` / ^[boolean] | — |
-
+| Name | Description | Type | Default |
+| ------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------- | ------- |
+| model | Data of form component. | ^[object]`Record` | — |
+| 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` / ^[boolean] | — |
### Form Events
@@ -237,6 +236,6 @@ interface FormItemRule extends RuleItem {
trigger?: Arrayable
}
type FormRules = Partial>>
-
```
+
diff --git a/docs/en-US/component/image.md b/docs/en-US/component/image.md
index a2571102dd..ccd8e13578 100644
--- a/docs/en-US/component/image.md
+++ b/docs/en-US/component/image.md
@@ -93,7 +93,7 @@ image/image-preview
| ----------- | -------------------------------------------------------- |
| placeholder | custom placeholder content when image hasn't loaded yet. |
| error | custom image load failed content. |
-| viewer | description of the image. |
+| viewer | custom content when image preview. |
## Image Viewer API
diff --git a/docs/en-US/component/input.md b/docs/en-US/component/input.md
index 912d6cba31..829b9366f6 100644
--- a/docs/en-US/component/input.md
+++ b/docs/en-US/component/input.md
@@ -183,3 +183,15 @@ input/length-limiting
| select | select the text in input element | ^[Function]`() => void` |
| textarea | HTML textarea element | ^[object]`Ref` |
| textareaStyle | style of textarea | ^[object]`Ref` |
+
+## 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
+