Blazor Dock 관리자 개요
Infragistics Blazor Dock Manager는 창을 통해 애플리케이션의 레이아웃을 관리하는 수단을 제공하므로 최종 사용자가 창 고정, 크기 조정, 이동, 최대화 및 숨기기를 통해 애플리케이션을 추가로 사용자 정의할 수 있습니다.
Blazor Dock Manager Example
이 예에서는 애플리케이션에서 사용할 수 있는 IgbDockManager
의 대부분의 기능과 도킹 옵션을 보여줍니다.
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 . |