Offcanvas
Ստեղծեք թաքնված կողագոտեր ձեր նախագծի մեջ նավիգացիայի, գնումների զամբյուղների և ավելին մի քանի դասերի և մեր JavaScript հավելվածի միջոցով:
Ինչպես է դա աշխատում
Offcanvas-ը կողագոտի բաղադրիչ է, որը կարող է փոխարկվել JavaScript-ի միջոցով, որպեսզի հայտնվի տեսադաշտի ձախ, աջ կամ ներքևի եզրից: Կոճակները կամ խարիսխները օգտագործվում են որպես գործարկիչներ, որոնք կցվում են որոշակի տարրերի, որոնք դուք փոխում եք, և data
ատրիբուտներն օգտագործվում են մեր JavaScript-ը կանչելու համար:
- Offcanvas-ը կիսում է JavaScript-ի նույն կոդերը, ինչ մոդալները: Հայեցակարգային առումով դրանք բավականին նման են, բայց դրանք առանձին պլագիններ են։
- Նմանապես, որոշ աղբյուրներ Sass փոփոխականներ offcanvas-ի ոճերի և չափերի համար ժառանգված են մոդալի փոփոխականներից:
- Երբ ցուցադրվում է, offcanvas-ը ներառում է լռելյայն հետնապատկեր, որի վրա կարելի է սեղմել՝ թաքցնելու offcanvas-ը:
- Մոդալների նման, միաժամանակ կարող է ցուցադրվել միայն մեկ offcanvas:
Գլուխը վեր Հաշվի առնելով, թե ինչպես է CSS-ը մշակում անիմացիաները, դուք չեք կարող օգտագործել margin
կամ translate
դրա վրա որևէ .offcanvas
տարր: Փոխարենը, օգտագործեք դասը որպես անկախ փաթաթման տարր:
prefers-reduced-motion
լրատվամիջոցների հարցումից: Տեսեք
մեր մատչելիության փաստաթղթերի կրճատված շարժման բաժինը :
Օրինակներ
Offcanvas բաղադրիչներ
Ստորև բերված է offcanvas օրինակ, որը ցուցադրվում է լռելյայն (միջոցով .show
) .offcanvas
: Offcanvas-ը ներառում է փակման կոճակով վերնագրի աջակցություն և որոշ սկզբնաղբյուրների համար ընտրովի մարմնի դաս padding
: Առաջարկում ենք հնարավորության դեպքում ներառել offcanvas-ի վերնագրեր՝ մերժման գործողություններով կամ տրամադրել բացահայտ մերժման գործողություն:
Offcanvas
<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>
Կենդանի ցուցադրություն
Օգտագործեք ստորև բերված կոճակները՝ JavaScript-ի միջոցով offcanvas տարրը ցուցադրելու և թաքցնելու համար, որը դասը փոխում է .show
դասը դասի հետ տարրի վրա .offcanvas
:
.offcanvas
թաքցնում է բովանդակությունը (կանխադրված).offcanvas.show
ցույց է տալիս բովանդակությունը
Դուք կարող եք օգտագործել href
ատրիբուտով հղում կամ հատկանիշով կոճակ data-bs-target
: Երկու դեպքում data-bs-toggle="offcanvas"
էլ պահանջվում է.
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 plugin-ը օգտագործում է մի քանի դասեր և հատկանիշներ՝ ծանր բարձրացնելու համար.
.offcanvas
թաքցնում է բովանդակությունը.offcanvas.show
ցույց է տալիս բովանդակությունը.offcanvas-start
թաքցնում է կտավը ձախ կողմում.offcanvas-end
թաքցնում է աջ կողմում գտնվող կտավը.offcanvas-bottom
թաքցնում է կտավը ներքևում
Ավելացրեք անջատման կոճակը data-bs-dismiss="offcanvas"
հատկանիշով, որը գործարկում է JavaScript-ի գործառույթը: Համոզվեք, որ օգտագործեք <button>
տարրը դրա հետ բոլոր սարքերում պատշաճ վարքագծի համար:
Տվյալների ատրիբուտների միջոցով
Փոխարկել
Ավելացրեք data-bs-toggle="offcanvas"
և a data-bs-target
կամ href
տարրին՝ մեկ offcanvas տարրի ինքնաբերաբար կառավարումը նշանակելու համար: Հատկանիշն data-bs-target
ընդունում է CSS ընտրիչ՝ offcanvas-ը կիրառելու համար: Համոզվեք, որ դասը ավելացրեք offcanvas
offcanvas տարրին: Եթե ցանկանում եք, որ այն լռելյայն բացվի, ավելացրեք լրացուցիչ դասը show
:
Հեռացնել
Աշխատանքից հեռացնելը կարող է իրականացվել offcanvas-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>
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 |
Փակում է offcanvas-ը, երբ սեղմված է Escape ստեղնը |
scroll |
բուլյան | false |
Թույլատրել մարմնի ոլորումը, քանի դեռ կտավից դուրս բաց է |
Մեթոդներ
Ասինխրոն մեթոդներ և անցումներ
Բոլոր API մեթոդները ասինխրոն են և սկսում են անցում : Նրանք վերադառնում են զանգահարողին հենց որ անցումը սկսվի, բայց մինչև այն ավարտվի : Բացի այդ, անցումային բաղադրիչի վրա մեթոդի կանչը անտեսվելու է :
Լրացուցիչ տեղեկությունների համար տես մեր JavaScript փաստաթղթերը :
Ակտիվացնում է ձեր բովանդակությունը որպես offcanvas տարր: Ընդունում է ընտրովի տարբերակներ object
:
Դուք կարող եք ստեղծել offcanvas օրինակ կոնստրուկտորով, օրինակ՝
var myOffcanvas = document.getElementById('myOffcanvas')
var bsOffcanvas = new bootstrap.Offcanvas(myOffcanvas)
Մեթոդ | Նկարագրություն |
---|---|
toggle |
Անջատում է կտավից դուրս տարրը՝ ցուցադրված կամ թաքցված: Վերադառնում է զանգահարողին նախքան offcanvas տարրը իրականում ցուցադրվել կամ թաքցվել է (այսինքն՝ նախքան իրադարձությունը shown.bs.offcanvas կամ hidden.bs.offcanvas իրադարձությունը տեղի ունենալը): |
show |
Ցույց է տալիս offcanvas տարրը: Վերադառնում է զանգահարողին՝ նախքան offcanvas տարրը փաստացի ցուցադրելը (այսինքն՝ նախքան shown.bs.offcanvas իրադարձությունը տեղի ունենալը): |
hide |
Թաքցնում է offcanvas տարրը: Վերադառնում է զանգահարողին նախքան offcanvas տարրը իրականում թաքցվել է (այսինքն՝ նախքան hidden.bs.offcanvas իրադարձությունը տեղի ունենալը): |
getInstance |
Ստատիկ մեթոդ, որը թույլ է տալիս ստանալ DOM տարրի հետ կապված offcanvas օրինակը |
getOrCreateInstance |
Ստատիկ մեթոդ, որը թույլ է տալիս ստանալ offcanvas օրինակը, որը կապված է DOM տարրի հետ, կամ ստեղծել նորը, եթե այն նախնականացված չէ |
Իրադարձություններ
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...
})