Show

어떤 너비에서는 children을 그리고 어떤 너비에서는 그리지 않습니다. 바닥, 천장, 또는 둘 다를 라이브러리의 다른 모든 breakpoint와 같은 다섯 단계 사다리 위에서 정합니다.

import { Show } from 'neba';

<Show above="md">
  <Sidebar />
</Show>;

Props

Prop	타입	기본값	설명
above	'xs' | 'sm' | 'md' | 'lg' | 'xl'	—	children이 그려지기 시작하는 가장 좁은 너비. 이 값을 포함하며, 그 아래에서는 그려지지 않습니다. xs는 바닥이 0이므로 "언제나"와 같습니다
below	'xs' | 'sm' | 'md' | 'lg' | 'xl'	—	children이 그려지기를 멈추는 너비. 이 값을 포함하지 않으므로 같은 breakpoint의 above와 정확히 짝이 되어 모든 너비를 한 번씩 덮습니다. below="xs"는 아무 데서도 그리지 않습니다
render	useRender.RenderProp	—	div 대신 다른 요소로 렌더링합니다 (render={<td />}). Base UI의 render prop 그대로
children	ReactNode	—	어떤 너비에서 그려질지가 정해지는 것. 언제나 렌더되며 바뀌는 것은 display입니다

<div>의 기본 속성은 그대로 전달되며, render로 요소를 바꿀 수 있습니다. 다섯 breakpoint와 그 값은 breakpoints에서 설명합니다.

예시

above와 below

above는 그 값을 포함하고 below는 포함하지 않습니다. 그래서 같은 breakpoint를 양쪽에 쓰면 빈틈도 겹침도 없이 모든 너비를 정확히 한 번씩 덮습니다. 폰용 배치 하나와 나머지 전부를 위한 배치 하나를 두는 이 짝이 가장 흔한 경우입니다.

import { Box, Button, ButtonGroup, Show } from 'neba';

export default function ShowPair() {
  return (
    <Box className="w-full max-w-2xl">
      <Show below="sm">
        <Button fullWidth>Actions</Button>
      </Show>
      <Show above="sm">
        <ButtonGroup>
          <Button>Duplicate</Button>
          <Button>Archive</Button>
          <Button>Export</Button>
        </ButtonGroup>
      </Show>
    </Box>
  );
}

범위 지정하기

둘을 함께 주면 바닥과 천장이 됩니다. above="sm" below="lg"는 40rem부터 64rem 직전까지 그려집니다.

import { Chip, Show } from 'neba';

export default function ShowRange() {
  return (
    <div className="flex w-full max-w-2xl flex-wrap gap-2">
      <Show below="sm">
        <Chip color="secondary">xs — under 40rem</Chip>
      </Show>
      <Show above="sm" below="lg">
        <Chip color="primary">sm and md — 40rem to 64rem</Chip>
      </Show>
      <Show above="lg">
        <Chip color="success">lg and up — 64rem and over</Chip>
      </Show>
    </div>
  );
}

상자를 더하지 않습니다

wrapper는 display: contents입니다. 그래서 GridContainer와 Grid 사이의 Show는 셀을 셀로 남겨 두고, flex row 안의 Show는 children을 flex item으로 남겨 둡니다. padding이나 배경처럼 스타일로 준 것은 내려앉을 곳이 없으므로, 안쪽 요소에 주거나 render로 요소를 지정하세요.

import { Box, Grid, GridContainer, Show } from 'neba';

export default function ShowTransparent() {
  return (
    <GridContainer spacing={2} padded={false} className="w-full">
      <Grid span={{ xs: 12, md: 8 }}>
        <Box variant="solid">The article</Box>
      </Grid>
      {/* Still a grid item: `Show` is `display: contents`, so it adds no box
          between the container and the cell. */}
      <Show above="md">
        <Grid span={4}>
          <Box>The aside, from md up</Box>
        </Grid>
      </Show>
    </GridContainer>
  );
}

아예 렌더하지 않기

children은 언제나 렌더되고, 바뀌는 것은 display입니다. 그래서 브라우저가 그리는 첫 프레임부터 답이 맞고, 서버에서도 같은 답이 나옵니다.

어떤 너비 아래에서는 아예 실행되면 안 되는 것(fetch를 하거나 지도를 mount하는 컴포넌트)은 CSS가 내릴 수 없는 결정이며, 그것은 useBreakpoint가 합니다. 서버에서도 클라이언트의 첫 렌더에서도 false이므로, 이것이 제어하는 것은 hydration 이후에 도착합니다.

import { useBreakpoint } from 'neba';

const wide = useBreakpoint('md');

return wide ? <Map /> : <StaticImage />;

render

render는 요소를 지정합니다. 테이블이나 리스트 안의 Show에 필요한 것으로, <tr>과 <td> 사이에 <div>는 올 수 없기 때문입니다.

<tr>
  <td>{row.name}</td>
  <Show above="lg" render={<td />}>
    {row.updatedAt}
  </Show>
</tr>

접근성

• 숨겨진 쪽은 display: none이므로 화면에서만이 아니라 접근성 트리와 탭 순서에서도 빠집니다. 무엇도 두 번 읽히지 않습니다.
• above/below 짝의 양쪽은 모든 너비에서 DOM에 있습니다. 그러므로 중복되면 안 되는 것(id, form control의 name, heading)은 둘 사이에서 달라야 하거나 짝 바깥에 있어야 합니다.