주요 콘텐츠로 건너뛰기 문서 탐색으로 건너뛰기
Check
in English

오프캔버스

몇 가지 클래스와 JavaScript 플러그인을 사용하여 탐색, 장바구니 등을 위해 숨겨진 사이드바를 프로젝트에 구축하십시오.

이 페이지에서

작동 방식

Offcanvas는 JavaScript를 통해 전환하여 뷰포트의 왼쪽, 오른쪽, 위쪽 또는 아래쪽 가장자리에서 표시할 수 있는 사이드바 구성 요소입니다. 버튼이나 앵커는 토글하는 특정 요소에 연결된 트리거로 사용되며 data속성은 JavaScript를 호출하는 데 사용됩니다.

  • Offcanvas는 모달과 동일한 JavaScript 코드 중 일부를 공유합니다. 개념적으로는 매우 유사하지만 별도의 플러그인입니다.
  • 유사하게, 오프캔버스의 스타일 및 치수에 대한 일부 소스 Sass 변수는 모달의 변수에서 상속됩니다.
  • 표시되면 오프캔버스에 클릭하여 오프캔버스를 숨길 수 있는 기본 배경이 포함됩니다.
  • 모달과 유사하게 한 번에 하나의 캔버스만 ​​표시할 수 있습니다.

머리! CSS가 애니메이션을 처리하는 방식을 고려할 때 요소 에 margin또는 translate를 사용할 수 없습니다 . .offcanvas대신 클래스를 독립적인 래핑 요소로 사용하십시오.

이 구성 요소의 애니메이션 효과는 prefers-reduced-motion미디어 쿼리에 따라 다릅니다. 접근성 설명서의 감소된 동작 섹션을 참조하십시오 .

예

오프캔버스 구성요소

다음은 기본적으로 표시되는 오프캔버스 예입니다( .showon 을 통해 .offcanvas). Offcanvas에는 닫기 버튼이 있는 헤더와 일부 initial 에 대한 선택적 본문 클래스에 대한 지원이 포함됩니다 padding. 가능하면 해제 작업이 있는 오프캔버스 헤더를 포함하거나 명시적인 해제 작업을 제공하는 것이 좋습니다.

오프캔버스
오프캔버스에 대한 내용은 여기로 이동합니다. 여기에 거의 모든 Bootstrap 구성 요소 또는 사용자 정의 요소를 배치할 수 있습니다.
HTML 
<div class="offcanvas offcanvas-start show" tabindex="-1" id="offcanvas" aria-labelledby="offcanvasLabel">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="offcanvasLabel">Offcanvas</h5>
    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    Content for the offcanvas goes here. You can place just about any Bootstrap component or custom elements here.
  </div>
</div>

라이브 데모

.show아래 버튼을 사용하여 클래스가 있는 요소의 클래스 를 전환하는 JavaScript를 통해 offcanvas 요소를 표시하거나 숨깁니다 .offcanvas.

  • .offcanvas내용을 숨깁니다(기본값)
  • .offcanvas.show콘텐츠를 보여줍니다

속성 이 있는 링크를 사용 href하거나 속성이 있는 버튼을 사용할 수 있습니다 data-bs-target. 두 경우 모두 data-bs-toggle="offcanvas"필수입니다.

href와 연결
오프캔버스
일부 텍스트를 자리 표시자로 사용합니다. 실생활에서 당신은 당신이 선택한 요소를 가질 수 있습니다. 좋아요, 텍스트, 이미지, 목록 등
HTML 
<a class="btn btn-primary" data-bs-toggle="offcanvas" href="#offcanvasExample" role="button" aria-controls="offcanvasExample">
  Link with href
</a>
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasExample" aria-controls="offcanvasExample">
  Button with data-bs-target
</button>

<div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasExample" aria-labelledby="offcanvasExampleLabel">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="offcanvasExampleLabel">Offcanvas</h5>
    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    <div>
      Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.
    </div>
    <div class="dropdown mt-3">
      <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown">
        Dropdown button
      </button>
      <ul class="dropdown-menu">
        <li><a class="dropdown-item" href="#">Action</a></li>
        <li><a class="dropdown-item" href="#">Another action</a></li>
        <li><a class="dropdown-item" href="#">Something else here</a></li>
      </ul>
    </div>
  </div>
</div>

바디 스크롤링

오프캔버스와 배경이 표시되면 요소 스크롤 <body>이 비활성화됩니다. data-bs-scroll속성을 사용하여 스크롤 <body>을 활성화합니다.

바디 스크롤링이 있는 오프캔버스

이 옵션이 작동하는지 보려면 페이지의 나머지 부분을 스크롤해 보십시오.

HTML 
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasScrolling" aria-controls="offcanvasScrolling">Enable body scrolling</button>

<div class="offcanvas offcanvas-start" data-bs-scroll="true" data-bs-backdrop="false" tabindex="-1" id="offcanvasScrolling" aria-labelledby="offcanvasScrollingLabel">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="offcanvasScrollingLabel">Offcanvas with body scrolling</h5>
    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    <p>Try scrolling the rest of the page to see this option in action.</p>
  </div>
</div>

바디 스크롤링 및 배경

<body>배경이 보이는 스크롤을 활성화할 수도 있습니다 .

스크롤이 있는 배경

이 옵션이 작동하는지 보려면 페이지의 나머지 부분을 스크롤해 보십시오.

HTML 
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasWithBothOptions" aria-controls="offcanvasWithBothOptions">Enable both scrolling & backdrop</button>

<div class="offcanvas offcanvas-start" data-bs-scroll="true" tabindex="-1" id="offcanvasWithBothOptions" aria-labelledby="offcanvasWithBothOptionsLabel">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="offcanvasWithBothOptionsLabel">Backdrop with scrolling</h5>
    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    <p>Try scrolling the rest of the page to see this option in action.</p>
  </div>
</div>

정적 배경

배경이 정적으로 설정된 경우 외부를 클릭할 때 오프캔버스가 닫히지 않습니다.

오프캔버스
당신이 내 외부를 클릭하면 나는 닫지 않을 것입니다.
HTML 
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#staticBackdrop" aria-controls="staticBackdrop">
  Toggle static offcanvas
</button>

<div class="offcanvas offcanvas-start" data-bs-backdrop="static" tabindex="-1" id="staticBackdrop" aria-labelledby="staticBackdropLabel">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="staticBackdropLabel">Offcanvas</h5>
    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    <div>
      I will not close if you click outside of me.
    </div>
  </div>
</div>

어두운 오프캔버스

v5.2.0에 추가됨

어두운 탐색 모음과 같은 다른 컨텍스트에 더 잘 일치하도록 유틸리티를 사용하여 캔버스의 모양을 변경합니다. 여기에서 우리 는 어두운 오프캔버스로 적절한 스타일링을 위해 and 를 추가 .text-bg-dark합니다 . 안에 드롭다운이 있는 경우 에도 추가하는 것이 좋습니다..offcanvas.btn-close-white.btn-close.dropdown-menu-dark.dropdown-menu

오프캔버스

여기에 오프캔버스 콘텐츠를 배치합니다.

HTML 
<div class="offcanvas offcanvas-start show text-bg-dark" tabindex="-1" id="offcanvasDark" aria-labelledby="offcanvasDarkLabel">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="offcanvasDarkLabel">Offcanvas</h5>
    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvasDark" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    <p>Place offcanvas content here.</p>
  </div>
</div>

반응형

v5.2.0에 추가됨

반응형 오프캔버스 클래스는 지정된 중단점 아래에서 뷰포트 외부의 콘텐츠를 숨깁니다. 해당 중단점 위의 내용은 평소와 같이 작동합니다. 예를 들어, 중단점 .offcanvas-lg아래의 오프캔버스에 있는 내용을 숨기고 중단점 lg위의 내용을 표시합니다 lg.

반응형 오프캔버스 토글을 표시하도록 브라우저 크기를 조정합니다.
반응형 오프캔버스

에 포함된 내용 .offcanvas-lg입니다.

HTML 
<button class="btn btn-primary d-lg-none" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasResponsive" aria-controls="offcanvasResponsive">Toggle offcanvas</button>

<div class="alert alert-info d-none d-lg-block">Resize your browser to show the responsive offcanvas toggle.</div>

<div class="offcanvas-lg offcanvas-end" tabindex="-1" id="offcanvasResponsive" aria-labelledby="offcanvasResponsiveLabel">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="offcanvasResponsiveLabel">Responsive offcanvas</h5>
    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" data-bs-target="#offcanvasResponsive" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    <p class="mb-0">This is content within an <code>.offcanvas-lg</code>.</p>
  </div>
</div>

반응형 오프캔버스 클래스는 각 중단점에서 사용할 수 있습니다.

  • .offcanvas
  • .offcanvas-sm
  • .offcanvas-md
  • .offcanvas-lg
  • .offcanvas-xl
  • .offcanvas-xxl

놓기

offcanvas 구성 요소에 대한 기본 배치가 없으므로 아래 수정자 클래스 중 하나를 추가해야 합니다.

  • .offcanvas-start뷰포트의 왼쪽에 캔버스를 배치합니다(위에 표시됨).
  • .offcanvas-end뷰포트의 오른쪽에 캔버스를 배치합니다.
  • .offcanvas-top뷰포트 상단에 캔버스를 배치합니다.
  • .offcanvas-bottom뷰포트 하단에 오프캔버스를 배치합니다.

아래에서 위쪽, 오른쪽 및 아래쪽 예를 시도하십시오.

오프캔버스 탑
...
HTML 
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasTop" aria-controls="offcanvasTop">Toggle top offcanvas</button>

<div class="offcanvas offcanvas-top" tabindex="-1" id="offcanvasTop" aria-labelledby="offcanvasTopLabel">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="offcanvasTopLabel">Offcanvas top</h5>
    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    ...
  </div>
</div>
오프 캔버스 오른쪽
...
HTML 
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasRight" aria-controls="offcanvasRight">Toggle right offcanvas</button>

<div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasRight" aria-labelledby="offcanvasRightLabel">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="offcanvasRightLabel">Offcanvas right</h5>
    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    ...
  </div>
</div>
오프캔버스 바닥
...
HTML 
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasBottom" aria-controls="offcanvasBottom">Toggle bottom offcanvas</button>

<div class="offcanvas offcanvas-bottom" tabindex="-1" id="offcanvasBottom" aria-labelledby="offcanvasBottomLabel">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="offcanvasBottomLabel">Offcanvas bottom</h5>
    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body small">
    ...
  </div>
</div>

접근성

offcanvas 패널은 개념적으로 모달 대화 상자이므로 aria-labelledby="..."offcanvas 제목 참조를 에 추가해야 합니다 .offcanvas. role="dialog"JavaScript를 통해 이미 추가했으므로 추가할 필요가 없습니다 .

CSS

변수

v5.2.0에 추가됨

Bootstrap의 진화하는 CSS 변수 접근 방식의 일부로 offcanvas는 이제 .offcanvas향상된 실시간 사용자 정의를 위해 로컬 CSS 변수를 사용합니다. CSS 변수의 값은 Sass를 통해 설정되므로 Sass 사용자 정의도 계속 지원됩니다.

  --#{$prefix}offcanvas-zindex: #{$zindex-offcanvas};
  --#{$prefix}offcanvas-width: #{$offcanvas-horizontal-width};
  --#{$prefix}offcanvas-height: #{$offcanvas-vertical-height};
  --#{$prefix}offcanvas-padding-x: #{$offcanvas-padding-x};
  --#{$prefix}offcanvas-padding-y: #{$offcanvas-padding-y};
  --#{$prefix}offcanvas-color: #{$offcanvas-color};
  --#{$prefix}offcanvas-bg: #{$offcanvas-bg-color};
  --#{$prefix}offcanvas-border-width: #{$offcanvas-border-width};
  --#{$prefix}offcanvas-border-color: #{$offcanvas-border-color};
  --#{$prefix}offcanvas-box-shadow: #{$offcanvas-box-shadow};

Sass 변수

$offcanvas-padding-y:               $modal-inner-padding;
$offcanvas-padding-x:               $modal-inner-padding;
$offcanvas-horizontal-width:        400px;
$offcanvas-vertical-height:         30vh;
$offcanvas-transition-duration:     .3s;
$offcanvas-border-color:            $modal-content-border-color;
$offcanvas-border-width:            $modal-content-border-width;
$offcanvas-title-line-height:       $modal-title-line-height;
$offcanvas-bg-color:                $modal-content-bg;
$offcanvas-color:                   $modal-content-color;
$offcanvas-box-shadow:              $modal-content-box-shadow-xs;
$offcanvas-backdrop-bg:             $modal-backdrop-bg;
$offcanvas-backdrop-opacity:        $modal-backdrop-opacity;

용법

offcanvas 플러그인은 무거운 작업을 처리하기 위해 몇 가지 클래스와 속성을 사용합니다.

  • .offcanvas내용을 숨깁니다
  • .offcanvas.show내용을 보여줍니다
  • .offcanvas-start왼쪽에 오프캔버스를 숨깁니다.
  • .offcanvas-end오른쪽의 오프캔버스를 숨깁니다.
  • .offcanvas-top상단에 오프캔버스를 숨깁니다.
  • .offcanvas-bottom바닥에 오프캔버스를 숨깁니다.

data-bs-dismiss="offcanvas"JavaScript 기능을 트리거하는 속성이 있는 닫기 버튼을 추가합니다 . <button>모든 장치에서 적절한 동작을 위해 요소를 함께 사용하십시오 .

데이터 속성을 통해

비녀장

하나의 오프캔버스 요소에 대한 제어를 자동으로 할당하려면 요소에 data-bs-toggle="offcanvas"및 data-bs-target또는를 추가 합니다. href속성 은 data-bs-target오프캔버스를 적용할 CSS 선택기를 허용합니다. offcanvasoffcanvas 요소 에 클래스를 추가해야 합니다 . 기본적으로 열리도록 하려면 추가 클래스를 추가하십시오 show.

해고하다

해제는 아래와 같이 오프캔버스 내data 버튼의 속성을 사용하여 달성할 수 있습니다 .

<button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>

또는 아래에 설명 된 대로 오프캔버스 외부의data-bs-target 버튼에서 :

<button type="button" class="btn-close" data-bs-dismiss="offcanvas" data-bs-target="#my-offcanvas" aria-label="Close"></button>
오프캔버스를 해제하는 두 가지 방법이 모두 지원되지만 오프캔버스 외부에서 해제하는 것은 ARIA Authoring Practices Guide 대화상자(모달) 패턴 과 일치하지 않는다는 점에 유의하십시오 . 자신의 책임하에 이 작업을 수행하십시오.

자바스크립트를 통해

다음을 사용하여 수동으로 활성화:

const offcanvasElementList = document.querySelectorAll('.offcanvas')
const offcanvasList = [...offcanvasElementList].map(offcanvasEl => new bootstrap.Offcanvas(offcanvasEl))

옵션

옵션은 데이터 속성이나 JavaScript를 통해 전달할 수 있으므로 에서 data-bs-와 같이 옵션 이름을 에 추가할 수 있습니다 data-bs-animation="{value}". 데이터 속성을 통해 옵션을 전달할 때 옵션 이름의 대소문자 유형을 " camelCase "에서 " kebab-case "로 변경해야 합니다. 예를 들어, data-bs-custom-class="beautifier"대신 를 사용 data-bs-customClass="beautifier"하십시오.

Bootstrap 5.2.0부터 모든 구성 요소 는 JSON 문자열로 간단한 구성 요소 구성을 수용할 수 있는 실험적 으로 예약된 데이터 속성 을 지원합니다. data-bs-config요소에 data-bs-config='{"delay":0, "title":123}'및 data-bs-title="456"속성이 있는 경우 최종 title값은 456이고 별도의 데이터 속성은 에 제공된 값을 재정의합니다 data-bs-config. 또한 기존 데이터 속성은 와 같은 JSON 값을 저장할 수 data-bs-delay='{"show":0,"hide":150}'있습니다.

이름 유형 기본 설명
backdrop 부울 또는 문자열static true 오프캔버스가 열려 있는 동안 몸에 배경을 적용합니다. 또는 static클릭할 때 오프캔버스를 닫지 않는 배경을 지정합니다.
keyboard 부울 true 이스케이프 키를 누르면 오프캔버스를 닫습니다.
scroll 부울 false 오프캔버스가 열려 있는 동안 본문 스크롤을 허용합니다.

행동 양식

비동기식 메서드 및 전환

모든 API 메서드는 비동기식 이며 전환 을 시작합니다 . 전환이 시작되자마자 그러나 끝나기 전에 호출자에게 돌아갑니다 . 또한 전환 구성 요소에 대한 메서드 호출은 무시 됩니다.

자세한 내용은 JavaScript 설명서를 참조하십시오 .

콘텐츠를 오프캔버스 요소로 활성화합니다. 선택적 옵션을 허용합니다 object.

생성자를 사용하여 offcanvas 인스턴스를 만들 수 있습니다. 예를 들면 다음과 같습니다.

const bsOffcanvas = new bootstrap.Offcanvas('#myOffcanvas')
방법 설명
getInstance DOM 요소와 연결된 offcanvas 인스턴스를 가져올 수 있는 정적 메서드입니다.
getOrCreateInstance DOM 요소와 연결된 offcanvas 인스턴스를 가져오거나 초기화되지 않은 경우 새 인스턴스를 만들 수 있는 정적 메서드입니다.
hide 오프캔버스 요소를 숨깁니다. offcanvas 요소가 실제로 숨겨 지기 전(즉, hidden.bs.offcanvas이벤트가 발생하기 전) 호출자에게 반환됩니다.
show 오프캔버스 요소를 표시합니다. offcanvas 요소가 실제로 표시 되기 전(즉, shown.bs.offcanvas이벤트가 발생하기 전) 호출자에게 반환합니다.
toggle 오프캔버스 요소를 표시 또는 숨김으로 전환합니다. offcanvas 요소가 실제로 표시되거나 숨겨 지기 전(즉, shown.bs.offcanvas또는 hidden.bs.offcanvas이벤트가 발생하기 전) 호출자에게 반환합니다.

이벤트

Bootstrap의 offcanvas 클래스는 offcanvas 기능에 연결하기 위한 몇 가지 이벤트를 노출합니다.

이벤트 유형 설명
hide.bs.offcanvas hide이 이벤트는 메서드가 호출 되면 즉시 시작됩니다 .
hidden.bs.offcanvas 이 이벤트는 offcanvas 요소가 사용자에게 숨겨졌을 때 시작됩니다(CSS 전환이 완료될 때까지 기다림).
hidePrevented.bs.offcanvas 이 이벤트는 오프캔버스가 표시되고 배경이 static이고 오프캔버스 외부를 클릭하면 시작됩니다. 이벤트는 이스케이프 키를 누르고 keyboard옵션이 로 설정된 경우에도 발생합니다 false.
show.bs.offcanvas show이 이벤트는 인스턴스 메서드가 호출 되면 즉시 발생합니다 .
shown.bs.offcanvas 이 이벤트는 offcanvas 요소가 사용자에게 표시될 때 시작됩니다(CSS 전환이 완료될 때까지 기다림). 
const myOffcanvas = document.getElementById('myOffcanvas')
myOffcanvas.addEventListener('hidden.bs.offcanvas', event => {
  // do something...
})