muse-vue-ant-design-dashboard/documentation/_nuxt/0da044a.js

(window.webpackJsonp=window.webpackJsonp||[]).push([[19,2,3],{1179:function(t,e,n){"use strict";n.r(e);n(106),n(640);var r={props:["anchors"],data:function(){return{url:""}},beforeMount:function(){this.url=window.location.href.split("#")[0]}},o=n(81),component=Object(o.a)(r,(function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",{staticClass:"page-anchor"},[n("a-anchor",{attrs:{targetOffset:80,offsetTop:85}},t._l(t.anchors,(function(title,e){return n("a-anchor-link",{key:e,attrs:{href:t.url+"#"+e,title:title}})})),1)],1)}),[],!1,null,null,null);e.default=component.exports},1180:function(t,e,n){"use strict";n.r(e);var r={inheritAttrs:!0,props:["code","lang"],data:function(){return{}},methods:{onCopy:function(t){this.$message.success({content:"Copied!"})}}},o=n(81),component=Object(o.a)(r,(function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("section",{staticClass:"highlight-section"},[n("a-button",{directives:[{name:"clipboard",rawName:"v-clipboard:copy",value:t.code.trim(),expression:"code.trim()",arg:"copy"},{name:"clipboard",rawName:"v-clipboard:success",value:t.onCopy,expression:"onCopy",arg:"success"}],staticClass:"btn-copy",attrs:{type:"primary",icon:"copy",size:"small"}},[t._v("Copy")]),t._v(" "),n("highlight-code",{staticStyle:{"max-height":"500px"},attrs:{lang:t.lang?t.lang:"html"}},[t._v("\n\t\t"+t._s(t.code)+"\n\t")])],1)}),[],!1,null,null,null);e.default=component.exports},1186:function(t,e,n){var content=n(1205);content.__esModule&&(content=content.default),"string"==typeof content&&(content=[[t.i,content,""]]),content.locals&&(t.exports=content.locals);(0,n(135).default)("cee4002a",content,!0,{sourceMap:!1})},1204:function(t,e,n){"use strict";n(1186)},1205:function(t,e,n){var r=n(134)(!1);r.push([t.i,".header-search svg path{fill:#8c8c8c}.header-search .ant-input{font-weight:600;color:#8c8c8c}.header-search .ant-input:not(:first-child){padding-left:32px}.header-search .ant-input:not(:last-child){padding-right:11px}.header-search.loading .ant-input:not(:last-child){padding-right:30px}.header-search .ant-input-suffix .ant-input-search-icon{display:none}.header-search .ant-input-suffix .ant-input-search-icon.anticon-loading{display:block}",""]),t.exports=r},1233:function(t,e,n){"use strict";n.r(e);var r={head:function(){return{title:"Input | Muse Dashboard Ant Design Vue @ Creative Tim",meta:[{hid:"description",name:"description",content:"A basic widget for getting the user input is a text field."}]}},data:function(){return{anchors:{"When-To-Use":"When To Use",Basic:"Basic","prefix-and-suffix":"Prefix And Suffix","Search-box":"Search box"},userName:"",codeSample:'\n<template>\n  <a-input placeholder="Basic usage" />\n</template>\n',prefixesCode:'\n<template>\n  <div class="components-input-demo-presuffix">\n    <a-input ref="userNameInput" v-model="userName" placeholder="Basic usage">\n      <a-icon slot="prefix" type="user" />\n      <a-tooltip slot="suffix" title="Extra information">\n        <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />\n      </a-tooltip>\n    </a-input>\n    <br />\n    <br />\n    <a-input prefix="￥" suffix="RMB" />\n  </div>\n</template>\n\n<script>\nexport default {\n  data() {\n    return {\n      userName: \'\',\n    };\n  },\n  methods: {\n    emitEmpty() {\n      this.$refs.userNameInput.focus();\n      this.userName = \'\';\n    },\n  },\n};\n<\/script>\n',searchBoxCode:'\n<template>\n  <div>\n\t<a-input-search class="header-search" :class="searchLoading ? \'loading\' : \'\'" placeholder="Header search input" @search="onSearch" :loading=\'searchLoading\'>\n\t\t<svg slot="prefix" width="16" height="16" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">\n\t\t\t<path fill-rule="evenodd" clip-rule="evenodd" d="M8 4C5.79086 4 4 5.79086 4 8C4 10.2091 5.79086 12 8 12C10.2091 12 12 10.2091 12 8C12 5.79086 10.2091 4 8 4ZM2 8C2 4.68629 4.68629 2 8 2C11.3137 2 14 4.68629 14 8C14 9.29583 13.5892 10.4957 12.8907 11.4765L17.7071 16.2929C18.0976 16.6834 18.0976 17.3166 17.7071 17.7071C17.3166 18.0976 16.6834 18.0976 16.2929 17.7071L11.4765 12.8907C10.4957 13.5892 9.29583 14 8 14C4.68629 14 2 11.3137 2 8Z" fill="#111827"/>\n\t\t</svg>\n\t</a-input-search>\n    <br /><br />\n\t<a-input-search placeholder="input search text" />\n\t<br /><br />\n    <a-input-search placeholder="input search text" enter-button @search="onSearch" />\n    <br /><br />\n    <a-input-search\n      placeholder="input search text"\n      enter-button="Search"\n      size="large"\n      @search="onSearch"\n    />\n    <br /><br />\n    <a-input-search placeholder="input search text" size="large" @search="onSearch">\n      <a-button slot="enterButton">\n        Custom\n      </a-button>\n    </a-input-search>\n  </div>\n</template>\n\n<script>\nexport default {\n  methods: {\n    onSearch(value) {\n      console.log(value);\n    },\n  },\n};\n<\/script>\n'}},methods:{emitEmpty:function(){this.$refs.userNameInput.focus(),this.userName=""}}},o=(n(1204),n(81)),component=Object(o.a)(r,(function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("div",{staticClass:"page-row"},[n("div",{staticClass:"page-content"},[t._m(0),t._v(" "),n("a-divider"),t._v(" "),t._m(1),t._v(" "),n("h2",[t._v("Examples")]),t._v(" "),n("section",{staticClass:"mb-24",attrs:{id:"Basic"}},[n("a-divider",{attrs:{orientation:"left"}},[t._v("Basic")]),t._v(" "),n("p",[t._v("\n\t\t\t\t\t\tBasic usage example.\n\t\t\t\t\t")]),t._v(" "),n("div",{staticClass:"showcase"},[n("a-row",[n("a-col",{attrs:{span:24,lg:12}},[n("a-input",{attrs:{placeholder:"Basic usage"}})],1)],1)],1),t._v(" "),n("muse-snippet",{attrs:{code:t.codeSample}})],1),t._v(" "),n("section",{staticClass:"mb-24",attrs:{id:"prefix-and-suffix"}},[n("a-divider",{attrs:{orientation:"left"}},[t._v("Prefix And Suffix")]),t._v(" "),n("p",[t._v("\n\t\t\t\t\t\tAdd prefix or suffix icons inside input.\n\t\t\t\t\t")]),t._v(" "),n("div",{staticClass:"showcase"},[n("a-row",[n("a-col",{attrs:{span:24,lg:12}},[n("a-input",{ref:"userNameInput",attrs:{placeholder:"Basic usage"},model:{value:t.userName,callback:function(e){t.userName=e},expression:"userName"}},[n("a-icon",{attrs:{slot:"prefix",type:"user"},slot:"prefix"}),t._v(" "),n("a-tooltip",{attrs:{slot:"suffix",title:"Extra information"},slot:"suffix"},[n("a-icon",{staticStyle:{color:"rgba(0,0,0,.45)"},attrs:{type:"info-circle"}})],1)],1),t._v(" "),n("br"),t._v(" "),n("br"),t._v(" "),n("a-input",{attrs:{prefix:"￥",suffix:"RMB"}})],1)],1)],1),t._v(" "),n("muse-snippet",{attrs:{code:t.prefixesCode}})],1),t._v(" "),n("section",{staticClass:"mb-24",attrs:{id:"Search-box"}},[n("a-divider",{attrs:{orientation:"left"}},[t._v("Search box")]),t._v(" "),n("p",[t._v("\n\t\t\t\t\t\tExample of creating a search box by grouping a standard input with a search button.\n\t\t\t\t\t")]),t._v(" "),n("div",{staticClass:"showcase"},[n("a-row",[n("a-col",{attrs:{span:24,lg:12}},[n("a-input-search",{staticClass:"header-search",class:t.searchLoading?"loading":"",attrs:{placeholder:"Header search input",loading:t.searchLoading},on:{search:t.onSearch}},[n("svg",{attrs:{slot:"prefix",width:"16",height:"16",viewBox:"0 0 20 20",fill:"none",xmlns:"http://www.w3.org/2000/svg"},slot:"prefix"},[n("path",{attrs:{"fill-rule":"evenodd","clip-rule":"evenodd",d:"M8 4C5.79086 4 4 5.79086 4 8C4 10.2091 5.79086 12 8 12C10.2091 12 12 10.2091 12 8C12 5.79086 10.2091 4 8 4ZM2 8C2 4.68629 4.68629 2 8 2C11.3137 2 14 4.68629 14 8C14 9.29583 13.5892 10.4957 12.8907 11.4765L17.7071 16.2929C18.0976 16.6834 18.0976 17.3166 17.7071 17.7071C17.3166 18.0976 16.6834 18.0976 16.2929 17.7071L11.4765 12.8907C10.4957 13.5892 9.29583 14 8 14C4.68629 14 2 11.3137 2 8Z",fill:"#111827"}})])]),t._v(" "),n("br"),n("br"),t._v(" "),n("a-input-search",{attrs:{placeholder:"input search text"}}),t._v(" "),n("br"),n("br"),t._v(" "),n("a-input-search",{attrs:{placeholder:"input search text","enter-button":""}}),t._v(" "),n("br"),n("br"),t._v(" "),n("a-input-search",{attrs:{placeholder:"input search text","enter-button":"Search",size:"large"},on:{search:t.onSearch}}),t._v(" "),n("br"),n("br"),t._v(" "),n("a-input-search",{attrs:{placeholder:"input search text",size:"large"}},[n("a-button",{attrs:{slot:"enterButton"},slot:"enterButton"},[t._v("\n\t\t\t\t\t\t\t\t\t\tCustom\n\t\t\t\t\t\t\t\t\t")])],1)],1)],1)],1),t._v(" "),n("muse-snippet",{attrs:{code:t.searchBoxCode}})],1),t._v(" "),t._m(2)],1),t._v(" "),n("muse-anchor",{attrs:{anchors:t.anchors}})],1)])}),[function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("section",{staticClass:"mb-24"},[n("h1",[t._v("Input")]),t._v(" "),n("p",{staticClass:"text-dark"},[t._v("\n\t\t\t\t\t\tA basic widget for getting the user input is a text field.\n\t\t\t\t\t")]),t._v(" "),n("p",{staticClass:"text-dark"},[t._v("\n\t\t\t\t\t\tKeyboard and mouse can be used for providing or changing data.\n\t\t\t\t\t")])])},function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("section",{staticClass:"mb-24",attrs:{id:"When-To-Use"}},[n("h2",[t._v("When To Use")]),t._v(" "),n("ul",[n("li",[t._v("A user input in a form field is needed.")]),t._v(" "),n("li",[t._v("A search input is required.")])])])},function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("p",{staticClass:"text-right font-semibold mb-24"},[t._v("\n\t\t\t\t\tLooking for more Ant Design Vue Input? Please check the\n\t\t\t\t\t"),n("a",{attrs:{target:"_blank",href:"https://antdv.com/components/input/"}},[t._v("official docs")]),t._v(".\n\t\t\t\t")])}],!1,null,null,null);e.default=component.exports;installComponents(component,{MuseSnippet:n(1180).default,MuseAnchor:n(1179).default})}}]);