Separator | CoUI
LogoCoUI

Separator

콘텐츠를 시각적으로 구분하는 구분자 컴포넌트

Separator#

콘텐츠 영역을 시각적으로 구분하는 선 컴포넌트입니다.

Live Preview#

Web
Flutter
Loading Flutter... 
class SeparatorDefaultExample extends StatelessComponent {
  const SeparatorDefaultExample({super.key});

  @override
  Component build(BuildContext context) {
    return CoSeparator();
  }
}
class SeparatorDefaultExample extends StatefulWidget {
  const SeparatorDefaultExample({super.key});

  @override
  State<SeparatorDefaultExample> createState() =>
      _SeparatorDefaultExampleState();
}

class _SeparatorDefaultExampleState extends State<SeparatorDefaultExample> {
  @override
  Widget build(BuildContext context) {
    return const CoSeparator();
  }
}

사용 시기 (When to Use)#

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

  • 메뉴나 목록 내 항목 그룹을 시각적으로 구분할 때
  • 수직 구분선으로 나란히 배치된 요소들을 구분할 때

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

  • Resizable: 드래그로 크기를 조절할 수 있는 분할 패널이 필요할 때

기본 사용법 (Basic Usage)#

// 기본 수평 구분선
CoSeparator()

// 수직 구분선
CoSeparator(orientation: CoreSeparatorOrientation.vertical)

// 커스텀 색상 & 두께
CoSeparator(color: Colors.red, thickness: 2)

Props / Parameters#

속성타입기본값설명
orientation CoreSeparatorOrientation .horizontal 구분선 방향
color Color? / String? outline / bg-border 구분선 색상
thickness double? 1.0 (CoreBorderWidth.thin) 구분선 두께

변형 (Variants)#

기본 수평선#

Web
Flutter
Loading Flutter... 
class SeparatorDefaultExample extends StatelessComponent {
  const SeparatorDefaultExample({super.key});

  @override
  Component build(BuildContext context) {
    return CoSeparator();
  }
}
class SeparatorDefaultExample extends StatefulWidget {
  const SeparatorDefaultExample({super.key});

  @override
  State<SeparatorDefaultExample> createState() =>
      _SeparatorDefaultExampleState();
}

class _SeparatorDefaultExampleState extends State<SeparatorDefaultExample> {
  @override
  Widget build(BuildContext context) {
    return const CoSeparator();
  }
}

수직선#

Web
Flutter
Loading Flutter... 
class SeparatorVerticalExample extends StatelessComponent {
  const SeparatorVerticalExample({super.key});

  @override
  Component build(BuildContext context) {
    return CoSeparator(
      orientation: CoreSeparatorOrientation.vertical,
    );
  }
}
class SeparatorVerticalExample extends StatefulWidget {
  const SeparatorVerticalExample({super.key});

  @override
  State<SeparatorVerticalExample> createState() =>
      _SeparatorVerticalExampleState();
}

class _SeparatorVerticalExampleState extends State<SeparatorVerticalExample> {
  @override
  Widget build(BuildContext context) {
    return const CoSeparator(
      orientation: CoreSeparatorOrientation.vertical,
    );
  }
}

동작 스펙 (Behavior)#

인터랙션#

  • 정적 표시 컴포넌트로 인터랙션 없음

상태 전환#

  • 상태 없음 (정적 컴포넌트)

애니메이션#

  • 별도 애니메이션 없음

접근성 (Accessibility)#

키보드 인터랙션#

키동작
해당 없음정적 컴포넌트로 키보드 인터랙션 없음

스크린 리더#

  • Web: role="separator", aria-orientation 속성 자동 적용

터치 타겟#

  • 정적 컴포넌트로 별도 터치 타겟 불필요

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

항목FlutterWeb
클래스명CoSeparatorCoSeparator
방향 설정 CoreSeparatorOrientation CoreSeparatorOrientation
색상 타입Color?String?
렌더링 Container <div> with bg-border

관련 컴포넌트 (Related Components)#

  • Resizable: 드래그 가능한 분할 패널 핸들