Offcanvas
በጥቂት ክፍሎች እና በጃቫስክሪፕት ፕለጊን በፕሮጀክትዎ ውስጥ የተደበቁ የጎን አሞሌዎችን ለዳሰሳ፣ ለግዢ ጋሪዎች እና ለሌሎችም ይገንቡ።
እንዴት እንደሚሰራ
Offcanvas በጃቫ ስክሪፕት በኩል ከግራ፣ ከቀኝ ወይም ከግርጌ ጠርዝ ለመታየት የሚቀያየር የጎን አሞሌ አካል ነው። አዝራሮች ወይም መልህቆች እርስዎ ከሚቀያየሯቸው የተወሰኑ ንጥረ ነገሮች ጋር ተያይዘው እንደ ቀስቅሴዎች ጥቅም ላይ ይውላሉ፣ እና data
ባህሪያት የእኛን ጃቫስክሪፕት ለመጥራት ያገለግላሉ።
- Offcanvas አንዳንድ ተመሳሳይ የጃቫ ስክሪፕት ኮድ እንደ ሞዳልያ ይጋራል። በፅንሰ-ሀሳብ ፣ እነሱ በጣም ተመሳሳይ ናቸው ፣ ግን የተለየ ተሰኪዎች ናቸው።
- በተመሳሳይ፣ አንዳንድ የምንጭ Sass ተለዋዋጮች ለoffcanvas ቅጦች እና ልኬቶች ከሞዳል ተለዋዋጮች የተወረሱ ናቸው።
- በሚታይበት ጊዜ Offcanvas የሸራውን ለመደበቅ ጠቅ ሊደረግ የሚችል ነባሪ backdrop ያካትታል።
- ከሞዳሎች ጋር በሚመሳሰል መልኩ፣ በአንድ ጊዜ አንድ ከሸራ ውጪ ብቻ ይታያል።
ቀና በል! ሲኤስኤስ እነማዎችን እንዴት እንደሚይዝ ከተመለከትን፣ አንድን አካል መጠቀም margin
ወይም መጠቀም አይችሉም። በምትኩ, ክፍሉን እንደ ገለልተኛ መጠቅለያ አካል ይጠቀሙ.translate
.offcanvas
prefers-reduced-motion
በመገናኛ ብዙሃን ጥያቄ ላይ የተመሰረተ ነው. የእኛን የተደራሽነት ሰነድ የተቀነሰውን እንቅስቃሴ ክፍል ይመልከቱ
።
ምሳሌዎች
Offcanvas ክፍሎች
ከዚህ በታች በነባሪ የሚታየው ከሸራ ውጭ የሆነ ምሳሌ ነው (በላይ .show
) .offcanvas
። Offcanvas ለራስጌ በተዘጋ አዝራር እና ለተወሰነ የመጀመሪያ አማራጭ የአካል ክፍል ድጋፍን ያካትታል padding
። በተቻለ መጠን ከሸራ ራስጌዎችን የማሰናበት እርምጃዎችን እንዲያካትቱ ወይም ግልጽ የሆነ የማሰናበት እርምጃ እንዲያቀርቡ እንመክርዎታለን።
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>
የቀጥታ ማሳያ
.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-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>
Offcanvas ታች
<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>
Backdrop
ኤለመንቱን ማሸብለል <body>
የተሰናከለው ከሸራ እና የጀርባው ገጽታ በሚታዩበት ጊዜ ነው። ማሸብለልን ለመቀየር እና የጀርባውን ገጽታ data-bs-scroll
ለመቀየር አይነታውን ይጠቀሙ ።<body>
data-bs-backdrop
በማሸብለል ቀለም
ይህን አማራጭ በተግባር ለማየት የቀረውን ገጽ ለማሸብለል ይሞክሩ።
Offcanvas ከጀርባ ጋር
......
በማሸብለል ጀርባ
ይህን አማራጭ በተግባር ለማየት የቀረውን ገጽ ለማሸብለል ይሞክሩ።
<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
። role="dialog"
አስቀድመን በጃቫስክሪፕት ስለጨመርን ማከል እንደማያስፈልግህ አስተውል ።
ሳስ
ተለዋዋጮች
$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"
የጃቫስክሪፕት ተግባርን የሚቀሰቅሰው ከባህሪው ጋር የማሰናበት ቁልፍ ያክሉ ። <button>
በሁሉም መሳሪያዎች ላይ ለትክክለኛ ባህሪ ከእሱ ጋር ያለውን ንጥረ ነገር መጠቀምዎን ያረጋግጡ ።
በውሂብ ባህሪያት በኩል
የአንድን ከሸራ ውጪ ኤለመንት በራስ ሰር ለመመደብ data-bs-toggle="offcanvas"
እና ወደ ኤለመንት ያክሉ ። ባህሪው ውጪያዊ ሸራውን ለመተግበር የCSS መራጭን ይቀበላል። ክፍሉን ወደ ውጪያዊው ክፍል ማከልዎን ያረጋግጡ። በነባሪ እንዲከፈት ከፈለጉ ተጨማሪውን ክፍል ያክሉ ።data-bs-target
href
data-bs-target
offcanvas
show
በጃቫስክሪፕት በኩል
በእጅ አንቃ በ፦
var offcanvasElementList = [].slice.call(document.querySelectorAll('.offcanvas'))
var offcanvasList = offcanvasElementList.map(function (offcanvasEl) {
return new bootstrap.Offcanvas(offcanvasEl)
})
አማራጮች
አማራጮች በመረጃ ባህሪያት ወይም በጃቫስክሪፕት ሊተላለፉ ይችላሉ. ለውሂብ ባህሪያት፣ data-bs-
እንደ ውስጥ ያለውን የአማራጭ ስም ወደ ላይ ጨምር data-bs-backdrop=""
።
ስም | ዓይነት | ነባሪ | መግለጫ |
---|---|---|---|
backdrop |
ቡሊያን | true |
ከሸራ ክፍት በሆነበት ጊዜ በሰውነት ላይ ዳራ ይተግብሩ |
keyboard |
ቡሊያን | true |
የማምለጫ ቁልፉ ሲጫን የ Offሸራውን ይዘጋል |
scroll |
ቡሊያን | false |
ከሸራ ውጭ ክፍት ሆኖ የሰውነት ማሸብለል ይፍቀዱ |
ዘዴዎች
ያልተመሳሰሉ ዘዴዎች እና ሽግግሮች
ሁሉም የኤፒአይ ዘዴዎች ያልተመሳሰሉ ናቸው እና ሽግግር ይጀምራሉ ። ሽግግሩ እንደተጀመረ ግን ከማለቁ በፊት ወደ ደዋዩ ይመለሳሉ ። በተጨማሪም, በመሸጋገሪያ አካል ላይ የሚደረግ ዘዴ ጥሪ ችላ ይባላል .
ይዘትህን እንደ ከሸራ ውጪ አካል ያገብራል። አማራጭ አማራጮችን ይቀበላል object
።
ከሸራ ውጪ የሆነ ምሳሌ ከግንባታው ጋር መፍጠር ትችላለህ፣ ለምሳሌ፡-
var myOffcanvas = document.getElementById('myOffcanvas')
var bsOffcanvas = new bootstrap.Offcanvas(myOffcanvas)
ዘዴ | መግለጫ |
---|---|
toggle |
ከሸራ ውጪ የሆነ አካል ወደ የሚታይ ወይም የተደበቀ ይቀየራል። ከሸራ ውጭ ያለው አካል በትክክል ከመታየቱ ወይም ከመደበቅ በፊት (ማለትም ክስተቱ ከመከሰቱ በፊት) ወደ ደዋዩ ይመለሳል።shown.bs.offcanvas hidden.bs.offcanvas |
show |
ከሸራ ውጪ የሆነ አካል ያሳያል። ከሸራ ውጭ ያለው አካል በትክክል ከመታየቱ በፊት (ማለትም shown.bs.offcanvas ክስተቱ ከመፈጠሩ በፊት) ወደ ደዋይ ይመለሳል። |
hide |
ከሸራ ውጪ የሆነ አካል ይደብቃል። ከሸራ ውጭ ያለው አካል በትክክል ከመደበቅ በፊት (ማለትም hidden.bs.offcanvas ክስተቱ ከመፈጠሩ በፊት) ወደ ደዋይ ይመለሳል። |
getInstance |
ከ DOM ኤለመንት ጋር የተጎዳኘውን ከሸራ ውጭ ያለውን ምሳሌ ለማግኘት የሚያስችል የማይንቀሳቀስ ዘዴ |
getOrCreateInstance |
ከ DOM ኤለመንት ጋር የተገናኘውን ከሸራ ውጭ ያለውን ምሳሌ እንድታገኙ ወይም ካልተጀመረ አዲስ ለመፍጠር የሚያስችል የማይንቀሳቀ�� ዘዴ |
ክስተቶች
የቡትስትራፕ ኦፍ ሸራ ክፍል ከሸራ ውጭ ተግባር ጋር ለመያያዝ ጥቂት ክስተቶችን ያጋልጣል።
የክስተት አይነት | መግለጫ |
---|---|
show.bs.offcanvas |
show የምሳሌው ዘዴ ሲጠራ ይህ ክስተት ወዲያውኑ ይቃጠላል . |
shown.bs.offcanvas |
ይህ ክስተት የሚቀጣጠለው ከሸራ ውጪ የሆነ አካል ለተጠቃሚው እንዲታይ ሲደረግ ነው (የCSS ሽግግሮች እስኪጠናቀቁ ድረስ ይጠብቃል።) |
hide.bs.offcanvas |
hide ዘዴው ሲጠራ ይህ ክስተት ወዲያውኑ ይቃጠላል . |
hidden.bs.offcanvas |
ይህ ክስተት የሚቀጣጠለው ከሸራ ውጪ የሆነ አካል ከተጠቃሚው ከተደበቀ ነው (የCSS ሽግግሮች እስኪጠናቀቁ ድረስ ይጠብቃል።) |
var myOffcanvas = document.getElementById('myOffcanvas')
myOffcanvas.addEventListener('hidden.bs.offcanvas', function () {
// do something...
})