Basic#

리스트 아이템, 설정 행, 썸네일 + 텍스트 + 액션 등 leading / title / subtitle / content / trailing 다섯 슬롯을 한 줄에 배치해야 하는 공통 패턴을 위한 레이아웃 컴포넌트입니다.

• title/subtitle/content는 가운데 셀 안에 세로로 쌓입니다.
• leading/trailing은 양쪽 끝 셀에 독립된 alignment로 배치됩니다.
• 제공된 슬롯만 렌더링됩니다. 누락된 슬롯은 공간을 차지하지 않습니다.

레거시 Basic / BasicLayout 두 클래스가 있었는데, 통일된 Basic의 forceTextStyle 플래그로 두 동작을 모두 포괄합니다.

• forceTextStyle: true (기본값): CoUI 기본 타이포그래피 강제 적용 (레거시 Basic).
• forceTextStyle: false: 슬롯은 전달받은 위젯을 있는 그대로 렌더 (레거시 BasicLayout).

Live Preview#

class BasicDefaultExample extends StatelessComponent {
  const BasicDefaultExample({super.key});

  @override
  Component build(BuildContext context) {
    return Basic(
      leading: const Icon(LucideIcons.user),
      title: Component.text('User Profile'),
      subtitle: Component.text('Manage account settings'),
      content: Component.text('Signed in as alice@example.com'),
      trailing: const Icon(LucideIcons.chevronRight),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Basic(
      leading: const Icon(LucideIcons.user),
      title: const Text('User Profile'),
      subtitle: const Text('Manage account settings'),
      content: const Text('Signed in as alice@example.com'),
      trailing: const Icon(LucideIcons.chevronRight),
    );
  }
}

사용 시기 (When to Use)#

이 컴포넌트를 사용하세요:

• 리스트 아이템 / 설정 행 / 알림 카드처럼 아이콘 + 제목 + 본문 + 액션 구조가 반복될 때
• 여러 화면에서 같은 슬롯 배치를 재사용하고 싶을 때
• Card, Accordion 등 상위 컴포넌트의 header 슬롯에 일관된 구조를 넣고 싶을 때

대신 다른 컴포넌트를 사용하세요:

• Card: 배경/보더/그림자 등 카드 스타일이 필요할 때 (카드 내부에서 Basic을 header로 쓰는 조합 가능)
• Row/Column: 슬롯 개념이 필요 없는 자유 배치

기본 사용법 (Basic Usage)#

Basic(
  leading: const Icon(LucideIcons.user),
  title: const Text('User Profile'),
  subtitle: const Text('Manage account settings'),
  content: const Text('Signed in as alice@example.com'),
  trailing: const Icon(LucideIcons.chevronRight),
)

Props / Parameters#

CoreBasicStyle 필드#

크로스 플랫폼 차이점 (Platform Differences)#

양쪽 모두 동일한 CoreBasicAlignment / CoreBasicMainAxisAlignment 값을 사용하며, 시각적 결과는 같도록 토큰(spacing/typography)을 공유합니다.

관련 컴포넌트 (Related Components)#

• Card: 배경/보더/그림자가 있는 컨테이너. 내부 header로 Basic을 재사용 가능
• Gap: 슬롯 사이 간격 토큰