사이드바
사이드바 (Sidebar)
페이지 가장자리에서 슬라이드되어 등장하는 숨겨진 콘텐츠 패널이에요. 보통 메뉴를 오프캔버스로 보여 줄 때 사용해요.
출처: 문서
본문
유형 (Types)
사이드바 (Sidebar)
사이드바예요.
<body>
<div class="ui sidebar inverted vertical menu">
<a class="item">
1
</a>
<a class="item">
2
</a>
<a class="item">
3
</a>
</div>
<div class="pusher">
<!-- Site content !-->
</div>
</body>
$('.ui.sidebar')
.sidebar('toggle')
;
<div class="ui left demo vertical inverted labeled icon sidebar menu">
<a class="item">
<i class="home icon"></i>
Home
</a>
<a class="item">
<i class="block layout icon"></i>
Topics
</a>
<a class="item">
<i class="smile icon"></i>
Friends
</a>
</div>
$('.ui.labeled.icon.sidebar')
.sidebar('toggle')
;
상태 (States)
사이드바
보임 (Visible)
사이드바를 페이지에 보이게 할 수 있어요.
푸셔 (Pusher)
푸셔는 사이드바에 의해 밀려날 요소이며 사이트 콘텐츠를 담아야 해요. 페이지 구조를 참고하세요.
딤 (Dimmed)
푸셔를 어둡게(dim) 처리할 수 있어요.
변형 (Variations)
방향 (Direction)
사이드바는 페이지의 다른 쪽에 나타날 수 있어요.
너비 (Width)
사이드바의 너비를 지정할 수 있어요.
A sidebar will automatically adjust its animations to match any custom size specified in CSS
사이드바는 CSS에 지정된 어떤 사용자 정의 크기와도 일치하도록 애니메이션을 자동으로 조정해요.
설정 (Set-up)
페이지 구조 (Page Structure)
사이드바를 사용하려면 특정 페이지 구조가 필요해요. 최적의 성능을 위해 사이드바를 초기화하기 전에 페이지가 이미 이 구조로 설정되어 있어야 해요.
Sidebar will automatically add the correct layout on first load if it is not set-up, however fixing your page's layout on load will reduce performance and is not recommended.
<body>
<div class="ui sidebar">
...
</div>
<div class="pusher">
Your site's actual content
</div>
</body>
The pusher is the element that will be pushed away by the sidebar and should contain your site content.
If your pusher contains overflowing content, you might use overflowing pusher to prevent possible undesired side effects (for example when using native sticky somewhere)
사이드바가 처음 로드될 때 올바른 레이아웃이 설정되어 있지 않으면 자동으로 추가하지만, 로드 시 페이지의 레이아웃을 고치는 것은 성능을 떨어뜨리므로 권장하지 않아요.
푸셔는 사이드바에 의해 밀려날 요소이며 사이트 콘텐츠를 담아야 해요. 푸셔에 넘치는(overflowing) 콘텐츠가 있다면, 원치 않는 부작용(예: 네이티브 sticky를 어딘가에서 사용하는 경우)을 막기 위해 overflowing pusher를 사용할 수 있어요.
메뉴와 함께 사용하기 (Using with Menu)
사이드바는 어떤 콘텐츠든 될 수 있지만, 오프캔버스로 표시하는 가장 흔한 콘텐츠는 메뉴예요. 메뉴에 필요한 구조를 이해하려면 메뉴 문서를 참고하세요.
<body>
<div class="ui left vertical menu sidebar">
<a class="item">
Item 1
</a>
<a class="item">
Item 2
</a>
<a class="item">
Item 3
</a>
</div>
<div class="pusher">
<!-- Site content !-->
</div>
</body>
고정 콘텐츠 사용하기 (Using Fixed Content)
Any fixed position content that should move with page content when your sidebar is visible, should receive the class name fixed and exist as a sibling element to your sidebar.
<body>
<div class="ui sidebar">
...
</div>
<div class="ui top fixed menu">
...
</div>
<div class="pusher">
Your site's actual content
</div>
</body>
사이드바가 보일 때 페이지 콘텐츠와 함께 움직여야 하는 고정 위치 콘텐츠는 fixed 클래스 이름을 받고 사이드바의 형제 요소로 존재해야 해요.
동작 (Behavior)
다음 모든 동작들을 다음 구문으로 호출할 수 있어요:
$('.your.element')
.sidebar('behavior name', argumentOne, argumentTwo)
;
Behavior / Description
attach events(selector, event)
주어진 선택자에 사이드바 동작을 연결해요. 지정하지 않으면 기본 이벤트는 toggle이에요.
show
사이드바를 표시해요.
hide
사이드바를 숨겨요.
toggle
사이드바의 표시를 토글해요.
is visible
사이드바가 보이는지 여부를 반환해요.
is hidden
사이드바가 숨겨졌는지 여부를 반환해요.
push page
페이지 콘텐츠를 사이드바와 함께 보이도록 밀어요.
get direction
현재 사이드바의 방향을 반환해요.
pull page
페이지 콘텐츠를 원래 위치로 되돌려요.
add body CSS
사이드바 애니메이션을 트리거하는 스타일시트를 페이지 헤드에 추가해요.
remove body CSS
사이드바 애니메이션용 인라인 스타일시트를 제거해요.
destroy
인스턴스를 파괴하고 모든 이벤트를 제거해요.
예시 (Examples)
트랜지션 (Transitions)
모든 사이드바 트랜지션이 모든 사이드바 방향에서, 또는 여러 사이드바가 동시에 보일 때 사용 가능한 것은 아니에요.
Multiple Visible
Supports Vertical Sidebars
Supports Horizontal Sidebars
Overlay
Push
Scale Down
Uncover
Slide Along
Slide Out
Dim Page
Direction
Left
Right
Top
Bottom
All Direction Animations
Overlay
Push
Scale Down
Vertical-Only Animations
Uncover
Slide Along
Slide Out
여러 개 표시하기 (Displaying Multiple)
여러 사이드바는 push나 overlay처럼 지원되는 애니메이션을 사용할 때만 동시에 표시할 수 있어요.
You may need to manually set the z-index on elements to ensure the intended sidebar element appears on top.
If you are triggering multiple sidebars at the same time, its recommended to set the transition to overlay.
// showing multiple
$('.demo.sidebar')
.sidebar('setting', 'transition', 'overlay')
.sidebar('toggle')
;
의도한 사이드바 요소가 맨 위에 나타나도록 요소의 z-index를 직접 설정해야 할 수도 있어요.
동시에 여러 사이드바를 트리거한다면 transition을 overlay로 설정하는 것이 좋아요.
사용자 정의 컨텍스트 사용하기 (Using a custom context)
사이드바는 페이지의 body가 아니라 어떤 요소 안에서든 초기화할 수 있어요.
Menu
Home
Topics
Friends
History
Application Content
// using context
$('.context.example .ui.sidebar')
.sidebar({
context: $('.context.example .bottom.segment')
})
.sidebar('attach events', '.context.example .menu .item')
;
다른 콘텐츠로 show/hide 트리거하기 (Triggering show/hide with other content)
편의를 위해 attach events 호출로 이벤트를 바인딩할 수 있어요. 기본적으로 클릭 시 사이드바를 보기 안팎으로 토글해요.
$('.left.demo.sidebar').first()
.sidebar('attach events', '.toggle.button')
;
$('.toggle.button')
.removeClass('disabled')
;
Trigger Sidebar
다른 콘텐츠로 사용자 정의 동작 트리거하기 (Triggering custom behavior with other content)
요소가 클릭될 때 어떤 동작이 발생할지 지정할 수도 있어요.
$('.left.demo.sidebar').first()
.sidebar('attach events', '.open.button', 'show')
;
$('.open.button')
.removeClass('disabled')
;
Open Sidebar
처음부터 보이게 시작하기 (Starting Visible)
visible 클래스 이름을 추가하면 사이드바를 처음부터 보이게 시작할 수 있어요.
Home
Topics
Friends
History
Application Content
// showing multiple
$('.visible.example .ui.sidebar')
.sidebar({
context: '.visible.example .bottom.segment'
})
.sidebar('hide')
;
Sidebar (설정)
동작 (Behavior)
Setting / Default / Description
context
body
사이드바가 나타날 컨텍스트예요.
exclusive
false
여러 사이드바를 동시에 열 수 있는지 여부예요.
closable
true
페이지를 클릭해 사이드바를 닫을 수 있는지 여부예요.
dimPage
true
사이드바가 보일 때 페이지 콘텐츠를 어둡게 할지 여부예요.
blurring
false
딤머가 배경을 블러 처리할지 여부예요.
scrollLock
false
사이드바가 보일 때 페이지 스크롤을 잠글지 여부예요.
returnScroll
false
사이드바가 숨겨질 때 원래 스크롤 위치로 돌아갈지 여부예요. `transition: scale`에서는 자동으로 발생해요.
delaySetup
false
사이드바가 올바른 HTML 없이 초기화될 때, 이 옵션이 DOM 생성을 지연시켜 `requestAnimationFrame`을 사용하게 해요.
애니메이션 (Animation)
Setting / Default / Description
transition
auto
사이드바를 애니메이션할 때 사용하는 이름 있는 트랜지션이에요. 기본값은 'auto'로, `defaultTransition`에서 방향에 따라 트랜지션을 선택해요.
mobileTransition
auto
모바일 기기를 감지했을 때 애니메이션에 사용하는 이름 있는 트랜지션이에요. 기본값은 'auto'로, `defaultTransition`에서 방향에 따라 트랜지션을 선택해요.
defaultTransition
{
computer: {
left : 'uncover',
right : 'uncover',
top : 'overlay',
bottom : 'overlay'
},
mobile: {
left : 'uncover',
right : 'uncover',
top : 'overlay',
bottom : 'overlay'
}
}
방향과 화면 크기별 기본 트랜지션이며, `transition: auto`와 함께 사용돼요.
콜백 (Callbacks)
Setting / Context / Description
onVisible
Sidebar
사이드바가 안으로 애니메이션을 끝냈을 때 호출돼요.
onShow
Sidebar
사이드바가 안으로 애니메이션을 시작할 때 호출돼요. 이 콜백에서 `false`를 반환하면 사이드바 표시가 취소돼요.
onChange
Sidebar
사이드바가 숨기거나 표시하기 시작할 때 호출돼요.
onHide
Sidebar
사이드바가 밖으로 애니메이션을 시작하기 전에 호출돼요. 이 콜백에서 `false`를 반환하면 사이드바 숨김이 취소돼요.
onHidden
Sidebar
사이드바가 밖으로 애니메이션을 끝냈을 때 호출돼요.
Module (모듈 설정)
DOM 설정 (DOM Settings)
Setting / Default
namespace
sidebar
className
className : {
active : 'active',
animating : 'animating',
dimmed : 'dimmed',
pushable : 'pushable',
pushed : 'pushed',
right : 'right',
top : 'top',
left : 'left',
bottom : 'bottom',
visible : 'visible'
}
regExp
regExp: {
mobile : /Mobile|iP(hone|od|ad)|Android|BlackBerry|IEMobile|Kindle|NetFront|Silk-Accelerated|(hpw|web)OS|Fennec|Minimo|Opera M(obi|ini)|Blazer|Dolfin|Dolphin|Skyfire|Zune/g
}
selector
selector: {
fixed : '.fixed',
omitted : 'script, link, style, .ui.modal, .ui.dimmer, .ui.nag, .ui.fixed',
pusher : '.pusher',
sidebar : '.ui.sidebar'
}
디버그 (Debug)
Setting / Default / Description
name
Sidebar
디버그 로그에서 사용되는 이름이에요.
silent
false
다른 디버그 설정과 관계없이 오류 메시지를 포함한 모든 콘솔 출력을 잠재워요.
debug
false
콘솔에 표준 디버그 출력을 제공해요.
performance
true
콘솔에 표준 디버그 출력을 제공해요.
verbose
false
콘솔에 보조 디버그 출력을 제공해요.
errors
error : {
method : 'The method you called is not defined.',
pusher : 'Had to add pusher element. For optimal performance make sure body content is inside a pusher element',
movedSidebar : 'Had to move sidebar. For optimal performance make sure sidebar and pusher are direct children of your body tag',
overlay : 'The overlay setting is no longer supported, use animation: overlay',
notFound : 'There were no elements that matched the specified selector'
}