2a:null 2b:["$","title",null,{"children":"Stacks | Roman Samec | Observable"}] 30:[] 2e:{"id":"43928f95cdc84e8e","slug":"stacks","title":"Stacks","thumbnail":"ed88effd06052a7adce11c3d1a447282007718ca4101d28e3abd007002dade6b","access_level":"public","create_time":"$D2020-12-06T15:06:37.245Z","update_time":"$D2022-12-28T12:42:01.961Z","view_time":null,"first_public_time":"$D2021-04-19T06:12:14.132Z","fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"4e8eb6188a86a7df","login":"rsamec","name":"Roman Samec","avatar_url":"https://avatars-next.observableusercontent.com/4c48f0f4408a68e6e003e589591b7f0d1f94bed68ac1bb60eb91b7e498198ae5","tier":"starter_2024"},"version":1927,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"29741195570dd799","login":"rsamec","name":"Roman Samec","avatar_url":"https://avatars-next.observableusercontent.com/4c48f0f4408a68e6e003e589591b7f0d1f94bed68ac1bb60eb91b7e498198ae5","tier":null}],"members":[{"type":"individual","id":"29741195570dd799","login":"rsamec","name":"Roman Samec","avatar_url":"https://avatars-next.observableusercontent.com/4c48f0f4408a68e6e003e589591b7f0d1f94bed68ac1bb60eb91b7e498198ae5","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":2,"collection":null,"type":"notebook","body":{"title":"Stacks","cells":[{"id":0,"value":"md`# Stacks\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":535,"value":"md`## Stack properties`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":512,"value":"viewof selectedGap = Select([\"none\"].concat(gapSizes), {\n label: \"Gap sizes\",\n default: \"large\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":502,"value":"viewof selectedHorizontalAlignment = Select(horizontalAlignment, {label:\"Horizontal alignment\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":499,"value":"viewof selectedVerticalAlignment = Select(verticalAlignment, {label:\"Vertical alignment\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":459,"value":"md`## Vertical stack\nIt appends class with styles that stacks children in vertical direction.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":578,"value":"html`

${[...new Array(3)].map((c,i) => box({text:i,width:i % 2 === 0 ? 20 : 60, height:20}))}

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":440,"value":"md`## Horizontal stack\nIt appends class with styles that stacks children in horizontal direction`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":697,"value":"md`#### Horizonta wrappable stack-\nIt appends class with styles that stacks children in horizontal direction until there is enough space for children, then it wraps to a new row.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":567,"value":"html`

${[...new Array(26)].map((c,i) => box({text:i,height:i % 2 === 0 ?20:60, width:20}))}

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":715,"value":"html`

${[...new Array(50)].map((c,i) => box({text:i,height:i % 2 === 0 ?20:60, width:20}))}

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1786,"value":"## Layers stack","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1800,"value":"html`

${[...new Array(5)].map((c,i, a) => box({text:i,textAlign:'right',width:(a.length - i) * 30, height:(a.length - i) * 30, opacity: 0.3 + (1 - 0.3)/(a.length) * i}))}

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":462,"value":"box = ({text,width,height,opacity=1, textAlign='center'}) => html.fragment`

${text}

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":658,"value":"md`### Stack properties`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":484,"value":"gapSizes = ['large','medium','small','x-small','xx-small','xxx-small']","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":482,"value":"verticalAlignment = ['top','center','bottom']","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":479,"value":"horizontalAlignment = ['left','center','right']","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":660,"value":"md`### Stack components`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":51,"value":"horizontalStack = (params) => {\n const horizontalGap = convertGap(params?.horizontalGap ?? params?.gap);\n const verticalGap = convertGap(params?.verticalGap ?? params?.gap);\n return css`\n display:flex;\n flex-direction:row;\n min-width:0;\n flex-wrap: ${params.wrap ? \"wrap\" : \"nowrap\"};\n gap:${convertGap(params?.gap)}px;\n ${rowAlign(params ?? {})}`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":72,"value":"verticalStack = (params) => css`\ndisplay:flex;\nflex-wrap: nowrap;\nflex-direction:column;\ngap:${convertGap(params?.gap)}px;\n${columnAlign(params ?? {})}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1778,"value":"layersStack = (params) => css`\ndisplay:grid;\n${` \n > * {\n grid-row: 1;\n grid-column: 1;\n }`}\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":663,"value":"md`### Style utilities`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":318,"value":"rowAlign = ({align, alignItems}) => {\n const styles = {\n ...(align === 'center' && {'justify-content':'center'}),\n ...(align === 'right' && {'justify-content':'flex-end'}),\n ...(alignItems === 'top' && {'align-items':'flex-start'}),\n ...(alignItems === 'center' && {'align-items':'center'}),\n ...(alignItems === 'bottom' && {'align-items':'flex-end'})\n }\n return convertStyles(styles)\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":321,"value":"columnAlign = ({align, alignItems}) => {\n const styles = {\n ...(align === 'center' && {'justify-content':'center'}),\n ...(align === 'bottom' && {'justify-content':'flex-end'}),\n ...(alignItems === 'left' && {'align-items':'flex-start'}),\n ...(alignItems === 'center' && {'align-items':'center'}),\n ...(alignItems === 'right' && {'align-items':'flex-end'})\n }\n return convertStyles(styles)\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":424,"value":"convertStyles = (styles) => Object.keys(styles).map(key => `${key}: ${styles[key]};`)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":323,"value":"convertGap = value => {\n if (value === undefined) return 0;\n return value != null && !isNaN(Number(value)) ? value : sizes[value] ?? 0\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":328,"value":"sizes = ({\n large: 40,\n medium:20,\n small: 10,\n 'x-small': 5,\n 'xx-small': 3,\n 'xxx-small': 1,\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":30,"value":"css = emotionCssCreateInstance({ key: \"stacks\" }).css","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":22,"value":"css`color:red`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":667,"value":"md`### External components`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":673,"value":"emotionCssCreateInstance = require('@emotion/css@11.0.0/create-instance/dist/emotion-css-create-instance.umd.min.js')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":490,"value":"import {Select} from \"@observablehq/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":959,"value":"import {html, svg} from \"@observablehq/htl\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W30","stdlib":"1","titling":"auto"}} 2f:"$2e:body"