@salesforce-ux/design-system/__internal/chunked/docs/ui/utilities/visibility/docs.mdx.js

Salesforce Lightning Design System

var SLDS;!function(){"use strict";var e,s,i,t={1594:function(e){e.exports=React},1981:function(e){e.exports=JSBeautify},5206:function(e){e.exports=ReactDOM},5636:function(e,s,i){i.r(s),i.d(s,{getContents:function(){return S},getElement:function(){return b}});var t=i(1594),n=i.n(t),o=i(5671),d=i(6547),l=i(806),a=[{id:"assistive-text",label:"Assistive Text",element:n().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:n().createElement("div",{className:"demo-only"},n().createElement("div",{className:"slds-is-collapsed"},n().createElement("h3",null,"I am collapsed"),n().createElement("p",null,"I am a child inside a collapsed element")),n().createElement("div",{className:"slds-is-expanded"},n().createElement("h3",null,"I am expanded"),n().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:n().createElement("div",{className:"demo-only"},n().createElement("div",{className:"slds-hidden"},"I am hidden"),n().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:n().createElement("div",{className:"demo-only"},n().createElement("div",{className:"slds-hide"},"I am hidden"),n().createElement("div",{className:"slds-show"},"I am shown as a block"),n().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:n().createElement("div",{className:"demo-only"},n().createElement("div",{className:"slds-transition-hide"},"I have zero opacity"),n().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:n().createElement("div",{className:"demo-only demo-visibility"},n().createElement("div",{className:"slds-show_x-small"},"Hides on 319px and down"),n().createElement("div",{className:"slds-hide_x-small"},"Hides on 320px and up"),n().createElement("div",{className:"slds-show_small"},"Hides on 479px and down"),n().createElement("div",{className:"slds-hide_small"},"Hides on 480px and up"),n().createElement("div",{className:"slds-show_medium"},"Hides on 767px and down"),n().createElement("div",{className:"slds-hide_medium"},"Hides on 768px and up"),n().createElement("div",{className:"slds-show_large"},"Hides on 1023px and down"),n().createElement("div",{className:"slds-hide_large"},"Hides on 1024px and up"),n().createElement("div",{className:"slds-show_x-large"},"Hides on 1279px and down"),n().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    "}],h=o.XB.code,r=o.XB.h2,c=o.XB.h3,m=o.XB.p,p=o.XB.table,u=o.XB.tbody,w=o.XB.td,v=o.XB.th,f=o.XB.thead,y=o.XB.tr,b=function(){return(0,t.createElement)(o.Ay,{},(0,t.createElement)("div",{className:"doc lead"},"Specify the visibility of elements by showing and hiding. It's best practice to swap the hide and show classes rather than use them concurrently, as this will cause issues."),r({id:"Examples"},"Examples"),c({id:"Assistive-Text"},"Assistive Text"),m({},"Use the ",h({},"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."),(0,t.createElement)(d.A,null,(0,l.NO)(a,"assistive-text")),c({id:"Collapsed-Expanded"},"Collapsed / Expanded"),m({},"The ",h({},".slds-is-collapsed")," class hides the elements contained inside by controlling the height and overflow properties. Use the ",h({},".slds-is-expanded")," class to show the elements contained inside in their normal expanded state."),(0,t.createElement)(d.A,null,(0,l.NO)(a,"collapsed-expanded")),c({id:"Hidden-Visible"},"Hidden / Visible"),m({},"You 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  ",h({},"slds-hidden")," class. To make it visible again, use the ",h({},"slds-visible")," class."),m({},"Note that ",h({},".slds-hidden")," and any of the ",h({},".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."),(0,t.createElement)(d.A,null,(0,l.NO)(a,"hidden-visible")),c({id:"Hide-Show"},"Hide / Show"),m({},"To hide any type of element from view and from screen readers, use the ",h({},".slds-hide")," class. Once hidden, you can display the content by using JavaScript to swap ",h({},".slds-hide")," with ",h({},".slds-show"),"; This class will set the ",h({},"display")," property to ",h({},"block"),". If you need to display your hidden element as ",h({},"inline")," or ",h({},"inline-block"),", you can use the ",h({},".slds-show_inline")," or ",h({},".slds-show_inline-block")," classes, respectively."),m({},"Note that ",h({},".slds-hide")," and any of the ",h({},".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."),(0,t.createElement)(d.A,null,(0,l.NO)(a,"hide-show")),c({id:"Transition-Hide-Show"},"Transition Hide / Show"),m({},"To slowly transition an element from hiding and showing, use the  ",h({},"slds-transition-hide")," and ",h({},"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 ",h({},"transition")," property to control the opacity change."),(0,t.createElement)(d.A,null,(0,l.NO)(a,"transition-hide-show")),c({id:"Responsive"},"Responsive"),m({},"Responsive visibility classes will hide content on specific breakpoints. ",h({},"slds-show_[breakpoint]")," renders ",h({},"display: none")," when the the view port width is smaller than the breakpoint, and does nothing if it is bigger or equal. ",h({},"slds-hide_[breakpoint]")," does the opposite by rendering ",h({},"display: none")," when the the viewport width is bigger or equal than the breakpoint, and does nothing if it is smaller."),p({},f({},y({},v({},"Class Name"),v({},"Less than 320px"),v({},"X-Small (>= 320px)"),v({},"Small (>= 480px)"),v({},"Medium (>= 768px)"),v({},"Large (>= 1024px)"),v({},"X-Large (>= 1280px)"))),u({},y({},w({},h({},".slds-hide_x-small")),w({},"Show"),w({},"Hide"),w({},"Hide"),w({},"Hide"),w({},"Hide"),w({},"Hide")),y({},w({},h({},".slds-show_x-small")),w({},"Hide"),w({},"Show"),w({},"Show"),w({},"Show"),w({},"Show"),w({},"Show")),y({},w({},h({},".slds-hide_small")),w({},"Show"),w({},"Show"),w({},"Hide"),w({},"Hide"),w({},"Hide"),w({},"Hide")),y({},w({},h({},".slds-show_small")),w({},"Hide"),w({},"Hide"),w({},"Show"),w({},"Show"),w({},"Show"),w({},"Show")),y({},w({},h({},".slds-hide_medium")),w({},"Show"),w({},"Show"),w({},"Show"),w({},"Hide"),w({},"Hide"),w({},"Hide")),y({},w({},h({},".slds-show_medium")),w({},"Hide"),w({},"Hide"),w({},"Hide"),w({},"Show"),w({},"Show"),w({},"Show")),y({},w({},h({},".slds-hide_large")),w({},"Show"),w({},"Show"),w({},"Show"),w({},"Show"),w({},"Hide"),w({},"Hide")),y({},w({},h({},".slds-show_large")),w({},"Hide"),w({},"Hide"),w({},"Hide"),w({},"Hide"),w({},"Show"),w({},"Show")),y({},w({},h({},".slds-hide_x-large")),w({},"Show"),w({},"Show"),w({},"Show"),w({},"Show"),w({},"Show"),w({},"Hide")),y({},w({},h({},".slds-show_x-large")),w({},"Hide"),w({},"Hide"),w({},"Hide"),w({},"Hide"),w({},"Hide"),w({},"Show")))),(0,t.createElement)(d.A,null,(0,l.NO)(a,"responsive")))},S=function(){return(0,o.Qr)(b())}}},n={};function o(e){var s=n[e];if(void 0!==s)return s.exports;var i=n[e]={id:e,exports:{}};return t[e](i,i.exports,o),i.exports}o.m=t,o.amdO={},e=[],o.O=function(s,i,t,n){if(!i){var d=1/0;for(r=0;r<e.length;r++){i=e[r][0],t=e[r][1],n=e[r][2];for(var l=!0,a=0;a<i.length;a++)(!1&n||d>=n)&&Object.keys(o.O).every(function(e){return o.O[e](i[a])})?i.splice(a--,1):(l=!1,n<d&&(d=n));if(l){e.splice(r--,1);var h=t();void 0!==h&&(s=h)}}return s}n=n||0;for(var r=e.length;r>0&&e[r-1][2]>n;r--)e[r]=e[r-1];e[r]=[i,t,n]},o.n=function(e){var s=e&&e.__esModule?function(){return e.default}:function(){return e};return o.d(s,{a:s}),s},i=Object.getPrototypeOf?function(e){return Object.getPrototypeOf(e)}:function(e){return e.__proto__},o.t=function(e,t){if(1&t&&(e=this(e)),8&t)return e;if("object"==typeof e&&e){if(4&t&&e.__esModule)return e;if(16&t&&"function"==typeof e.then)return e}var n=Object.create(null);o.r(n);var d={};s=s||[null,i({}),i([]),i(i)];for(var l=2&t&&e;("object"==typeof l||"function"==typeof l)&&!~s.indexOf(l);l=i(l))Object.getOwnPropertyNames(l).forEach(function(s){d[s]=function(){return e[s]}});return d.default=function(){return e},o.d(n,d),n},o.d=function(e,s){for(var i in s)o.o(s,i)&&!o.o(e,i)&&Object.defineProperty(e,i,{enumerable:!0,get:s[i]})},o.e=function(){return Promise.resolve()},o.g=function(){if("object"==typeof globalThis)return globalThis;try{return this||new Function("return this")()}catch(e){if("object"==typeof window)return window}}(),o.o=function(e,s){return Object.prototype.hasOwnProperty.call(e,s)},o.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},o.j=3707,function(){var e={3707:0};o.O.j=function(s){return 0===e[s]};var s=function(s,i){var t,n,d=i[0],l=i[1],a=i[2],h=0;if(d.some(function(s){return 0!==e[s]})){for(t in l)o.o(l,t)&&(o.m[t]=l[t]);if(a)var r=a(o)}for(s&&s(i);h<d.length;h++)n=d[h],o.o(e,n)&&e[n]&&e[n][0](),e[n]=0;return o.O(r)},i=self.webpackJsonpSLDS___internal_chunked_docs=self.webpackJsonpSLDS___internal_chunked_docs||[];i.forEach(s.bind(null,0)),i.push=s.bind(null,i.push.bind(i))}(),o.nc=void 0;var d=o.O(void 0,[3540],function(){return o(5636)});d=o.O(d),(SLDS=void 0===SLDS?{}:SLDS)["__internal/chunked/docs/./ui/utilities/visibility/docs.mdx.js"]=d}();