import{Bt as e,It as t,Jt as n,Lt as r,Mt as i,Pt as a,Qt as o,Vt as s,Xt as c,an as l,qt as u,zt as d}from"./index-qNrWYJXL.js";var f={},p={class:`navbar navbar-expand-lg navbar-dark bg-dark`},m={class:`container-fluid`},h={id:`navbarNavDarkDropdown`,class:`collapse navbar-collapse`},g={class:`navbar-nav`};function _(i,f){let _=c(`DocsComponents`),v=c(`CCardHeader`),y=c(`CDropdownToggle`),b=c(`CDropdownItem`),x=c(`CDropdownMenu`),S=c(`CDropdown`),C=c(`DocsExample`),w=c(`CDropdownDivider`),T=c(`CCardBody`),E=c(`CCard`),D=c(`CCol`),O=c(`CButton`),k=c(`CButtonGroup`),A=c(`CRow`);return u(),r(A,null,{default:o(()=>[s(D,{xs:12},{default:o(()=>[s(_,{href:`components/dropdown.html`}),s(E,{class:`mb-4`},{default:o(()=>[s(v,null,{default:o(()=>[...f[0]||=[t(`strong`,null,`Vue Dropdown`,-1),e(),t(`small`,null,`Single button`,-1)]]),_:1}),s(T,null,{default:o(()=>[f[9]||=t(`p`,{class:`text-body-secondary small`},[e(` Here's how you can put them to work with either `),t(`code`,null,`<button>`),e(` elements: `)],-1),s(C,{href:`components/dropdown.html#single-button`},{default:o(()=>[s(S,null,{default:o(()=>[s(y,{color:`secondary`},{default:o(()=>[...f[1]||=[e(`Dropdown button`,-1)]]),_:1}),s(x,null,{default:o(()=>[s(b,{href:`#`},{default:o(()=>[...f[2]||=[e(`Action`,-1)]]),_:1}),s(b,{href:`#`},{default:o(()=>[...f[3]||=[e(`Another action`,-1)]]),_:1}),s(b,{href:`#`},{default:o(()=>[...f[4]||=[e(`Something else here`,-1)]]),_:1})]),_:1})]),_:1})]),_:1}),f[10]||=t(`p`,{class:`text-body-secondary small`},` The best part is you can do this with any button variant, too: `,-1),s(C,{href:`components/dropdown.html#single-button`},{default:o(()=>[(u(),d(a,null,n([`primary`,`secondary`,`success`,`danger`,`warning`,`info`,`light`,`dark`],t=>s(S,{key:t,variant:`btn-group`},{default:o(()=>[s(y,{color:t},{default:o(()=>[e(l(t),1)]),_:2},1032,[`color`]),s(x,null,{default:o(()=>[s(b,{href:`#`},{default:o(()=>[...f[5]||=[e(`Action`,-1)]]),_:1}),s(b,{href:`#`},{default:o(()=>[...f[6]||=[e(`Another action`,-1)]]),_:1}),s(b,{href:`#`},{default:o(()=>[...f[7]||=[e(`Something else here`,-1)]]),_:1}),s(w),s(b,{href:`#`},{default:o(()=>[...f[8]||=[e(`Separated link`,-1)]]),_:1})]),_:1})]),_:2},1024)),64))]),_:1})]),_:1})]),_:1})]),_:1}),s(D,{xs:12},{default:o(()=>[s(E,{class:`mb-4`},{default:o(()=>[s(v,null,{default:o(()=>[...f[11]||=[t(`strong`,null,`Vue Dropdown`,-1),e(),t(`small`,null,`Split button`,-1)]]),_:1}),s(T,null,{default:o(()=>[f[16]||=t(`p`,{class:`text-body-secondary small`},[e(` Similarly, create split button dropdowns with virtually the same markup as single button dropdowns, but with the addition of boolean prop `),t(`code`,null,`split`),e(` for proper spacing around the dropdown caret. `)],-1),f[17]||=t(`p`,{class:`text-body-secondary small`},[e(` We use this extra class to reduce the horizontal `),t(`code`,null,`padding`),e(` on either side of the caret by 25% and remove the `),t(`code`,null,`margin-left`),e(` that's attached for normal button dropdowns. Those additional changes hold the caret centered in the split button and implement a more properly sized hit area next to the main button. `)],-1),s(C,{href:`components/dropdown.html#split-button`},{default:o(()=>[(u(),d(a,null,n([`primary`,`secondary`,`success`,`danger`,`warning`,`info`,`light`,`dark`],t=>s(S,{key:t,variant:`btn-group`},{default:o(()=>[s(O,{color:t},{default:o(()=>[e(l(t),1)]),_:2},1032,[`color`]),s(y,{color:t,split:``},{default:o(()=>[e(l(t),1)]),_:2},1032,[`color`]),s(x,null,{default:o(()=>[s(b,{href:`#`},{default:o(()=>[...f[12]||=[e(`Action`,-1)]]),_:1}),s(b,{href:`#`},{default:o(()=>[...f[13]||=[e(`Another action`,-1)]]),_:1}),s(b,{href:`#`},{default:o(()=>[...f[14]||=[e(`Something else here`,-1)]]),_:1}),s(w),s(b,{href:`#`},{default:o(()=>[...f[15]||=[e(`Separated link`,-1)]]),_:1})]),_:1})]),_:2},1024)),64))]),_:1})]),_:1})]),_:1})]),_:1}),s(D,{xs:12},{default:o(()=>[s(E,{class:`mb-4`},{default:o(()=>[s(v,null,{default:o(()=>[...f[18]||=[t(`strong`,null,`Vue Dropdown`,-1),e(),t(`small`,null,`Sizing`,-1)]]),_:1}),s(T,null,{default:o(()=>[f[39]||=t(`p`,{class:`text-body-secondary small`},` Button dropdowns work with buttons of all sizes, including default and split dropdown buttons. `,-1),s(C,{href:`components/dropdown.html#sizing`},{default:o(()=>[s(S,{variant:`btn-group`},{default:o(()=>[s(y,{color:`secondary`,size:`lg`},{default:o(()=>[...f[19]||=[e(` Large button `,-1)]]),_:1}),s(x,null,{default:o(()=>[s(b,{href:`#`},{default:o(()=>[...f[20]||=[e(`Action`,-1)]]),_:1}),s(b,{href:`#`},{default:o(()=>[...f[21]||=[e(`Another action`,-1)]]),_:1}),s(b,{href:`#`},{default:o(()=>[...f[22]||=[e(`Something else here`,-1)]]),_:1}),s(w),s(b,{href:`#`},{default:o(()=>[...f[23]||=[e(`Separated link`,-1)]]),_:1})]),_:1})]),_:1}),s(S,{variant:`btn-group`},{default:o(()=>[s(O,{color:`secondary`,size:`lg`},{default:o(()=>[...f[24]||=[e(` Large split button `,-1)]]),_:1}),s(y,{color:`secondary`,size:`lg`,split:``}),s(x,null,{default:o(()=>[s(b,{href:`#`},{default:o(()=>[...f[25]||=[e(`Action`,-1)]]),_:1}),s(b,{href:`#`},{default:o(()=>[...f[26]||=[e(`Another action`,-1)]]),_:1}),s(b,{href:`#`},{default:o(()=>[...f[27]||=[e(`Something else here`,-1)]]),_:1}),s(w),s(b,{href:`#`},{default:o(()=>[...f[28]||=[e(`Separated link`,-1)]]),_:1})]),_:1})]),_:1})]),_:1}),s(C,{href:`components/dropdown.html#sizing`},{default:o(()=>[s(S,{variant:`btn-group`},{default:o(()=>[s(y,{color:`secondary`,size:`sm`},{default:o(()=>[...f[29]||=[e(` Small button `,-1)]]),_:1}),s(x,null,{default:o(()=>[s(b,{href:`#`},{default:o(()=>[...f[30]||=[e(`Action`,-1)]]),_:1}),s(b,{href:`#`},{default:o(()=>[...f[31]||=[e(`Another action`,-1)]]),_:1}),s(b,{href:`#`},{default:o(()=>[...f[32]||=[e(`Something else here`,-1)]]),_:1}),s(w),s(b,{href:`#`},{default:o(()=>[...f[33]||=[e(`Separated link`,-1)]]),_:1})]),_:1})]),_:1}),s(S,{variant:`btn-group`},{default:o(()=>[s(O,{color:`secondary`,size:`sm`},{default:o(()=>[...f[34]||=[e(` Small split button `,-1)]]),_:1}),s(y,{color:`secondary`,size:`sm`,split:``}),s(x,null,{default:o(()=>[s(b,{href:`#`},{default:o(()=>[...f[35]||=[e(`Action`,-1)]]),_:1}),s(b,{href:`#`},{default:o(()=>[...f[36]||=[e(`Another action`,-1)]]),_:1}),s(b,{href:`#`},{default:o(()=>[...f[37]||=[e(`Something else here`,-1)]]),_:1}),s(w),s(b,{href:`#`},{default:o(()=>[...f[38]||=[e(`Separated link`,-1)]]),_:1})]),_:1})]),_:1})]),_:1})]),_:1})]),_:1})]),_:1}),s(D,{xs:12},{default:o(()=>[s(E,{class:`mb-4`},{default:o(()=>[s(v,null,{default:o(()=>[...f[40]||=[t(`strong`,null,`Vue Dropdown`,-1),e(),t(`small`,null,`Single button`,-1)]]),_:1}),s(T,null,{default:o(()=>[f[53]||=t(`p`,{class:`text-body-secondary small`},[e(` Opt into darker dropdowns to match a dark navbar or custom style by set `),t(`code`,null,`dark`),e(` property. No changes are required to the dropdown items. `)],-1),s(C,{href:`components/dropdown.html#dark-dropdowns`},{default:o(()=>[s(S,{dark:``},{default:o(()=>[s(y,{color:`secondary`},{default:o(()=>[...f[41]||=[e(`Dropdown button`,-1)]]),_:1}),s(x,null,{default:o(()=>[s(b,{href:`#`},{default:o(()=>[...f[42]||=[e(`Action`,-1)]]),_:1}),s(b,{href:`#`},{default:o(()=>[...f[43]||=[e(`Another action`,-1)]]),_:1}),s(b,{href:`#`},{default:o(()=>[...f[44]||=[e(`Something else here`,-1)]]),_:1}),s(w),s(b,{href:`#`},{default:o(()=>[...f[45]||=[e(`Separated link`,-1)]]),_:1})]),_:1})]),_:1})]),_:1}),f[54]||=t(`p`,{class:`text-body-secondary small`},` And putting it to use in a navbar: `,-1),s(C,{href:`components/dropdown.html#dark-dropdowns`},{default:o(()=>[t(`nav`,p,[t(`div`,m,[f[51]||=t(`a`,{class:`navbar-brand`,href:`https://coreui.io/vue/`},` Navbar `,-1),f[52]||=t(`button`,{class:`navbar-toggler`,type:`button`,"data-coreui-toggle":`collapse`,"data-coreui-target":`#navbarNavDarkDropdown`,"aria-controls":`navbarNavDarkDropdown`,"aria-expanded":`false`,"aria-label":`Toggle navigation`},[t(`span`,{class:`navbar-toggler-icon`})],-1),t(`div`,h,[t(`ul`,g,[s(S,{dark:``,as:`li`,variant:`nav-item`},{default:o(()=>[s(y,null,{default:o(()=>[...f[46]||=[e(`Dropdown`,-1)]]),_:1}),s(x,null,{default:o(()=>[s(b,{href:`#`},{default:o(()=>[...f[47]||=[e(`Action`,-1)]]),_:1}),s(b,{href:`#`},{default:o(()=>[...f[48]||=[e(`Another action`,-1)]]),_:1}),s(b,{href:`#`},{default:o(()=>[...f[49]||=[e(`Something else here`,-1)]]),_:1}),s(w),s(b,{href:`#`},{default:o(()=>[...f[50]||=[e(`Separated link`,-1)]]),_:1})]),_:1})]),_:1})])])])])]),_:1})]),_:1})]),_:1})]),_:1}),s(D,{xs:12},{default:o(()=>[s(E,{class:`mb-4`},{default:o(()=>[s(v,null,{default:o(()=>[...f[55]||=[t(`strong`,null,`Vue Dropdown`,-1),e(),t(`small`,null,`Dropup`,-1)]]),_:1}),s(T,null,{default:o(()=>[f[66]||=t(`p`,{class:`text-body-secondary small`},[e(` Trigger dropdown menus above elements by adding `),t(`code`,null,`direction="dropup"`),e(` to the `),t(`code`,null,`<CDropdown>`),e(` component. `)],-1),s(C,{href:`components/dropdown.html#dropup`},{default:o(()=>[s(S,{variant:`btn-group`,direction:`dropup`},{default:o(()=>[s(y,{color:`secondary`},{default:o(()=>[...f[56]||=[e(`Dropdown`,-1)]]),_:1}),s(x,null,{default:o(()=>[s(b,{href:`#`},{default:o(()=>[...f[57]||=[e(`Action`,-1)]]),_:1}),s(b,{href:`#`},{default:o(()=>[...f[58]||=[e(`Another action`,-1)]]),_:1}),s(b,{href:`#`},{default:o(()=>[...f[59]||=[e(`Something else here`,-1)]]),_:1}),s(w),s(b,{href:`#`},{default:o(()=>[...f[60]||=[e(`Separated link`,-1)]]),_:1})]),_:1})]),_:1}),s(S,{variant:`btn-group`,direction:`dropup`},{default:o(()=>[s(O,{color:`secondary`},{default:o(()=>[...f[61]||=[e(`Small split button`,-1)]]),_:1}),s(y,{color:`secondary`,split:``}),s(x,null,{default:o(()=>[s(b,{href:`#`},{default:o(()=>[...f[62]||=[e(`Action`,-1)]]),_:1}),s(b,{href:`#`},{default:o(()=>[...f[63]||=[e(`Another action`,-1)]]),_:1}),s(b,{href:`#`},{default:o(()=>[...f[64]||=[e(`Something else here`,-1)]]),_:1}),s(w),s(b,{href:`#`},{default:o(()=>[...f[65]||=[e(`Separated link`,-1)]]),_:1})]),_:1})]),_:1})]),_:1})]),_:1})]),_:1})]),_:1}),s(D,{xs:12},{default:o(()=>[s(E,{class:`mb-4`},{default:o(()=>[s(v,null,{default:o(()=>[...f[67]||=[t(`strong`,null,`Vue Dropdown`,-1),e(),t(`small`,null,`Dropright`,-1)]]),_:1}),s(T,null,{default:o(()=>[f[78]||=t(`p`,{class:`text-body-secondary small`},[e(` Trigger dropdown menus at the right of the elements by adding `),t(`code`,null,`direction="dropend"`),e(` to the `),t(`code`,null,`<CDropdown>`),e(` component. `)],-1),s(C,{href:`components/dropdown.html#dropright`},{default:o(()=>[s(S,{variant:`btn-group`,direction:`dropend`},{default:o(()=>[s(y,{color:`secondary`},{default:o(()=>[...f[68]||=[e(`Dropdown`,-1)]]),_:1}),s(x,null,{default:o(()=>[s(b,{href:`#`},{default:o(()=>[...f[69]||=[e(`Action`,-1)]]),_:1}),s(b,{href:`#`},{default:o(()=>[...f[70]||=[e(`Another action`,-1)]]),_:1}),s(b,{href:`#`},{default:o(()=>[...f[71]||=[e(`Something else here`,-1)]]),_:1}),s(w),s(b,{href:`#`},{default:o(()=>[...f[72]||=[e(`Separated link`,-1)]]),_:1})]),_:1})]),_:1}),s(S,{variant:`btn-group`,direction:`dropend`},{default:o(()=>[s(O,{color:`secondary`},{default:o(()=>[...f[73]||=[e(`Small split button`,-1)]]),_:1}),s(y,{color:`secondary`,split:``}),s(x,null,{default:o(()=>[s(b,{href:`#`},{default:o(()=>[...f[74]||=[e(`Action`,-1)]]),_:1}),s(b,{href:`#`},{default:o(()=>[...f[75]||=[e(`Another action`,-1)]]),_:1}),s(b,{href:`#`},{default:o(()=>[...f[76]||=[e(`Something else here`,-1)]]),_:1}),s(w),s(b,{href:`#`},{default:o(()=>[...f[77]||=[e(`Separated link`,-1)]]),_:1})]),_:1})]),_:1})]),_:1})]),_:1})]),_:1})]),_:1}),s(D,{xs:12},{default:o(()=>[s(E,{class:`mb-4`},{default:o(()=>[s(v,null,{default:o(()=>[...f[79]||=[t(`strong`,null,`Vue Dropdown`,-1),e(),t(`small`,null,`Dropleft`,-1)]]),_:1}),s(T,null,{default:o(()=>[f[85]||=t(`p`,{class:`text-body-secondary small`},[e(` Trigger dropdown menus at the left of the elements by adding `),t(`code`,null,`direction="dropstart"`),e(` to the `),t(`code`,null,`<CDropdown>`),e(` component. `)],-1),s(C,{href:`components/dropdown.html#dropleft`},{default:o(()=>[s(k,null,{default:o(()=>[s(S,{variant:`btn-group`,direction:`dropstart`},{default:o(()=>[s(y,{color:`secondary`,split:``}),s(x,null,{default:o(()=>[s(b,{href:`#`},{default:o(()=>[...f[80]||=[e(`Action`,-1)]]),_:1}),s(b,{href:`#`},{default:o(()=>[...f[81]||=[e(`Another action`,-1)]]),_:1}),s(b,{href:`#`},{default:o(()=>[...f[82]||=[e(`Something else here`,-1)]]),_:1}),s(w),s(b,{href:`#`},{default:o(()=>[...f[83]||=[e(`Separated link`,-1)]]),_:1})]),_:1})]),_:1}),s(O,{color:`secondary`},{default:o(()=>[...f[84]||=[e(`Small split button`,-1)]]),_:1})]),_:1})]),_:1})]),_:1})]),_:1})]),_:1})]),_:1})}var v=i(f,[[`render`,_]]);export{v as default};