오프캔버스

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

이 페이지에서

작동 방식

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

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

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

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

예

오프캔버스 구성요소

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

오프캔버스에 대한 콘텐츠는 여기로 이동합니다. 여기에 거의 모든 Bootstrap 구성 요소 또는 사용자 정의 요소를 배치할 수 있습니다.

<div class="offcanvas offcanvas-start" 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 text-reset" 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와 연결

일부 텍스트를 자리 표시자로 사용합니다. 실생활에서 당신은 당신이 선택한 요소를 가질 수 있습니다. 텍스트, 이미지, 목록 등

<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 text-reset" 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" id="dropdownMenuButton" data-bs-toggle="dropdown">
        Dropdown button
      </button>
      <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
        <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>

놓기

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

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

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

...

<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 id="offcanvasTopLabel">Offcanvas top</h5>
    <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    ...
  </div>
</div>

...

<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 id="offcanvasRightLabel">Offcanvas right</h5>
    <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    ...
  </div>
</div>

...

<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 text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body small">
    ...
  </div>
</div>

배경

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

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

.....

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

<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasScrolling" aria-controls="offcanvasScrolling">Enable body scrolling</button>
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasWithBackdrop" aria-controls="offcanvasWithBackdrop">Enable backdrop (default)</button>
<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" data-bs-backdrop="false" tabindex="-1" id="offcanvasScrolling" aria-labelledby="offcanvasScrollingLabel">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="offcanvasScrollingLabel">Colored with scrolling</h5>
    <button type="button" class="btn-close text-reset" 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>
<div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasWithBackdrop" aria-labelledby="offcanvasWithBackdropLabel">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="offcanvasWithBackdropLabel">Offcanvas with backdrop</h5>
    <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    <p>.....</p>
  </div>
</div>
<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 text-reset" 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>

접근성

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

사스

변수

$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-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>

오프캔버스를 해제하는 두 가지 방법이 모두 지원되지만 오프캔버스 외부에서 해제하는 것은 WAI-ARIA 모달 대화 디자인 패턴 과 일치하지 않습니다 . 자신의 책임하에 이 작업을 수행하십시오.

자바스크립트를 통해

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

var offcanvasElementList = [].slice.call(document.querySelectorAll('.offcanvas'))
var offcanvasList = offcanvasElementList.map(function (offcanvasEl) {
  return new bootstrap.Offcanvas(offcanvasEl)
})

옵션

옵션은 데이터 속성 또는 JavaScript를 통해 전달할 수 있습니다. 데이터 속성의 경우 에서 data-bs-와 같이 옵션 이름을 에 추가합니다 data-bs-backdrop="".

이름	유형	기본	설명
`backdrop`	부울	`true`	오프캔버스가 열려 있는 동안 몸에 배경 적용
`keyboard`	부울	`true`	이스케이프 키를 누르면 오프캔버스를 닫습니다.
`scroll`	부울	`false`	오프캔버스가 열려 있는 동안 본문 스크롤 허용

행동 양식

비동기식 메서드 및 전환

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

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

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

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

var myOffcanvas = document.getElementById('myOffcanvas')
var bsOffcanvas = new bootstrap.Offcanvas(myOffcanvas)

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

이벤트

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

이벤트 유형	설명
`show.bs.offcanvas`	`show`이 이벤트는 인스턴스 메서드가 호출 되면 즉시 발생합니다 .
`shown.bs.offcanvas`	이 이벤트는 offcanvas 요소가 사용자에게 표시될 때 시작됩니다(CSS 전환이 완료될 때까지 기다림).
`hide.bs.offcanvas`	`hide`이 이벤트는 메서드가 호출 되면 즉시 시작됩니다 .
`hidden.bs.offcanvas`	이 이벤트는 offcanvas 요소가 사용자에게 숨겨졌을 때 시작됩니다(CSS 전환이 완료될 때까지 기다림).

var myOffcanvas = document.getElementById('myOffcanvas')
myOffcanvas.addEventListener('hidden.bs.offcanvas', function () {
  // do something...
})

오프캔버스

작동 방식

예

오프캔버스 구성요소

오프캔버스

라이브 데모

오프캔버스

놓기

오프캔버스 탑

오프 캔버스 오른쪽

오프캔버스 바닥

배경

스크롤링으로 채색

배경이 있는 오프캔버스

스크롤이 있는 배경

접근성

사스

변수

용법

데이터 속성을 통해

비녀장

해고하다

자바스크립트를 통해

옵션

행동 양식

비동기식 메서드 및 전환

이벤트