PlBlockquote

남의 말을 자기 말과 떼어 놓습니다. 시작하는 쪽 가장자리에 강조색 선이 서고, 인용문은 제목의 크기로 놓이며, 출처가 있으면 HTML 명세가 요구하는 마크업으로 붙습니다.

React

import { PlBlockquote } from 'plass-ui';

<PlBlockquote author="Ada Lovelace" source="Notes on the Analytical Engine">
  Simplicity is hard.
</PlBlockquote>;

import 'package:plass_ui/plass_ui.dart';

const PlBlockquote(
  author: Text('Ada Lovelace'),
  source: Text('Notes on the Analytical Engine'),
  child: Text('Simplicity is hard.'),
);

Props

Prop	타입	기본값	설명
variant공통	'solid' | 'glass' | 'ghost'	'ghost'	시트의 재질. 컨테이너가 그렇듯 시트에는 색이 들어가지 않습니다 — 남의 말을 담기 때문입니다. 기본값 ghost는 여백의 선 하나뿐이고, 그것이 인용문이 오래도록 취해 온 모양입니다
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은 그림자 없음
author	ReactNode	—	말한 사람. 이것이 있으면 인용문이 figcaption을 가진 figure가 됩니다 — 출처는 인용문에 *대한* 것이지 말해진 내용의 일부가 아니라는 HTML 명세대로입니다
source	ReactNode	—	어디서 왔는지 — 책, 강연, 페이지. cite 안에 그려집니다. cite는 저작물의 제목을 위한 요소이고, 명세상 사람 이름에는 쓰지 않습니다
cite	string	—	인용문을 가져온 문서의 URL. blockquote의 cite 속성에 놓이며 기계만 읽고 아무에게도 보이지 않습니다
icon	ReactNode | false	—	인용문 앞의 표시. 생략하면 기본 글리프, 노드를 주면 교체, false면 없앱니다
children	ReactNode	—	말해진 내용

Prop	타입	기본값	설명
variant공통	PlassVariant	PlassVariant.ghost	시트의 재질. 컨테이너가 그렇듯 시트에는 색이 들어가지 않습니다 — 남의 말을 담기 때문입니다. 기본값 ghost는 여백의 선 하나뿐이고, 그것이 인용문이 오래도록 취해 온 모양입니다
size공통	PlassSize	PlassSize.md	인용문의 타입 스케일. 제목의 크기에 문단의 행간을 씁니다
color공통	PlassColor	PlassColor.primary	의미론적 색 역할. 임의 색상값은 받지 않습니다
density공통	PlassDensity	PlassDensity.standard	여백만 바꿉니다. 높이와 글자 크기는 그대로
elevation공통	int	0	그림자 깊이. 0은 그림자 없음
author	Widget?	—	말한 사람. 이것이 있으면 인용문이 figcaption을 가진 figure가 됩니다 — 출처는 인용문에 *대한* 것이지 말해진 내용의 일부가 아니라는 HTML 명세대로입니다
source	Widget?	—	어디서 왔는지 — 책, 강연, 페이지. cite 안에 그려집니다. cite는 저작물의 제목을 위한 요소이고, 명세상 사람 이름에는 쓰지 않습니다
icon	Widget?	—	인용문 앞의 표시. 생략하면 기본 글리프, 노드를 주면 교체, false면 없앱니다
showIcon	bool	true	따옴표 글리프를 그릴지. React는 icon={false}로 말하는 것을, null도 위젯도 아닌 값이 없는 언어에서 이름을 따로 두어 말합니다
child	Widget?	—	말해진 내용

네이티브 <figure> 속성은 안쪽의 <blockquote>가 아니라 감싸는 요소에 그대로 전달됩니다. color는 여기서 Plass의 prop이라 전달 대상에서 제외됩니다.

cite는 없습니다. Flutter에 없는 요소에 붙는, 아무도 아무것도 읽지 않는 기계용 URL입니다. 독자가 보아야 할 부분에는 source를 쓰세요.

icon은 Widget?이고 그 옆에 showIcon이 스위치로 있습니다. React는 둘을 세 갈래 prop 하나로 나타내는데, Dart에는 그럴 값이 없습니다. null이 있고 위젯이 있을 뿐, "치워라"에 해당하는 값이 없습니다.

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

Examples

author와 source

author는 사람이고 source는 저작물입니다. 이름 붙이기 취향의 문제가 아닙니다. <cite>는 저작물의 제목을 위한 요소이고 명세상 사람 이름에는 쓰지 않으므로, 둘은 한 자리를 나눠 쓸 수 없습니다.

출처는 인용문에 대한 것이지 말해진 내용의 일부가 아닙니다. 그래서 출처를 넘기면 감싸는 요소가 <figure>가 되고, <figcaption>이 <blockquote> 바깥에 놓입니다. 출처가 없으면 감싸는 요소는 그냥 <div>입니다. <figcaption>이 없는 <figure>는 아무것도 아닌 것의 그림입니다.

cite는 URL이고, <blockquote> 자신의 속성에 놓입니다. 기계만 읽고 아무에게도 보이지 않습니다.

React

import { PlBlockquote } from 'plass-ui';

export default function BlockquoteAttribution() {
  return (
    <div className="flex w-full max-w-lg flex-col gap-5">
      <PlBlockquote>Nobody is credited, so this is a plain div.</PlBlockquote>

      <PlBlockquote author="Ada Lovelace">A person said it.</PlBlockquote>

      <PlBlockquote source="Notes on the Analytical Engine">A work it came from.</PlBlockquote>

      <PlBlockquote
        author="Ada Lovelace"
        source="Notes on the Analytical Engine"
        cite="https://example.com/notes"
      >
        Both, plus the machine-readable URL nobody sees.
      </PlBlockquote>
    </div>
  );
}

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

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

  @override
  Widget build(BuildContext context) {
    return const SizedBox(
      width: 512,
      child: Column(
        mainAxisSize: MainAxisSize.min,
        crossAxisAlignment: CrossAxisAlignment.stretch,
        spacing: 20,
        children: <Widget>[
          PlBlockquote(child: Text('Nobody is credited, so there is no attribution row.')),
          PlBlockquote(author: Text('Ada Lovelace'), child: Text('A person said it.')),
          PlBlockquote(
            source: Text('Notes on the Analytical Engine'),
            child: Text('A work it came from.'),
          ),
          PlBlockquote(
            author: Text('Ada Lovelace'),
            source: Text('Notes on the Analytical Engine'),
            child: Text('Both.'),
          ),
        ],
      ),
    );
  }
}

variant

PlCard가 그렇듯 시트에는 색이 들어가지 않습니다. 인용문은 남의 말을 담고 있고, 틴트가 깔린 판 위의 말은 그 배경을 두고 고른 적 없는 말입니다. 그래서 색 계열은 선까지만 닿고 멈춥니다.

기본값 ghost는 흐르는 산문 안에 놓이는 모양입니다. 여백의 선 하나뿐이고, 선 위에 올려놓을 표면이라는 것이 생기기 훨씬 전부터 인용문은 그런 모양이었습니다.

React

import { PlBlockquote } from 'plass-ui';

export default function BlockquoteVariants() {
  return (
    <div className="flex w-full max-w-lg flex-col gap-5">
      {(['solid', 'glass', 'ghost'] as const).map((variant) => (
        <PlBlockquote key={variant} variant={variant} author={variant}>
          The same quote, three materials deep.
        </PlBlockquote>
      ))}
    </div>
  );
}

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

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

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      width: 512,
      child: Column(
        mainAxisSize: MainAxisSize.min,
        crossAxisAlignment: CrossAxisAlignment.stretch,
        spacing: 20,
        children: <Widget>[
          for (final variant in PlassVariant.values)
            PlBlockquote(
              variant: variant,
              author: Text(variant.name),
              child: const Text('The same quote, three materials deep.'),
            ),
        ],
      ),
    );
  }
}

color

React

import { PlBlockquote } from 'plass-ui';

export default function BlockquoteColors() {
  return (
    <div className="flex w-full max-w-lg flex-col gap-4">
      {(['primary', 'success', 'warning', 'danger'] as const).map((color) => (
        <PlBlockquote key={color} color={color} icon={false}>
          The family reaches the rule and stops there.
        </PlBlockquote>
      ))}
    </div>
  );
}

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

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

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      width: 512,
      child: Column(
        mainAxisSize: MainAxisSize.min,
        crossAxisAlignment: CrossAxisAlignment.stretch,
        spacing: 16,
        children: <Widget>[
          for (final color in <PlassColor>[
            PlassColor.primary,
            PlassColor.success,
            PlassColor.warning,
            PlassColor.danger,
          ])
            PlBlockquote(
              color: color,
              showIcon: false,
              child: const Text('The family reaches the rule and stops there.'),
            ),
        ],
      ),
    );
  }
}

size

React

import { PlBlockquote } from 'plass-ui';

export default function BlockquoteSizes() {
  return (
    <div className="flex w-full max-w-lg flex-col gap-4">
      {(['xs', 'sm', 'md', 'lg', 'xl'] as const).map((size) => (
        <PlBlockquote key={size} size={size} icon={false} author={size}>
          A quote is set at a heading’s scale with a paragraph’s leading.
        </PlBlockquote>
      ))}
    </div>
  );
}

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

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

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      width: 512,
      child: Column(
        mainAxisSize: MainAxisSize.min,
        crossAxisAlignment: CrossAxisAlignment.stretch,
        spacing: 16,
        children: <Widget>[
          for (final size in PlassSize.values)
            PlBlockquote(
              size: size,
              showIcon: false,
              author: Text(size.name),
              child: const Text('A quote is set at a heading’s scale with a paragraph’s leading.'),
            ),
        ],
      ),
    );
  }
}

Accessibility

• 인용문은 진짜 <blockquote>이고 출처는 그 바깥의 진짜 <figcaption>입니다. 인용문 안에 든 이름은 말한 사람이 자기 이름을 말했다고 주장하는 것이 됩니다.
• 따옴표 글리프는 장식이라 aria-hidden입니다. 저자 앞의 em dash도 마찬가지입니다. 이름 앞에서 "em dash"를 읽는 스크린리더는 텍스트가 아니라 타이포그래피를 읽고 있는 것입니다.
• <blockquote> 요소 자체에는 아무것도 그리지 않습니다. blockquote는 호스트 스타일시트가 아직도 태그 이름으로 스타일을 주는 몇 안 되는 태그이고, 표면과 선을 감싸는 요소로 옮긴 것이 호스트가 자기 버전을 되돌리면서 이쪽 것까지 되돌리지 않게 하는 방법입니다.

• 인용문과 출처는 하나의 semantics 노드로, 순서대로 읽힙니다. 출처는 말해진 내용 안이 아니라 그 뒤에 옵니다. 인용문 안에 든 이름은 말한 사람이 자기 이름을 말했다고 주장하는 것이 됩니다.
• 따옴표 글리프는 타이핑한 것이 아니라 그린 것이고 semantics에서 제외됩니다. 저자 앞의 em dash도 마찬가지입니다. 이름 앞에서 "em dash"를 읽는 스크린리더는 텍스트가 아니라 타이포그래피를 읽고 있는 것입니다.
• 선은 테두리가 아니라 텍스트 옆에 칠해집니다. 그 쪽 모서리가 각진 채로 남는 이유입니다. 자기가 표시하는 텍스트에서 휘어져 달아나는 2px 선은 여백의 선이 아니라 괄호입니다.

React 빌드와 다른 점

React	Flutter	이유
<figure> / <figcaption> / <blockquote>	semantics 노드 하나	Flutter에는 제대로 맞춰야 할 문서 마크업이 없습니다. React 빌드가 공들이는 것(출처가 어느 요소 안에 사는가) 에는 대응물이 없고, 남는 것은 읽히는 순서입니다.
cite	—	존재하지 않는 요소에 붙는, 아무도 읽지 않는 URL입니다. 독자가 보는 부분은 source입니다.
icon={false}	showIcon: false	Dart에는 null도 위젯도 아닌 값이 없으니, "치워라"가 자기 이름을 갖습니다.
children	child	Flutter의 이름입니다.
className, style	—	전달할 클래스 목록도 style 속성도 없습니다.

따옴표 글리프는 양쪽이 같은 16단위 상자에서 단위 하나까지 같은 그림입니다. 진짜 “였다면 페이지가 쓰는 서체를 따라 모양도 굵기도 baseline도 바뀌었을 텐데, 2em에서 그것은 이 컴포넌트에서 가장 큰 글리프 하나이므로 바뀌는 것 중 가장 눈에 띄는 것이 됩니다.