Divider#
콘텐츠 영역을 시각적으로 구분하는 통일 구분선 컴포넌트입니다. CoDivider는 Flutter/Web 동일한 파라미터 이름을 가지며, 수평/수직 orientation, 두께, 색상, 들여쓰기, 중앙 child 슬롯을 지원합니다.
Live Preview#
default
Web
Flutter
Loading Flutter...
class DividerDefaultExample extends StatelessComponent {
const DividerDefaultExample({super.key});
@override
Component build(BuildContext context) {
return const CoDivider();
}
}
class DividerDefaultExample extends StatelessWidget {
const DividerDefaultExample({super.key});
@override
Widget build(BuildContext context) {
return const CoDivider();
}
}
vertical
Web
Flutter
Loading Flutter...
class DividerVerticalExample extends StatelessComponent {
const DividerVerticalExample({super.key});
@override
Component build(BuildContext context) {
return div(
[const CoDivider(orientation: .vertical)],
styles: Styles(raw: {'height': '${CoreSpace.space64}px'}),
);
}
}
class DividerVerticalExample extends StatelessWidget {
const DividerVerticalExample({super.key});
@override
Widget build(BuildContext context) {
return SizedBox(
height: CoreSpace.space64,
child: const CoDivider(orientation: .vertical),
);
}
}
with-child
Web
OR
Flutter
Loading Flutter...
class DividerWithChildExample extends StatelessComponent {
const DividerWithChildExample({super.key});
@override
Component build(BuildContext context) {
final cs = context.theme.colorScheme;
final ts = context.theme.typography;
return CoDivider(
child: div(
[Component.text('OR')],
classes: 'text-${ts.bodySmall} text-${cs.onSurfaceVariant}',
),
);
}
}
class DividerWithChildExample extends StatelessWidget {
const DividerWithChildExample({super.key});
@override
Widget build(BuildContext context) {
final ts = Theme.of(context).typography;
final cs = Theme.of(context).colorScheme;
return CoDivider(
child: DefaultTextStyle.merge(
style: ts.bodySmall.copyWith(color: cs.onSurfaceVariant),
child: const Text('OR'),
),
);
}
}
사용 시기#
- 리스트 항목 사이나 섹션 사이에 시각적 경계선이 필요할 때
- 폼 필드나 메뉴 항목 사이를 구분할 때
- "또는" 구분선처럼 라벨이 있는 구분선이 필요할 때
기본 사용법#
// 기본 수평 구분선
CoDivider()
// 수직 구분선 (부모가 높이를 제공해야 함)
SizedBox(
height: CoreSpace.space64,
child: const CoDivider(orientation: .vertical),
)
// 들여쓰기
CoDivider(indent: 16, endIndent: 16)
// 라벨이 있는 구분선
CoDivider(child: Text('OR'))
// 기본 수평 구분선
CoDivider()
// 수직 구분선 (부모가 높이를 제공해야 함)
div(
[const CoDivider(orientation: .vertical)],
styles: Styles(raw: {'height': '\${CoreSpace.space64}px'}),
)
// 들여쓰기
CoDivider(indent: 16, endIndent: 16)
// 라벨이 있는 구분선
CoDivider(
child: div(
[Component.text('OR')],
classes: 'text-\${ts.bodySmall} text-\${cs.onSurfaceVariant}',
),
)
Props#
| 속성 | 타입 | 기본값 | 설명 |
|---|---|---|---|
orientation |
CoreDividerOrientation |
horizontal |
구분선 방향 |
child |
Widget? / Component? |
null |
중앙에 표시할 슬롯 ("OR" 등) |
color |
Color? / String? |
outlineVariant |
선 색상 override |
thickness |
double? |
1 |
선 두께 (px) |
indent |
double? |
0 |
시작 가장자리 여백 (px) |
endIndent |
double? |
0 |
끝 가장자리 여백 (px) |
padding |
EdgeInsetsGeometry? / double? |
8 |
중앙 child 주위 여백 |
색상 토큰#
기본 색상은 CoreColorScheme.outlineVariant — M3 표준 divider 토큰. 프로젝트 전역 변경은 CoreComponentTheme.divider
로 설정.