Display

This utility allows to show or hide elements depending on certain conditions.

Difference between packages

For the React package, use the <Display /> component. This fully removes its chidlren from the DOM, while the classes from the pallote-css only hides them with display: none.

Props

Show

React

<Display show="mobileSm">{/* content */} </Display>
<Display show="mobile">{/* content */} </Display>
<Display show="tablet">{/* content */} </Display>
<Display show="laptop">{/* content */} </Display>
<Display show="desktop">{/* content */} </Display>
<Display show="touch">{/* content */} </Display>

CSS

<div class="show-mobileSm"><!-- content --></div>
<div class="show-mobile"><!-- content --></div>
<div class="show-tablet"><!-- content --></div>
<div class="show-laptop"><!-- content --></div>
<div class="show-desktop"><!-- content --></div>
<div class="show-touch"><!-- content --></div>

Hide

React

<Display hide="mobileSm">{/* content */} </Display>
<Display hide="mobile">{/* content */} </Display>
<Display hide="tablet">{/* content */} </Display>
<Display hide="laptop">{/* content */} </Display>
<Display hide="desktop">{/* content */} </Display>
<Display hide="touch">{/* content */} </Display>

CSS

<div class="hide-mobileSm"><!-- content --></div>
<div class="hide-mobile"><!-- content --></div>
<div class="hide-tablet"><!-- content --></div>
<div class="hide-laptop"><!-- content --></div>
<div class="hide-desktop"><!-- content --></div>
<div class="hide-touch"><!-- content --></div>

Props details

Prop	Values	Default
show	mobileSm mobile tablet laptop desktop touch
hide	mobileSm mobile tablet laptop desktop touch