sean
d26db06f74
NPM Installation / build (16.x, ubuntu-latest) (push) Has been cancelled
NPM Installation / build (16.x, windows-latest) (push) Has been cancelled
NPM Installation / build (17.x, ubuntu-latest) (push) Has been cancelled
NPM Installation / build (17.x, windows-latest) (push) Has been cancelled
NPM Installation / build (18.x, ubuntu-latest) (push) Has been cancelled
NPM Installation / build (18.x, windows-latest) (push) Has been cancelled
1 line
7.4 KiB
JavaScript
1 line
7.4 KiB
JavaScript
import{Bt as e,It as t,Jt as n,Lt as r,Pt as i,Qt as a,Vt as o,Xt as s,an as c,qt as l,zt as u}from"./index-qNrWYJXL.js";var d={class:`me-auto fw-bold`},f={class:`d-flex`},p={class:`mt-2 pt-2 border-top`},m={class:`d-flex`},h={__name:`Toasts`,setup(h){let g=[],_=()=>{g.push({title:`new toast`,content:`Lorem ipsum dolor cet emit`})};return(h,v)=>{let y=s(`DocsComponents`),b=s(`CCardHeader`),x=s(`CToastHeader`),S=s(`CToastBody`),C=s(`CToast`),w=s(`DocsExample`),T=s(`CButton`),E=s(`CToaster`),D=s(`CCardBody`),O=s(`CCard`),k=s(`CCol`),A=s(`CToastClose`),j=s(`CRow`);return l(),r(j,null,{default:a(()=>[o(k,{xs:12},{default:a(()=>[o(y,{href:`components/toast.html`}),o(O,{class:`mb-4`},{default:a(()=>[o(b,null,{default:a(()=>[...v[0]||=[t(`strong`,null,`Vue Toast`,-1),e(),t(`small`,null,`Basic`,-1)]]),_:1}),o(D,null,{default:a(()=>[v[5]||=t(`p`,{class:`text-body-secondary small`},` Toasts are as flexible as you need and have very little required markup. At a minimum, we require a single element to contain your “toasted” content and strongly encourage a dismiss button. `,-1),o(w,{href:`components/toast.html`},{default:a(()=>[o(C,{title:`CoreUI for Vue.js`,autohide:!1,visible:!0},{default:a(()=>[o(x,{closeButton:``},{default:a(()=>[...v[1]||=[t(`svg`,{class:`rounded me-2`,width:`20`,height:`20`,xmlns:`http://www.w3.org/2000/svg`,preserveAspectRatio:`xMidYMid slice`,focusable:`false`,role:`img`},[t(`rect`,{width:`100%`,height:`100%`,fill:`#007aff`})],-1),t(`strong`,{class:`me-auto`},`CoreUI for Vue.js`,-1),t(`small`,null,`7 min ago`,-1)]]),_:1}),o(S,null,{default:a(()=>[...v[2]||=[e(`Hello, world! This is a toast message.`,-1)]]),_:1})]),_:1})]),_:1}),o(w,{href:`components/toast.html`},{default:a(()=>[o(T,{color:`primary`,onClick:_},{default:a(()=>[...v[3]||=[e(`Send a toast`,-1)]]),_:1}),o(E,{placement:`top-end`},{default:a(()=>[(l(),u(i,null,n(g,(n,r)=>o(C,{visible:!0,key:r},{default:a(()=>[o(x,{closeButton:``},{default:a(()=>[t(`span`,d,c(n.title),1),v[4]||=t(`small`,null,`7 min ago`,-1)]),_:2},1024),o(S,null,{default:a(()=>[e(c(n.content),1)]),_:2},1024)]),_:2},1024)),64))]),_:1})]),_:1})]),_:1})]),_:1})]),_:1}),o(k,{xs:12},{default:a(()=>[o(O,{class:`mb-4`},{default:a(()=>[o(b,null,{default:a(()=>[...v[6]||=[t(`strong`,null,`Vue Toast`,-1),e(),t(`small`,null,`Translucent`,-1)]]),_:1}),o(D,null,{default:a(()=>[v[9]||=t(`p`,{class:`text-body-secondary small`},` Toasts are slightly translucent to blend in with what's below them. `,-1),o(w,{href:`components/toast.html#translucent`,tabContentClass:`bg-dark`},{default:a(()=>[o(C,{title:`CoreUI for Vue.js`,autohide:!1,visible:!0},{default:a(()=>[o(x,{closeButton:``},{default:a(()=>[...v[7]||=[t(`svg`,{class:`rounded me-2`,width:`20`,height:`20`,xmlns:`http://www.w3.org/2000/svg`,preserveAspectRatio:`xMidYMid slice`,focusable:`false`,role:`img`},[t(`rect`,{width:`100%`,height:`100%`,fill:`#007aff`})],-1),t(`strong`,{class:`me-auto`},`CoreUI for Vue.js`,-1),t(`small`,null,`7 min ago`,-1)]]),_:1}),o(S,null,{default:a(()=>[...v[8]||=[e(`Hello, world! This is a toast message.`,-1)]]),_:1})]),_:1})]),_:1})]),_:1})]),_:1})]),_:1}),o(k,{xs:12},{default:a(()=>[o(O,{class:`mb-4`},{default:a(()=>[o(b,null,{default:a(()=>[...v[10]||=[t(`strong`,null,`Vue Toast`,-1),e(),t(`small`,null,`Stacking`,-1)]]),_:1}),o(D,null,{default:a(()=>[v[15]||=t(`p`,{class:`text-body-secondary small`},` You can stack toasts by wrapping them in a toast container, which will vertically add some spacing. `,-1),o(w,{href:`components/toast.html#stacking`},{default:a(()=>[o(E,{class:`position-static`},{default:a(()=>[o(C,{title:`CoreUI for Vue.js`,autohide:!1,visible:!0},{default:a(()=>[o(x,{closeButton:``},{default:a(()=>[...v[11]||=[t(`svg`,{class:`rounded me-2`,width:`20`,height:`20`,xmlns:`http://www.w3.org/2000/svg`,preserveAspectRatio:`xMidYMid slice`,focusable:`false`,role:`img`},[t(`rect`,{width:`100%`,height:`100%`,fill:`#007aff`})],-1),t(`strong`,{class:`me-auto`},`CoreUI for Vue.js`,-1),t(`small`,null,`7 min ago`,-1)]]),_:1}),o(S,null,{default:a(()=>[...v[12]||=[e(`Hello, world! This is a toast message.`,-1)]]),_:1})]),_:1}),o(C,{title:`CoreUI for Vue.js`,autohide:!1,visible:!0},{default:a(()=>[o(x,{closeButton:``},{default:a(()=>[...v[13]||=[t(`svg`,{class:`rounded me-2`,width:`20`,height:`20`,xmlns:`http://www.w3.org/2000/svg`,preserveAspectRatio:`xMidYMid slice`,focusable:`false`,role:`img`},[t(`rect`,{width:`100%`,height:`100%`,fill:`#007aff`})],-1),t(`strong`,{class:`me-auto`},`CoreUI for Vue.js`,-1),t(`small`,null,`7 min ago`,-1)]]),_:1}),o(S,null,{default:a(()=>[...v[14]||=[e(`Hello, world! This is a toast message.`,-1)]]),_:1})]),_:1})]),_:1})]),_:1})]),_:1})]),_:1})]),_:1}),o(k,{xs:12},{default:a(()=>[o(O,{class:`mb-4`},{default:a(()=>[o(b,null,{default:a(()=>[...v[16]||=[t(`strong`,null,`Vue Toast`,-1),e(),t(`small`,null,`Custom content`,-1)]]),_:1}),o(D,null,{default:a(()=>[v[21]||=t(`p`,{class:`text-body-secondary small`},[e(` Customize your toasts by removing sub-components, tweaking them with `),t(`a`,{href:`https://coreui.io/docs/utilities/api`},`utilities`),e(`, or by adding your own markup. Here we've created a simpler toast by removing the default `),t(`code`,null,`<CToastHeader>`),e(`, adding a custom hide icon from `),t(`a`,{href:`https://coreui.io/icons/`},`CoreUI Icons`),e(`, and using some `),t(`a`,{href:`https://coreui.io/docs/utilities/flex`},`flexbox utilities`),e(` to adjust the layout. `)],-1),o(w,{href:`components/toast.html#custom-content`},{default:a(()=>[o(C,{autohide:!1,class:`align-items-center`,visible:!0},{default:a(()=>[t(`div`,f,[o(S,null,{default:a(()=>[...v[17]||=[e(`Hello, world! This is a toast message.`,-1)]]),_:1}),o(A,{class:`me-2 m-auto`})])]),_:1})]),_:1}),v[22]||=t(`p`,{class:`text-body-secondary small`},` Alternatively, you can also add additional controls and components to toasts. `,-1),o(w,{href:`components/toast.html#custom-content`},{default:a(()=>[o(C,{autohide:!1,class:`align-items-center`,visible:``},{default:a(()=>[o(S,null,{default:a(()=>[v[20]||=e(` Hello, world! This is a toast message. `,-1),t(`div`,p,[o(T,{type:`button`,color:`primary`,size:`sm`},{default:a(()=>[...v[18]||=[e(` Take action `,-1)]]),_:1}),o(A,{as:`CButton`,color:`secondary`,size:`sm`,class:`ms-1`},{default:a(()=>[...v[19]||=[e(`Close`,-1)]]),_:1})])]),_:1})]),_:1})]),_:1})]),_:1})]),_:1})]),_:1}),o(k,{xs:12},{default:a(()=>[o(O,{class:`mb-4`},{default:a(()=>[o(b,null,{default:a(()=>[...v[23]||=[t(`strong`,null,`Vue Toast`,-1),e(),t(`small`,null,`Custom content`,-1)]]),_:1}),o(D,null,{default:a(()=>[v[25]||=t(`p`,{class:`text-body-secondary small`},[e(` Building on the above example, you can create different toast color schemes with our `),t(`a`,{href:`https://coreui.io/docs/utilities/colors`},`color`),e(` and `),t(`a`,{href:`https://coreui.io/docs/utilities/background`},`background`),e(` utilities. Here we've set `),t(`code`,null,`color="primary"`),e(` and added `),t(`code`,null,`.text-white`),e(` class to the `),t(`code`,null,`<Ctoast>`),e(`, and then set `),t(`code`,null,`white`),e(` property to our close button. For a crisp edge, we remove the default border with `),t(`code`,null,`.border-0`),e(`. `)],-1),o(w,{href:`components/toast.html#color-schemes`},{default:a(()=>[o(C,{autohide:!1,color:`primary`,class:`text-white align-items-center`,visible:!0},{default:a(()=>[t(`div`,m,[o(S,null,{default:a(()=>[...v[24]||=[e(`Hello, world! This is a toast message.`,-1)]]),_:1}),o(A,{class:`me-2 m-auto`,white:``})])]),_:1})]),_:1})]),_:1})]),_:1})]),_:1})]),_:1})}}};export{h as default}; |