Tinyrack

Card

테두리가 있는 Tinyrack 표면에 관련 Flutter 콘텐츠를 묶어요.

테두리가 있는 시맨틱 표면에 관련 콘텐츠를 묶어요.

핵심 속성

속성설명
포커스콘텐츠만 묶는 카드는 focused를 끈 채로 두세요. 여러 컨트롤이 하나로 읽혀야 한다면 자식의 원시 포커스를 넘기고, 안쪽 필드에는 TRFieldAppearance.plain을 주어 링이 두 번이 아니라 한 번만 그려지게 하세요. 카드는 키보드 탐색일 때만 링을 표시해요. TRFieldAppearance.ghost 필드는 포커스를 직접 그리니, 그 필드만 감싸는 카드는 꺼 두세요. 링은 카드 위에 그려져서 카드 크기를 바꾸지 않아요.

설치

패키지를 추가한 뒤 공개 라이브러리를 가져오세요.

flutter pub add tinyrack_ui
import 'package:tinyrack_ui/tinyrack_ui.dart';

플레이그라운드

사용법

import 'package:material_ui/material_ui.dart';
import 'package:tinyrack_ui/tinyrack_ui.dart';

const TRCard(
  variant: TRCardVariant.outlined,
  child: TRCardHeader(
    children: [
      TRCardTitle(child: Text('Rack alpha')),
      TRCardDescription(child: Text('Healthy')),
    ],
  ),
)

예시

변형 고유 링크

default, outlined, elevated 중에서 골라 카드가 페이지에서 얼마나 도드라질지 정하세요.

콘텐츠 구성 고유 링크

header, content, footer 슬롯을 조합해 액션이 있는 카드를 구성하세요.

API

Card는 Flutter의 네이티브 상태와 콜백을 유지하고 Tinyrack 토큰을 기본값으로 사용해요.