manja_ui_dev/dist/assets/FloatingLabels-8ZmfD7hL.js

import{Bt as e,It as t,Lt as n,Mt as r,Qt as i,Vt as a,Xt as o,qt as s}from"./index-qNrWYJXL.js";var c={};function l(r,c){let l=o(`DocsComponents`),u=o(`CCardHeader`),d=o(`CFormInput`),f=o(`CFormLabel`),p=o(`CFormFloating`),m=o(`DocsExample`),h=o(`CCardBody`),g=o(`CCard`),_=o(`CCol`),v=o(`CFormTextarea`),y=o(`CFormSelect`),b=o(`CRow`);return s(),n(b,null,{default:i(()=>[a(_,{xs:12},{default:i(()=>[a(l,{href:`forms/floating-labels.html`}),a(g,{class:`mb-4`},{default:i(()=>[a(u,null,{default:i(()=>[...c[0]||=[t(`strong`,null,`Vue Floating labels`,-1)]]),_:1}),a(h,null,{default:i(()=>[c[4]||=t(`p`,{class:`text-body-secondary small`},[e(` Wrap a pair of `),t(`code`,null,`<CFormInput>`),e(` and `),t(`code`,null,`<CFormLabel>`),e(` elements in `),t(`code`,null,`CFormFloating`),e(` to enable floating labels with textual form fields. A `),t(`code`,null,`placeholder`),e(` is required on each `),t(`code`,null,`<CFormInput>`),e(` as our method of CSS-only floating labels uses the `),t(`code`,null,`:placeholder-shown`),e(` pseudo-element. Also note that the `),t(`code`,null,`<CFormInput>`),e(` must come first so we can utilize a sibling selector (e.g., `),t(`code`,null,`~`),e(`). `)],-1),a(m,{href:`forms/floating-labels.html`},{default:i(()=>[a(p,{class:`mb-3`},{default:i(()=>[a(d,{id:`floatingInput`,type:`email`,placeholder:`name@example.com`}),a(f,{for:`floatingInput`},{default:i(()=>[...c[1]||=[e(`Email address`,-1)]]),_:1})]),_:1}),a(p,null,{default:i(()=>[a(d,{id:`floatingPassword`,type:`password`,placeholder:`Password`}),a(f,{for:`floatingPassword`},{default:i(()=>[...c[2]||=[e(`Password`,-1)]]),_:1})]),_:1})]),_:1}),c[5]||=t(`p`,{class:`text-body-secondary small`},[e(` When there's a `),t(`code`,null,`value`),e(` already defined, `),t(`code`,null,`<CFormLabel>`),e(` s will automatically adjust to their floated position. `)],-1),a(m,{href:`forms/floating-labels.html`},{default:i(()=>[a(p,null,{default:i(()=>[a(d,{id:`floatingInputValue`,type:`email`,placeholder:`name@example.com`,value:`test@example.com`}),a(f,{for:`floatingInputValue`},{default:i(()=>[...c[3]||=[e(`Input with value`,-1)]]),_:1})]),_:1})]),_:1})]),_:1})]),_:1})]),_:1}),a(_,{xs:12},{default:i(()=>[a(g,{class:`mb-4`},{default:i(()=>[a(u,null,{default:i(()=>[...c[6]||=[t(`strong`,null,`Vue Floating labels`,-1),e(),t(`small`,null,`Textareas`,-1)]]),_:1}),a(h,null,{default:i(()=>[c[9]||=t(`p`,{class:`text-body-secondary small`},[e(` By default, `),t(`code`,null,`<CFormTextarea>`),e(`s will be the same height as `),t(`code`,null,`<CFormInput>`),e(`s. `)],-1),a(m,{href:`forms/floating-labels.html#textareas`},{default:i(()=>[a(p,null,{default:i(()=>[a(v,{id:`floatingTextarea`,placeholder:`Leave a comment here`}),a(f,{for:`floatingTextarea`},{default:i(()=>[...c[7]||=[e(`Comments`,-1)]]),_:1})]),_:1})]),_:1}),c[10]||=t(`p`,{class:`text-body-secondary small`},[e(` To set a custom height on your `),t(`code`,null,`<CFormTextarea;>`),e(`, do not use the `),t(`code`,null,`rows`),e(` attribute. Instead, set an explicit `),t(`code`,null,`height`),e(` (either inline or via custom CSS). `)],-1),a(m,{href:`forms/floating-labels.html#textareas`},{default:i(()=>[a(p,null,{default:i(()=>[a(v,{id:`floatingTextarea2`,placeholder:`Leave a comment here`,style:{height:`100px`}}),a(f,{for:`floatingTextarea2`},{default:i(()=>[...c[8]||=[e(`Comments`,-1)]]),_:1})]),_:1})]),_:1})]),_:1})]),_:1})]),_:1}),a(_,{xs:12},{default:i(()=>[a(g,{class:`mb-4`},{default:i(()=>[a(u,null,{default:i(()=>[...c[11]||=[t(`strong`,null,`Vue Floating labels`,-1),e(),t(`small`,null,`Selects`,-1)]]),_:1}),a(h,null,{default:i(()=>[c[14]||=t(`p`,{class:`text-body-secondary small`},[e(` Other than `),t(`code`,null,`<CFormInput>`),e(`, floating labels are only available on `),t(`code`,null,`<CFormSelect>`),e(`s. They work in the same way, but unlike `),t(`code`,null,`<CFormInput>`),e(`s, they'll always show the `),t(`code`,null,`<CFormLabel>`),e(` in its floated state. `),t(`strong`,null,[e(` Selects with `),t(`code`,null,`size`),e(` and `),t(`code`,null,`multiple`),e(` are not supported. `)])],-1),a(m,{href:`forms/floating-labels.html#selects`},{default:i(()=>[a(p,null,{default:i(()=>[a(y,{id:`floatingSelect`,"aria-label":`Floating label select example`},{default:i(()=>[...c[12]||=[t(`option`,null,`Open this select menu`,-1),t(`option`,{value:`1`},`One`,-1),t(`option`,{value:`2`},`Two`,-1),t(`option`,{value:`3`},`Three`,-1)]]),_:1}),a(f,{for:`floatingSelect`},{default:i(()=>[...c[13]||=[e(`Works with selects`,-1)]]),_:1})]),_:1})]),_:1})]),_:1})]),_:1})]),_:1}),a(_,{xs:12},{default:i(()=>[a(g,{class:`mb-4`},{default:i(()=>[a(u,null,{default:i(()=>[...c[15]||=[t(`strong`,null,`Vue Floating labels`,-1),e(),t(`small`,null,`Layout`,-1)]]),_:1}),a(h,null,{default:i(()=>[c[19]||=t(`p`,{class:`text-body-secondary small`},` When working with the CoreUI for Bootstrap grid system, be sure to place form elements within column classes. `,-1),a(m,{href:`forms/floating-labels.html#layout`},{default:i(()=>[a(b,{xs:{gutter:2}},{default:i(()=>[a(_,{md:``},{default:i(()=>[a(p,null,{default:i(()=>[a(d,{id:`floatingInputGrid`,type:`email`,placeholder:`name@example.com`,value:`email@example.com`}),a(f,{for:`floatingInputGrid`},{default:i(()=>[...c[16]||=[e(`Email address`,-1)]]),_:1})]),_:1})]),_:1}),a(_,{md:``},{default:i(()=>[a(p,null,{default:i(()=>[a(y,{id:`floatingSelectGrid`,"aria-label":`Floating label select example`},{default:i(()=>[...c[17]||=[t(`option`,null,`Open this select menu`,-1),t(`option`,{value:`1`},`One`,-1),t(`option`,{value:`2`},`Two`,-1),t(`option`,{value:`3`},`Three`,-1)]]),_:1}),a(f,{for:`floatingSelectGrid`},{default:i(()=>[...c[18]||=[e(`Works with selects`,-1)]]),_:1})]),_:1})]),_:1})]),_:1})]),_:1})]),_:1})]),_:1})]),_:1})]),_:1})}var u=r(c,[[`render`,l]]);export{u as default};