Skip to content

docs(form): add form disabled demo #6658

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Jun 15, 2023
Merged

docs(form): add form disabled demo #6658

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
269 changes: 269 additions & 0 deletions components/form/__tests__/__snapshots__/demo.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -366,6 +366,275 @@ exports[`renders ./components/form/demo/customized-form-controls.vue correctly 1
</form>
`;

exports[`renders ./components/form/demo/disabled.vue correctly 1`] = `
<label class="ant-checkbox-wrapper ant-checkbox-wrapper-checked"><span class="ant-checkbox ant-checkbox-checked"><input type="checkbox" class="ant-checkbox-input"><span class="ant-checkbox-inner"></span></span><span> Form disabled </span></label>
<form style="max-width: 600px;" class="ant-form ant-form-horizontal">
<div class="ant-form-item">
<div class="ant-row ant-form-row">
<div style="width: 150px;" class="ant-col ant-form-item-label"><label class="" title="Checkbox">Checkbox
<!---->
</label></div>
<div class="ant-col ant-col-14 ant-form-item-control">
<div class="ant-form-item-control-input">
<div class="ant-form-item-control-input-content"><label class="ant-checkbox-wrapper ant-checkbox-wrapper-disabled"><span class="ant-checkbox ant-checkbox-disabled"><input type="checkbox" disabled="" class="ant-checkbox-input"><span class="ant-checkbox-inner"></span></span><span>checkbox</span></label></div>
</div>
<!---->
<!---->
</div>
</div>
<!---->
</div>
<div class="ant-form-item">
<div class="ant-row ant-form-row">
<div style="width: 150px;" class="ant-col ant-form-item-label"><label class="" title="Radio">Radio
<!---->
</label></div>
<div class="ant-col ant-col-14 ant-form-item-control">
<div class="ant-form-item-control-input">
<div class="ant-form-item-control-input-content">
<div class="ant-radio-group ant-radio-group-outline"><label class="ant-radio-wrapper ant-radio-wrapper-checked ant-radio-wrapper-disabled"><span class="ant-radio ant-radio-checked ant-radio-disabled"><input type="radio" disabled="" class="ant-radio-input" value="apple"><span class="ant-radio-inner"></span></span><span>Apple</span></label><label class="ant-radio-wrapper ant-radio-wrapper-disabled"><span class="ant-radio ant-radio-disabled"><input type="radio" disabled="" class="ant-radio-input" value="pear"><span class="ant-radio-inner"></span></span><span>Pear</span></label></div>
</div>
</div>
<!---->
<!---->
</div>
</div>
<!---->
</div>
<div class="ant-form-item">
<div class="ant-row ant-form-row">
<div style="width: 150px;" class="ant-col ant-form-item-label"><label class="" title="Input">Input
<!---->
</label></div>
<div class="ant-col ant-col-14 ant-form-item-control">
<div class="ant-form-item-control-input">
<div class="ant-form-item-control-input-content"><input disabled="" type="text" class="ant-input ant-input-disabled"></div>
</div>
<!---->
<!---->
</div>
</div>
<!---->
</div>
<div class="ant-form-item">
<div class="ant-row ant-form-row">
<div style="width: 150px;" class="ant-col ant-form-item-label"><label class="" title="Select">Select
<!---->
</label></div>
<div class="ant-col ant-col-14 ant-form-item-control">
<div class="ant-form-item-control-input">
<div class="ant-form-item-control-input-content">
<div class="ant-select ant-select-single ant-select-show-arrow ant-select-disabled">
<!---->
<div class="ant-select-selector"><span class="ant-select-selection-search"><input type="search" id="rc_select_TEST_OR_SSR" disabled="" autocomplete="off" class="ant-select-selection-search-input" role="combobox" aria-expanded="false" aria-haspopup="listbox" aria-owns="rc_select_TEST_OR_SSR_list" aria-autocomplete="list" aria-controls="rc_select_TEST_OR_SSR_list" aria-activedescendant="rc_select_TEST_OR_SSR_list_0" readonly="" unselectable="on" style="opacity: 0;"></span>
<!----><span class="ant-select-selection-placeholder"><!----></span>
</div>
<!----><span class="ant-select-arrow" style="user-select: none;" unselectable="on" aria-hidden="true"><span role="img" aria-label="down" class="anticon anticon-down ant-select-suffix"><svg focusable="false" class="" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></span>
<!----></span>
<!---->
</div>
</div>
</div>
<!---->
<!---->
</div>
</div>
<!---->
</div>
<div class="ant-form-item">
<div class="ant-row ant-form-row">
<div style="width: 150px;" class="ant-col ant-form-item-label"><label class="" title="TreeSelect">TreeSelect
<!---->
</label></div>
<div class="ant-col ant-col-14 ant-form-item-control">
<div class="ant-form-item-control-input">
<div class="ant-form-item-control-input-content">
<div class="ant-select ant-tree-select ant-select-single ant-select-show-arrow ant-select-disabled">
<!---->
<div class="ant-select-selector"><span class="ant-select-selection-search"><input type="search" id="rc_select_TEST_OR_SSR" disabled="" autocomplete="off" class="ant-select-selection-search-input" role="combobox" aria-expanded="false" aria-haspopup="listbox" aria-owns="rc_select_TEST_OR_SSR_list" aria-autocomplete="list" aria-controls="rc_select_TEST_OR_SSR_list" readonly="" unselectable="on" style="opacity: 0;"></span>
<!----><span class="ant-select-selection-placeholder"><!----></span>
</div>
<!----><span class="ant-select-arrow" style="user-select: none;" unselectable="on" aria-hidden="true"><span role="img" aria-label="down" class="anticon anticon-down ant-select-suffix"><svg focusable="false" class="" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></span>
<!----></span>
<!---->
</div>
</div>
</div>
<!---->
<!---->
</div>
</div>
<!---->
</div>
<div class="ant-form-item">
<div class="ant-row ant-form-row">
<div style="width: 150px;" class="ant-col ant-form-item-label"><label class="" title="Cascader">Cascader
<!---->
</label></div>
<div class="ant-col ant-col-14 ant-form-item-control">
<div class="ant-form-item-control-input">
<div class="ant-form-item-control-input-content">
<div class="ant-select ant-cascader ant-select-single ant-select-allow-clear ant-select-show-arrow ant-select-disabled">
<!---->
<div class="ant-select-selector"><span class="ant-select-selection-search"><input type="search" id="rc_select_TEST_OR_SSR" disabled="" autocomplete="off" class="ant-select-selection-search-input" role="combobox" aria-expanded="false" aria-haspopup="listbox" aria-owns="rc_select_TEST_OR_SSR_list" aria-autocomplete="list" aria-controls="rc_select_TEST_OR_SSR_list" readonly="" unselectable="on" style="opacity: 0;"></span>
<!----><span class="ant-select-selection-placeholder"><!----></span>
</div>
<!----><span class="ant-select-arrow" style="user-select: none;" unselectable="on" aria-hidden="true"><span role="img" aria-label="down" class="anticon anticon-down ant-select-suffix"><svg focusable="false" class="" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></span>
<!----></span>
<!---->
</div>
</div>
</div>
<!---->
<!---->
</div>
</div>
<!---->
</div>
<div class="ant-form-item">
<div class="ant-row ant-form-row">
<div style="width: 150px;" class="ant-col ant-form-item-label"><label class="" title="DatePicker">DatePicker
<!---->
</label></div>
<div class="ant-col ant-col-14 ant-form-item-control">
<div class="ant-form-item-control-input">
<div class="ant-form-item-control-input-content">
<div class="ant-picker ant-picker-disabled">
<div class="ant-picker-input"><input disabled="" readonly="" placeholder="Select date" title="" size="12" autocomplete="off"><span class="ant-picker-suffix"><span role="img" aria-label="calendar" class="anticon anticon-calendar"><svg focusable="false" class="" data-icon="calendar" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M880 184H712v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H384v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H144c-17.7 0-32 14.3-32 32v664c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V216c0-17.7-14.3-32-32-32zm-40 656H184V460h656v380zM184 392V256h128v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h256v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h128v136H184z"></path></svg></span>
<!----></span>
<!---->
</div>
<div style="pointer-events: none; position: absolute; top: 0px; bottom: 0px; left: 0px; right: 0px;"></div>
<!---->
</div>
</div>
</div>
<!---->
<!---->
</div>
</div>
<!---->
</div>
<div class="ant-form-item">
<div class="ant-row ant-form-row">
<div style="width: 150px;" class="ant-col ant-form-item-label"><label class="" title="RangePicker">RangePicker
<!---->
</label></div>
<div class="ant-col ant-col-14 ant-form-item-control">
<div class="ant-form-item-control-input">
<div class="ant-form-item-control-input-content">
<div class="ant-picker ant-picker-range ant-picker-disabled">
<div class="ant-picker-input ant-picker-input-active"><input disabled="" readonly="" placeholder="Start date" size="12" autocomplete="off"></div>
<div class="ant-picker-range-separator"><span aria-label="to" class="ant-picker-separator"><span role="img" aria-label="swap-right" class="anticon anticon-swap-right"><svg focusable="false" class="" data-icon="swap-right" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="0 0 1024 1024"><path d="M873.1 596.2l-164-208A32 32 0 00684 376h-64.8c-6.7 0-10.4 7.7-6.3 13l144.3 183H152c-4.4 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h695.9c26.8 0 41.7-30.8 25.2-51.8z"></path></svg></span></span></div>
<div class="ant-picker-input"><input disabled="" readonly="" placeholder="End date" size="12" autocomplete="off"></div>
<div class="ant-picker-active-bar" style="left: 0px; width: 0px; position: absolute;"></div><span class="ant-picker-suffix"><span role="img" aria-label="calendar" class="anticon anticon-calendar"><svg focusable="false" class="" data-icon="calendar" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M880 184H712v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H384v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H144c-17.7 0-32 14.3-32 32v664c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V216c0-17.7-14.3-32-32-32zm-40 656H184V460h656v380zM184 392V256h128v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h256v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h128v136H184z"></path></svg></span>
<!----></span>
<!---->
<div style="pointer-events: none; position: absolute; top: 0px; bottom: 0px; left: 0px; right: 0px;"></div>
<!---->
</div>
</div>
</div>
<!---->
<!---->
</div>
</div>
<!---->
</div>
<div class="ant-form-item">
<div class="ant-row ant-form-row">
<div style="width: 150px;" class="ant-col ant-form-item-label"><label class="" title="InputNumber">InputNumber
<!---->
</label></div>
<div class="ant-col ant-col-14 ant-form-item-control">
<div class="ant-form-item-control-input">
<div class="ant-form-item-control-input-content">
<div class="ant-input-number ant-input-number-disabled">
<div class="ant-input-number-handler-wrap"><span unselectable="on" role="button" aria-label="Increase Value" aria-disabled="false" class="ant-input-number-handler ant-input-number-handler-up"><span role="img" aria-label="up" class="anticon anticon-up ant-input-number-handler-up-inner"><svg focusable="false" class="" data-icon="up" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M890.5 755.3L537.9 269.2c-12.8-17.6-39-17.6-51.7 0L133.5 755.3A8 8 0 00140 768h75c5.1 0 9.9-2.5 12.9-6.6L512 369.8l284.1 391.6c3 4.1 7.8 6.6 12.9 6.6h75c6.5 0 10.3-7.4 6.5-12.7z"></path></svg></span></span><span unselectable="on" role="button" aria-label="Decrease Value" aria-disabled="false" class="ant-input-number-handler ant-input-number-handler-down"><span role="img" aria-label="down" class="anticon anticon-down ant-input-number-handler-down-inner"><svg focusable="false" class="" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></span></span></div>
<div class="ant-input-number-input-wrap"><input autocomplete="off" role="spinbutton" step="1" class="ant-input-number-input" disabled=""></div>
</div>
</div>
</div>
<!---->
<!---->
</div>
</div>
<!---->
</div>
<div class="ant-form-item">
<div class="ant-row ant-form-row">
<div style="width: 150px;" class="ant-col ant-form-item-label"><label class="" title="TextArea">TextArea
<!---->
</label></div>
<div class="ant-col ant-col-14 ant-form-item-control">
<div class="ant-form-item-control-input">
<div class="ant-form-item-control-input-content"><textarea rows="4" disabled="" class="ant-input ant-input-disabled"></textarea></div>
</div>
<!---->
<!---->
</div>
</div>
<!---->
</div>
<div class="ant-form-item">
<div class="ant-row ant-form-row">
<div style="width: 150px;" class="ant-col ant-form-item-label"><label class="" title="Switch">Switch
<!---->
</label></div>
<div class="ant-col ant-col-14 ant-form-item-control">
<div class="ant-form-item-control-input">
<div class="ant-form-item-control-input-content"><button disabled="" type="button" role="switch" aria-checked="false" class="ant-switch-disabled ant-switch">
<div class="ant-switch-handle">
<!---->
</div><span class="ant-switch-inner"><span class="ant-switch-inner-checked"><!----></span><span class="ant-switch-inner-unchecked"><!----></span></span>
</button></div>
</div>
<!---->
<!---->
</div>
</div>
<!---->
</div>
<div class="ant-form-item">
<div class="ant-row ant-form-row">
<div style="width: 150px;" class="ant-col ant-form-item-label"><label class="" title="Upload">Upload
<!---->
</label></div>
<div class="ant-col ant-col-14 ant-form-item-control">
<div class="ant-form-item-control-input">
<div class="ant-form-item-control-input-content"><span class="ant-upload-wrapper ant-upload-picture-card-wrapper"><div class="ant-upload-list ant-upload-list-picture-card"><div class="ant-upload ant-upload-select ant-upload-select-picture-card ant-upload-disabled"><span class="ant-upload ant-upload-disabled" role="button"><input type="file" style="display: none;" accept=""><div><span role="img" aria-label="plus" class="anticon anticon-plus"><svg focusable="false" class="" data-icon="plus" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><defs><style></style></defs><path d="M482 152h60q8 0 8 8v704q0 8-8 8h-60q-8 0-8-8V160q0-8 8-8z"></path><path d="M176 474h672q8 0 8 8v60q0 8-8 8H176q-8 0-8-8v-60q0-8 8-8z"></path></svg></span>
<div style="margin-top: 8px;">Upload</div>
</div></span>
</div>
</div></span>
</div>
</div>
<!---->
<!---->
</div>
</div>
<!---->
</div>
<div class="ant-form-item">
<div class="ant-row ant-form-row">
<div style="width: 150px;" class="ant-col ant-form-item-label"><label class="" title="Button">Button
<!---->
</label></div>
<div class="ant-col ant-col-14 ant-form-item-control">
<div class="ant-form-item-control-input">
<div class="ant-form-item-control-input-content"><button disabled="" class="ant-btn ant-btn-default" type="button">
<!----><span>Button</span>
</button></div>
</div>
<!---->
<!---->
</div>
</div>
<!---->
</div>
</form>
`;

exports[`renders ./components/form/demo/dynamic-form-item.vue correctly 1`] = `
<form class="ant-form ant-form-horizontal">
<div class="ant-form-item">
Expand Down
Loading