Hidden

Hidden

Hidden is a utility feature that allows you to hide content based on the size of the user's screen/window.

styleKeys: hidden

UsageAPI

Hidden is a utility feature that allows you to hide content based on the size of the user's screen/window.

Usage

ReactVanilla

<GridContainer>
  <Row>
    <Column span={2}>
      <Card bordered evenHeight>
        <Hidden xs>This text is hidden on Extra-Small screens</Hidden>
      </Card>
    </Column>
    <Column span={2}>
      <Card bordered evenHeight>
        <Hidden sm>This text is hidden on Small screens</Hidden>
      </Card>
    </Column>
    <Column span={2}>
      <Card bordered evenHeight>
        <Hidden md>This text is hidden on Medium screens</Hidden>
      </Card>
    </Column>
    <Column span={2}>
      <Card bordered evenHeight>
        <Hidden lg>This text is hidden on Large screens</Hidden>
      </Card>
    </Column>
    <Column span={2}>
      <Card bordered evenHeight>
        <Hidden xl>This text is hidden on Extra Large screens</Hidden>
      </Card>
    </Column>
  </Row>
</GridContainer>

<GridContainer>
  <Row>
    <Column span={2}>
      <Card bordered evenHeight>
        <Hidden xs>This text is hidden on Extra-Small screens</Hidden>
      </Card>
    </Column>
    <Column span={2}>
      <Card bordered evenHeight>
        <Hidden sm>This text is hidden on Small screens</Hidden>
      </Card>
    </Column>
    <Column span={2}>
      <Card bordered evenHeight>
        <Hidden md>This text is hidden on Medium screens</Hidden>
      </Card>
    </Column>
    <Column span={2}>
      <Card bordered evenHeight>
        <Hidden lg>This text is hidden on Large screens</Hidden>
      </Card>
    </Column>
    <Column span={2}>
      <Card bordered evenHeight>
        <Hidden xl>This text is hidden on Extra Large screens</Hidden>
      </Card>
    </Column>
  </Row>
</GridContainer>

<div class="swan-grid-container">
  <div class="swan-row">
    <div class="swan-col-2">
      <div class="swan-card swan-card-bordered swan-card-even-height">
        <div class="swan-hidden-xs">
          This text is hidden on Extra-Small screens
        </div>
      </div>
    </div>
    <div class="swan-col-2">
      <div class="swan-card swan-card-bordered swan-card-even-height">
        <div class="swan-hidden-sm">This text is hidden on Small screens</div>
      </div>
    </div>
    <div class="swan-col-2">
      <div class="swan-card swan-card-bordered swan-card-even-height">
        <div class="swan-hidden-md">This text is hidden on Medium screens</div>
      </div>
    </div>
    <div class="swan-col-2">
      <div class="swan-card swan-card-bordered swan-card-even-height">
        <div class="swan-hidden-lg">This text is hidden on Large screens</div>
      </div>
    </div>
    <div class="swan-col-2">
      <div class="swan-card swan-card-bordered swan-card-even-height">
        <div class="swan-hidden-xl">
          This text is hidden on Extra Large screens
        </div>
      </div>
    </div>
  </div>
</div>

<div class="swan-grid-container">
  <div class="swan-row">
    <div class="swan-col-2">
      <div class="swan-card swan-card-bordered swan-card-even-height">
        <div class="swan-hidden-xs">
          This text is hidden on Extra-Small screens
        </div>
      </div>
    </div>
    <div class="swan-col-2">
      <div class="swan-card swan-card-bordered swan-card-even-height">
        <div class="swan-hidden-sm">This text is hidden on Small screens</div>
      </div>
    </div>
    <div class="swan-col-2">
      <div class="swan-card swan-card-bordered swan-card-even-height">
        <div class="swan-hidden-md">This text is hidden on Medium screens</div>
      </div>
    </div>
    <div class="swan-col-2">
      <div class="swan-card swan-card-bordered swan-card-even-height">
        <div class="swan-hidden-lg">This text is hidden on Large screens</div>
      </div>
    </div>
    <div class="swan-col-2">
      <div class="swan-card swan-card-bordered swan-card-even-height">
        <div class="swan-hidden-xl">
          This text is hidden on Extra Large screens
        </div>
      </div>
    </div>
  </div>
</div>

Different props can be used to adjust visibility at Responsive System breakpoints, for example xs and lg. These overrides do not cascade to other breakpoints.

ReactVanilla

<Hidden xs>Hidden on xs</Hidden>

<Hidden xs>Hidden on xs</Hidden>

<div class="swan-hidden-xs">Hidden on xs</div>
<!-- can be any tag, not just <div> -->

<div class="swan-hidden-xs">Hidden on xs</div>
<!-- can be any tag, not just <div> -->

Props

Hidden

This component is implemented using the <div /> as the root element. You can utilize the native attributes supported by <div /> tag. The ref is directly assigned to the root element, allowing you to access and manipulate it as needed.

See core props for additional props that can be applied to this component.

prop	type	required	default
`xs` Whether or not to hide the child content on xs screens	`boolean \| null`	false	false
`sm` Whether or not to hide the child content on sm screens	`boolean \| null`	false	false
`md` Whether or not to hide the child content on md screens	`boolean \| null`	false	false
`lg` Whether or not to hide the child content on lg screens	`boolean \| null`	false	false
`xl` Whether or not to hide the child content on xl screens	`boolean \| null`	false	false

Usage

Props

Related