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

Статикалық фон

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

Offcanvas
Менің сыртымнан бассаңыз жабылмаймын.
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 нұсқасына қосылды

Қараңғы шарлау жолақтары сияқты әртүрлі контексттерге жақсырақ сәйкестендіру үшін сыртқы кескіндерді қызметтік бағдарламалармен өзгертіңіз. Мұнда біз қараңғы кенеппен дұрыс сәндеу үшін .text-bg-darkжәне .offcanvasүшін .btn-close-whiteқосамыз . .btn-closeЕгер сізде ашылмалы тізімдер болса, оған қосуды да .dropdown-menu-darkқарастырыңыз .dropdown-menu.

Offcanvas

Бұл жерде кенептен тыс мазмұнды орналастырыңыз.

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

Жауапты offcanvas ауыстырып-қосқышын көрсету үшін шолғыштың өлшемін өзгертіңіз.
Responsive offcanvas

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

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

Ауыстыру

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

JavaScript арқылы

Қолмен қосу:

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

Әдістері

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

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

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

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

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

const bsOffcanvas = new bootstrap.Offcanvas('#myOffcanvas')
Әдіс Сипаттама
getInstance DOM элементімен байланысты offcanvas данасын алуға мүмкіндік беретін статикалық әдіс.
getOrCreateInstance DOM элементімен байланысты offcanvas данасын алуға немесе инициализацияланбаған жағдайда жаңасын жасауға мүмкіндік беретін статикалық әдіс.
hide Offcanvas элементін жасырады. Offcanvas элементі шынымен жасырылғанға дейін (яғни hidden.bs.offcanvasоқиға болғанға дейін) қоңырау шалушыға қайтарады.
show Offcanvas элементін көрсетеді. Offcanvas элементі нақты көрсетілмей тұрып (яғни shown.bs.offcanvasоқиға болғанға дейін) қоңырау шалушыға қайтарады.
toggle Offcanvas элементін көрсетілген немесе жасырын етіп ауыстырады. Offcanvas элементі нақты көрсетілмей немесе жасырылғанға дейін (яғни shown.bs.offcanvasнемесе hidden.bs.offcanvasоқиға орын алмас бұрын) қоңырау шалушыға қайтарады.

Оқиғалар

Bootstrap-тың offcanvas сыныбы offcanvas функциясына қосылу үшін бірнеше оқиғаларды көрсетеді.

Оқиға түрі Сипаттама
hide.bs.offcanvas Бұл оқиға hideәдіс шақырылған кезде бірден іске қосылады.
hidden.bs.offcanvas Бұл оқиға offcanvas элементі пайдаланушыдан жасырылған кезде іске қосылады (CSS ауысуларының аяқталуын күтеді).
hidePrevented.bs.offcanvas Бұл оқиға canvas сыртында көрсетілгенде, оның фонында staticжәне сыртында шерту орындалғанда іске қосылады. Оқиға сонымен қатар escape пернесі басылғанда және keyboardопция параметріне орнатылғанда іске қосылады false.
show.bs.offcanvas showБұл оқиға даналық әдісі шақырылған кезде бірден іске қосылады.
shown.bs.offcanvas Бұл оқиға offcanvas элементі пайдаланушыға көрінетін болған кезде іске қосылады (CSS ауысуларының аяқталуын күтеді). 
const myOffcanvas = document.getElementById('myOffcanvas')
myOffcanvas.addEventListener('hidden.bs.offcanvas', event => {
  // do something...
})