https://parckdesign.be/static/js/5961.b7c203aa.chunk.js

1"use strict";(self.webpackChunkfrontend=self.webpackChunkfrontend||[]).push([[5961],{31043(e,a,s){s.d(a,{A:()=>c});var n=s(65043),i=s(25852),t=s(13718),r=s(70579);class l extends n.Component{render(){return(0,r.jsx)(i.A,{className:"mb-2",children:(0,r.jsxs)(t.A,{sm:"12",className:"ml-50",children:[(0,r.jsx)("p",{className:"font-medium-5 mt-1 extension-title","data-tour":"extension-title",children:this.props.title}),this.props.link?(0,r.jsx)("a",{href:this.props.link,target:"_blank",rel:"noopener noreferrer",children:this.props.subTitle}):(0,r.jsx)("p",{className:"text-primary",children:this.props.subTitle})]})})}}const c=l},68611(e,a,s){s.d(a,{A:()=>o});var n=s(65043),i=s(63e3),t=s.n(i);function r(){return r=Object.assign||function(e){for(var a=1;a<arguments.length;a++){var s=arguments[a];for(var n in s)Object.prototype.hasOwnProperty.call(s,n)&&(e[n]=s[n])}return e},r.apply(this,arguments)}function l(e,a){if(null==e)return{};var s,n,i=function(e,a){if(null==e)return{};var s,n,i={},t=Object.keys(e);for(n=0;n<t.length;n++)s=t[n],a.indexOf(s)>=0||(i[s]=e[s]);return i}(e,a);if(Object.getOwnPropertySymbols){var t=Object.getOwnPropertySymbols(e);for(n=0;n<t.length;n++)s=t[n],a.indexOf(s)>=0||Object.prototype.propertyIsEnumerable.call(e,s)&&(i[s]=e[s])}return i}var c=(0,n.forwardRef)(function(e,a){var s=e.color,i=void 0===s?"currentColor":s,t=e.size,c=void 0===t?24:t,o=l(e,["color","size"]);return n.createElement("svg",r({ref:a,xmlns:"http://www.w3.org/2000/svg",width:c,height:c,viewBox:"0 0 24 24",fill:"none",stroke:i,strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"},o),n.createElement("polyline",{points:"9 18 15 12 9 6"}))});c.propTypes={color:t().string,size:t().oneOfType([t().string,t().number])},c.displayName="ChevronRight";const o=c},82096(){},95961(e,a,s){s.r(a),s.d(a,{default:()=>B});

1var n=s(65043),i=s(31043),t=s(25852),r=s(13718),l=s(75304),c=s(38477),o=s(45056),x=s(44864),p=s(66784),d=s(70579);class g extends n.Component{render(){return(0,d.jsxs)(l.A,{children:[(0,d.jsx)(c.A,{children:(0,d.jsx)(o.A,{children:"Basic"})}),(0,d.jsxs)(x.A,{children:[(0,d.jsxs)("p",{children:["Use classes ",(0,d.jsx)("code",{children:".vx-pagination.basic-pagination"})," to create a basic pagination."]}),(0,d.jsx)(p.A,{previousLabel:"previous",nextLabel:"next",breakLabel:"...",breakClassName:"break-me",pageCount:10,marginPagesDisplayed:2,pageRangeDisplayed:5,containerClassName:"vx-pagination basic-pagination pagination-center mt-3",activeClassName:"active"})]})]})}}const m=g;var j=s(90496),h=s(68611);class A extends n.Component{render(){return(0,d.jsxs)(l.A,{children:[(0,d.jsx)(c.A,{children:(0,d.jsx)(o.A,{children:"Seprated"})}),(0,d.jsxs)(x.A,{children:[(0,d.jsxs)("p",{children:["Use classes ",(0,d.jsx)("code",{children:".vx-pagination.separated-pagination"})," to create a separated pagination."]}),(0,d.jsx)(p.A,{previousLabel:(0,d.jsx)(j.A,{size:"15"}),nextLabel:(0,d.jsx)(h.A,{size:"15"}),breakLabel:"...",breakClassName:"break-me",pageCount:10,marginPagesDisplayed:2,pageRangeDisplayed:5,containerClassName:"vx-pagination separated-pagination pagination-center mt-3",activeClassName:"active"})]})]})}}const b=A;var v=s(60917),u=s(40052);const C=()=>(0,d.jsxs)(n.Fragment,{children:[(0,d.jsx)(v.A,{size:15})," ","",(0,d.jsx)("span",{className:"align-middle d-none d-md-inline-block",children:"Prev"})]}),k=()=>(0,d.jsxs)(n.Fragment,{children:[(0,d.jsx)("span",{className:"align-middle d-none d-md-inline-block",children:"Next "}),(0,d.jsx)(u.A,{size:15})]});class N extends n.Component{render(){return(0,d.jsxs)(l.A,{children:[(0,d.jsx)(c.A,{children:(0,d.jsx)(o.A,{children:"With icon and text"})}),(0,d.jsxs)(x.A,{children:[(0,d.jsxs)("p",{children:["Use classes ",(0,d.jsx)("code",{children:".vx-pagination.icon-text-pagination"})," to create a pagination with icon and text."]}),(0,d.jsx)(p.A,{previousLabel:(0,d.jsx)(C,{}),nextLabel:(0,d.jsx)(k,{}),breakLabel:"...",breakClassName:"break-me",pageCount:10,marginPagesDisplayed:2,pageRangeDisplayed:5,containerClassName:"vx-pagination icon-text-pagination pagination-center mt-3",activeClassName:"active"})]})]})}}const y=N;class L extends n.Component{render(){return(0,d.jsxs)(l.A,{children:[(0,d.jsx)(c.A,{children:(0,d.jsx)(o.A,{children:"Icon Only"})}),(0,d.jsxs)(x.A,{children:[(0,d.jsxs)("p",{children:["Use classes ",(0,d.jsx)("code",{children:".vx-pagination.icon-pagination"})," to create a pagination with only icon."]}),(0,d.jsx)(p.A,{previousLabel:(0,d.jsx)(j.A,{size:15}),nextLabel:(0,d.jsx)(h.A,{size:15}),breakLabel:"...",breakClassName:"break-me",pageCount:10,marginPagesDisplayed:2,pageRangeDisplayed:5,containerClassName:"vx-pagination icon-pagination pagination-center mt-3",activeClassName:"active"})]})]})}}const f=L;class z extends n.Component{render(){return(0,d.jsxs)(l.A,{children:[(0,d.jsx)(c.A,{children:(0,d.jsx)(o.A,{children:"Success"})}),(0,d.jsxs)(x.A,{children:[(0,d.jsxs)("p",{children:["Use classes ",(0,d.jsx)("code",{children:".vx-pagination.pagination-success"}),"."]}),(0,d.jsx)(p.A,{previousLabel:(0,d.jsx)(j.A,{size:15}),nextLabel:(0,d.jsx)(h.A,{size:15}),breakLabel:"...",breakClassName:"break-me",pageCount:10,marginPagesDisplayed:2,pageRangeDisplayed:5,containerClassName:"vx-pagination icon-pagination pagination-success pagination-center mt-3",activeClassName:"active"})]})]})}}const D=z;class P extends n.Component{render(){return(0,d.jsxs)(l.A,{children:[(0,d.jsx)(c.A,{children:(0,d.jsx)(o.A,{children:"Danger"})}),(0,d.jsxs)(x.A,{children:[(0,d.jsxs)("p",{children:["Use classes ",(0,d.jsx)("code",{children:".vx-pagination.pagination-danger"}),"."]}),(0,d.jsx)(p.A,{previousLabel:(0,d.jsx)(j.A,{size:15}),nextLabel:(0,d.jsx)(h.A,{size:15}),breakLabel:"...",breakClassName:"break-me",pageCount:10,marginPagesDisplayed:2,pageRangeDisplayed:5,containerClassName:"vx-pagination icon-pagination pagination-danger pagination-center mt-3",activeClassName:"active"})]})]})}}const R=P;class w extends n.Component{render(){return(0,d.jsxs)(l.A,{children:[(0,d.jsx)(c.A,{children:(0,d.jsx)(o.A,{children:"Info"})}),(0,d.jsxs)(x.A,{children:[(0,d.jsxs)("p",{children:["Use classes ",(0,d.jsx)("code",{children:".vx-pagination.pagination-info"}),"."]}),(0,d.jsx)(p.A,{previousLabel:(0,d.jsx)(j.A,{size:15}),nextLabel:(0,d.jsx)(h.A,{size:15}),breakLabel:"...",breakClassName:"break-me",pageCount:10,marginPagesDisplayed:2,pageRangeDisplayed:5,containerClassName:"vx-pagination icon-pagination pagination-info pagination-center mt-3",activeClassName:"active"})]})]})}}const O=w;class U extends n.Component{render(){return(0,d.jsxs)(l.A,{children:[(0,d.jsx)(c.A,{children:(0,d.jsx)(o.A,{children:"Warning"})}),(0,d.jsxs)(x.A,{children:[(0,d.jsxs)("p",{children:["Use classes ",(0,d.jsx)("code",{children:".vx-pagination.pagination-warning"}),"."]}),(0,d.jsx)(p.A,{previousLabel:(0,d.jsx)(j.A,{size:15}),nextLabel:(0,d.jsx)(h.A,{size:15}),breakLabel:"...",breakClassName:"break-me",pageCount:10,marginPagesDisplayed:2,pageRangeDisplayed:5,containerClassName:"vx-pagination icon-pagination pagination-warning pagination-center mt-3",activeClassName:"active"})]})]})}}const S=U;class T extends n.Component{render(){return(0,d.jsxs)(l.A,{children:[(0,d.jsx)(c.A,{children:(0,d.jsx)(o.A,{children:"Positions"})}),(0,d.jsxs)(x.A,{children:[(0,d.jsxs)("p",{children:["Use classes"," ",(0,d.jsx)("code",{children:".vx-pagination.pagination-[start|center|end]"})," to position your pagination."]}),(0,d.jsxs)(t.A,{children:[(0,d.jsxs)(r.A,{xl:"4",md:"12",children:[(0,d.jsx)("h5",{className:"text-left",children:"Left Aligned"}),(0,d.jsx)(p.A,{previousLabel:(0,d.jsx)(j.A,{size:15}),nextLabel:(0,d.jsx)(h.A,{size:15}),breakLabel:"...",breakClassName:"break-me",pageCount:5,marginPagesDisplayed:5,pageRangeDisplayed:0,containerClassName:"vx-pagination icon-pagination pagination-start mt-2",activeClassName:"active"})]}),(0,d.jsxs)(r.A,{xl:"4",md:"12",children:[(0,d.jsx)("h5",{className:"text-center",children:"Center Aligned"}),(0,d.jsx)(p.A,{previousLabel:(0,d.jsx)(j.A,{size:15}),nextLabel:(0,d.jsx)(h.A,{size:15}),breakLabel:"...",breakClassName:"break-me",pageCount:5,marginPagesDisplayed:5,pageRangeDisplayed:0,containerClassName:"vx-pagination icon-pagination pagination-center mt-2",activeClassName:"active"})]}),(0,d.jsxs)(r.A,{xl:"4",md:"12",children:[(0,d.jsx)("h5",{className:"text-right",children:"Right Aligned"}),(0,d.jsx)(p.A,{previousLabel:(0,d.jsx)(j.A,{size:15}),nextLabel:(0,d.jsx)(h.A,{size:15}),breakLabel:"...",breakClassName:"break-me",pageCount:5,marginPagesDisplayed:5,pageRangeDisplayed:0,containerClassName:"vx-pagination icon-pagination pagination-end mt-2",activeClassName:"active"})]})]})]})]})}}const E=T;class F extends n.Component{render(){return(0,d.jsxs)(l.A,{children:[(0,d.jsx)(c.A,{children:(0,d.jsx)(o.A,{children:"Sizes"})}),(0,d.jsxs)(x.A,{children:[(0,d.jsxs)("p",{children:["Use classes ",(0,d.jsx)("code",{children:".vx-pagination.pagination-[lg|sm]"})," to change size of your pagination."]}),(0,d.jsxs)(t.A,{children:[(0,d.jsx)(r.A,{lg:"4",sm:"12",children:(0,d.jsx)(p.A,{previousLabel:(0,d.jsx)(j.A,{size:15}),nextLabel:(0,d.jsx)(h.A,{size:15}),breakLabel:"...",breakClassName:"break-me",pageCount:5,marginPagesDisplayed:5,pageRangeDisplayed:0,containerClassName:"vx-pagination icon-pagination pagination-lg mt-2",activeClassName:"active"})}),(0,d.jsx)(r.A,{lg:"4",sm:"12",children:(0,d.jsx)(p.A,{previousLabel:(0,d.jsx)(j.A,{size:15}),nextLabel:(0,d.jsx)(h.A,{size:15}),breakLabel:"...",breakClassName:"break-me",pageCount:5,marginPagesDisplayed:5,pageRangeDisplayed:0,containerClassName:"vx-pagination icon-pagination mt-2",activeClassName:"active"})}),(0,d.jsx)(r.A,{lg:"4",sm:"12",children:(0,d.jsx)(p.A,{previousLabel:(0,d.jsx)(j.A,{size:15}),nextLabel:(0,d.jsx)(h.A,{size:15}),breakLabel:"...",breakClassName:"break-me",pageCount:5,marginPagesDisplayed:5,pageRangeDisplayed:0,containerClassName:"vx-pagination icon-pagination pagination-sm mt-2",activeClassName:"active"})})]})]})]})}}const I=F;s(82096);class W extends n.Component{render(){return(0,d.jsxs)(n.Fragment,{children:[(0,d.jsx)(i.A,{title:"React Paginate",subTitle:"A ReactJS component that creates a pagination",link:"https://github.com/AdeleD/react-paginate"}),(0,d.jsxs)(t.A,{children:[(0,d.jsx)(r.A,{lg:"6",md:"12",sm:"12",children:(0,d.jsx)(m,{})}),(0,d.jsx)(r.A,{lg:"6",md:"12",sm:"12",children:(0,d.jsx)(b,{})}),(0,d.jsx)(r.A,{lg:"6",md:"12",sm:"12",children:(0,d.jsx)(y,{})}),(0,d.jsx)(r.A,{lg:"6",md:"12",sm:"12",children:(0,d.jsx)(f,{})}),(0,d.jsx)(r.A,{lg:"6",md:"12",sm:"12",children:(0,d.jsx)(D,{})}),(0,d.jsx)(r.A,{lg:"6",md:"12",sm:"12",children:(0,d.jsx)(R,{})}),(0,d.jsx)(r.A,{lg:"6",md:"12",sm:"12",children:(0,d.jsx)(O,{})}),(0,d.jsx)(r.A,{lg:"6",md:"12",sm:"12",children:(0,d.jsx)(S,{})}),(0,d.jsx)(r.A,{sm:"12",children:(0,d.jsx)(E,{})}),(0,d.jsx)(r.A,{sm:"12",children:(0,d.jsx)(I,{})})]})]})}}const B=W}}]);
2//# sourceMappingURL=5961.b7c203aa.chunk.js.map