@salesforce-ux/design-system
Version:
Salesforce Lightning Design System
1 lines • 4.59 kB
JavaScript
var SLDS;!function(){"use strict";var e,t,n,o={1594:function(e){e.exports=React},1981:function(e){e.exports=JSBeautify},5206:function(e){e.exports=ReactDOM},5769:function(e,t,n){n.r(t),n.d(t,{getContents:function(){return _},getElement:function(){return y}});var o=n(1594),r=n.n(o),a=n(5671),l=n(6547),i=n(942),s=n.n(i),c=function(e){return r().createElement("div",{className:s()("slds-card",e.className)},r().createElement("div",{className:"slds-p-around_medium"},"My Component"))},u=n(1374),d=a.XB.a,f=a.XB.code,m=a.XB.h2,p=a.XB.h3,h=a.XB.li,v=a.XB.p,g=a.XB.ul,y=function(){return(0,o.createElement)(a.Ay,{},(0,o.createElement)("div",{className:"doc lead"},"Layout utility classes will help you to achieve layouts found within the Salesforce Platform."),m({id:"Examples"},"Examples"),p({id:"Magnets"},"Magnets"),v({},"The magnet utilities are used to vertically attach adjacent card-like components."),v({},"The components/utilities that provide a card-like look are the following:"),g({},h({},d({href:"/components/cards/"},"Cards")),h({},d({href:"/components/page-headers"},"Page Headers")),h({},d({href:"/utilities/box"},"Box"))),v({},"If you need a card-like component to appear flush to the card-like component below, you can add the classes ",f({},"slds-has-bottom-magnet")," and ",f({},"slds-has-top-magnet"),"."),(0,o.createElement)(u.A,{title:"layout card"},(0,o.createElement)("div",{className:"slds-grid slds-grid_pull-padded slds-wrap"},(0,o.createElement)("div",{className:"slds-col slds-size_1-of-1 slds-large-size_1-of-2 slds-p-horizontal_medium"},(0,o.createElement)("strong",null,"Before"),(0,o.createElement)(l.A,{toggleCode:!1},(0,o.createElement)("div",null,(0,o.createElement)(c,null),(0,o.createElement)(c,null)))),(0,o.createElement)("div",{className:"slds-col slds-size_1-of-1 slds-large-size_1-of-2 slds-p-horizontal_medium"},(0,o.createElement)("strong",null,"After"),(0,o.createElement)(l.A,{toggleCode:!1},(0,o.createElement)("div",null,(0,o.createElement)(c,{className:"slds-has-bottom-magnet"}),(0,o.createElement)(c,{className:"slds-has-top-magnet"})))))),v({},"In the after example, you'll notice the component's top and bottom side are flattened out and appear connected."))},_=function(){return(0,a.Qr)(y())}}},r={};function a(e){var t=r[e];if(void 0!==t)return t.exports;var n=r[e]={id:e,exports:{}};return o[e](n,n.exports,a),n.exports}a.m=o,a.amdO={},e=[],a.O=function(t,n,o,r){if(!n){var l=1/0;for(u=0;u<e.length;u++){n=e[u][0],o=e[u][1],r=e[u][2];for(var i=!0,s=0;s<n.length;s++)(!1&r||l>=r)&&Object.keys(a.O).every(function(e){return a.O[e](n[s])})?n.splice(s--,1):(i=!1,r<l&&(l=r));if(i){e.splice(u--,1);var c=o();void 0!==c&&(t=c)}}return t}r=r||0;for(var u=e.length;u>0&&e[u-1][2]>r;u--)e[u]=e[u-1];e[u]=[n,o,r]},a.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return a.d(t,{a:t}),t},n=Object.getPrototypeOf?function(e){return Object.getPrototypeOf(e)}:function(e){return e.__proto__},a.t=function(e,o){if(1&o&&(e=this(e)),8&o)return e;if("object"==typeof e&&e){if(4&o&&e.__esModule)return e;if(16&o&&"function"==typeof e.then)return e}var r=Object.create(null);a.r(r);var l={};t=t||[null,n({}),n([]),n(n)];for(var i=2&o&&e;("object"==typeof i||"function"==typeof i)&&!~t.indexOf(i);i=n(i))Object.getOwnPropertyNames(i).forEach(function(t){l[t]=function(){return e[t]}});return l.default=function(){return e},a.d(r,l),r},a.d=function(e,t){for(var n in t)a.o(t,n)&&!a.o(e,n)&&Object.defineProperty(e,n,{enumerable:!0,get:t[n]})},a.e=function(){return Promise.resolve()},a.g=function(){if("object"==typeof globalThis)return globalThis;try{return this||new Function("return this")()}catch(e){if("object"==typeof window)return window}}(),a.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},a.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},a.j=577,function(){var e={577:0};a.O.j=function(t){return 0===e[t]};var t=function(t,n){var o,r,l=n[0],i=n[1],s=n[2],c=0;if(l.some(function(t){return 0!==e[t]})){for(o in i)a.o(i,o)&&(a.m[o]=i[o]);if(s)var u=s(a)}for(t&&t(n);c<l.length;c++)r=l[c],a.o(e,r)&&e[r]&&e[r][0](),e[r]=0;return a.O(u)},n=self.webpackJsonpSLDS___internal_chunked_docs=self.webpackJsonpSLDS___internal_chunked_docs||[];n.forEach(t.bind(null,0)),n.push=t.bind(null,n.push.bind(n))}(),a.nc=void 0;var l=a.O(void 0,[3540],function(){return a(5769)});l=a.O(l),(SLDS=void 0===SLDS?{}:SLDS)["__internal/chunked/docs/./ui/utilities/layout/docs.mdx.js"]=l}();