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

Salesforce Lightning Design System

var SLDS;!function(){"use strict";var e,s={1594:function(e){e.exports=React},4994:function(e,s,n){n.r(s),n.d(s,{examples:function(){return a}});var i=n(1594),t=n.n(i),a=[{id:"assistive-text",label:"Assistive Text",element:t().createElement("div",{className:"slds-assistive-text"},"I am hidden from sight"),description:"Use the `slds-assistive-text` class to enable a screen reader to read text that is hidden. This class is typically used to accompany icons and other UI elements that show an image instead of text."},{id:"collapsed-expanded",label:"Collapsed / Expanded",element:t().createElement("div",{className:"demo-only"},t().createElement("div",{className:"slds-is-collapsed"},t().createElement("h3",null,"I am collapsed"),t().createElement("p",null,"I am a child inside a collapsed element")),t().createElement("div",{className:"slds-is-expanded"},t().createElement("h3",null,"I am expanded"),t().createElement("p",null,"I am a child inside an expanded element"))),description:"The `.slds-is-collapsed` class hides the elements contained inside by controlling the height and overflow properties. Use the `.slds-is-expanded` class to show the elements contained inside in their normal expanded state."},{id:"hidden-visible",label:"Hidden / Visible",element:t().createElement("div",{className:"demo-only"},t().createElement("div",{className:"slds-hidden"},"I am hidden"),t().createElement("div",{className:"slds-visible"},"I am visible")),description:"\nYou can hide an element but reserve the space on the page for when the element is made visible again. To hide the element, use the  `slds-hidden` class. To make it visible again, use the `slds-visible` class.\n\nNote that `.slds-hidden` and any of the `.slds-visible` utility classes should not be used together at the same time on the same element; doing so will cause your element to remain hidden.\n    "},{id:"hide-show",label:"Hide / Show",element:t().createElement("div",{className:"demo-only"},t().createElement("div",{className:"slds-hide"},"I am hidden"),t().createElement("div",{className:"slds-show"},"I am shown as a block"),t().createElement("div",{className:"slds-show_inline-block"},"I am shown as an inline-block")),description:"\nTo hide any type of element from view and from screen readers, use the `.slds-hide` class. Once hidden, you can display the content by using JavaScript to swap `.slds-hide` with `.slds-show`; This class will set the `display` property to `block`. If you need to display your hidden element as `inline` or `inline-block`, you can use the `.slds-show_inline` or `.slds-show_inline-block` classes, respectively.\n\nNote that `.slds-hide` and any of the `.slds-show-*` utility classes should not be used together at the same time on the same element; doing so will cause your element to remain hidden.\n    "},{id:"transition-hide-show",label:"Transition Hide / Show",element:t().createElement("div",{className:"demo-only"},t().createElement("div",{className:"slds-transition-hide"},"I have zero opacity"),t().createElement("div",{className:"slds-transition-show"},"I have 100% opacity")),description:"To slowly transition an element from hiding and showing, use the  `slds-transition-hide` and `slds-transition-show` classes . They toggle the element's opacity and also reserve its space. Note: To control the timing of the transition, add an additional `transition` property to control the opacity change."},{id:"responsive",label:"Responsive",element:t().createElement("div",{className:"demo-only demo-visibility"},t().createElement("div",{className:"slds-show_x-small"},"Hides on 319px and down"),t().createElement("div",{className:"slds-hide_x-small"},"Hides on 320px and up"),t().createElement("div",{className:"slds-show_small"},"Hides on 479px and down"),t().createElement("div",{className:"slds-hide_small"},"Hides on 480px and up"),t().createElement("div",{className:"slds-show_medium"},"Hides on 767px and down"),t().createElement("div",{className:"slds-hide_medium"},"Hides on 768px and up"),t().createElement("div",{className:"slds-show_large"},"Hides on 1023px and down"),t().createElement("div",{className:"slds-hide_large"},"Hides on 1024px and up"),t().createElement("div",{className:"slds-show_x-large"},"Hides on 1279px and down"),t().createElement("div",{className:"slds-hide_x-large"},"Hides on 1280px and up")),description:"\nResponsive visibility classes will hide content on specific breakpoints. `slds-show_[breakpoint]` renders `display: none` when the the view port width is smaller than the breakpoint, and does nothing if it is bigger or equal. `slds-hide_[breakpoint]` does the opposite by rendering `display: none` when the the viewport width is bigger or equal than the breakpoint, and does nothing if it is smaller.\n\n|Class Name|Less than 320px|X-Small (>= 320px)|Small (>= 480px)|Medium (>= 768px)|Large (>= 1024px)|X-Large (>= 1280px)|\n|---|---|---|---|---|---|---|\n|`.slds-hide_x-small`|Show|Hide|Hide|Hide|Hide|Hide|\n|`.slds-show_x-small`|Hide|Show|Show|Show|Show|Show|\n|`.slds-hide_small`|Show|Show|Hide|Hide|Hide|Hide|\n|`.slds-show_small`|Hide|Hide|Show|Show|Show|Show|\n|`.slds-hide_medium`|Show|Show|Show|Hide|Hide|Hide|\n|`.slds-show_medium`|Hide|Hide|Hide|Show|Show|Show|\n|`.slds-hide_large`|Show|Show|Show|Show|Hide|Hide|\n|`.slds-show_large`|Hide|Hide|Hide|Hide|Show|Show|\n|`.slds-hide_x-large`|Show|Show|Show|Show|Show|Hide|\n|`.slds-show_x-large`|Hide|Hide|Hide|Hide|Hide|Show|\n    "}]}},n={};function i(e){var t=n[e];if(void 0!==t)return t.exports;var a=n[e]={exports:{}};return s[e](a,a.exports,i),a.exports}i.m=s,i.amdO={},e=[],i.O=function(s,n,t,a){if(!n){var l=1/0;for(h=0;h<e.length;h++){n=e[h][0],t=e[h][1],a=e[h][2];for(var d=!0,o=0;o<n.length;o++)(!1&a||l>=a)&&Object.keys(i.O).every(function(e){return i.O[e](n[o])})?n.splice(o--,1):(d=!1,a<l&&(l=a));if(d){e.splice(h--,1);var r=t();void 0!==r&&(s=r)}}return s}a=a||0;for(var h=e.length;h>0&&e[h-1][2]>a;h--)e[h]=e[h-1];e[h]=[n,t,a]},i.n=function(e){var s=e&&e.__esModule?function(){return e.default}:function(){return e};return i.d(s,{a:s}),s},i.d=function(e,s){for(var n in s)i.o(s,n)&&!i.o(e,n)&&Object.defineProperty(e,n,{enumerable:!0,get:s[n]})},i.g=function(){if("object"==typeof globalThis)return globalThis;try{return this||new Function("return this")()}catch(e){if("object"==typeof window)return window}}(),i.o=function(e,s){return Object.prototype.hasOwnProperty.call(e,s)},i.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},i.j=3046,function(){var e={518:0,1117:0,1252:0,1578:0,1974:0,2033:0,2274:0,2782:0,3046:0,3140:0,4268:0,4583:0,4723:0,4924:0,6671:0,7217:0,7257:0,7385:0,7508:0,8167:0,8458:0};i.O.j=function(s){return 0===e[s]};var s=function(s,n){var t,a,l=n[0],d=n[1],o=n[2],r=0;if(l.some(function(s){return 0!==e[s]})){for(t in d)i.o(d,t)&&(i.m[t]=d[t]);if(o)var h=o(i)}for(s&&s(n);r<l.length;r++)a=l[r],i.o(e,a)&&e[a]&&e[a][0](),e[a]=0;return i.O(h)},n=self.webpackJsonpSLDS___internal_chunked_showcase=self.webpackJsonpSLDS___internal_chunked_showcase||[];n.forEach(s.bind(null,0)),n.push=s.bind(null,n.push.bind(n))}(),i.nc=void 0;var t=i.O(void 0,[6790],function(){return i(4994)});t=i.O(t),(SLDS=void 0===SLDS?{}:SLDS)["__internal/chunked/showcase/./ui/utilities/visibility/example.jsx.js"]=t}();