Skip to content

Commit 1015994

Browse files
selicensselicens
authored
docs(form): add form disabled demo (#6658)
1 parent 9c26ab0 commit 1015994

File tree

3 files changed

+377
-0
lines changed

3 files changed

+377
-0
lines changed

‎components/form/__tests__/__snapshots__/demo.test.js.snap‎

Lines changed: 269 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -366,6 +366,275 @@ exports[`renders ./components/form/demo/customized-form-controls.vue correctly 1
366366
</form>
367367
`;
368368

369+
exports[`renders ./components/form/demo/disabled.vue correctly 1`] = `
370+
<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>
371+
<form style="max-width: 600px;" class="ant-form ant-form-horizontal">
372+
<div class="ant-form-item">
373+
<div class="ant-row ant-form-row">
374+
<div style="width: 150px;" class="ant-col ant-form-item-label"><label class="" title="Checkbox">Checkbox
375+
<!---->
376+
</label></div>
377+
<div class="ant-col ant-col-14 ant-form-item-control">
378+
<div class="ant-form-item-control-input">
379+
<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>
380+
</div>
381+
<!---->
382+
<!---->
383+
</div>
384+
</div>
385+
<!---->
386+
</div>
387+
<div class="ant-form-item">
388+
<div class="ant-row ant-form-row">
389+
<div style="width: 150px;" class="ant-col ant-form-item-label"><label class="" title="Radio">Radio
390+
<!---->
391+
</label></div>
392+
<div class="ant-col ant-col-14 ant-form-item-control">
393+
<div class="ant-form-item-control-input">
394+
<div class="ant-form-item-control-input-content">
395+
<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>
396+
</div>
397+
</div>
398+
<!---->
399+
<!---->
400+
</div>
401+
</div>
402+
<!---->
403+
</div>
404+
<div class="ant-form-item">
405+
<div class="ant-row ant-form-row">
406+
<div style="width: 150px;" class="ant-col ant-form-item-label"><label class="" title="Input">Input
407+
<!---->
408+
</label></div>
409+
<div class="ant-col ant-col-14 ant-form-item-control">
410+
<div class="ant-form-item-control-input">
411+
<div class="ant-form-item-control-input-content"><input disabled="" type="text" class="ant-input ant-input-disabled"></div>
412+
</div>
413+
<!---->
414+
<!---->
415+
</div>
416+
</div>
417+
<!---->
418+
</div>
419+
<div class="ant-form-item">
420+
<div class="ant-row ant-form-row">
421+
<div style="width: 150px;" class="ant-col ant-form-item-label"><label class="" title="Select">Select
422+
<!---->
423+
</label></div>
424+
<div class="ant-col ant-col-14 ant-form-item-control">
425+
<div class="ant-form-item-control-input">
426+
<div class="ant-form-item-control-input-content">
427+
<div class="ant-select ant-select-single ant-select-show-arrow ant-select-disabled">
428+
<!---->
429+
<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>
430+
<!----><span class="ant-select-selection-placeholder"><!----></span>
431+
</div>
432+
<!----><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>
433+
<!----></span>
434+
<!---->
435+
</div>
436+
</div>
437+
</div>
438+
<!---->
439+
<!---->
440+
</div>
441+
</div>
442+
<!---->
443+
</div>
444+
<div class="ant-form-item">
445+
<div class="ant-row ant-form-row">
446+
<div style="width: 150px;" class="ant-col ant-form-item-label"><label class="" title="TreeSelect">TreeSelect
447+
<!---->
448+
</label></div>
449+
<div class="ant-col ant-col-14 ant-form-item-control">
450+
<div class="ant-form-item-control-input">
451+
<div class="ant-form-item-control-input-content">
452+
<div class="ant-select ant-tree-select ant-select-single ant-select-show-arrow ant-select-disabled">
453+
<!---->
454+
<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>
455+
<!----><span class="ant-select-selection-placeholder"><!----></span>
456+
</div>
457+
<!----><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>
458+
<!----></span>
459+
<!---->
460+
</div>
461+
</div>
462+
</div>
463+
<!---->
464+
<!---->
465+
</div>
466+
</div>
467+
<!---->
468+
</div>
469+
<div class="ant-form-item">
470+
<div class="ant-row ant-form-row">
471+
<div style="width: 150px;" class="ant-col ant-form-item-label"><label class="" title="Cascader">Cascader
472+
<!---->
473+
</label></div>
474+
<div class="ant-col ant-col-14 ant-form-item-control">
475+
<div class="ant-form-item-control-input">
476+
<div class="ant-form-item-control-input-content">
477+
<div class="ant-select ant-cascader ant-select-single ant-select-allow-clear ant-select-show-arrow ant-select-disabled">
478+
<!---->
479+
<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>
480+
<!----><span class="ant-select-selection-placeholder"><!----></span>
481+
</div>
482+
<!----><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>
483+
<!----></span>
484+
<!---->
485+
</div>
486+
</div>
487+
</div>
488+
<!---->
489+
<!---->
490+
</div>
491+
</div>
492+
<!---->
493+
</div>
494+
<div class="ant-form-item">
495+
<div class="ant-row ant-form-row">
496+
<div style="width: 150px;" class="ant-col ant-form-item-label"><label class="" title="DatePicker">DatePicker
497+
<!---->
498+
</label></div>
499+
<div class="ant-col ant-col-14 ant-form-item-control">
500+
<div class="ant-form-item-control-input">
501+
<div class="ant-form-item-control-input-content">
502+
<div class="ant-picker ant-picker-disabled">
503+
<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>
504+
<!----></span>
505+
<!---->
506+
</div>
507+
<div style="pointer-events: none; position: absolute; top: 0px; bottom: 0px; left: 0px; right: 0px;"></div>
508+
<!---->
509+
</div>
510+
</div>
511+
</div>
512+
<!---->
513+
<!---->
514+
</div>
515+
</div>
516+
<!---->
517+
</div>
518+
<div class="ant-form-item">
519+
<div class="ant-row ant-form-row">
520+
<div style="width: 150px;" class="ant-col ant-form-item-label"><label class="" title="RangePicker">RangePicker
521+
<!---->
522+
</label></div>
523+
<div class="ant-col ant-col-14 ant-form-item-control">
524+
<div class="ant-form-item-control-input">
525+
<div class="ant-form-item-control-input-content">
526+
<div class="ant-picker ant-picker-range ant-picker-disabled">
527+
<div class="ant-picker-input ant-picker-input-active"><input disabled="" readonly="" placeholder="Start date" size="12" autocomplete="off"></div>
528+
<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>
529+
<div class="ant-picker-input"><input disabled="" readonly="" placeholder="End date" size="12" autocomplete="off"></div>
530+
<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>
531+
<!----></span>
532+
<!---->
533+
<div style="pointer-events: none; position: absolute; top: 0px; bottom: 0px; left: 0px; right: 0px;"></div>
534+
<!---->
535+
</div>
536+
</div>
537+
</div>
538+
<!---->
539+
<!---->
540+
</div>
541+
</div>
542+
<!---->
543+
</div>
544+
<div class="ant-form-item">
545+
<div class="ant-row ant-form-row">
546+
<div style="width: 150px;" class="ant-col ant-form-item-label"><label class="" title="InputNumber">InputNumber
547+
<!---->
548+
</label></div>
549+
<div class="ant-col ant-col-14 ant-form-item-control">
550+
<div class="ant-form-item-control-input">
551+
<div class="ant-form-item-control-input-content">
552+
<div class="ant-input-number ant-input-number-disabled">
553+
<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>
554+
<div class="ant-input-number-input-wrap"><input autocomplete="off" role="spinbutton" step="1" class="ant-input-number-input" disabled=""></div>
555+
</div>
556+
</div>
557+
</div>
558+
<!---->
559+
<!---->
560+
</div>
561+
</div>
562+
<!---->
563+
</div>
564+
<div class="ant-form-item">
565+
<div class="ant-row ant-form-row">
566+
<div style="width: 150px;" class="ant-col ant-form-item-label"><label class="" title="TextArea">TextArea
567+
<!---->
568+
</label></div>
569+
<div class="ant-col ant-col-14 ant-form-item-control">
570+
<div class="ant-form-item-control-input">
571+
<div class="ant-form-item-control-input-content"><textarea rows="4" disabled="" class="ant-input ant-input-disabled"></textarea></div>
572+
</div>
573+
<!---->
574+
<!---->
575+
</div>
576+
</div>
577+
<!---->
578+
</div>
579+
<div class="ant-form-item">
580+
<div class="ant-row ant-form-row">
581+
<div style="width: 150px;" class="ant-col ant-form-item-label"><label class="" title="Switch">Switch
582+
<!---->
583+
</label></div>
584+
<div class="ant-col ant-col-14 ant-form-item-control">
585+
<div class="ant-form-item-control-input">
586+
<div class="ant-form-item-control-input-content"><button disabled="" type="button" role="switch" aria-checked="false" class="ant-switch-disabled ant-switch">
587+
<div class="ant-switch-handle">
588+
<!---->
589+
</div><span class="ant-switch-inner"><span class="ant-switch-inner-checked"><!----></span><span class="ant-switch-inner-unchecked"><!----></span></span>
590+
</button></div>
591+
</div>
592+
<!---->
593+
<!---->
594+
</div>
595+
</div>
596+
<!---->
597+
</div>
598+
<div class="ant-form-item">
599+
<div class="ant-row ant-form-row">
600+
<div style="width: 150px;" class="ant-col ant-form-item-label"><label class="" title="Upload">Upload
601+
<!---->
602+
</label></div>
603+
<div class="ant-col ant-col-14 ant-form-item-control">
604+
<div class="ant-form-item-control-input">
605+
<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>
606+
<div style="margin-top: 8px;">Upload</div>
607+
</div></span>
608+
</div>
609+
</div></span>
610+
</div>
611+
</div>
612+
<!---->
613+
<!---->
614+
</div>
615+
</div>
616+
<!---->
617+
</div>
618+
<div class="ant-form-item">
619+
<div class="ant-row ant-form-row">
620+
<div style="width: 150px;" class="ant-col ant-form-item-label"><label class="" title="Button">Button
621+
<!---->
622+
</label></div>
623+
<div class="ant-col ant-col-14 ant-form-item-control">
624+
<div class="ant-form-item-control-input">
625+
<div class="ant-form-item-control-input-content"><button disabled="" class="ant-btn ant-btn-default" type="button">
626+
<!----><span>Button</span>
627+
</button></div>
628+
</div>
629+
<!---->
630+
<!---->
631+
</div>
632+
</div>
633+
<!---->
634+
</div>
635+
</form>
636+
`;
637+
369638
exports[`renders ./components/form/demo/dynamic-form-item.vue correctly 1`] = `
370639
<form class="ant-form ant-form-horizontal">
371640
<div class="ant-form-item">

0 commit comments

Comments
 (0)