PlEmpty

아무것도 없는 자리를 위한 컴포넌트입니다. 빈 목록, 결과가 없는 검색, 끝난 절차에 씁니다. 표시 하나와 한 줄, 한 문장, 그리고 빠져나갈 길을 담습니다.

React

import { PlEmpty } from 'plass-ui';

<PlEmpty
  icon={<InboxIcon />}
  title="No projects yet"
  description="Start one and it will show up here."
  actions={<PlButton>New project</PlButton>}
/>;

import 'package:plass_ui/plass_ui.dart';

PlEmpty(
  icon: const Icon(Icons.inbox),
  title: const Text('No projects yet'),
  description: const Text('Start one and it will show up here.'),
  actions: <Widget>[PlButton(onPressed: create, child: const Text('New project'))],
);

Props

Prop	타입	기본값	설명
icon	ReactNode	—	글자 위의 글리프나 그림. size에 맞춰 크기가 정해집니다
title	ReactNode	—	무엇이 없는지 말하는 한 줄
description	ReactNode	—	그것에 대해 무엇을 할지. 한두 문장이지 문단이 아닙니다
actions	ReactNode	—	빠져나갈 길 — 보통 PlButton 하나
size공통	'xs' | 'sm' | 'md' | 'lg' | 'xl'	'md'	글리프 · 타입 스케일 · 주위 공간
color공통	'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'info'	'secondary'	글리프의 색 역할. secondary는 아직 없음, danger는 잘못됨, success는 끝남
density공통	'default' | 'compact'	'default'	세로 여백만 바꿉니다

Prop	타입	기본값	설명
icon	Widget?	—	글자 위의 글리프나 그림. size에 맞춰 크기가 정해집니다
title	Widget?	—	무엇이 없는지 말하는 한 줄
description	Widget?	—	그것에 대해 무엇을 할지. 한두 문장이지 문단이 아닙니다
actions	List<Widget>	[]	빠져나갈 길 — 보통 PlButton 하나
child	Widget?	—	description과 actions 사이에 들어갈 그 밖의 것
size공통	PlassSize	PlassSize.md	글리프 · 타입 스케일 · 주위 공간
color공통	PlassColor	PlassColor.secondary	글리프의 색 역할. secondary는 아직 없음, danger는 잘못됨, success는 끝남
density공통	PlassDensity	PlassDensity.standard	세로 여백만 바꿉니다

네이티브 <div> 속성은 그대로 통과합니다. 공유 축이 라이브러리 전체에서 무엇을 뜻하는지는 prop 규약에 있습니다.

actions는 React 빌드의 슬롯 하나가 아니라 Wrap에 담기는 List<Widget>입니다. Dart 호출자에게는 버튼 둘을 넣을 fragment가 없습니다.

하나의 컴포넌트

빈 목록, 결과 없는 검색, 실패한 요청, 끝난 절차는 같은 배치입니다(표시 하나, 한 줄, 한 문장, 빠져나갈 길). 그래서 하나의 컴포넌트입니다. 그것들을 구분하는 것은 color입니다.

secondary (기본)	아직 아무것도 없습니다. 잘못된 것은 없습니다
danger	잘못된 것이 있습니다
success	끝났습니다. 두 번째 컴포넌트 없이 "주문이 확인되었습니다" 화면이 됩니다

React

import { PlButton, PlCard, PlEmpty } from 'plass-ui';

export default function EmptyKinds() {
  return (
    <div className="grid w-full gap-4 md:grid-cols-3">
      <PlCard>
        <PlEmpty
          size="sm"
          icon={<span>🔍</span>}
          title="No results"
          description="Try fewer words."
        />
      </PlCard>

      <PlCard>
        <PlEmpty
          size="sm"
          color="danger"
          icon={<span>⚠️</span>}
          title="Could not load"
          description="The server did not answer."
          actions={
            <PlButton size="sm" color="danger" variant="glass">
              Try again
            </PlButton>
          }
        />
      </PlCard>

      <PlCard>
        <PlEmpty
          size="sm"
          color="success"
          icon={<span>✅</span>}
          title="All done"
          description="Your order is on its way."
        />
      </PlCard>
    </div>
  );
}

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

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

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      width: 620,
      child: Row(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          const Expanded(
            child: PlCard(
              child: PlEmpty(
                size: PlassSize.sm,
                icon: Text('🔍'),
                title: Text('No results'),
                description: Text('Try fewer words.'),
              ),
            ),
          ),
          const SizedBox(width: 16),
          Expanded(
            child: PlCard(
              child: PlEmpty(
                size: PlassSize.sm,
                color: PlassColor.danger,
                icon: const Text('⚠️'),
                title: const Text('Could not load'),
                description: const Text('The server did not answer.'),
                actions: <Widget>[
                  PlButton(
                    size: PlassSize.sm,
                    color: PlassColor.danger,
                    variant: PlassVariant.glass,
                    onPressed: () {},
                    child: const Text('Try again'),
                  ),
                ],
              ),
            ),
          ),
          const SizedBox(width: 16),
          const Expanded(
            child: PlCard(
              child: PlEmpty(
                size: PlassSize.sm,
                color: PlassColor.success,
                icon: Text('✅'),
                title: Text('All done'),
                description: Text('Your order is on its way.'),
              ),
            ),
          ),
        ],
      ),
    );
  }
}

자기 표면 없음

빈 상태는 언제나 무언가 안에 있습니다(카드, 표, 패널). 그리고 시트 안의 시트는 시트 둘입니다. 이 컴포넌트가 정하는 것은 배치와 그 주위의 공간입니다.

React

import { PlButton, PlEmpty, PlTable } from 'plass-ui';

interface Row {
  id: string;
  name: string;
}

export default function EmptyTable() {
  return (
    <PlTable<Row>
      className="w-full"
      columns={[
        { key: 'name', header: 'Name' },
        { key: 'id', header: 'Id' }
      ]}
      rows={[]}
      empty={
        <PlEmpty
          size="sm"
          title="Nothing matches that filter"
          description="Clear it to see everything again."
          actions={
            <PlButton size="sm" variant="glass" color="secondary">
              Clear filters
            </PlButton>
          }
        />
      }
    />
  );
}

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

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

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      width: 460,
      child: PlTable<Map<String, String>>(
        columns: <PlTableColumn<Map<String, String>>>[
          PlTableColumn<Map<String, String>>(
            header: const Text('Name'),
            cell: (Map<String, String> row, int _) => Text(row['name'] ?? ''),
          ),
          PlTableColumn<Map<String, String>>(
            header: const Text('Id'),
            cell: (Map<String, String> row, int _) => Text(row['id'] ?? ''),
          ),
        ],
        rows: const <Map<String, String>>[],
        empty: PlEmpty(
          size: PlassSize.sm,
          title: const Text('Nothing matches that filter'),
          description: const Text('Clear it to see everything again.'),
          actions: <Widget>[
            PlButton(
              size: PlassSize.sm,
              variant: PlassVariant.glass,
              color: PlassColor.secondary,
              onPressed: () {},
              child: const Text('Clear filters'),
            ),
          ],
        ),
      ),
    );
  }
}

PlTable의 empty prop이 node를 받는데, 이것이 그 node가 기다리던 것입니다.

빠져나갈 action

제대로 할 가치가 있는 하나입니다. "프로젝트 없음"이라고 말하고 멈추는 화면은 막다른 길입니다. 같은 화면에 "새 프로젝트" 버튼이 있으면, 그것을 권하기에 절차 전체에서 가장 좋은 순간이 됩니다. 사용자가 그것이 들어갈 자리를 똑바로 보고 있기 때문입니다.

정말로 할 일이 없다면(결과 없는 검색처럼, 할 일이 "다른 걸 입력하기"라면) 버튼을 지어내는 대신 description에 그렇게 쓰세요.

Accessibility

• 글리프는 aria-hidden입니다. title이 그것이 말하는 바를 말하고, 사용자가 두 번 들어서는 안 됩니다.
• 자체 role이 없습니다. 그 비어 있음이 사용자가 방금 한 일의 결과일 때(필터를 지웠거나 검색을 돌렸을 때) role="status"를 붙여 변화가 알려지게 하세요. 페이지가 로드될 때부터 비어 있던 목록에는 붙이지 마세요. 이미 읽혔습니다.
• title은 heading이 아니라 <p>입니다. 문서 개요에서 그것이 어디에 속하는지는 페이지의 결정이지 이 컴포넌트의 것이 아닙니다. heading이어야 한다면 위에 PlTypography를 두세요.

글리프는 ExcludeSemantics로 감쌉니다. role은 없습니다. 그 비어 있음이 사용자가 방금 한 일의 결과라면 Semantics(liveRegion: true) 안에 넣으세요.