Skip to content

Latest commit

 

History

History
287 lines (261 loc) · 12.1 KB

visibility.mdx

File metadata and controls

287 lines (261 loc) · 12.1 KB

import { Stripes } from "@/components/stripes.tsx"; import { ApiTable } from "@/components/api-table.tsx"; import { Example } from "@/components/example.tsx"; import { Figure } from "@/components/figure.tsx"; import { ResponsiveDesign } from "@/components/content.tsx";

export const title = "visibility"; export const description = "Utilities for controlling the visibility of an element.";

<ApiTable rows={[ ["visible", "visibility: visible;"], ["invisible", "visibility: hidden;"], ["collapse", "visibility: collapse;"], ]} />

Examples

Making elements invisible

Use the invisible utility to hide an element, but still maintain its place in the document, affecting the layout of other elements:

{
01
02
03
} 
<!-- [!code classes:invisible] -->
<div class="grid grid-cols-3 gap-4">
  <div>01</div>
  <div class="invisible ...">02</div>
  <div>03</div>
</div>

To completely remove an element from the document, use the display property instead.

Collapsing elements

Use the collapse utility to hide table rows, row groups, columns, and column groups as if they were set to display: none, but without impacting the size of other rows and columns:

{
Showing all rows
Invoice # Client Amount
#100 Pendant Publishing $2,000.00
#101 Kruger Industrial Smoothing $545.00
#102 J. Peterman $10,000.25
Hiding a row using `collapse`
Invoice # Client Amount
#100 Pendant Publishing $2,000.00
#101 Kruger Industrial Smoothing $545.00
#102 J. Peterman $10,000.25
Hiding a row using `hidden`
Invoice # Client Amount
#100 Pendant Publishing $2,000.00
#101 Kruger Industrial Smoothing $545.00
#102 J. Peterman $10,000.25
} 
<!-- [!code classes:collapse] -->
<table>
  <thead>
    <tr>
      <th>Invoice #</th>
      <th>Client</th>
      <th>Amount</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>#100</td>
      <td>Pendant Publishing</td>
      <td>$2,000.00</td>
    </tr>
    <tr class="collapse">
      <td>#101</td>
      <td>Kruger Industrial Smoothing</td>
      <td>$545.00</td>
    </tr>
    <tr>
      <td>#102</td>
      <td>J. Peterman</td>
      <td>$10,000.25</td>
    </tr>
  </tbody>
</table>

This makes it possible to dynamically toggle rows and columns without affecting the table layout.

Making elements visible

Use the visible utility to make an element visible:

{
01
02
03
} 
<!-- [!code classes:visible] -->
<div class="grid grid-cols-3 gap-4">
  <div>01</div>
  <div class="visible ...">02</div>
  <div>03</div>
</div>

This is mostly useful for undoing the invisible utility at different screen sizes.

Responsive design