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={};function p(i,f){let p=c(`DocsComponents`),m=c(`CCardHeader`),h=c(`CListGroupItem`),g=c(`CListGroup`),_=c(`DocsExample`),v=c(`CCardBody`),y=c(`CCard`),b=c(`CCol`),x=c(`CBadge`),S=c(`CFormCheck`),C=c(`CRow`);return u(),r(C,null,{default:o(()=>[s(b,{xs:12},{default:o(()=>[s(p,{href:`components/list-group.html`}),s(y,{class:`mb-4`},{default:o(()=>[s(m,null,{default:o(()=>[...f[0]||=[t(`strong`,null,`Vue List Group`,-1),e(),t(`small`,null,`Basic example`,-1)]]),_:1}),s(v,null,{default:o(()=>[f[6]||=t(`p`,{class:`text-body-secondary small`},` The default list group is an unordered list with items and the proper CSS classes. Build upon it with the options that follow, or with your CSS as required. `,-1),s(_,{href:`components/list-group.html`},{default:o(()=>[s(g,null,{default:o(()=>[s(h,null,{default:o(()=>[...f[1]||=[e(`Cras justo odio`,-1)]]),_:1}),s(h,null,{default:o(()=>[...f[2]||=[e(`Dapibus ac facilisis in`,-1)]]),_:1}),s(h,null,{default:o(()=>[...f[3]||=[e(`Morbi leo risus`,-1)]]),_:1}),s(h,null,{default:o(()=>[...f[4]||=[e(`Porta ac consectetur ac`,-1)]]),_:1}),s(h,null,{default:o(()=>[...f[5]||=[e(`Vestibulum at eros`,-1)]]),_:1})]),_:1})]),_:1})]),_:1})]),_:1})]),_:1}),s(b,{xs:12},{default:o(()=>[s(y,{class:`mb-4`},{default:o(()=>[s(m,null,{default:o(()=>[...f[7]||=[t(`strong`,null,`Vue List Group`,-1),e(),t(`small`,null,`Active items`,-1)]]),_:1}),s(v,null,{default:o(()=>[f[13]||=t(`p`,{class:`text-body-secondary small`},[e(` Add `),t(`code`,null,`active`),e(` boolean property to a `),t(`code`,null,`<CListGroupItem>`),e(` to show the current active selection. `)],-1),s(_,{href:`components/list-group.html#active-items`},{default:o(()=>[s(g,null,{default:o(()=>[s(h,{active:``},{default:o(()=>[...f[8]||=[e(`Cras justo odio`,-1)]]),_:1}),s(h,null,{default:o(()=>[...f[9]||=[e(`Dapibus ac facilisis in`,-1)]]),_:1}),s(h,null,{default:o(()=>[...f[10]||=[e(`Morbi leo risus`,-1)]]),_:1}),s(h,null,{default:o(()=>[...f[11]||=[e(`Porta ac consectetur ac`,-1)]]),_:1}),s(h,null,{default:o(()=>[...f[12]||=[e(`Vestibulum at eros`,-1)]]),_:1})]),_:1})]),_:1})]),_:1})]),_:1})]),_:1}),s(b,{xs:12},{default:o(()=>[s(y,{class:`mb-4`},{default:o(()=>[s(m,null,{default:o(()=>[...f[14]||=[t(`strong`,null,`Vue List Group`,-1),e(),t(`small`,null,`Disabled items`,-1)]]),_:1}),s(v,null,{default:o(()=>[f[20]||=t(`p`,{class:`text-body-secondary small`},[e(` Add `),t(`code`,null,`disabled`),e(` boolean property to a `),t(`code`,null,`<CListGroupItem>`),e(` to make it appear disabled. `)],-1),s(_,{href:`components/list-group.html#disabled-items`},{default:o(()=>[s(g,null,{default:o(()=>[s(h,{disabled:``},{default:o(()=>[...f[15]||=[e(`Cras justo odio`,-1)]]),_:1}),s(h,null,{default:o(()=>[...f[16]||=[e(`Dapibus ac facilisis in`,-1)]]),_:1}),s(h,null,{default:o(()=>[...f[17]||=[e(`Morbi leo risus`,-1)]]),_:1}),s(h,null,{default:o(()=>[...f[18]||=[e(`Porta ac consectetur ac`,-1)]]),_:1}),s(h,null,{default:o(()=>[...f[19]||=[e(`Vestibulum at eros`,-1)]]),_:1})]),_:1})]),_:1})]),_:1})]),_:1})]),_:1}),s(b,{xs:12},{default:o(()=>[s(y,{class:`mb-4`},{default:o(()=>[s(m,null,{default:o(()=>[...f[21]||=[t(`strong`,null,`Vue List Group`,-1),e(),t(`small`,null,`Links and buttons`,-1)]]),_:1}),s(v,null,{default:o(()=>[f[27]||=t(`p`,{class:`text-body-secondary small`},[e(` Use `),t(`code`,null,`<a>`),e(`s or `),t(`code`,null,`<button>`),e(`s to create `),t(`em`,null,`actionable`),e(` list group items with hover, disabled, and active states by adding `),t(`code`,null,`component="a|button"`),e(`. We separate these pseudo-classes to ensure list groups made of non-interactive elements (like `),t(`code`,null,`<li>`),e(`s or `),t(`code`,null,`<div>`),e(` s) don'tprovide a click or tap affordance. `)],-1),s(_,{href:`components/list-group.html#links-and-buttons`},{default:o(()=>[s(g,null,{default:o(()=>[s(h,{as:`a`,href:`#`,active:``},{default:o(()=>[...f[22]||=[e(` Cras justo odio `,-1)]]),_:1}),s(h,{as:`a`,href:`#`},{default:o(()=>[...f[23]||=[e(` Dapibus ac facilisis in `,-1)]]),_:1}),s(h,{as:`a`,href:`#`},{default:o(()=>[...f[24]||=[e(` Morbi leo risus `,-1)]]),_:1}),s(h,{as:`a`,href:`#`},{default:o(()=>[...f[25]||=[e(` Porta ac consectetur ac `,-1)]]),_:1}),s(h,{as:`a`,href:`#`,disabled:``},{default:o(()=>[...f[26]||=[e(` Vestibulum at eros `,-1)]]),_:1})]),_:1})]),_:1})]),_:1})]),_:1})]),_:1}),s(b,{xs:12},{default:o(()=>[s(y,{class:`mb-4`},{default:o(()=>[s(m,null,{default:o(()=>[...f[28]||=[t(`strong`,null,`Vue List Group`,-1),e(),t(`small`,null,`Flush`,-1)]]),_:1}),s(v,null,{default:o(()=>[f[34]||=t(`p`,{class:`text-body-secondary small`},[e(` Add `),t(`code`,null,`flush`),e(` boolean property to remove some borders and rounded corners to render list group items edge-to-edge in a parent container (e.g., cards). `)],-1),s(_,{href:`components/list-group.html#flush`},{default:o(()=>[s(g,{flush:``},{default:o(()=>[s(h,null,{default:o(()=>[...f[29]||=[e(`Cras justo odio`,-1)]]),_:1}),s(h,null,{default:o(()=>[...f[30]||=[e(`Dapibus ac facilisis in`,-1)]]),_:1}),s(h,null,{default:o(()=>[...f[31]||=[e(`Morbi leo risus`,-1)]]),_:1}),s(h,null,{default:o(()=>[...f[32]||=[e(`Porta ac consectetur ac`,-1)]]),_:1}),s(h,null,{default:o(()=>[...f[33]||=[e(`Vestibulum at eros`,-1)]]),_:1})]),_:1})]),_:1})]),_:1})]),_:1})]),_:1}),s(b,{xs:12},{default:o(()=>[s(y,{class:`mb-4`},{default:o(()=>[s(m,null,{default:o(()=>[...f[35]||=[t(`strong`,null,`Vue List Group`,-1),e(),t(`small`,null,`Horizontal`,-1)]]),_:1}),s(v,null,{default:o(()=>[f[39]||=t(`p`,{class:`text-body-secondary small`},[e(` Add `),t(`code`,null,`layout="horizontal"`),e(` to change the layout of list group items from vertical to horizontal across all breakpoints. Alternatively, choose a responsive variant `),t(`code`,null,`.layout="horizontal-{sm | md | lg | xl | xxl}"`),e(` to make a list group horizontal starting at that breakpoint's `),t(`code`,null,`min-width`),e(`. Currently `),t(`strong`,null,`horizontal list groups cannot be combined with flush list groups.`)],-1),s(_,{href:`components/list-group.html#flush`},{default:o(()=>[(u(),d(a,null,n([``,`-sm`,`-md`,`-lg`,`-xl`,`-xxl`],t=>s(g,{key:t,class:`mb-2`,layout:`horizontal`+t},{default:o(()=>[s(h,null,{default:o(()=>[...f[36]||=[e(`Cras justo odio`,-1)]]),_:1}),s(h,null,{default:o(()=>[...f[37]||=[e(`Dapibus ac facilisis in`,-1)]]),_:1}),s(h,null,{default:o(()=>[...f[38]||=[e(`Morbi leo risus`,-1)]]),_:1})]),_:1},8,[`layout`])),64))]),_:1})]),_:1})]),_:1})]),_:1}),s(b,{xs:12},{default:o(()=>[s(y,{class:`mb-4`},{default:o(()=>[s(m,null,{default:o(()=>[...f[40]||=[t(`strong`,null,`Vue List Group`,-1),e(),t(`small`,null,`Contextual classes`,-1)]]),_:1}),s(v,null,{default:o(()=>[f[43]||=t(`p`,{class:`text-body-secondary small`},` Use contextual classes to style list items with a stateful background and color. `,-1),s(_,{href:`components/list-group.html#contextual-classes`},{default:o(()=>[s(g,null,{default:o(()=>[s(h,null,{default:o(()=>[...f[41]||=[e(`Dapibus ac facilisis in`,-1)]]),_:1}),(u(),d(a,null,n([`primary`,`secondary`,`success`,`danger`,`warning`,`info`,`light`,`dark`],t=>s(h,{key:t,color:t},{default:o(()=>[e(`A simple `+l(t)+` list group item`,1)]),_:2},1032,[`color`])),64))]),_:1})]),_:1}),f[44]||=t(`p`,{class:`text-body-secondary small`},[e(` Contextual classes also work with `),t(`code`,null,`<a>`),e(`s or `),t(`code`,null,`<button>`),e(`s. Note the addition of the hover styles here not present in the previous example. Also supported is the `),t(`code`,null,`active`),e(` state; apply it to indicate an active selection on a contextual list group item. `)],-1),s(_,{href:`components/list-group.html#contextual-classes`},{default:o(()=>[s(g,null,{default:o(()=>[s(h,{as:`a`,href:`#`},{default:o(()=>[...f[42]||=[e(`Dapibus ac facilisis in`,-1)]]),_:1}),(u(),d(a,null,n([`primary`,`secondary`,`success`,`danger`,`warning`,`info`,`light`,`dark`],t=>s(h,{key:t,as:`a`,href:`#`,color:t},{default:o(()=>[e(`A simple `+l(t)+` list group item`,1)]),_:2},1032,[`color`])),64))]),_:1})]),_:1})]),_:1})]),_:1})]),_:1}),s(b,{xs:12},{default:o(()=>[s(y,{class:`mb-4`},{default:o(()=>[s(m,null,{default:o(()=>[...f[45]||=[t(`strong`,null,`Vue List Group`,-1),e(),t(`small`,null,`With badges`,-1)]]),_:1}),s(v,null,{default:o(()=>[f[52]||=t(`p`,{class:`text-body-secondary small`},` Add badges to any list group item to show unread counts, activity, and more. `,-1),s(_,{href:`components/list-group.html#with-badges`},{default:o(()=>[s(g,null,{default:o(()=>[s(h,{class:`d-flex justify-content-between align-items-center`},{default:o(()=>[f[47]||=e(` Cras justo odio `,-1),s(x,{color:`primary`,shape:`rounded-pill`},{default:o(()=>[...f[46]||=[e(` 14 `,-1)]]),_:1})]),_:1}),s(h,{class:`d-flex justify-content-between align-items-center`},{default:o(()=>[f[49]||=e(` Dapibus ac facilisis in `,-1),s(x,{color:`primary`,shape:`rounded-pill`},{default:o(()=>[...f[48]||=[e(` 2 `,-1)]]),_:1})]),_:1}),s(h,{class:`d-flex justify-content-between align-items-center`},{default:o(()=>[f[51]||=e(` Morbi leo risus `,-1),s(x,{color:`primary`,shape:`rounded-pill`},{default:o(()=>[...f[50]||=[e(` 1 `,-1)]]),_:1})]),_:1})]),_:1})]),_:1})]),_:1})]),_:1})]),_:1}),s(b,{xs:12},{default:o(()=>[s(y,{class:`mb-4`},{default:o(()=>[s(m,null,{default:o(()=>[...f[53]||=[t(`strong`,null,`Vue List Group`,-1),e(),t(`small`,null,`Custom content`,-1)]]),_:1}),s(v,null,{default:o(()=>[f[57]||=t(`p`,{class:`text-body-secondary small`},[e(` Add nearly any HTML within, even for linked list groups like the one below, with the help of `),t(`a`,{href:`https://coreui.io/docs/utilities/flex/`},`flexbox utilities`),e(`. `)],-1),s(_,{href:`components/list-group.html#custom-content`},{default:o(()=>[s(g,null,{default:o(()=>[s(h,{as:`a`,href:`#`,active:``},{default:o(()=>[...f[54]||=[t(`div`,{class:`d-flex w-100 justify-content-between`},[t(`h5`,{class:`mb-1`},`List group item heading`),t(`small`,null,`3 days ago`)],-1),t(`p`,{class:`mb-1`},` Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit. `,-1),t(`small`,null,`Donec id elit non mi porta.`,-1)]]),_:1}),s(h,{as:`a`,href:`#`},{default:o(()=>[...f[55]||=[t(`div`,{class:`d-flex w-100 justify-content-between`},[t(`h5`,{class:`mb-1`},`List group item heading`),t(`small`,{class:`text-body-secondary`},`3 days ago`)],-1),t(`p`,{class:`mb-1`},` Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit. `,-1),t(`small`,{class:`text-body-secondary`},`Donec id elit non mi porta.`,-1)]]),_:1}),s(h,{as:`a`,href:`#`},{default:o(()=>[...f[56]||=[t(`div`,{class:`d-flex w-100 justify-content-between`},[t(`h5`,{class:`mb-1`},`List group item heading`),t(`small`,{class:`text-body-secondary`},`3 days ago`)],-1),t(`p`,{class:`mb-1`},` Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit. `,-1),t(`small`,{class:`text-body-secondary`},`Donec id elit non mi porta.`,-1)]]),_:1})]),_:1})]),_:1})]),_:1})]),_:1})]),_:1}),s(b,{xs:12},{default:o(()=>[s(y,{class:`mb-4`},{default:o(()=>[s(m,null,{default:o(()=>[...f[58]||=[t(`strong`,null,`Vue List Group`,-1),e(),t(`small`,null,`Checkboxes and radios`,-1)]]),_:1}),s(v,null,{default:o(()=>[f[59]||=t(`p`,{class:`text-body-secondary small`},` Place CoreUI's checkboxes and radios within list group items and customize as needed. `,-1),s(_,{href:`components/list-group.html#checkboxes-and-radios`},{default:o(()=>[s(g,null,{default:o(()=>[s(h,null,{default:o(()=>[s(S,{label:`Cras justo odio`})]),_:1}),s(h,null,{default:o(()=>[s(S,{label:`Dapibus ac facilisis in`,checked:``})]),_:1}),s(h,null,{default:o(()=>[s(S,{label:`Morbi leo risus`,checked:``})]),_:1}),s(h,null,{default:o(()=>[s(S,{label:`orta ac consectetur ac`})]),_:1}),s(h,null,{default:o(()=>[s(S,{label:`Vestibulum at eros`})]),_:1})]),_:1})]),_:1})]),_:1})]),_:1})]),_:1})]),_:1})}var m=i(f,[[`render`,p]]);export{m as default};