@salesforce-ux/design-system/__internal/chunked/showcase/ui/utilities/grid/example.jsx.js

Salesforce Lightning Design System

var SLDS=SLDS||{};SLDS["__internal/chunked/showcase/ui/utilities/grid/example.jsx.js"]=function(e){function l(l){for(var a,d,n=l[0],r=l[1],o=l[2],m=0,u=[];m<n.length;m++)d=n[m],s[d]&&u.push(s[d][0]),s[d]=0;for(a in r)Object.prototype.hasOwnProperty.call(r,a)&&(e[a]=r[a]);for(c&&c(l);u.length;)u.shift()();return i.push.apply(i,o||[]),t()}function t(){for(var e,l=0;l<i.length;l++){for(var t=i[l],a=!0,n=1;n<t.length;n++){var r=t[n];0!==s[r]&&(a=!1)}a&&(i.splice(l--,1),e=d(d.s=t[0]))}return e}var a={},s={168:0,7:0,8:0,15:0,16:0,22:0,32:0,38:0,42:0,45:0,54:0,58:0,59:0,63:0,64:0,67:0,71:0,75:0,77:0,80:0,84:0,87:0,88:0,93:0,99:0,100:0,104:0,106:0,114:0,117:0,118:0,122:0,124:0,125:0,126:0,127:0,128:0,129:0,133:0,138:0,144:0,152:0,163:0,167:0,170:0,171:0,178:0,181:0,182:0},i=[];function d(l){if(a[l])return a[l].exports;var t=a[l]={i:l,l:!1,exports:{}};return e[l].call(t.exports,t,t.exports,d),t.l=!0,t.exports}d.m=e,d.c=a,d.d=function(e,l,t){d.o(e,l)||Object.defineProperty(e,l,{configurable:!1,enumerable:!0,get:t})},d.r=function(e){Object.defineProperty(e,"__esModule",{value:!0})},d.n=function(e){var l=e&&e.__esModule?function(){return e.default}:function(){return e};return d.d(l,"a",l),l},d.o=function(e,l){return Object.prototype.hasOwnProperty.call(e,l)},d.p="/assets/scripts/bundle/";var n=this.webpackJsonpSLDS___internal_chunked_showcase=this.webpackJsonpSLDS___internal_chunked_showcase||[],r=n.push.bind(n);n.push=l,n=n.slice();for(var o=0;o<n.length;o++)l(n[o]);var c=r;return i.push([248,0]),t()}({0:function(e,l){e.exports=React},248:function(e,l,t){"use strict";Object.defineProperty(l,"__esModule",{value:!0}),l.examples=l.Context=void 0;var a=function(e){return e&&e.__esModule?e:{default:e}}(t(0));l.Context=function(e){return a.default.createElement("div",{className:"demo-only-grid"},e.children)},l.examples=[{id:"stretch",label:"Column Stretch",element:a.default.createElement("div",{className:"slds-grid"},a.default.createElement("div",{className:"slds-col"}),a.default.createElement("div",{className:"slds-col"})),description:"By default, the grid items within a `.slds-grid` do not stretch to take up that available white-space on the main axis. Apply `.slds-col` to a grid item, it will stretch across the main axis. The width of each grid item will be determined by the content within that region."},{id:"stretch-gutters",label:"Column Stretch w/ Gutters",element:a.default.createElement("div",{className:"slds-grid slds-grid_pull-padded-medium"},a.default.createElement("div",{className:"slds-col slds-p-horizontal_medium"}),a.default.createElement("div",{className:"slds-col slds-p-horizontal_medium"})),description:"To apply gutters between each grid item, the following spacing classes are available to add your intended gutters, `.slds-p-horizontal_small`, `.slds-p-horizontal_medium`, `.slds-p-horizontal_large`, `.slds-p-around_small`, `.slds-p-around_medium` and `.slds-p-around_large`. You may need to pull the grid items back to their original grid boundaries of the grid container, apply the classes `.slds-grid_pull-padded`, `.slds-grid_pull-padded-medium` or `.slds-grid_pull-padded-large` to the `.slds-grid`."},{id:"no-stretch",label:"No Column Stretch",element:a.default.createElement("div",{className:"slds-grid"},a.default.createElement("div",null),a.default.createElement("div",null))},{id:"no-stretch-gutters",label:"No Column Stretch w/ Gutters",element:a.default.createElement("div",{className:"slds-grid slds-grid_pull-padded-medium"},a.default.createElement("div",{className:"slds-p-horizontal_medium"}),a.default.createElement("div",{className:"slds-p-horizontal_medium"}))},{id:"regions-with-sizing",label:"Manual Sizing",element:a.default.createElement("div",{className:"slds-grid slds-wrap slds-grid_pull-padded"},a.default.createElement("div",{className:"slds-p-horizontal_small slds-size_1-of-1"}),a.default.createElement("div",{className:"slds-p-horizontal_small slds-size_1-of-2 slds-medium-size_5-of-6 slds-large-size_8-of-12"}),a.default.createElement("div",{className:"slds-p-horizontal_small slds-size_1-of-2 slds-medium-size_1-of-6 slds-large-size_4-of-12"}),a.default.createElement("div",{className:"slds-p-horizontal_small slds-size_1-of-1 slds-medium-size_1-of-2 slds-large-size_1-of-3"}),a.default.createElement("div",{className:"slds-p-horizontal_small slds-size_1-of-1 slds-medium-size_1-of-2 slds-large-size_1-of-3"}),a.default.createElement("div",{className:"slds-p-horizontal_small slds-size_1-of-1 slds-large-size_1-of-3"},a.default.createElement("div",{className:"slds-grid slds-wrap slds-grid_pull-padded"},a.default.createElement("div",{className:"slds-p-horizontal_small slds-size_1-of-2 slds-medium-size_1-of-1 slds-large-size_1-of-2"}),a.default.createElement("div",{className:"slds-p-horizontal_small slds-size_1-of-2 slds-medium-size_1-of-1 slds-large-size_1-of-2"})))),description:"If you need to set explicit widths to your grid items, apply the sizing classes to your grid items. Check out [sizing helpers here](/utilities/sizing)."},{id:"horizontal-align-center",label:"Horizontal Alignment - Center",element:a.default.createElement("div",{className:"slds-grid slds-grid_align-center"},a.default.createElement("div",null),a.default.createElement("div",null),a.default.createElement("div",null),a.default.createElement("div",null)),description:"If you want your columns to grow from the the center of the main (horizontal) axis, apply the class `slds-grid_align-center`."},{id:"horizontal-align-space",label:"Horizontal Alignment - Space",element:a.default.createElement("div",{className:"slds-grid slds-grid_align-space"},a.default.createElement("div",null),a.default.createElement("div",null),a.default.createElement("div",null),a.default.createElement("div",null)),description:"To evenly distribute columns on the main axis with an equal amount of white space separating the columns, apply the class `slds-grid_align-space`."},{id:"horizontal-align-spread",label:"Horizontal Alignment - Spread",element:a.default.createElement("div",{className:"slds-grid slds-grid_align-spread"},a.default.createElement("div",null),a.default.createElement("div",null),a.default.createElement("div",null),a.default.createElement("div",null)),description:"To spread out your columns on the main axis, with the first column starting at the start of your main axis and last item ending at the far end of your main axis, apply the class `.slds-grid_align-spread`."},{id:"horizontal-align-end",label:"Horizontal Alignment - End",element:a.default.createElement("div",{className:"slds-grid slds-grid_align-end"},a.default.createElement("div",null),a.default.createElement("div",null),a.default.createElement("div",null),a.default.createElement("div",null)),description:"If you want your columns to grow from the end of the main axis, apply the class `.slds-grid_align-end`."},{id:"vertical-align-start",label:"Vertical Alignment - Start",element:a.default.createElement("div",{className:"slds-grid slds-grid_vertical-align-start"},a.default.createElement("div",null),a.default.createElement("div",null),a.default.createElement("div",null),a.default.createElement("div",null)),description:"To align a single row or multi-line rows to the beginning of the cross axis, apply the class `.slds-grid_vertical-align-start`. Note, to vertically align elements on a cross-axis of a `.slds-grid`, the elements need available vertical white space. This is usually achieved by having a height applied to the `.slds-grid`."},{id:"vertical-align-center",label:"Vertical Alignment - Center",element:a.default.createElement("div",{className:"slds-grid slds-grid_vertical-align-center"},a.default.createElement("div",null),a.default.createElement("div",null),a.default.createElement("div",null),a.default.createElement("div",null)),description:"To vertically center align a single row or multi-line rows to the height of a grid container, apply the class `.slds-grid_vertical-align-center`. Note, to vertically align elements on a cross-axis of a `.slds-grid`, the elements need available vertical white space. This is usually achieved by having a height applied to the `.slds-grid`.When `.slds-grid_vertical-align-center` is used in conjunction with `.slds-grid_align-center`, the outcome would horizontally and vertically center align your content in the center of the `.slds-grid`."},{id:"vertical-align-end",label:"Vertical Alignment - End",element:a.default.createElement("div",{className:"slds-grid slds-grid_vertical-align-end"},a.default.createElement("div",null),a.default.createElement("div",null),a.default.createElement("div",null),a.default.createElement("div",null)),description:"To align a single row or multi-line rows to the end of the cross axis, apply the class `.slds-grid_vertical-align-center`. Note, to vertically align elements on a cross-axis of a `.slds-grid`, the elements need available vertical white space. This is usually achieved by having a height applied to the `.slds-grid`."},{id:"vertical-align-item",label:"Vertical Alignment - Item",element:a.default.createElement("div",{className:"slds-grid"},a.default.createElement("div",{className:"slds-align-top"}),a.default.createElement("div",{className:"slds-align-middle"}),a.default.createElement("div",{className:"slds-align-bottom"})),description:"To specify the vertical placement of grid items on the cross axis, you can apply `.slds-align-top`, `.slds-align-middle`, and `.slds-align-bottom` to a grid item. Note, to vertically align elements on a cross-axis of a `.slds-grid`, the elements need available vertical white space. This is usually achieved by having a height applied to the `.slds-grid`."},{id:"vertical-strecth",label:"Vertical Stretch",element:a.default.createElement("div",{className:"slds-grid slds-grid_vertical-stretch"},a.default.createElement("div",null),a.default.createElement("div",null),a.default.createElement("div",null),a.default.createElement("div",null)),description:"By default, grid items extend vertically unless `.slds-wrap` is applied to your parent grid container or you have multiple rows. If you have need multiple rows that stretch the height of the parent grid container, you can apply the class `.slds-grid_vertical-stretch`. Note, to vertically align elements on a cross-axis of a `.slds-grid`, the elements need available vertical white space. This is usually achieved by having a height applied to the `.slds-grid`."},{id:"align-item-bump",label:"Alignment Item Bump",element:a.default.createElement("div",{className:"slds-grid"},a.default.createElement("div",null),a.default.createElement("div",null),a.default.createElement("div",null),a.default.createElement("div",null),a.default.createElement("div",{className:"slds-col_bump-left"}),a.default.createElement("div",null)),description:'To "bump" a single grid item or a grid item plus the precedding grid items that follow, apply the class `.slds-col_bump-{direction}`, with `{direction}` being either `left`, `right`, `top` or `bottom` to a grid item.'},{id:"order",label:"Ordering",element:a.default.createElement("div",{className:"slds-grid"},a.default.createElement("div",{className:"slds-order_2 slds-medium-order_1 slds-large-order_3"}),a.default.createElement("div",{className:"slds-order_3 slds-medium-order_2 slds-large-order_2"}),a.default.createElement("div",{className:"slds-order_1 slds-medium-order_3 slds-large-order_1"})),description:"These helper classes visually reorder grid elements independently from their position in the markup."},{id:"container-app-frame",label:"Container - App Frame",element:a.default.createElement("div",{className:"slds-grid slds-grid_frame"},a.default.createElement("div",null)),description:"If you want your application to fill 100% of the width and height of the viewport and nest other grids inside, use the top-level app helper class `.slds-grid_frame`."},{id:"containers",label:"Containers",element:a.default.createElement("div",{className:"slds-grid slds-grid_vertical"},a.default.createElement("div",{className:"slds-container_small"}),a.default.createElement("div",{className:"slds-container_medium"}),a.default.createElement("div",{className:"slds-container_large"}),a.default.createElement("div",{className:"slds-container_x-large"}),a.default.createElement("div",{className:"slds-container_fluid"})),description:"You can use the grid system&rsquo;s containers to constrain your content to a certain width. You can center or left or right align the containers within your viewport."}]}});