hbkim
1
셀렉트어드민에서는 pages 아래 layout 키를 통해 레이아웃을 커스텀할 수 있습니다.
아래 2가지 예제를 통해 사용방법에 대해 더 자세히 알아보세요.
예제1
menus:
- path: sample/layout/0001
name: layout sample 1
pages:
- path: sample/layout/0001
layout:
class: flex gap-3
div:
- name: left
class: p-5 border border-gray-100 rounded-lg bg-white grow
style:
min-height: calc(100vh - 200px)
- name: right
style:
width: 400px
min-height: calc(100vh - 200px)
div:
- name: right-top
class: border border-zinc-100 rounded-lg bg-zinc-50
div:
- name: right-top-1
class: p-5 py-2
- name: right-top-2
class: px-5 py-2 border-t
- name: right-bottom
class: p-5 rounded-lg bg-white
blocks:
- layout: left
title: Invoice
name: left
type: placeholder
- layout: right-top-1
title: Account
name: right-top-1
type: placeholder
- layout: right-top-2
name: right-top-2
type: placeholder
- layout: right-bottom
name: right-bottom
type: placeholder
예제2
menus:
- path: sample/layout/0002
name: layout sample 2
pages:
- path: sample/layout/0002
class: bg-slate-50
layout:
class: divide-y divide-gray-200 overflow-hidden rounded-lg bg-white shadow
div:
- class: px-4 py-5 sm:px-6
name: card1 header
- class: px-4 py-5 sm:px-6
name: card1 body
- class: px-4 py-5 sm:px-6
name: card1 footer
blocks:
- layout: card1 header
type: markdown
content: |
#### Title
- layout: card1 body
name: card1 body
type: placeholder
- layout: card1 footer
name: card1 footer
type: placeholder
관련하여 도움이 필요하시면 문의주시기 바랍니다.
hbkim
2
예제3
컬럼 3개로 영역을 나누는 레이아웃 예제입니다. 왼쪽부터 단계에 맞게 데이터를 조회하는 페이지를 구성할 수 있어요.
관련 도움이 필요하신 경우 문의주시기 바랍니다.
menus:
- path: test/layout/search # 메뉴 경로를 정의합니다. 페이지의 URL 경로와 일치해야 합니다.
name: layout search # 메뉴 이름을 지정합니다. 사용자에게 표시될 이름.
pages:
- path: test/layout/search # 페이지 경로를 정의합니다. 이 경로는 메뉴와 일치해야 합니다.
layout:
style:
display: flex # 페이지 레이아웃을 flexbox로 설정.
div:
- name: column1
style:
width: 33% # 왼쪽 1/3 영역. 사용자 정보를 표시하는 영역.
# borderRight: "solid 1px #f0f0f0" # 우측에 얇은 테두리를 추가(현재 비활성화).
# paddingRight: 1rem # 오른쪽에 여백 추가(현재 비활성화).
- style:
width: 1px
borderRight: "solid 1px #f0f0f0" # 구분선 역할을 하는 얇은 세로선.
margin: 0 1rem # 좌우 여백.
- name: column2
style:
width: 33% # 중앙 1/3 영역. 팀 정보를 표시하는 영역.
maxHeight: 90vh # 높이를 화면의 90%로 제한.
overflow: scroll # 내용이 넘칠 경우 스크롤 허용.
# visible: # 조건부 표시 설정(현재 비활성화).
# params: # 파라미터 `uid`가 있을 때만 표시.
# uid: true
- style:
width: 1px
# borderRight: "solid 1px #f0f0f0" # 구분선 추가 가능(현재 비활성화).
margin: 0 1rem # 좌우 여백.
- style:
display: flex # 우측 1/3을 세로로 나눔.
flexDirection: column # 하위 요소를 세로로 정렬.
width: 33%
div:
- name: column3
style:
overflow: scroll # 내용이 넘칠 경우 스크롤 허용.
height: 45vh # 높이를 화면의 절반으로 제한.
width: 100% # 너비를 전체로 설정.
class: shadow-sm p-1 border bg-light # CSS 클래스를 사용해 스타일 적용.
# visible: # 조건부 표시 설정(현재 비활성화).
# params: # 파라미터 `tid`와 `uid`가 있을 때 표시.
# tid: true
# uid: true
- style:
width: 1px
borderRight: "solid 1px #f0f0f0" # 구분선 역할.
margin: 0 1rem # 좌우 여백.
- name: column4
style:
overflow: scroll # 내용이 넘칠 경우 스크롤 허용.
height: 45vh # 높이를 화면의 절반으로 제한.
class: shadow-sm p-1 mt-2 border bg-light # CSS 클래스를 사용해 스타일 적용.
# visible: # 조건부 표시 설정(현재 비활성화).
# params: # 파라미터 `tid`와 `uid`가 있을 때 표시.
# tid: true
# uid: true
blocks:
- type: query
name: users
layout: column1 # 결과를 `column1`에 표시.
resource: mysql.qa # 사용할 데이터베이스 리소스.
sql: >
SELECT id, email, name, created_at
FROM users
ORDER BY id DESC
LIMIT 10
showDownload: false
params:
- key: uid # 사용자 ID 파라미터. 다른 쿼리에서 사용.
# usePage: true # 페이지에서 파라미터 전달 여부(현재 비활성화).
# hidden: true # 사용자에게 파라미터 숨김 여부(현재 비활성화).
columns:
email:
updateParams:
uid: "{{id}}" # 이메일 선택 시 `uid`를 업데이트.
searchOptions:
enabled: true # 검색 옵션 활성화.
- type: query
name: teams
layout: column2 # 결과를 `column2`에 표시.
resource: mysql.qa # 사용할 데이터베이스 리소스.
sqlType: select
sql: >
SELECT
teams.id, teams.name
FROM teams, user_roles
WHERE user_roles.user_id = :uid
AND user_roles.team_row_id IS NULL
AND teams.id = user_roles.team_id
ORDER BY user_roles.id DESC
params:
- key: uid # 사용자 ID를 기반으로 데이터를 필터링.
columns:
name:
updateParams:
tid: "{{id}}" # 팀 선택 시 `tid`를 업데이트.
- type: query
name: team_settings
layout: column3 # 결과를 `column3`에 표시.
resource: mysql.qa
sqlType: select
sql: >
SELECT id, created_at, name, `type`
FROM team_settings
WHERE team_id = :tid
ORDER BY id DESC
submitButton:
type: primary
hidden: true # 제출 버튼은 숨겨진 상태로 유지.
params:
- key: tid
hidden: true # `tid` 파라미터는 사용자에게 숨김.
columns:
name:
width: 300px # 설정 명칭 열의 너비를 300px로 설정.
- type: query
name: team_setting_logs
layout: column4 # 결과를 `column4`에 표시.
resource: mysql.qa
sqlType: select
sql: >
SELECT id, name, created_at, json
FROM team_setting_logs
WHERE team_id = :tid
ORDER BY id DESC
LIMIT 100
submitButton:
type: primary
label: 새로고침 # 새로고침 버튼 표시.
searchOptions:
enabled: true # 검색 옵션 활성화.
params:
- key: tid # `tid` 파라미터를 기반으로 데이터를 필터링.
# hidden: true
columns:
json:
format: json # JSON 형식으로 데이터를 표시.
