1"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([[1856],{68375:(e,n,r)=>{r.r(n),r.d(n,{assets:()=>d,contentTitle:()=>o,default:()=>h,frontMatter:()=>i,metadata:()=>t,toc:()=>l});var c=r(85893),s=r(11151);const i={sidebar_position:9,description:"Create a slide where the provided content blocks are displayed in a grid with a checkerboard color pattern.",toc_max_heading_level:2},o="checkerboard",t={id:"reference/components/checkerboard",title:"checkerboard",description:"Create a slide where the provided content blocks are displayed in a grid with a checkerboard color pattern.",source:"@site/docs/reference/components/checkerboard.mdx",sourceDirName:"reference/components",slug:"/reference/components/checkerboard",permalink:"/docs/reference/components/checkerboard",draft:!1,unlisted:!1,tags:[],version:"current",sidebarPosition:9,frontMatter:{sidebar_position:9,description:"Create a slide where the provided content blocks are displayed in a grid with a checkerboard color pattern.",toc_max_heading_level:2},sidebar:"tutorialSidebar",previous:{title:"left-and-right",permalink:"/docs/reference/components/left-and-right"},next:{title:"progressive-outline",permalink:"/docs/reference/components/progressive-outline"}},d={},l=[{value:"columns : <TypeLink></TypeLink> | <TypeLink></TypeLink> | <TypeLink></TypeLink> <Default><code>none</code></Default>",id:"columns",level:3},{value:"rows : <TypeLink></TypeLink> | <TypeLink></TypeLink> | <TypeLink></TypeLink> <Default><code>none</code></Default>",id:"rows",level:3},{value:"alignment : <TypeLink></TypeLink> <Default><code>center + horizon</code></Default>",id:"alignment",level:3},{value:"primary : <TypeLink></TypeLink> <Default><code>white</code></Default>",id:"primary",level:3},{value:"secondary : <TypeLink></TypeLink> <Default><code>silver</code></Default>",id:"secondary",level:3}];function a(e){const n={a:"a",code:"code",h1:"h1",h3:"h3",li:"li",p:"p",strong:"strong",ul:"ul",...(0,s.a)(),...e.components},{Default:r,Param:i,Parameters:o,Signature:t,SignatureName:d,SignatureParam:l,SourceLink:a,TypeLink:h}=n;return r||p("Default",!0),i||p("Param",!0),o||p("Parameters",!0),t||p("Signature",!0),d||p("SignatureName",!0),l||p("SignatureParam",!0),a||p("SourceLink",!0),h||p("TypeLink",!0),(0,c.jsxs)(c.Fragment,{children:[(0,c.jsx)(n.h1,{id:"checkerboard",children:"checkerboard"}),"\n",(0,c.jsx)(t,{children:(0,c.jsxs)("code",{children:[(0,c.jsx)(d,{children:"checkerboard"}),"(",(0,c.jsxs)(l,{children:[(0,c.jsx)(n.a,{href:"#columns",children:"columns: none"}),", "]}),(0,c.jsxs)(l,{children:[(0,c.jsx)(n.a,{href:"#rows",children:"rows: none"}),", "]}),(0,c.jsxs)(l,{children:[(0,c.jsx)(n.a,{href:"#alignment",children:"alignment: center + horizon"}),", "]}),(0,c.jsxs)(l,{children:[(0,c.jsx)(n.a,{href:"#primary",children:"primary: white"}),", "]}),(0,c.jsxs)(l,{children:[(0,c.jsx)(n.a,{href:"#secondary",children:"secondary: silver"}),", "]}),(0,c.jsx)(l,{children:(0,c.jsx)(n.a,{href:"#bodies",children:"..bodies"})}),")",(0,c.jsx)(a,{href:"https://github.com/touying-typ/touying/blob/main/src/components.typ#L387"})]})}),"\n",(0,c.jsx)(n.p,{children:"Create a slide where the provided content blocks are displayed in a grid with a checkerboard color pattern."}),"\n",(0,c.jsxs)(n.p,{children:["You can configure the grid using the ",(0,c.jsx)(n.code,{children:"rows"})," and ",(0,c.jsx)(n.code,{children:"columns"})," keyword arguments (both default to ",(0,c.jsx)(n.code,{children:"none"}),"):"]}),"\n",(0,c.jsxs)(n.ul,{children:["\n",(0,c.jsxs)(n.li,{children:["If ",(0,c.jsx)(n.code,{children:"columns"})," is an integer, create that many columns of width ",(0,c.jsx)(n.code,{children:"1fr"}),"."]}),"\n",(0,c.jsxs)(n.li,{children:["If ",(0,c.jsx)(n.code,{children:"columns"})," is ",(0,c.jsx)(n.code,{children:"none"}),", create as many columns of width ",(0,c.jsx)(n.code,{children:"1fr"})," as there are content blocks."]}),"\n",(0,c.jsxs)(n.li,{children:["Otherwise assume that ",(0,c.jsx)(n.code,{children:"columns"})," is an array of widths already, use that."]}),"\n",(0,c.jsxs)(n.li,{children:["If ",(0,c.jsx)(n.code,{children:"rows"})," is an integer, create that many rows of height ",(0,c.jsx)(n.code,{children:"1fr"}),"."]}),"\n",(0,c.jsxs)(n.li,{children:["If ",(0,c.jsx)(n.code,{children:"rows"})," is ",(0,c.jsx)(n.code,{children:"none"}),", create as many rows of height ",(0,c.jsx)(n.code,{children:"1fr"})," as needed given the number of content blocks and columns."]}),"\n",(0,c.jsxs)(n.li,{children:["Otherwise assume that ",(0,c.jsx)(n.code,{children:"rows"})," is an array of heights already, use that."]}),"\n"]}),"\n",(0,c.jsxs)(n.p,{children:["That means that ",(0,c.jsx)(n.code,{children:"#checkerboard[...][...]"})," stacks horizontally and ",(0,c.jsx)(n.code,{children:"#checkerboard(columns: 1)[...][...]"})," stacks vertically."]}),"\n",(0,c.jsxs)(o,{children:[(0,c.jsxs)(n.h3,{id:"columns",children:["columns : ",(0,c.jsx)(h,{type:"int"})," | ",(0,c.jsx)(h,{type:"array"})," | ",(0,c.jsx)(h,{type:"none"})," ",(0,c.jsx)(r,{children:(0,c.jsx)(n.code,{children:"none"})})]}),(0,c.jsx)(i,{children:(0,c.jsxs)(n.p,{children:["The column specification. Default is ",(0,c.jsx)(n.code,{children:"none"}),"."]})}),(0,c.jsxs)(n.h3,{id:"rows",children:["rows : ",(0,c.jsx)(h,{type:"int"})," | ",(0,c.jsx)(h,{type:"array"})," | ",(0,c.jsx)(h,{type:"none"})," ",(0,c.jsx)(r,{children:(0,c.jsx)(n.code,{children:"none"})})]}),(0,c.jsx)(i,{children:(0,c.jsxs)(n.p,{children:["The row specification. Default is ",(0,c.jsx)(n.code,{children:"none"}),"."]})}),(0,c.jsxs)(n.h3,{id:"alignment",children:["alignment : ",(0,c.jsx)(h,{type:"alignment"})," ",(0,c.jsx)(r,{children:(0,c.jsx)(n.code,{children:"center + horizon"})})]}),(0,c.jsx)(i,{children:(0,c.jsxs)(n.p,{children:["The alignment applied to the contents of each checkerboard cell. Default is ",(0,c.jsx)(n.code,{children:"center + horizon"}),"."]})}),(0,c.jsxs)(n.h3,{id:"primary",children:["primary : ",(0,c.jsx)(h,{type:"color"})," ",(0,c.jsx)(r,{children:(0,c.jsx)(n.code,{children:"white"})})]}),(0,c.jsx)(i,{children:(0,c.jsxs)(n.p,{children:["The background color of odd cells. Default is ",(0,c.jsx)(n.code,{children:"white"}),"."]})}),(0,c.jsxs)(n.h3,{id:"secondary",children:["secondary : ",(0,c.jsx)(h,{type:"color"})," ",(0,c.jsx)(r,{children:(0,c.jsx)(n.code,{children:"silver"})})]}),(0,c.jsx)(i,{children:(0,c.jsxs)(n.p,{children:["The background color of even cells. Default is ",(0,c.jsx)(n.code,{children:"silver"}),"."]})})]}),"\n",(0,c.jsxs)(n.p,{children:[(0,c.jsx)(n.strong,{children:"Returns:"})," ",(0,c.jsx)(h,{type:"content"})]})]})}function h(e={}){const{wrapper:n}={...(0,s.a)(),...e.components};return n?(0,c.jsx)(n,{...e,children:(0,c.jsx)(a,{...e})}):a(e)}function p(e,n){throw new Error("Expected "+(n?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}},11151:(e,n,r)=>{r.d(n,{Z:()=>t,a:()=>o});
1var c=r(67294);const s={},i=c.createContext(s);function o(e){const n=c.useContext(i);return c.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function t(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(s):e.components||s:o(e.components),c.createElement(i.Provider,{value:n},e.children)}}}]);
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.