PlBox

내용을 얹은 유리 한 장입니다. 라이브러리에서 가장 단순한 표면이고, 하는 일은 묶는 것 하나뿐입니다.

React

import { PlBox } from 'plass-ui';

<PlBox>
  <p>Everything in here is grouped, and nothing else is claimed.</p>
</PlBox>;

import 'package:plass_ui/plass_ui.dart';

PlBox(child: Text('Everything in here is grouped, and nothing else is claimed.'));

Props

Prop	타입	기본값	설명
variant공통	'solid' | 'glass' | 'ghost'	'glass'	시트의 재질. 셋 다 색이 들어가지 않습니다 — box가 담는 것은 자기 색을 가지고 옵니다
size공통	'xs' | 'sm' | 'md' | 'lg' | 'xl'	'md'	**시트**의 크기 — 반경과 여백. 높이도 타입 스케일도 아닙니다
color공통	'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'info'	'primary'	의미론적 색 역할. 임의 색상값은 받지 않습니다
density공통	'default' | 'compact'	'default'	여백만 바꿉니다. 높이와 글자 크기는 그대로
elevation공통	0 | 1 | 2 | 3	0	드롭 섀도 깊이. 0이 기본이고 평평합니다 — box를 페이지에서 떼어 놓는 것은 유리 가장자리입니다
padded	boolean	true	안쪽 여백. 가장자리까지 닿아야 하는 내용에서는 끄세요
render	useRender.RenderProp	—	div가 아닌 다른 요소로 렌더링합니다 — section, li, 무엇이든

Prop	타입	기본값	설명
child	Widget?	—	시트 위에 놓이는 것
variant공통	PlassVariant	PlassVariant.glass	시트의 재질. 셋 다 색이 들어가지 않습니다 — box가 담는 것은 자기 색을 가지고 옵니다
size공통	PlassSize	PlassSize.md	**시트**의 크기 — 반경과 여백. 높이도 타입 스케일도 아닙니다
color공통	PlassColor	PlassColor.primary	의미론적 색 역할. 임의 색상값은 받지 않습니다
density공통	PlassDensity	PlassDensity.standard	여백만 바꿉니다. 높이와 글자 크기는 그대로
elevation공통	int	0	드롭 섀도 깊이. 0이 기본이고 평평합니다 — box를 페이지에서 떼어 놓는 것은 유리 가장자리입니다
padded	bool	true	안쪽 여백. 가장자리까지 닿아야 하는 내용에서는 끄세요
clipped	bool	false	내용을 시트 자신의 모서리에서 잘라 냅니다. 클립은 자식이 바깥에 그리는 것까지 자르므로 기본은 꺼져 있습니다

나머지 <div> 속성은 모두 전달되고, render로 요소를 바꿉니다.

라이브러리 전체에서 공유하는 축이 무엇을 뜻하는지는 prop 규약에 있습니다.

PlBox와 PlCard

제목, 부제, 푸터, 섹션을 가르는 얇은 선 같은 구조는 전부 PlCard의 것입니다. 카드는 그 섹션들을 얹어 놓은 box입니다. 여기 남는 것은 시트 자체이고, 그것만으로도 따로 둘 값어치가 있습니다. 화면이 묶는 것의 대부분에는 제목이 없기 때문입니다: 폼 뒤의 우물, 선반 위의 타일, 차트를 감싼 판.

box 안에 제목과 본문을 손으로 넣고 있는 자신을 발견하는 순간, 원했던 컴포넌트는 카드입니다.

size는 시트의 크기입니다

여기서 size는 컨트롤에서의 뜻과 다르고, 라이브러리에서 그런 곳은 여기 하나뿐입니다.

box는 담고 있는 것만큼 높고, 자식들은 자기 타이포그래피를 가지고 옵니다. 타입 스케일을 재설정하는 컨테이너였다면 같은 문단이 무엇으로 감싸였느냐에 따라 두 가지 크기로 렌더링됐을 것입니다. 그래서 size는 시트의 크기입니다. 반경과 여백, 그리고 그것뿐입니다.

React

import { PlBox, PlTypography } from 'plass-ui';

export default function BoxSizes() {
  return (
    <div className="flex w-full max-w-md flex-col gap-3">
      {(['xs', 'sm', 'md', 'lg', 'xl'] as const).map((size) => (
        <PlBox key={size} size={size}>
          <PlTypography level="body">size: {size}</PlTypography>
        </PlBox>
      ))}
    </div>
  );
}

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

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

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

Examples

variant

세 재질은 다른 곳에서 말하는 것을 그대로 말하되, 컨테이너의 방식으로 씁니다. 시트에는 색이 들어가지 않습니다. box가 담는 것은 자기 색을 가지고 오고, 그 아래 판에 색을 넣으면 모든 내용이 자기가 선택되지 않은 배경 위에 놓입니다. 그래서 색 계열은 얇은 선과 focus ring까지만 닿고 멈춥니다.

ghost는 다른 표면 안에서 쓰는 것입니다. 테두리 있는 사각형 안의 두 번째 테두리 있는 사각형은 그냥 사각형이 하나 더 있는 것입니다.

React

import { PlBox, PlTypography } from 'plass-ui';

export default function BoxVariants() {
  return (
    <div className="flex w-full max-w-md flex-col gap-3">
      {(['glass', 'solid', 'ghost'] as const).map((variant) => (
        <PlBox key={variant} variant={variant}>
          <PlTypography level="caption">{variant}</PlTypography>
          <PlTypography level="body">The sheet is never dyed, whatever it is made of.</PlTypography>
        </PlBox>
      ))}
    </div>
  );
}

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

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

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      width: 448,
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.stretch,
        mainAxisSize: MainAxisSize.min,
        spacing: 12,
        children: <Widget>[
          for (final PlassVariant variant in PlassVariant.values)
            PlBox(
              variant: variant,
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                mainAxisSize: MainAxisSize.min,
                spacing: 4,
                children: <Widget>[
                  PlTypography(variant.name, level: PlTypographyLevel.caption),
                  const PlTypography('The sheet is never dyed, whatever it is made of.'),
                ],
              ),
            ),
        ],
      ),
    );
  }
}

padded

기본은 켜져 있습니다. 가장자리까지 닿아야 하는 내용(이미지, 표, 자기 행을 직접 그리는 목록) 에서는 끄세요.

내용이 시트의 모서리에서 잘리도록 overflow-hidden을 더하세요.

clipped가 내용을 시트의 모서리에서 잘라 냅니다. React 빌드에서는 클래스 하나면 되는 것이 여기서는 파라미터인데, 클립은 자식이 자기 바깥에 그리는 것(focus ring을 포함해)까지 잘라 내기 때문에 기본은 꺼져 있습니다.

React

import { PlBox, PlTypography } from 'plass-ui';

export default function BoxPadded() {
  return (
    <div className="flex w-full max-w-md flex-col gap-3">
      <PlBox>
        <PlTypography level="body">padded — the default</PlTypography>
      </PlBox>

      <PlBox padded={false} className="overflow-hidden">
        <div className="bg-(--plass-primary-soft) px-5 py-6 text-center text-sm">
          padded={'{false}'} — the content reaches the edges
        </div>
      </PlBox>
    </div>
  );
}

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

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

  @override
  Widget build(BuildContext context) {
    final PlassTokens tokens = PlassTheme.of(context);

    return SizedBox(
      width: 448,
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.stretch,
        mainAxisSize: MainAxisSize.min,
        spacing: 12,
        children: <Widget>[
          const PlBox(child: PlTypography('padded — the default')),
          PlBox(
            padded: false,
            clipped: true,
            child: ColoredBox(
              color: tokens.family(PlassColor.primary).soft,
              child: const Padding(
                padding: EdgeInsets.symmetric(horizontal: 20, vertical: 24),
                child: PlTypography(
                  'padded: false — the content reaches the edges',
                  align: TextAlign.center,
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }
}

elevation

0이고 평평합니다. 그것이 맞는 기본값입니다. box를 페이지에서 떼어 놓는 것은 유리 가장자리입니다. 주변 내용 위에 진짜로 떠 있는 표면일 때만 올리세요. 그리고 ghost box에는 그림자가 떨어져 나올 시트가 없다는 것도 기억하세요.

<PlBox elevation={2}>Floating clear of the page</PlBox>

PlBox(elevation: 2, child: Text('Floating clear of the page'));

Accessibility

• box는 <div>이고 아무 role도 선언하지 않습니다. role도, 이름도, 문서 개요에서의 자리도 없습니다. 그것이 맞습니다. 눈을 위한 묶음은 스크린 리더를 위한 묶음이 아닙니다.
• 그 묶음이 의미가 있을 때(페이지의 한 영역, 목록의 항목, 제목이 있는 섹션)는 시트가 아니라 요소로 말하세요.

render={<section aria-label="Storage" />}와 render={<li />}가 가장 자주 나오는 둘입니다.

box를 감싼 Semantics(container: true, label: …)가 그 묶음이 하나임을 말합니다. 시트 안이 아니라 바깥에 놓입니다.

React 빌드와 다른 점

React	Flutter	이유
render	—	바꿔 끼울 요소가 없습니다. <section>이 말하던 것은 box를 감싼 Semantics가 말합니다.
클래스로 주는 overflow-hidden	clipped	여기서 클립은 속성이 아니라 위젯이라 누군가의 결정이어야 합니다. 그리고 기본은 꺼져 있습니다. 클립은 자식이 자기 바깥에 그리는 것까지 잘라 냅니다.
className, style	—	전달할 class 목록도 style 속성도 없습니다.