대시보드 입력 레이아웃
개요
대화형 대시보드에서 입력을 배치하는 방법은 여러 가지입니다.
이 기법들은 일반 콘텐츠와 구분되도록 특수한 배경색을 가진 입력 영역을 만듭니다. 입력은 대시보드의 다른 위치(예: 일반 카드)에도 배치할 수 있습니다.
사이드바
사이드바는 대시보드에서 입력을 묶기에 좋은 위치입니다. 사이드바를 포함하려면 2단계 제목에 .sidebar 클래스를 추가합니다. 예:
---
title: "Sidebar"
format: dashboard
server: shiny
---
## {.sidebar}
```{python}
```
## Column
```{python}
```
```{python}
```사이드바는 다음과 같이 표시됩니다(오른쪽 상단에 사이드바를 닫을 수 있는 버튼이 있습니다).
전역 사이드바
여러 페이지가 있는 대시보드라면 사이드바를 전역으로(모든 페이지에 표시) 설정할 수 있습니다. 이를 위해 1단계 제목에 .sidebar 클래스를 추가합니다.
---
title: "Sidebar"
format: dashboard
---
# {.sidebar}
Sidebar content
# Plots
```{python}
```
# Data
```{python}
```인라인 사이드바
사이드바는 보통 페이지 수준(대시보드 전체 높이를 차지)으로 배치되지만, 레이아웃 안의 원하는 위치에 포함할 수도 있습니다. 예를 들어 아래는 한 행 안에 사이드바를 포함한 예시입니다.
---
title: "Palmer Penguins"
format: dashboard
server: shiny
---
## Row
### {.sidebar}
```{python}
```
### Column
```{python}
```
## Row
```{python}
```
위치와 크기
사이드바는 왼쪽 또는 오른쪽에 배치할 수 있습니다. 오른쪽에 배치하려면 인접한 열 뒤에 사이드바를 나중에 배치하세요. width 속성으로 사이드바 크기를 조정할 수도 있습니다. 아래 예시는 두 방법을 모두 보여줍니다.
---
title: "Sidebar"
format: dashboard
server: shiny
---
## Column
```{python}
```
```{python}
```
## {.sidebar width="300px"}
```{python}
```
툴바
툴바는 사이드바와 비슷하지만 가로 레이아웃을 제공합니다. 2단계 행 제목에 .toolbar 클래스를 추가해 툴바를 만들 수 있습니다. 예:
---
title: "Toolbar"
format: dashboard
server: shiny
---
## {.toolbar}
```{python}
```
## Row
```{python}
```
전역 툴바
여러 페이지가 있는 대시보드라면 툴바를 전역으로(모든 페이지에 표시) 설정할 수 있습니다. 이를 위해 1단계 제목에 .toolbar 클래스를 추가합니다.
---
title: "Toolbar"
format: dashboard
server: shiny
---
# {.toolbar}
Toolbar content
# Page 1
```{python}
```
# Page 2
```{python}
```인라인 툴바
툴바는 보통 페이지 수준(대시보드 전체 폭)으로 배치되지만, 레이아웃 안의 원하는 위치에 포함할 수도 있습니다. 예를 들어 아래는 한 열 안에 툴바를 포함한 예시입니다.
---
title: "Palmer Penguins"
format:
dashboard:
orientation: columns
server: shiny
---
## Column
### {.toolbar}
```{python}
```
### Row
```{python}
```
## Column
```{python}
```
위치
툴바는 콘텐츠 위 또는 아래에 배치할 수 있습니다. 아래에 배치하려면 인접한 행 뒤에 툴바를 배치하세요. 예:
---
title: "Penguin Bills"
format: dashboard
server: shiny
---
## Row
```{python}
```
## {.toolbar}
```{python}
```
카드 입력
일부 경우 입력을 특정 출력에 더 직접적으로 연결하고 싶을 수 있습니다. 카드 툴바나 카드 사이드바를 사용해 이를 구현할 수 있습니다.
카드 툴바
카드에 툴바를 추가하려면 출력 셀의 바로 위 또는 아래에 정의합니다. 방법은 두 가지입니다. 셀에 content: card-toolbar 옵션을 추가하거나 .card-toolbar 클래스를 가진 div를 만드는 것입니다. 예:
```{python}
#| content: card-toolbar
```
```{python}
#| title: Penguin Bills
```
툴바가 있는 셀의 title은 선택 사항입니다(title이 없으면 입력이 오른쪽이 아니라 왼쪽 정렬됩니다).
카드 사이드바
카드에 사이드바를 추가하려면 출력 셀의 왼쪽 또는 오른쪽 바로 옆에 정의합니다. 셀에 content: card-sidebar 옵션을 추가하거나 .card-sidebar 클래스를 가진 div를 만들면 됩니다. 예:
```{python}
#| content: card-sidebar
```
```{python}
#| title: Penguin Bills
```