기본값 정하기

PlassProvider는 그 아래 모든 것의 size · color · density와 날짜 어휘를 정합니다. 선택 사항이고(없어도 라이브러리는 완성돼 있습니다) 이것이 없애는 것은 받아쓰기입니다.

React

import { PlassProvider } from 'plass-ui';

<PlassProvider size="sm" density="compact" locale="ko-KR">
  <App />
</PlassProvider>;

import 'package:plass_ui/plass_ui.dart';

PlassTheme.merge(
  defaults: const PlassDefaults(
    size: PlassSize.sm,
    density: PlassDensity.compact,
    names: PlDateNames(months: <String>['1월', '…']),
  ),
  child: const MyApp(),
);

평범한 생성자가 아니라 PlassTheme.merge를 쓰세요. 생성자는 걸려 있던 기본값을 대체하고, merge는 위쪽의 것을 유지합니다. DefaultTextStyle과 DefaultTextStyle.merge가 갈리는 방식과 같고 이유도 같습니다. InheritedWidget에는 조상을 읽을 자기 context가 없어서, 병합은 context가 있는 자리에서 일어나야 합니다. merge는 brightness도 유지하므로, 어두운 화면의 한 구역만 밝아지지 않고 compact하게 만들 수 있습니다.

설정 항목

size	모든 컴포넌트가 출발하는 size 사다리의 칸
color	출발하는 의미론적 family
density	내용을 얼마나 빽빽하게 담을지
locale	날짜 · 시간 · 숫자 컴포넌트가 서식하고 읽는 기준이 되는 BCP 47 태그
weekStartsOn	주가 시작하는 요일. Date가 세는 방식이라 일요일이 0
labels	컴포넌트가 말하는, Intl이 의견을 갖지 않는 문자열들

기본값은 아니지만 하나를 더 나릅니다. 읽는 방향입니다. 오른쪽에서 왼쪽으로를 보세요. dir="rtl" 문서는 배치를 스스로 뒤집지만, JavaScript에서 방향을 읽는 동작들에게 그것을 전해 주는 것이 이 provider입니다. 설정할 것은 없습니다. direction은 주변 페이지와 반대로 흐르는 subtree에만 씁니다.

여기서는 locale이 names와 labels입니다. 프레임워크에 Intl이 없으므로 theme이 나르는 것은 말 자체입니다. PlDateNames는 달과 요일을 들고 있고, PlassLabels는 widget이 스스로에 대해 하는 말을 전부 들고 있습니다. 그 이야기는 말 번역하기에 있습니다.

일부러 정하지 않는 것

variant와 elevation은 일부러 없습니다. 이것을 갭으로 접수하기 전에 읽어 둘 만한 대목입니다.

variant는 표면이 무엇으로 만들어졌는지 를 이름 붙입니다. 디자인 언어는 첫 문단을 통째로, 누르는 것과 무언가를 담는 것이 서로 다른 재질이라는 사실에 씁니다. PlButton이 solid이고 PlCard가 glass인 것은 그것이 그 배치이기 때문이지, 아무도 설정할 짬이 없어서가 아닙니다. 둘에 하나의 값을 주는 것은 기본값이 아니라 납작하게 만드는 일입니다.

elevation도 같은 이유로 컴포넌트별 의미론입니다. 컨트롤은 시트 위에 놓여 1에서 출발하고, field는 시트 안으로 파여 0에서 출발합니다. 둘에 하나의 숫자를 주는 것은 사다리가 뜻하는 바의 반대를 말하는 것입니다.

정말로 모든 버튼을 glass로 하고 싶은 애플리케이션은 버튼에 씁니다. size="sm"을 되풀이하던 호출 지점보다 버튼 쪽이 훨씬 적습니다.

우선순위

네 겹이고, 순서는 누구나 짐작할 그 순서입니다.

컴포넌트 자신의 prop → 그것이 속한 집합 → 가장 가까운 provider → 컴포넌트 자신의 기본값.

<PlassProvider size="sm">
  <PlButtonGroup size="lg">
    <PlButton>그룹에서 온 lg</PlButton>
    <PlButton size="xs">자기 prop에서 온 xs</PlButton>
  </PlButtonGroup>

  <PlButton>provider에서 온 sm</PlButton>
</PlassProvider>

provider는 중첩되고 병합됩니다. compact가 아닌 애플리케이션 안의 compact한 구역은 density만 말하고, 위쪽 provider의 locale과 size는 그대로 유지합니다.

Examples

locale 하나, picker 다섯

locale은 PlCalendar · PlDatePicker · PlDateRangePicker · PlTimePicker · PlDateTimePicker · PlNumberField에 닿습니다. labels는 각 컴포넌트 자신의 것 아래로 병합되므로, 애플리케이션이 어휘를 한 번 번역해 두고도 picker 하나는 다른 말을 할 수 있습니다. 나머지가 전부 "시작"이라고 할 때 하나만 "체크인"이라고. 그 어휘는 번역된 채로 함께 배포됩니다. 말 번역하기를 보세요.

React

import { PlDatePicker, PlassProvider } from 'plass-ui';

export default function ProviderLocale() {
  return (
    <PlassProvider
      locale="ko-KR"
      weekStartsOn={1}
      labels={{ today: '오늘', clear: '지우기', chooseMonth: '월 선택', chooseYear: '연 선택' }}
    >
      <PlDatePicker label="출발일" placeholder="날짜를 고르세요" clearable />
    </PlassProvider>
  );
}

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

class ProviderLocale extends StatefulWidget {
  const ProviderLocale({super.key});

  @override
  State<ProviderLocale> createState() => _ProviderLocaleState();
}

class _ProviderLocaleState extends State<ProviderLocale> {
  DateTime? _value;

  @override
  Widget build(BuildContext context) {
    // One place names the words, and every date widget under it answers.
    return PlassTheme.merge(
      defaults: const PlassDefaults(
        names: PlDateNames(
          months: <String>[
            '1월',
            '2월',
            '3월',
            '4월',
            '5월',
            '6월',
            '7월',
            '8월',
            '9월',
            '10월',
            '11월',
            '12월',
          ],
          weekdaysShort: <String>['일', '월', '화', '수', '목', '금', '토'],
        ),
        labels: PlPickerLabels(today: '오늘', clear: '지우기'),
        weekStartsOn: PlassWeekday.monday,
      ),
      child: SizedBox(
        width: 300,
        child: PlDatePicker(
          fullWidth: true,
          label: const Text('출발일'),
          placeholder: const Text('날짜를 고르세요'),
          clearable: true,
          value: _value,
          onChanged: (DateTime? next) => setState(() => _value = next),
        ),
      ),
    );
  }
}

지금 무엇이 걸려 있는지 읽기

import { usePlassDefaults } from 'plass-ui';

const { size, locale } = usePlassDefaults();

주변 컴포넌트와 줄을 맞춰야 하는 자체 컴포넌트를 위한 것입니다. 모든 필드가 optional입니다. provider가 정하기 전까지는 아무것도 정해져 있지 않습니다.

Notes

• 모든 widget이 읽습니다. PlTable도 포함입니다. 여기에는 server component 경계가 없으므로 React 빌드의 그 예외가 존재하지 않습니다.
• defaults만 준 PlassTheme이 위쪽 brightness를 유지하려면 merge가 필요합니다. 첫 예제 아래 설명을 보세요.

• PlTable은 provider를 읽지 않습니다. 유일한 예외입니다. 이 컴포넌트는 일부러 React Server Component의 client graph 밖에 두었고(모든 column이 render 콜백인데, server component는 그 경계 너머로 함수를 건넬 수 없습니다) context를 읽으면 client component가 됩니다. size와 density는 컴포넌트에 직접 주세요.
• provider는 element를 렌더링하지 않고 아무것도 그리지 않습니다. 컴포넌트당 context read 하나, 그리고 페이지 전체에 대해 <html> observer 하나가 비용입니다. 방향은 설정받는 것이 아니라 문서에서 읽습니다.
• theme이 아닙니다. 색 · 반경 · blur · 그림자는 CSS custom property이고, 그것을 바꾸는 자리는 Colour입니다. JavaScript에 그 사본을 하나 더 두면 진실이 둘이 됩니다.