You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1 line
6.8 KiB
JavaScript
1 line
6.8 KiB
JavaScript
"use strict";(globalThis.webpackChunkshuffle_docs=globalThis.webpackChunkshuffle_docs||[]).push([[162],{876:(e,t,n)=>{n.d(t,{Zo:()=>p,kt:()=>f});var r=n(2784);function i(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function a(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function o(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?a(Object(n),!0).forEach((function(t){i(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):a(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function l(e,t){if(null==e)return{};var n,r,i=function(e,t){if(null==e)return{};var n,r,i={},a=Object.keys(e);for(r=0;r<a.length;r++)n=a[r],t.indexOf(n)>=0||(i[n]=e[n]);return i}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r<a.length;r++)n=a[r],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(i[n]=e[n])}return i}var s=r.createContext({}),c=function(e){var t=r.useContext(s),n=t;return e&&(n="function"==typeof e?e(t):o(o({},t),e)),n},p=function(e){var t=c(e.components);return r.createElement(s.Provider,{value:t},e.children)},u={inlineCode:"code",wrapper:function(e){var t=e.children;return r.createElement(r.Fragment,{},t)}},d=r.forwardRef((function(e,t){var n=e.components,i=e.mdxType,a=e.originalType,s=e.parentName,p=l(e,["components","mdxType","originalType","parentName"]),d=c(n),f=i,g=d["".concat(s,".").concat(f)]||d[f]||u[f]||a;return n?r.createElement(g,o(o({ref:t},p),{},{components:n})):r.createElement(g,o({ref:t},p))}));function f(e,t){var n=arguments,i=t&&t.mdxType;if("string"==typeof e||i){var a=n.length,o=new Array(a);o[0]=d;var l={};for(var s in t)hasOwnProperty.call(t,s)&&(l[s]=t[s]);l.originalType=e,l.mdxType="string"==typeof e?e:i,o[1]=l;for(var c=2;c<a;c++)o[c]=n[c];return r.createElement.apply(null,o)}return r.createElement.apply(null,n)}d.displayName="MDXCreateElement"},7380:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>s,contentTitle:()=>o,default:()=>u,frontMatter:()=>a,metadata:()=>l,toc:()=>c});var r=n(8427),i=(n(2784),n(876));const a={sidebar_position:2},o="Getting started",l={unversionedId:"getting-started",id:"getting-started",title:"Getting started",description:"HTML markup",source:"@site/docs/getting-started.md",sourceDirName:".",slug:"/getting-started",permalink:"/Shuffle/docs/getting-started",draft:!1,editUrl:"https://github.com/Vestride/Shuffle/tree/main/apps/website/docs/docs/getting-started.md",tags:[],version:"current",sidebarPosition:2,frontMatter:{sidebar_position:2},sidebar:"tutorialSidebar",previous:{title:"Installation",permalink:"/Shuffle/docs/install"},next:{title:"How column widths work",permalink:"/Shuffle/docs/column-widths"}},s={},c=[{value:"HTML markup",id:"html-markup",level:2},{value:"JavaScript",id:"javascript",level:2}],p={toc:c};function u(e){let{components:t,...n}=e;return(0,i.kt)("wrapper",(0,r.Z)({},p,n,{components:t,mdxType:"MDXLayout"}),(0,i.kt)("h1",{id:"getting-started"},"Getting started"),(0,i.kt)("h2",{id:"html-markup"},"HTML markup"),(0,i.kt)("p",null,"Shuffle operates on a group of items, giving you the ability to filter or sort them."),(0,i.kt)("pre",null,(0,i.kt)("code",{parentName:"pre",className:"language-html"},'<div id="photo-gallery">\n <div class="picture-item">\u2026</div>\n <div class="picture-item">\u2026</div>\n <div class="picture-item">\u2026</div>\n <div class="picture-item">\u2026</div>\n</div>\n')),(0,i.kt)("p",null,"The easiest way to use Shuffle is to add a ",(0,i.kt)("inlineCode",{parentName:"p"},"data-groups")," attribute to each of the items in your grid as a ",(0,i.kt)("a",{parentName:"p",href:"http://jsonlint.com/"},"valid JSON")," array of strings."),(0,i.kt)("pre",null,(0,i.kt)("code",{parentName:"pre",className:"language-html"},'\x3c!-- highlight-next-line --\x3e\n<figure class="picture-item" data-groups=\'["nature","city"]\'>\n <img src="central-park.jpg" alt="Aerial view of Central Park" />\n <figcaption>Looking down on central park and the surrounding builds from the Rockefellar Center</figcaption>\n</figure>\n')),(0,i.kt)("p",null,"Alternatively, you can set the ",(0,i.kt)("inlineCode",{parentName:"p"},"delimiter")," option to a comma (",(0,i.kt)("inlineCode",{parentName:"p"},"delimiter: ','"),") and the ",(0,i.kt)("inlineCode",{parentName:"p"},"data-groups")," attribute will be ",(0,i.kt)("inlineCode",{parentName:"p"},"split")," on that character."),(0,i.kt)("pre",null,(0,i.kt)("code",{parentName:"pre",className:"language-html"},'\x3c!-- highlight-next-line --\x3e\n<figure class="picture-item" data-groups="nature,city">\n <img src="central-park.jpg" alt="Aerial view of Central Park" />\n <figcaption>Looking down on central park and the surrounding builds from the Rockefellar Center</figcaption>\n</figure>\n')),(0,i.kt)("p",null,"If you were using Bootstrap v4 grids, you could use the ",(0,i.kt)("inlineCode",{parentName:"p"},"col-*")," classes like this."),(0,i.kt)("pre",null,(0,i.kt)("code",{parentName:"pre",className:"language-html"},'<div class="row" id="photo-gallery">\n <figure class="col-3 picture-item" data-groups=\'["animal"]\'>\n <div class="aspect">\n <img src="crocodile.jpg" alt="A close, profile view of a crocodile looking directly into the camera" />\n </div>\n <figcaption>Crocodile</figcaption>\n </figure>\n <figure class="col-3 picture-item" data-groups=\'["city"]\'>\n <div class="aspect">\n <img src="crossroads.jpg" alt="A multi-level highway stack interchange in Puxi, Shanghai" />\n </div>\n <figcaption>Crossroads</figcaption>\n </figure>\n <figure class="col-3 picture-item" data-groups=\'["nature","city"]\'>\n <div class="aspect">\n <img\n src="central-park.jpg"\n alt="Looking down on central park and the surrounding builds from the Rockefellar Center"\n />\n </div>\n <figcaption>Central Park</figcaption>\n </figure>\n <div class="col-1 js-shuffle-sizer"></div>\n</div>\n')),(0,i.kt)("h2",{id:"javascript"},"JavaScript"),(0,i.kt)("p",null,"Once the markup is ready, initialize Shuffle by giving it the container element and an optional options object."),(0,i.kt)("pre",null,(0,i.kt)("code",{parentName:"pre",className:"language-js"},"const Shuffle = window.Shuffle; // Assumes you're using the UMD version of Shuffle (for example, from unpkg.com).\nconst element = document.getElementById('photo-gallery');\nconst sizer = element.querySelector('.js-shuffle-sizer');\n\nconst shuffleInstance = new Shuffle(element, {\n itemSelector: '.picture-item',\n sizer: sizer, // could also be a selector: '.js-shuffle-sizer'\n});\n")))}u.isMDXComponent=!0}}]); |