React Dock 관리자 개요
Infragistics React Dock Manager는 창을 통해 애플리케이션의 레이아웃을 관리하는 수단을 제공하므로 최종 사용자는 창 고정, 크기 조정, 이동, 최대화 및 숨기기를 통해 애플리케이션을 추가로 사용자 정의할 수 있습니다.
React Dock Manager Example
이 예제에서는 애플리케이션에서 사용할 수 있는 IgrDockManager의 대부분의 기능과 도킹 옵션을 보여줍니다.
Dock Manager 패키지를 설치하려면 다음 명령을 실행하십시오.
npm install --save igniteui-dockmanager
그런 다음 DefineCustomElements() 함수를 가져와서 호출해야 합니다.
import { defineCustomElements } from 'igniteui-dockmanager/loader';
defineCustomElements();
PaneClose 이벤트에 대한 이벤트 리스너를 추가하는 방법은 다음과 같습니다.
this.dockManager.addEventListener('paneClose', ev => console.log(ev.detail));
Customization
Dock Manager 구성 요소는 슬롯과 부품을 사용하여 모든 버튼을 사용자 정의할 수 있는 옵션을 제공합니다. 버튼을 변경하려면 Dock Manager 내에서 고유한 요소를 정의하고 슬롯 속성을 해당 식별자로 설정하기만 하면 됩니다.
이러한 슬롯과 부품을 활용하여 맞춤형 Dock Manager 레이아웃을 만들어 보겠습니다. 먼저 closeButton, maximizeButton, minimizeButton, pinButton 및 unpinButton 슬롯을 사용하여 자체 아이콘을 제공합니다.
그런 다음 스타일시트에서 노출된 부분을 사용하겠습니다. 이렇게 하면 구성 요소의 스타일을 완전히 제어할 수 있습니다.
igc-dockmanager::part(unpinned-tab-area) {
background: #bee9ec;
}
igc-dockmanager::part(unpinned-tab-area--left) {
border-right: 1px dashed #004d7a;
}
igc-dockmanager::part(unpinned-tab-area--bottom) {
border-top: 1px dashed #004d7a;
}
igc-dockmanager::part(tab-header-close-button),
igc-dockmanager::part(pane-header-close-button) {
background-color: #e73c7e;
}
igc-dockmanager::part(pane-header-pin-button),
igc-dockmanager::part(pane-header-unpin-button) {
background: rgb(218, 218, 218);
border: none;
width: 24px;
height: 24px;
color: #fff;
}
igc-dockmanager::part(tabs-maximize-button),
igc-dockmanager::part(tabs-minimize-button),
igc-dockmanager::part(pane-header-minimize-button),
igc-dockmanager::part(pane-header-maximize-button) {
width: 24px;
height: 24px;
border: none;
transition: opacity 250ms ease-in-out;
opacity: 0.3;
margin-right: 15px;
margin-top: -5px;
margin-left: 0px;
}
모든 것이 순조롭게 진행되었다면 이제 사용자 정의된 아이콘과 탭 영역이 있는 DockManager가 생겼을 것입니다. 그것을 살펴보자:
아래에서는 모든 버튼의 슬롯 이름과 스플리터 핸들이 포함된 목록을 찾을 수 있습니다.
| 슬롯 이름 | 설명 |
|---|---|
closeButton |
닫기 버튼. |
paneHeaderCloseButton |
창 헤더의 닫기 버튼입니다. |
tabHeaderCloseButton |
탭 헤더의 닫기 버튼입니다. |
moreTabsButton |
더 많은 탭 버튼. |
moreOptionsButton |
더 많은 옵션 버튼. |
maximizeButton |
최대화 버튼. |
minimizeButton |
최소화 버튼. |
pinButton |
핀 버튼. |
unpinButton |
고정 해제 버튼. |
splitterHandle |
분배기 핸들입니다. |
이 페이지의 스타일링 섹션 아래 CSS 부분에서 각 슬롯의 해당 부분을 찾을 수 있습니다.
CSS Variables
다음 표에서는 Dock-manager 구성 요소의 스타일을 지정하는 데 사용되는 모든 CSS 변수를 설명합니다.
| CSS 변수 | 설명 |
|---|---|
--igc-background-color |
창 탐색기 구성 요소 내부 헤더의 배경색입니다. |
--igc-accent-color |
창 헤더 작업 부분 내부 버튼의 배경색에 초점이 맞춰져 있습니다. |
--igc-active-color |
활성 상태의 구성 요소에 사용되는 텍스트 및 상자 그림자 색상입니다. |
--igc-border-color |
창 헤더 구성 요소의 테두리 하단 색상입니다. |
--igc-font-family |
Dock-manager 구성 요소의 글꼴 모음입니다. |
--igc-dock-background |
도크 관리자, 탭 및 부동 창 구성 요소의 배경색입니다. |
--igc-dock-text |
도크 관리자 및 부동 창 구성 요소의 텍스트 색상입니다. |
--igc-pane-header-background |
창 헤더 구성 요소의 배경색입니다. |
--igc-pane-header-text |
창 헤더 구성 요소의 텍스트 색상입니다. |
--igc-pane-content-background |
도크 관리자 및 탭 패널 구성 요소 내부 콘텐츠의 배경색입니다. |
--igc-pane-content-text |
도크 관리자 및 탭 패널 구성 요소 내부 콘텐츠의 텍스트 색상입니다. |
--igc-tab-text |
탭 헤더 구성 요소의 텍스트 색상입니다. |
--igc-tab-background |
탭 헤더 구성 요소의 배경색입니다. |
--igc-tab-border-color |
탭 헤더 구성 요소의 테두리 색상입니다. |
--igc-tab-text-active |
선택한 탭 헤더 구성 요소의 텍스트 색상입니다. |
--igc-tab-background-active |
선택한 탭 헤더 구성 요소의 배경색입니다. |
--igc-tab-border-color-active |
선택한 탭 헤더 구성요소의 테두리 색상입니다. |
--igc-pinned-header-background |
고정 해제된 창 헤더 구성 요소의 배경색입니다. |
--igc-pinned-header-text |
고정 해제된 창 헤더 구성 요소의 텍스트 색상입니다. |
--igc-splitter-background |
분할자 구성 요소의 배경색입니다. |
--igc-splitter-handle |
분할자 핸들의 배경색입니다. |
--igc-button-text |
창 헤더 작업 부분 내부의 버튼 색상입니다. |
--igc-flyout-shadow-color |
콘텐츠 창 구성 요소의 상자 그림자 색상입니다. |
--igc-joystick-background |
조이스틱 및 루트 도킹 표시기 구성 요소의 배경색입니다. |
--igc-joystick-border-color |
조이스틱 및 루트 도킹 표시기 구성 요소의 테두리 색상입니다. |
--igc-joystick-icon-color |
조이스틱 및 루트 도킹 표시기 구성 요소의 아이콘 색상입니다. |
--igc-joystick-background-active |
조이스틱 및 루트 도킹 표시기 구성 요소의 호버 배경색입니다. |
--igc-joystick-icon-color-active |
조이스틱 및 루트 도킹 표시기 구성 요소의 호버 아이콘 색상입니다. |
--igc-floating-pane-border-color |
부동 창의 테두리 색상입니다. |
--igc-context-menu-background |
상황에 맞는 메뉴 항목의 배경색입니다. |
--igc-context-menu-background-active |
마우스 오버 및 포커스 시 상황에 맞는 메뉴 항목의 배경색입니다. |
--igc-context-menu-color |
상황에 맞는 메뉴 항목의 텍스트 색상입니다. |
--igc-context-menu-color-active |
마우스 오버 및 포커스 시 상황에 맞는 메뉴 항목의 텍스트 색상입니다. |
--igc-drop-shadow-background |
그림자의 배경색입니다. |
--igc-disabled-color |
비활성화된 상태의 구성요소의 텍스트 색상입니다. |
Keyboard Navigation
키보드 탐색은 Dock Manager의 접근성을 향상시키고 모든 창 탐색, 활성 창 도킹을 통해 여러 방향으로 보기 분할 등과 같은 최종 사용자에게 다양한 상호 작용을 제공합니다.
단축키는 다음과 같습니다.
Docking
- Cmd/Ctrl + Shift + ↑ 전역 상단에 도킹
- Cmd/Ctrl + Shift + ↓ 전역 하단에 도킹
- Cmd/Ctrl + Shift + → 전역 오른쪽으로 도킹
- Cmd/Ctrl + Shift + ← 전역 왼쪽으로 도킹
- Shift + ↑ 탭 그룹에 여러 탭이 있으면 보기가 분할되고 초점이 맞춰진 탭이 위에 도킹됩니다.
- Shift + ↓ 탭 그룹에 여러 탭이 있으면 보기가 분할되고 초점이 맞춰진 탭이 아래에 도킹됩니다.
- Shift + → 탭 그룹에 여러 탭이 있으면 보기가 분할되고 초점이 맞춰진 탭이 오른쪽에 도킹됩니다.
- Shift + ← 탭 그룹에 여러 탭이 있으면 보기가 분할되고 초점이 맞춰진 탭이 왼쪽에 고정됩니다.
Navigating
- Cmd/Ctrl + F6 또는 Cmd/Ctrl + → 문서 호스트의 다음 탭에 초점을 맞춥니다.
- Cmd/Ctrl + Shift + F6 또는 Cmd/Ctrl + ← 문서 호스트의 이전 탭에 초점을 맞춥니다.
- Alt + F6 다음 콘텐츠 창에 초점을 맞춥니다.
- Alt + Shift + F6 이전 콘텐츠 창에 초점을 맞춥니다.
Pane Navigator
다음 키보드 단축키는 창과 문서를 반복할 수 있는 탐색기를 보여줍니다.
- Cmd/Ctrl + F7 또는 Cmd/Ctrl + F8 첫 번째 문서부터 시작합니다.
- Alt + F7 또는 Alt + F8 첫 번째 창부터 시작합니다.
- Cmd/Ctrl + Shift + F7 또는 Cmd/Ctrl + Shift + F8 마지막 문서부터 뒤로 시작합니다.
- Alt + Shift + F7 또는 Alt + Shift + F8 마지막 창에서 뒤로 시작합니다.
Other
- Alt + F3 활성 창을 닫습니다.
샘플 데모에서 위에 언급된 모든 작업을 연습해 보세요.
Styling
Dock Manager는 Shadow DOM을 사용하여 스타일과 동작을 캡슐화합니다. 결과적으로 일반적인 CSS 선택기를 사용하여 내부 요소를 간단히 타겟팅할 수는 없습니다. 이것이 바로 우리가::part CSS 선택기로 타겟팅할 수 있는 구성 요소 부분을 노출하는 이유입니다.
igc-dockmanager::part(content-pane) {
border-radius: 10px;
}
다음 예에서는 노출된 CSS 부분 중 일부를 통해 Dock Manager를 사용자 정의하는 기능을 보여줍니다.
CSS Parts
| 부품명 | 설명 |
|---|---|
content-pane |
콘텐츠 창 구성 요소입니다. |
pane-header |
콘텐츠 창 헤더 구성요소입니다. |
pane-header-content |
콘텐츠 창 헤더의 콘텐츠 영역입니다. |
pane-header-actions |
콘텐츠 창 헤더의 작업 영역입니다. |
active |
활성 상태를 나타냅니다. 적용대상pane-header,pane-header-content,pane-header-actions,tab-header. |
floating |
부동 창 배치를 나타냅니다. 적용대상pane-header,pane-header-content,pane-header-actions. |
window |
부동 창 배치를 나타냅니다. 적용대상pane-header,pane-header-content,pane-header-actions. |
split-pane |
분할 창 구성 요소입니다. |
splitter |
크기 조정 분할기 구성 요소입니다. |
splitter-base |
스플리터 구성 요소의 기본 요소입니다. |
splitter-ghost |
스플리터 구성 요소의 고스트 요소입니다. |
unpinned-pane-header |
고정 해제된 창 헤더 구성 요소입니다. |
tab-header |
탭 헤더 구성 요소입니다. |
tab-header-more-options-button |
탭 헤더의 추가 옵션 버튼. |
tab-header-close-button |
탭 헤더의 닫기 버튼입니다. |
selected |
선택된 상태를 나타냅니다. 적용대상tab-header 그리고tab-header-close-button. |
hovered |
호버 상태를 나타냅니다. 적용대상tab-header-close-button. |
header-title |
탭 헤더의 텍스트 제목입니다. |
tab-strip-area |
탭 헤더가 포함된 탭 표시줄 영역입니다. |
tab-strip-actions |
탭 작업이 포함된 탭 표시줄 영역입니다. |
top |
상단 탭 위치를 나타냅니다. 적용대상tab-header,tab-strip-area,tab-strip-actions. |
bottom |
하단 탭 위치를 나타냅니다. 적용대상tab-header,tab-strip-area,tab-strip-actions. |
context-menu |
상황에 맞는 메뉴 구성 요소입니다. |
context-menu-item |
상황에 맞는 메뉴 구성 요소의 항목입니다. |
docking-preview |
도킹 미리보기 영역. |
docking-indicator |
루트가 아닌 도킹 표시기입니다. |
root-docking-indicator |
루트 도킹 표시기입니다. |
pane-navigator |
창 탐색기 구성 요소입니다. |
pane-navigator-header |
창 탐색기의 헤더 영역입니다. |
pane-navigator-body |
창 탐색기의 본문 영역입니다. |
pane-navigator-items-group |
창 탐색기 구성 요소의 항목 그룹입니다. |
pane-navigator-items-group-title |
창 탐색기에 있는 항목 그룹의 제목 요소입니다. |
pane-navigator-item |
창 탐색기의 항목입니다. |
pane-header-close-button |
창 헤더의 닫기 버튼입니다. |
pane-header-maximize-button |
창 헤더의 최대화 버튼. |
pane-header-minimize-button |
창 헤더의 최소화 버튼. |
pane-header-pin-button |
창 헤더의 핀 버튼입니다. |
pane-header-unpin-button |
창 헤더의 고정 해제 버튼입니다. |
tabs-maximize-button |
탭 최대화 버튼. |
tabs-minimize-button |
탭 최소화 버튼. |
tabs-more-button |
더 많은 탭 버튼. |
context-menu-unpin-button |
상황에 맞는 메뉴의 고정 해제 버튼. |
context-menu-close-button |
상황에 맞는 메뉴의 닫기 버튼입니다. |
splitter-handle |
분배기 핸들입니다. |
horizontal |
수평 위치를 나타냅니다. 적용대상splitter-handle. |
vertical |
수직 위치를 나타냅니다. 적용대상splitter-handle. |