SubfocusScope | CoUI
LogoCoUI

SubfocusScope

자식 Subfocus 항목 간 방향키 포커스 이동을 관리하는 스코프 (인프라)

SubfocusScope#

내부 Subfocus 항목들 사이의 방향키 포커스 이동을 관리하는 스코프(인프라)입니다. orientation 이 traversal 축(↑↓ vs ←→)을 결정하고, 각 Subfocus(focusId:) 항목이 스코프에 자신을 등록합니다. 메뉴·리스트·툴바 같은 컴포넌트의 키보드 내비게이션 기반입니다.

Live Preview#

Web
항목 A (↑↓ 키로 이동)
항목 B
항목 C
Flutter
Loading Flutter... 
class SubfocusScopeDefaultExample extends StatelessComponent {
  const SubfocusScopeDefaultExample({super.key});

  @override
  Component build(BuildContext context) {
    return SubfocusScope(
      child: div(
        classes: 'flex flex-col gap-${CoreSpace.scale.space8}',
        [
          Subfocus(
            focusId: 'a',
            child: Card(child: Text('항목 A (↑↓ 키로 이동)').bodyMedium),
          ),
          Subfocus(focusId: 'b', child: Card(child: Text('항목 B').bodyMedium)),
          Subfocus(focusId: 'c', child: Card(child: Text('항목 C').bodyMedium)),
        ],
      ),
    );
  }
}
class SubfocusScopeDefaultExample extends StatelessWidget {
  const SubfocusScopeDefaultExample({super.key});

  @override
  Widget build(BuildContext context) {
    return SubfocusScope(
      child: Column(
        mainAxisSize: MainAxisSize.min,
        spacing: CoreSpace.space8,
        children: [
          Subfocus(
            focusId: 'a',
            child: Card(child: Text('항목 A (↑↓ 키로 이동)').bodyMedium),
          ),
          Subfocus(
            focusId: 'b',
            child: Card(child: Text('항목 B').bodyMedium),
          ),
          Subfocus(
            focusId: 'c',
            child: Card(child: Text('항목 C').bodyMedium),
          ),
        ],
      ),
    );
  }
}

사용법#

SubfocusScope(
  child: Column(
    children: [
      Subfocus(focusId: 'a', child: Card(child: Text('항목 A').bodyMedium)),
      Subfocus(focusId: 'b', child: Card(child: Text('항목 B').bodyMedium)),
      Subfocus(focusId: 'c', child: Card(child: Text('항목 C').bodyMedium)),
    ],
  ),
)

Props#

SubfocusScope#

파라미터타입기본값설명
child Widget / Component required 스코프 내용 (Subfocus 항목 포함)
autofocus bool false 마운트 시 첫 항목 자동 포커스
orientation CoreSubfocusOrientation vertical traversal 축 (vertical ↑↓ / horizontal ←→)

Subfocus (항목)#

파라미터타입기본값설명
child Widget / Component required 포커스 가능한 항목 콘텐츠
focusIdStringrequired스코프 내 고유 식별자
enabled bool true traversal 참여 여부
subfocusStyle CoreSubfocusStyle? null 항목 chrome 단일 진입점