This repository was archived by the owner on Jul 22, 2020. It is now read-only.
File tree Expand file tree Collapse file tree 9 files changed +16
-16
lines changed
Expand file tree Collapse file tree 9 files changed +16
-16
lines changed Load Diff Large diffs are not rendered by default.
Load Diff Large diffs are not rendered by default.
Original file line number Diff line number Diff line change 4646< span class ="hljs-tag "> << span class ="hljs-name "> div</ span > < span class ="hljs-attr "> class</ span > =< span class ="hljs-string "> "input-items"</ span > ></ span >
4747 < span class ="hljs-tag "> << span class ="hljs-name "> c-input</ span > < span class ="hljs-attr "> size</ span > =< span class ="hljs-string "> "xl"</ span > /></ span >
4848 < span class ="hljs-tag "> << span class ="hljs-name "> c-button</ span > < span class ="hljs-attr "> size</ span > =< span class ="hljs-string "> "xl"</ span > < span class ="hljs-attr "> primary</ span > ></ span > 确定< span class ="hljs-tag "> </< span class ="hljs-name "> c-button</ span > ></ span >
49- < span class ="hljs-tag "> </< span class ="hljs-name "> div</ span > ></ span > </ code > </ pre > </ div > < h2 id ="kuan1-du4-she4-zhi4 "> 宽度设置</ h2 > < p > Clair 中的输入框默认宽度为 < code > 15em</ code > ，你可以通过 < code > width</ code > 属性设置不同宽度的输入框。在下面的例子中，你可以选择不同的 < code > size</ code > 和 < code > width</ code > 查看文本输入框的大小：</ p > < div class ="vue-demo-block vue-demo-block-demo-only "> < div class ="vue-demo "> < form class ="c-form is-md "> < div class ="c-form-item "> < label class ="c-form-item__label " style ="width:undefined; "> Size:</ label > < div class ="c-form-item__control "> < div class ="c-radio-group is-md "> < label class ="c-radio--button "> < input type ="radio " name ="eb8xrq " value ="0 "> < span class ="c-radio__box "> </ span > < span class ="c-radio__label "> xs</ span > </ label > < label class ="c-radio--button "> < input type ="radio " name ="eb8xrq " value ="1 "> < span class ="c-radio__box "> </ span > < span class ="c-radio__label "> sm</ span > </ label > < label class ="c-radio--button "> < input type ="radio " name ="eb8xrq " value ="2 " checked ="checked "> < span class ="c-radio__box "> </ span > < span class ="c-radio__label "> md</ span > </ label > < label class ="c-radio--button "> < input type ="radio " name ="eb8xrq " value ="3 "> < span class ="c-radio__box "> </ span > < span class ="c-radio__label "> lg</ span > </ label > < label class ="c-radio--button "> < input type ="radio " name ="eb8xrq " value ="4 "> < span class ="c-radio__box "> </ span > < span class ="c-radio__label "> xl</ span > </ label > </ div > < div class ="c-form-item__error "> </ div > </ div > </ div > < div class ="c-form-item "> < label class ="c-form-item__label " style ="width:undefined; "> Width:</ label > < div class ="c-form-item__control "> < div class ="c-radio-group is-md "> < label class ="c-radio--button "> < input type ="radio " name ="v5naqp " value ="0 "> < span class ="c-radio__box "> </ span > < span class ="c-radio__label "> shortest</ span > </ label > < label class ="c-radio--button "> < input type ="radio " name ="v5naqp " value ="1 "> < span class ="c-radio__box "> </ span > < span class ="c-radio__label "> shorter</ span > </ label > < label class ="c-radio--button "> < input type ="radio " name ="v5naqp " value ="2 "> < span class ="c-radio__box "> </ span > < span class ="c-radio__label "> short</ span > </ label > < label class ="c-radio--button "> < input type ="radio " name ="v5naqp " value ="3 " checked ="checked "> < span class ="c-radio__box "> </ span > < span class ="c-radio__label "> normal</ span > </ label > < label class ="c-radio--button "> < input type ="radio " name ="v5naqp " value ="4 "> < span class ="c-radio__box "> </ span > < span class ="c-radio__label "> long</ span > </ label > < label class ="c-radio--button "> < input type ="radio " name ="v5naqp " value ="5 "> < span class ="c-radio__box "> </ span > < span class ="c-radio__label "> longer</ span > </ label > < label class ="c-radio--button "> < input type ="radio " name ="v5naqp " value ="6 "> < span class ="c-radio__box "> </ span > < span class ="c-radio__label "> longest</ span > </ label > < label class ="c-radio--button "> < input type ="radio " name ="v5naqp " value ="7 "> < span class ="c-radio__box "> </ span > < span class ="c-radio__label "> flexible</ span > </ label > </ div > < div class ="c-form-item__error "> </ div > </ div > </ div > < div class ="c-form-item "> < label class ="c-form-item__label " style ="width:undefined; "> 输入框:</ label > < div class ="c-form-item__control "> < div class ="c-input-wrap is-md is-normal "> < input type ="text " value ="" class ="c-input "> <!----> <!----> </ div > < div class ="c-form-item__error "> </ div > </ div > </ div > </ form > </ div > </ div > < h2 id ="jin1-yong4-he2-zhi1-du2-zhuang4-tai4 "> 禁用和只读状态</ h2 > < p > < code > disabled</ code > 和 < code > readonly</ code > 属性分别表示输入框的禁用和只读状态。</ p > < div class ="vue-demo-block "> < div class ="vue-demo "> < div class ="c-input-wrap "> < input disabled ="disabled " type ="text " value ="我被禁用了 " class ="c-input "> <!----> <!----> </ div > < div class ="c-input-wrap "> < input readonly ="readonly " type ="text " value ="我是只读的 " class ="c-input "> <!----> <!----> </ div > </ div > < div class ="vue-demo-tools "> < input type ="checkbox " tabindex ="-1 " aria-hidden ="true "> < label aria-hidden ="true "> </ label > < div class ="vue-demo-tool-snippets "> < a title ="在 Codepen 中打开 "> < span class ="c-icon vue-demo-tools__icon "> < svg xmlns ="http://www.w3.org/2000/svg " width ="1em " height ="1em " viewBox ="0 0 24 24 " fill ="none " stroke ="currentColor " stroke-width ="2 " stroke-linecap ="round " stroke-linejoin ="round " class ="feather feather-codepen " style ="vertical-align:baseline; "> < polygon points ="12 2 22 8.5 22 15.5 12 22 2 15.5 2 8.5 12 2 "> </ polygon > < line x1 ="12 " y1 ="22 " x2 ="12 " y2 ="15.5 "> </ line > < polyline points ="22 8.5 12 15.5 2 8.5 "> </ polyline > < polyline points ="2 15.5 12 8.5 22 15.5 "> </ polyline > < line x1 ="12 " y1 ="2 " x2 ="12 " y2 ="8.5 "> </ line > </ svg > </ span > </ a > < a title ="复制代码 "> < span class ="c-icon vue-demo-tools__icon "> < svg xmlns ="http://www.w3.org/2000/svg " width ="1em " height ="1em " viewBox ="0 0 24 24 " fill ="none " stroke ="currentColor " stroke-width ="2 " stroke-linecap ="round " stroke-linejoin ="round " class ="feather feather-copy " style ="vertical-align:baseline; "> < rect x ="9 " y ="9 " width ="13 " height ="13 " rx ="2 " ry ="2 "> </ rect > < path d ="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1 "> </ path > </ svg > </ span > </ a > </ div > </ div > < pre class ="lang-html "> < code > < span class ="hljs-tag "> << span class ="hljs-name "> c-input</ span > < span class ="hljs-attr "> disabled</ span > < span class ="hljs-attr "> value</ span > =< span class ="hljs-string "> "我被禁用了"</ span > /></ span >
49+ < span class ="hljs-tag "> </< span class ="hljs-name "> div</ span > ></ span > </ code > </ pre > </ div > < h2 id ="kuan1-du4-she4-zhi4 "> 宽度设置</ h2 > < p > Clair 中的输入框默认宽度为 < code > 15em</ code > ，你可以通过 < code > width</ code > 属性设置不同宽度的输入框。在下面的例子中，你可以选择不同的 < code > size</ code > 和 < code > width</ code > 查看文本输入框的大小：</ p > < div class ="vue-demo-block vue-demo-block-demo-only "> < div class ="vue-demo "> < form class ="c-form is-md "> < div class ="c-form-item "> < label class ="c-form-item__label " style ="width:undefined; "> Size:</ label > < div class ="c-form-item__control "> < div class ="c-radio-group is-md "> < label class ="c-radio--button "> < input type ="radio " name ="x57dcy " value ="0 "> < span class ="c-radio__box "> </ span > < span class ="c-radio__label "> xs</ span > </ label > < label class ="c-radio--button "> < input type ="radio " name ="x57dcy " value ="1 "> < span class ="c-radio__box "> </ span > < span class ="c-radio__label "> sm</ span > </ label > < label class ="c-radio--button "> < input type ="radio " name ="x57dcy " value ="2 " checked ="checked "> < span class ="c-radio__box "> </ span > < span class ="c-radio__label "> md</ span > </ label > < label class ="c-radio--button "> < input type ="radio " name ="x57dcy " value ="3 "> < span class ="c-radio__box "> </ span > < span class ="c-radio__label "> lg</ span > </ label > < label class ="c-radio--button "> < input type ="radio " name ="x57dcy " value ="4 "> < span class ="c-radio__box "> </ span > < span class ="c-radio__label "> xl</ span > </ label > </ div > < div class ="c-form-item__error "> </ div > </ div > </ div > < div class ="c-form-item "> < label class ="c-form-item__label " style ="width:undefined; "> Width:</ label > < div class ="c-form-item__control "> < div class ="c-radio-group is-md "> < label class ="c-radio--button "> < input type ="radio " name ="6lk5fb " value ="0 "> < span class ="c-radio__box "> </ span > < span class ="c-radio__label "> shortest</ span > </ label > < label class ="c-radio--button "> < input type ="radio " name ="6lk5fb " value ="1 "> < span class ="c-radio__box "> </ span > < span class ="c-radio__label "> shorter</ span > </ label > < label class ="c-radio--button "> < input type ="radio " name ="6lk5fb " value ="2 "> < span class ="c-radio__box "> </ span > < span class ="c-radio__label "> short</ span > </ label > < label class ="c-radio--button "> < input type ="radio " name ="6lk5fb " value ="3 " checked ="checked "> < span class ="c-radio__box "> </ span > < span class ="c-radio__label "> normal</ span > </ label > < label class ="c-radio--button "> < input type ="radio " name ="6lk5fb " value ="4 "> < span class ="c-radio__box "> </ span > < span class ="c-radio__label "> long</ span > </ label > < label class ="c-radio--button "> < input type ="radio " name ="6lk5fb " value ="5 "> < span class ="c-radio__box "> </ span > < span class ="c-radio__label "> longer</ span > </ label > < label class ="c-radio--button "> < input type ="radio " name ="6lk5fb " value ="6 "> < span class ="c-radio__box "> </ span > < span class ="c-radio__label "> longest</ span > </ label > < label class ="c-radio--button "> < input type ="radio " name ="6lk5fb " value ="7 "> < span class ="c-radio__box "> </ span > < span class ="c-radio__label "> flexible</ span > </ label > </ div > < div class ="c-form-item__error "> </ div > </ div > </ div > < div class ="c-form-item "> < label class ="c-form-item__label " style ="width:undefined; "> 输入框:</ label > < div class ="c-form-item__control "> < div class ="c-input-wrap is-md is-normal "> < input type ="text " value ="" class ="c-input "> <!----> <!----> </ div > < div class ="c-form-item__error "> </ div > </ div > </ div > </ form > </ div > </ div > < h2 id ="jin1-yong4-he2-zhi1-du2-zhuang4-tai4 "> 禁用和只读状态</ h2 > < p > < code > disabled</ code > 和 < code > readonly</ code > 属性分别表示输入框的禁用和只读状态。</ p > < div class ="vue-demo-block "> < div class ="vue-demo "> < div class ="c-input-wrap "> < input disabled ="disabled " type ="text " value ="我被禁用了 " class ="c-input "> <!----> <!----> </ div > < div class ="c-input-wrap "> < input readonly ="readonly " type ="text " value ="我是只读的 " class ="c-input "> <!----> <!----> </ div > </ div > < div class ="vue-demo-tools "> < input type ="checkbox " tabindex ="-1 " aria-hidden ="true "> < label aria-hidden ="true "> </ label > < div class ="vue-demo-tool-snippets "> < a title ="在 Codepen 中打开 "> < span class ="c-icon vue-demo-tools__icon "> < svg xmlns ="http://www.w3.org/2000/svg " width ="1em " height ="1em " viewBox ="0 0 24 24 " fill ="none " stroke ="currentColor " stroke-width ="2 " stroke-linecap ="round " stroke-linejoin ="round " class ="feather feather-codepen " style ="vertical-align:baseline; "> < polygon points ="12 2 22 8.5 22 15.5 12 22 2 15.5 2 8.5 12 2 "> </ polygon > < line x1 ="12 " y1 ="22 " x2 ="12 " y2 ="15.5 "> </ line > < polyline points ="22 8.5 12 15.5 2 8.5 "> </ polyline > < polyline points ="2 15.5 12 8.5 22 15.5 "> </ polyline > < line x1 ="12 " y1 ="2 " x2 ="12 " y2 ="8.5 "> </ line > </ svg > </ span > </ a > < a title ="复制代码 "> < span class ="c-icon vue-demo-tools__icon "> < svg xmlns ="http://www.w3.org/2000/svg " width ="1em " height ="1em " viewBox ="0 0 24 24 " fill ="none " stroke ="currentColor " stroke-width ="2 " stroke-linecap ="round " stroke-linejoin ="round " class ="feather feather-copy " style ="vertical-align:baseline; "> < rect x ="9 " y ="9 " width ="13 " height ="13 " rx ="2 " ry ="2 "> </ rect > < path d ="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1 "> </ path > </ svg > </ span > </ a > </ div > </ div > < pre class ="lang-html "> < code > < span class ="hljs-tag "> << span class ="hljs-name "> c-input</ span > < span class ="hljs-attr "> disabled</ span > < span class ="hljs-attr "> value</ span > =< span class ="hljs-string "> "我被禁用了"</ span > /></ span >
5050< span class ="hljs-tag "> << span class ="hljs-name "> c-input</ span > < span class ="hljs-attr "> readonly</ span > < span class ="hljs-attr "> value</ span > =< span class ="hljs-string "> "我是只读的"</ span > /></ span > </ code > </ pre > </ div > < h2 id ="duo1-hang2-wen2-ben3-kuang4 "> 多行文本框</ h2 > < p > 类似于 < code > textarea</ code > ，可以通过 < code > rows</ code > 属性指定显示的高度。</ p > < div class ="vue-demo-block "> < div class ="vue-demo "> < div class ="c-input-wrap is-longer "> <!----> < textarea rows ="3 " cols ="60 " class ="c-input "> </ textarea > <!----> </ div > </ div > < div class ="vue-demo-tools "> < input type ="checkbox " tabindex ="-1 " aria-hidden ="true "> < label aria-hidden ="true "> </ label > < div class ="vue-demo-tool-snippets "> < a title ="在 Codepen 中打开 "> < span class ="c-icon vue-demo-tools__icon "> < svg xmlns ="http://www.w3.org/2000/svg " width ="1em " height ="1em " viewBox ="0 0 24 24 " fill ="none " stroke ="currentColor " stroke-width ="2 " stroke-linecap ="round " stroke-linejoin ="round " class ="feather feather-codepen " style ="vertical-align:baseline; "> < polygon points ="12 2 22 8.5 22 15.5 12 22 2 15.5 2 8.5 12 2 "> </ polygon > < line x1 ="12 " y1 ="22 " x2 ="12 " y2 ="15.5 "> </ line > < polyline points ="22 8.5 12 15.5 2 8.5 "> </ polyline > < polyline points ="2 15.5 12 8.5 22 15.5 "> </ polyline > < line x1 ="12 " y1 ="2 " x2 ="12 " y2 ="8.5 "> </ line > </ svg > </ span > </ a > < a title ="复制代码 "> < span class ="c-icon vue-demo-tools__icon "> < svg xmlns ="http://www.w3.org/2000/svg " width ="1em " height ="1em " viewBox ="0 0 24 24 " fill ="none " stroke ="currentColor " stroke-width ="2 " stroke-linecap ="round " stroke-linejoin ="round " class ="feather feather-copy " style ="vertical-align:baseline; "> < rect x ="9 " y ="9 " width ="13 " height ="13 " rx ="2 " ry ="2 "> </ rect > < path d ="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1 "> </ path > </ svg > </ span > </ a > </ div > </ div > < pre class ="lang-html "> < code > < span class ="hljs-tag "> << span class ="hljs-name "> c-input</ span >
5151 < span class ="hljs-attr "> type</ span > =< span class ="hljs-string "> "textarea"</ span >
5252 < span class ="hljs-attr "> multi-line</ span >
You can’t perform that action at this time.
0 commit comments