PlDivider

두 가지 사이에 놓이는 선입니다. children이 없으면 헤어라인 하나와 진짜 role="separator"이고, children이 있으면 선이 라벨을 둘러싸며 끊어집니다.

React

import { PlDivider } from 'plass-ui';

<PlDivider />;
<PlDivider>OR</PlDivider>;
<PlDivider orientation="vertical" />;

import 'package:plass_ui/plass_ui.dart';

const PlDivider();
const PlDivider(child: Text('OR'));
const PlDivider(orientation: PlassOrientation.vertical);

Props

Prop	타입	기본값	설명
orientation공통	'horizontal' | 'vertical'	'horizontal'	선이 달리는 방향. vertical은 자기 높이가 없고 flex 부모에 맞춰 늘어납니다
color공통	'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'info'	—	의미론적 색 역할. 기본값이 **없습니다** — 생략하면 어느 바탕에서나 보이는 중립 헤어라인입니다
size공통	'xs' | 'sm' | 'md' | 'lg' | 'xl'	'md'	라벨의 타입 스케일. divider에서 크기를 가지는 것은 라벨뿐입니다
length	number | string	—	선이 달리는 길이. 숫자는 px, 문자열은 임의의 CSS 길이. 생략하면 컨테이너를 채웁니다
thickness	number | string	1	선의 두께. 숫자는 px, 문자열은 임의의 CSS 길이
textAlign공통	'start' | 'center' | 'end'	'center'	라벨이 놓이는 자리. start와 end는 가까운 쪽에 짧은 선을 남겨 라벨이 선 *안에* 놓인 것으로 읽히게 합니다
children	ReactNode	—	선 안에 놓이는 라벨 — 두 로그인 방법 사이의 "OR"

Prop	타입	기본값	설명
orientation공통	PlassOrientation	PlassOrientation.horizontal	선이 달리는 방향. vertical은 자기 높이가 없고 flex 부모에 맞춰 늘어납니다
color공통	PlassColor?	null	의미론적 색 역할. 기본값이 **없습니다** — 생략하면 어느 바탕에서나 보이는 중립 헤어라인입니다
size공통	PlassSize	PlassSize.md	라벨의 타입 스케일. divider에서 크기를 가지는 것은 라벨뿐입니다
length	double?	—	선이 뻗는 길이 — 가로면 너비, 세로면 높이. 논리 픽셀입니다. 생략하면 허락된 만큼 뻗습니다
thickness	double	1	선의 두께. 숫자는 px, 문자열은 임의의 CSS 길이
textAlign공통	PlassAlign	PlassAlign.center	라벨이 놓이는 자리. start와 end는 가까운 쪽에 짧은 선을 남겨 라벨이 선 *안에* 놓인 것으로 읽히게 합니다
semanticLabel	String?	—	스크린 리더가 부를 이름. 없으면 divider는 semantics 트리에 들어가지 않습니다 — 두 가지 사이의 선은 대개 레이아웃이 하는 말입니다
child	Widget?	—	선 안에 놓이는 라벨 — 두 로그인 방법 사이의 "OR"

네이티브 <div> 속성은 그대로 전달됩니다. color와 children은 둘 다 여기서는 Plass의 prop이라 전달 대상에서 제외됩니다.

color는 PlassColor?이고 기본값은 null입니다. undefined가 없는 언어에서 "계열 없음, 중립 헤어라인"을 쓰는 방법입니다.

variant도 elevation도 없습니다. divider는 표면이 아닙니다. 유리로 만들어지지 않았고, 빛을 받지 않으며, 그림자를 드리우지도 않습니다.

라이브러리 전체에서 공유 축(orientation color size textAlign)이 뜻하는 바는 prop 규칙에 있습니다.

Examples

orientation

vertical divider는 자기 높이를 가지지 않습니다. 높이를 주는 무언가에 맞춰 늘어나며, 이것이 툴바의 두 그룹 사이에 놓인 선이 해야 할 일입니다. 놓인 행보다 짧아야 한다면 length를 주세요.

"높이를 주는 무언가"가 CSS보다 더 많은 일을 합니다. Row는 자기가 받은 높이를 자식에게 그대로 넘기므로, 그 안의 vertical divider에는 늘어날 대상이 생기려면 위에 IntrinsicHeight가(또는 length가) 있어야 합니다. 아래 예제는 앞의 방법을 씁니다.

React

import { PlDivider } from 'plass-ui';

export default function DividerOrientation() {
  return (
    <div className="flex w-full max-w-md flex-col gap-6">
      <PlDivider />

      <div className="flex items-center gap-4 text-sm text-(--plass-fg)">
        <span>Cut</span>
        <PlDivider orientation="vertical" />
        <span>Copy</span>
        <PlDivider orientation="vertical" />
        <span>Paste</span>
      </div>
    </div>
  );
}

import 'package:flutter/widgets.dart';
import 'package:plass_ui/plass_ui.dart';

class DividerOrientation extends StatelessWidget {
  const DividerOrientation({super.key});

  @override
  Widget build(BuildContext context) {
    return const SizedBox(
      width: 448,
      child: Column(
        mainAxisSize: MainAxisSize.min,
        crossAxisAlignment: CrossAxisAlignment.stretch,
        spacing: 24,
        children: <Widget>[
          PlDivider(),
          // A vertical divider takes the height of whatever gives it one, so the
          // toolbar row is measured by its tallest item first.
          IntrinsicHeight(
            child: Row(
              mainAxisSize: MainAxisSize.min,
              spacing: 16,
              children: <Widget>[
                PlTypography('Cut'),
                PlDivider(orientation: PlassOrientation.vertical),
                PlTypography('Copy'),
                PlDivider(orientation: PlassOrientation.vertical),
                PlTypography('Paste'),
              ],
            ),
          ),
        ],
      ),
    );
  }
}

children과 textAlign

center는 선을 반으로 나눕니다. start와 end는 가까운 쪽에 짧은 선을 남겨, 라벨이 선 위에 떠 있는 것이 아니라 선 안에 놓인 것으로 읽히게 합니다.

React

import { PlDivider } from 'plass-ui';

export default function DividerLabel() {
  return (
    <div className="flex w-full max-w-md flex-col gap-6">
      {(['start', 'center', 'end'] as const).map((textAlign) => (
        <PlDivider key={textAlign} textAlign={textAlign}>
          {textAlign}
        </PlDivider>
      ))}
    </div>
  );
}

import 'package:flutter/widgets.dart';
import 'package:plass_ui/plass_ui.dart';

class DividerLabel extends StatelessWidget {
  const DividerLabel({super.key});

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      width: 448,
      child: Column(
        mainAxisSize: MainAxisSize.min,
        crossAxisAlignment: CrossAxisAlignment.stretch,
        spacing: 24,
        children: <Widget>[
          for (final align in PlassAlign.values)
            PlDivider(textAlign: align, child: Text(align.name)),
        ],
      ),
    );
  }
}

color

기본값이 없습니다. PlTextLink가 하는 것과 같은 선택입니다. 생략하면 중립 헤어라인이 그려집니다. 페이지 바탕이든 유리 시트든 카드 위든, 라이브러리가 가진 모든 바탕에서 보이는 선입니다. 시트 자신의 흰 헤어라인은 반투명한 판 위의 흰 빛이라, divider가 불투명한 것 위에 놓이는 순간 사라집니다.

색 계열을 주면 선에 그 틴트가 들어갑니다.

React

import { PlDivider } from 'plass-ui';

export default function DividerColors() {
  return (
    <div className="flex w-full max-w-md flex-col gap-5">
      <PlDivider>neutral</PlDivider>
      {(['primary', 'success', 'warning', 'danger'] as const).map((color) => (
        <PlDivider key={color} color={color}>
          {color}
        </PlDivider>
      ))}
    </div>
  );
}

import 'package:flutter/widgets.dart';
import 'package:plass_ui/plass_ui.dart';

class DividerColors extends StatelessWidget {
  const DividerColors({super.key});

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      width: 448,
      child: Column(
        mainAxisSize: MainAxisSize.min,
        crossAxisAlignment: CrossAxisAlignment.stretch,
        spacing: 20,
        children: <Widget>[
          const PlDivider(child: Text('neutral')),
          for (final color in <PlassColor>[
            PlassColor.primary,
            PlassColor.success,
            PlassColor.warning,
            PlassColor.danger,
          ])
            PlDivider(color: color, child: Text(color.name)),
        ],
      ),
    );
  }
}

length와 thickness

width가 아니라 length인 이유는, divider가 긴 축이 orientation을 따라 도는 유일한 컴포넌트이기 때문입니다.

숫자는 px이고, 문자열은 임의의 CSS 길이라 '50%'와 '12rem'이 모두 동작합니다.

둘 다 double입니다. 패키지의 다른 모든 길이와 같은 논리 픽셀입니다. 퍼센트는 없습니다. 부모의 몇 분의 몇은 divider를 FractionallySizedBox로 감싸는 일이고, 그 두 번째 표기를 컴포넌트 안에 또 만드는 것은 표기를 둘로 만드는 일입니다.

length는 부모가 준 tight 제약을 이깁니다. 맨 SizedBox라면 그러지 못합니다. divider는 crossAxisAlignment: stretch인 Column 안에 놓이는 일이 아주 흔하고 거기서는 tight한 너비를 받아 지기 때문에, 상자를 Align으로 감싸 느슨한 제약이 내려가게 했습니다.

React

import { PlDivider } from 'plass-ui';

export default function DividerLength() {
  return (
    <div className="flex w-full max-w-md flex-col gap-6">
      <PlDivider />
      <PlDivider length={160} />
      <PlDivider length="50%" thickness={2} />
      <PlDivider thickness="0.25rem" />
    </div>
  );
}

import 'package:flutter/widgets.dart';
import 'package:plass_ui/plass_ui.dart';

class DividerLength extends StatelessWidget {
  const DividerLength({super.key});

  @override
  Widget build(BuildContext context) {
    return const SizedBox(
      width: 448,
      child: Column(
        mainAxisSize: MainAxisSize.min,
        crossAxisAlignment: CrossAxisAlignment.stretch,
        spacing: 24,
        children: <Widget>[
          PlDivider(),
          PlDivider(length: 160),
          PlDivider(length: 224, thickness: 2),
          PlDivider(thickness: 4),
        ],
      ),
    );
  }
}

size

size는 라벨의 타입 스케일이고 그뿐입니다. 라벨이 없는 divider에는 정할 크기가 없습니다.

React

import { PlDivider } from 'plass-ui';

export default function DividerSizes() {
  return (
    <div className="flex w-full max-w-md flex-col gap-5">
      {(['xs', 'sm', 'md', 'lg', 'xl'] as const).map((size) => (
        <PlDivider key={size} size={size}>
          {size}
        </PlDivider>
      ))}
    </div>
  );
}

import 'package:flutter/widgets.dart';
import 'package:plass_ui/plass_ui.dart';

class DividerSizes extends StatelessWidget {
  const DividerSizes({super.key});

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      width: 448,
      child: Column(
        mainAxisSize: MainAxisSize.min,
        crossAxisAlignment: CrossAxisAlignment.stretch,
        spacing: 20,
        children: <Widget>[
          for (final size in PlassSize.values) PlDivider(size: size, child: Text(size.name)),
        ],
      ),
    );
  }
}

Accessibility

• Base UI의 Separator를 렌더링하므로, 알맞은 aria-orientation이 붙은 진짜 role="separator"입니다.
• separator는 내용에서 이름을 가져오는 role이 아니라, 눈에 보이는 라벨이 그것만으로 접근 가능한 이름이 되지는 않습니다. 문자열 라벨은 aria-label로 복사되고, 그보다 복잡한 것은 그대로 둡니다. 그중 어느 부분이 이름인지는 호출하는 쪽만 압니다.
• 순전히 장식인 divider(이미 여백으로 나뉘어 있는 카드 안의 선) 에는 role="presentation"을 주는 편이 낫고, 이 값은 그대로 전달됩니다.
• 라벨 양옆의 두 선 조각은 aria-hidden입니다. 라벨은 separator의 이름으로 한 번만 읽힙니다.

• divider는 semanticLabel을 주지 않는 한 아무 말도 하지 않습니다. 정직한 기본값입니다. 두 가지 사이의 선은 대개 내용이 아니라 레이아웃이 하는 말입니다.
• 이름을 주면 그 이름이 붙은 semantics 노드가 됩니다. 선이 뜻을 나르고 있을 때 넘기세요. 두 로그인 경로 사이의 "OR"은 그렇고, 카드 안의 선은 아닙니다.
• 선 안에 놓인 라벨은 그대로 텍스트로 그려지므로 있는 자리에서 읽힙니다. semanticLabel은 divider 자신을 위한 것입니다.

React 빌드와 다른 점

React	Flutter	이유
aria-orientation이 붙은 role="separator"	이름이 붙은 semantics 노드, 또는 없음	Flutter의 semantics 트리에는 separator role이 없습니다. 이름 없는 선은 장식이고, 트리에 들어가지 않는 것으로 그렇게 알립니다.
children	child	Flutter의 이름입니다.
문자열 라벨이 aria-label이 됨	semanticLabel	Widget의 어느 부분이 이름인지는 여기서 알 수 없으니, 추측하는 대신 물어봅니다.
CSS 길이로서의 length/thickness	double	패키지의 다른 모든 곳과 같은 논리 픽셀입니다. 부모의 몇 분의 몇은 FractionallySizedBox입니다.
className, style	—	전달할 클래스 목록도 style 속성도 없습니다.