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 тақ��рыптарын қосуды немесе нақты бас тарту әрекетін ұсынуды ұсынамыз.

Кенептен тыс мазмұн осында. Мұнда кез келген 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">Backdroped 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 плагині ауыр жүкті көтеру үшін бірнеше сыныптар мен атрибуттарды пайдаланады:

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

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...
})

Offcanvas

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

Мысалдар

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

Offcanvas

Тікелей демо

Offcanvas

Орналастыру

Кенептен тыс жоғарғы

Offcanvas дұрыс

Төменгі кенептен тыс

Фон

Айналдыру арқылы түсті

Фонды кенептен тыс

Айналдыру арқылы фон

Қол жетімділік

Сасс

Айнымалылар

Қолданылуы

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

JavaScript арқылы

Опциялар

Әдістері

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

Оқиғалар