Негізгі мазмұнға өту Құжаттар шарлауына өту
in English

Offcanvas

Бірнеше сыныптар мен JavaScript плагинімен шарлау, сауда арбалары және т.б. үшін жобаңызға жасырын бүйірлік тақталарды жасаңыз.

Бұл бетте

Бұл қалай жұмыс істейді

Offcanvas — JavaScript арқылы көру терезесінің сол, оң немесе төменгі жиегінен көріну үшін ауыстырылатын бүйірлік тақта құрамдас бөлігі. Түймешіктер немесе якорьдер сіз ауыстыратын белгілі бір элементтерге тіркелген триггерлер ретінде пайдаланылады және dataатрибуттар біздің JavaScript-ті шақыру үшін пайдаланылады.

  • Offcanvas модальдармен бірдей JavaScript кодының кейбірін бөліседі. Тұжырымдама бойынша олар өте ұқсас, бірақ олар бөлек плагиндер.
  • Сол сияқты, offcanvas мәнерлері мен өлшемдері үшін кейбір бастапқы Sass айнымалылары модаль айнымалыларынан мұраланған.
  • Көрсетілгенде, offcanvas сырт кескінді жасыру үшін басуға болатын әдепкі фонды қамтиды.
  • Модальдерге ұқсас, бір уақытта тек бір кескіннен тыс кескінді көрсетуге болады.

Ескерту! CSS анимацияларды қалай өңдейтінін ескере отырып , элементті marginнемесе оны пайдалана алмайсыз . Оның орнына классты тәуелсіз орау элементі ретінде пайдаланыңыз.translate.offcanvas

Бұл компоненттің анимациялық әсері prefers-reduced-motionмедиа сұрауына байланысты. Арнайы мүмкіндіктер құжаттамасының қысқартылған қозғалыс бөлімін қараңыз .

Мысалдар

Offcanvas құрамдастары

Төменде әдепкі бойынша көрсетілген offcanvas мысалы берілген ( .showқосу арқылы .offcanvas). Offcanvas жабу түймесі бар тақырыпты қолдауды және кейбір бастапқылар үшін қосымша негізгі сыныпты қамтиды padding. Мүмкіндігінше өшіру әрекеттері бар offcanvas тақырыптарын қосуды немесе нақты бас тарту әрекетін ұсынуды ұсынамыз.

Offcanvas
Кенептен тыс мазмұн осында. Мұнда кез келген 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 арқылы сілтеме
Offcanvas
Толтырғыш ретінде кейбір мәтін. Нақты өмірде сіз таңдаған элементтерге ие бола аласыз. Мысалы, мәтін, суреттер, тізімдер және т.б. 
<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>
Offcanvas дұрыс
... 
<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>Барлық құрылғыларда дұрыс әрекет ету үшін онымен бірге элементті пайдалануды ұмытпаңыз .

Деректер атрибуттары арқылы

Ауыстыру

Бір canvas элементін басқаруды автоматты түрде тағайындау үшін элементке қосыңыз data-bs-toggle="offcanvas"және a data-bs-targetнемесе . hrefТөлсипат data-bs-targetoffcanvas қолдану үшін CSS селекторын қабылдайды. offcanvasСыныпты offcanvas элементіне қосуды ұмытпаңыз . Оның әдепкі бойынша ашылғанын қаласаңыз, қосымша сыныпты қосыңыз 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 модальды диалогтық дизайн үлгісіне сәйкес келмейтінін есте сақтаңыз . Мұны өз тәуекеліңізге байланысты жасаңыз.

JavaScript арқылы

Қолмен қосу:

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 Offcanvas ашық кезде денеге фон жағыңыз
keyboard логикалық true Escape пернесі басылғанда, сыртқы кескінді жабады
scroll логикалық false Offcanva ашық кезде денені айналдыруға рұқсат етіңіз

Әдістері

Асинхронды әдістер мен ауысулар

Барлық API әдістері асинхронды және өтуді бастайды . Олар қоңырау шалушыға ауысу басталған бойда, бірақ аяқталмай тұрып қайтады . Сонымен қатар, өтпелі құрамдастағы әдіс шақыруы еленбейді .

Қосымша ақпарат алу үшін біздің JavaScript құжаттамасын қараңыз .

Мазмұныңызды canvas элементі ретінде белсендіреді. Қосымша опцияларды қабылдайды object.

Сіз конструктормен offcanvas данасын жасай аласыз, мысалы:

var myOffcanvas = document.getElementById('myOffcanvas')
var bsOffcanvas = new bootstrap.Offcanvas(myOffcanvas)
Әдіс Сипаттама
toggle Offcanvas элементін көрсетілген немесе жасырын етіп ауыстырады. Offcanvas элементі нақты көрсетілмей немесе жасырылғанға дейін (яғни shown.bs.offcanvasнемесе hidden.bs.offcanvasоқиға орын алмас бұрын) қоңырау шалушыға қайтарады.
show Offcanvas элементін көрсетеді. Offcanvas элементі нақты көрсетілмей тұрып (яғни shown.bs.offcanvasоқиға болғанға дейін) қоңырау шалушыға қайтарады.
hide Offcanvas элементін жасырады. Offcanvas элементі шынымен жасырылғанға дейін (яғни hidden.bs.offcanvasоқиға болғанға дейін) қоңырау шалушыға қайтарады.
getInstance DOM элементімен байланысты offcanvas данасын алуға мүмкіндік беретін статикалық әдіс
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...
})