Files
manja_ui_dev/dist/assets/Paginations-ClOfyilo.js
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
all data hide
2026-06-25 09:44:52 +07:00

1 line
7.0 KiB
JavaScript

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(`CPaginationItem`),f=o(`CPagination`),p=o(`DocsExample`),m=o(`CCardBody`),h=o(`CCard`),g=o(`CCol`),_=o(`CRow`);return s(),n(_,null,{default:i(()=>[a(g,{xs:12},{default:i(()=>[a(l,{href:`components/pagination.html`}),a(h,{class:`mb-4`},{default:i(()=>[a(u,null,{default:i(()=>[...c[0]||=[t(`strong`,null,`Vue Pagination`,-1)]]),_:1}),a(m,null,{default:i(()=>[c[6]||=t(`p`,{class:`text-body-secondary small`},[e(` We use a large block of connected links for our pagination, making links hard to miss and easily scalable—all while providing large hit areas. Pagination is built with list HTML elements so screen readers can announce the number of available links. Use a wrapping `),t(`code`,null,`<nav>`),e(` element to identify it as a navigation section to screen readers and other assistive technologies. `)],-1),c[7]||=t(`p`,{class:`text-body-secondary small`},[e(` In addition, as pages likely have more than one such navigation section, it's advisable to provide a descriptive `),t(`code`,null,`aria-label`),e(` for the `),t(`code`,null,`<nav>`),e(` to reflect its purpose. For example, if the pagination component is used to navigate between a set of search results, an appropriate label could be `),t(`code`,null,`aria-label="Search results pages"`),e(`. `)],-1),a(p,{href:`components/pagination.html`},{default:i(()=>[a(f,{"aria-label":`Page navigation example`},{default:i(()=>[a(d,null,{default:i(()=>[...c[1]||=[e(`Previous`,-1)]]),_:1}),a(d,null,{default:i(()=>[...c[2]||=[e(`1`,-1)]]),_:1}),a(d,null,{default:i(()=>[...c[3]||=[e(`2`,-1)]]),_:1}),a(d,null,{default:i(()=>[...c[4]||=[e(`3`,-1)]]),_:1}),a(d,null,{default:i(()=>[...c[5]||=[e(`Next`,-1)]]),_:1})]),_:1})]),_:1})]),_:1})]),_:1})]),_:1}),a(g,{xs:12},{default:i(()=>[a(h,{class:`mb-4`},{default:i(()=>[a(u,null,{default:i(()=>[...c[8]||=[t(`strong`,null,`Vue Pagination`,-1),e(),t(`small`,null,`Working with icons`,-1)]]),_:1}),a(m,null,{default:i(()=>[c[14]||=t(`p`,{class:`text-body-secondary small`},[e(` Looking to use an icon or symbol in place of text for some pagination links? Be sure to provide proper screen reader support with `),t(`code`,null,`aria`),e(` attributes. `)],-1),a(p,{href:`components/pagination.html#working-with-icons`},{default:i(()=>[a(f,{"aria-label":`Page navigation example`},{default:i(()=>[a(d,{"aria-label":`Previous`},{default:i(()=>[...c[9]||=[t(`span`,{"aria-hidden":`true`},`«`,-1)]]),_:1}),a(d,null,{default:i(()=>[...c[10]||=[e(`1`,-1)]]),_:1}),a(d,null,{default:i(()=>[...c[11]||=[e(`2`,-1)]]),_:1}),a(d,null,{default:i(()=>[...c[12]||=[e(`3`,-1)]]),_:1}),a(d,{"aria-label":`Next`},{default:i(()=>[...c[13]||=[t(`span`,{"aria-hidden":`true`},`»`,-1)]]),_:1})]),_:1})]),_:1})]),_:1})]),_:1})]),_:1}),a(g,{xs:12},{default:i(()=>[a(h,{class:`mb-4`},{default:i(()=>[a(u,null,{default:i(()=>[...c[15]||=[t(`strong`,null,`Vue Pagination`,-1),t(`small`,null,`Disabled and active states`,-1)]]),_:1}),a(m,null,{default:i(()=>[c[21]||=t(`p`,{class:`text-body-secondary small`},[e(` Pagination links are customizable for different circumstances. Use `),t(`code`,null,`disabled`),e(` for links that appear un-clickable and `),t(`code`,null,`.active`),e(` to indicate the current page. `)],-1),c[22]||=t(`p`,{class:`text-body-secondary small`},[e(` While the `),t(`code`,null,`disabled`),e(` prop uses `),t(`code`,null,`pointer-events: none`),e(` to `),t(`em`,null,`try`),e(` to disable the link functionality of `),t(`code`,null,`<a>`),e(`s, that CSS property is not yet standardized and doesn'taccount for keyboard navigation. As such, we always add `),t(`code`,null,`tabindex="-1"`),e(` on disabled links and use custom JavaScript to fully disable their functionality. `)],-1),a(p,{href:`components/pagination.html#disabled-and-active-states`},{default:i(()=>[a(f,{"aria-label":`Page navigation example`},{default:i(()=>[a(d,{"aria-label":`Previous`,disabled:``},{default:i(()=>[...c[16]||=[t(`span`,{"aria-hidden":`true`},`«`,-1)]]),_:1}),a(d,{active:``},{default:i(()=>[...c[17]||=[e(`1`,-1)]]),_:1}),a(d,null,{default:i(()=>[...c[18]||=[e(`2`,-1)]]),_:1}),a(d,null,{default:i(()=>[...c[19]||=[e(`3`,-1)]]),_:1}),a(d,{"aria-label":`Next`},{default:i(()=>[...c[20]||=[t(`span`,{"aria-hidden":`true`},`»`,-1)]]),_:1})]),_:1})]),_:1})]),_:1})]),_:1})]),_:1}),a(g,{xs:12},{default:i(()=>[a(h,{class:`mb-4`},{default:i(()=>[a(u,null,{default:i(()=>[...c[23]||=[t(`strong`,null,`Vue Pagination`,-1),e(),t(`small`,null,`Sizing`,-1)]]),_:1}),a(m,null,{default:i(()=>[c[34]||=t(`p`,{class:`text-body-secondary small`},[e(` Fancy larger or smaller pagination? Add `),t(`code`,null,`size="lg"`),e(` or `),t(`code`,null,`size="sm"`),e(` for additional sizes. `)],-1),a(p,{href:`components/pagination.html#sizing`},{default:i(()=>[a(f,{size:`lg`,"aria-label":`Page navigation example`},{default:i(()=>[a(d,null,{default:i(()=>[...c[24]||=[e(`Previous`,-1)]]),_:1}),a(d,null,{default:i(()=>[...c[25]||=[e(`1`,-1)]]),_:1}),a(d,null,{default:i(()=>[...c[26]||=[e(`2`,-1)]]),_:1}),a(d,null,{default:i(()=>[...c[27]||=[e(`3`,-1)]]),_:1}),a(d,null,{default:i(()=>[...c[28]||=[e(`Next`,-1)]]),_:1})]),_:1})]),_:1}),a(p,{href:`components/pagination.html#sizing`},{default:i(()=>[a(f,{size:`sm`,"aria-label":`Page navigation example`},{default:i(()=>[a(d,null,{default:i(()=>[...c[29]||=[e(`Previous`,-1)]]),_:1}),a(d,null,{default:i(()=>[...c[30]||=[e(`1`,-1)]]),_:1}),a(d,null,{default:i(()=>[...c[31]||=[e(`2`,-1)]]),_:1}),a(d,null,{default:i(()=>[...c[32]||=[e(`3`,-1)]]),_:1}),a(d,null,{default:i(()=>[...c[33]||=[e(`Next`,-1)]]),_:1})]),_:1})]),_:1})]),_:1})]),_:1})]),_:1}),a(g,{xs:12},{default:i(()=>[a(h,{class:`mb-4`},{default:i(()=>[a(u,null,{default:i(()=>[...c[35]||=[t(`strong`,null,`Vue Pagination`,-1),e(),t(`small`,null,`Alignment`,-1)]]),_:1}),a(m,null,{default:i(()=>[c[46]||=t(`p`,{class:`text-body-secondary small`},[e(` Change the alignment of pagination components with `),t(`a`,{href:`https://coreui.io/docs/utilities/flex/`},`flexbox utilities`),e(`. `)],-1),a(p,{href:`components/pagination.html#aligment`},{default:i(()=>[a(f,{class:`justify-content-center`,"aria-label":`Page navigation example`},{default:i(()=>[a(d,{disabled:``},{default:i(()=>[...c[36]||=[e(`Previous`,-1)]]),_:1}),a(d,null,{default:i(()=>[...c[37]||=[e(`1`,-1)]]),_:1}),a(d,null,{default:i(()=>[...c[38]||=[e(`2`,-1)]]),_:1}),a(d,null,{default:i(()=>[...c[39]||=[e(`3`,-1)]]),_:1}),a(d,null,{default:i(()=>[...c[40]||=[e(`Next`,-1)]]),_:1})]),_:1})]),_:1}),a(p,{href:`components/pagination.html#aligment`},{default:i(()=>[a(f,{class:`justify-content-end`,"aria-label":`Page navigation example`},{default:i(()=>[a(d,{disabled:``},{default:i(()=>[...c[41]||=[e(`Previous`,-1)]]),_:1}),a(d,null,{default:i(()=>[...c[42]||=[e(`1`,-1)]]),_:1}),a(d,null,{default:i(()=>[...c[43]||=[e(`2`,-1)]]),_:1}),a(d,null,{default:i(()=>[...c[44]||=[e(`3`,-1)]]),_:1}),a(d,null,{default:i(()=>[...c[45]||=[e(`Next`,-1)]]),_:1})]),_:1})]),_:1})]),_:1})]),_:1})]),_:1})]),_:1})}var u=r(c,[[`render`,l]]);export{u as default};