Offcanvas

පන්ති කිහිපයක් සහ අපගේ JavaScript ප්ලගිනය සමඟින් සංචාලනය, සාප්පු කරත්ත සහ තවත් දේ සඳහා ඔබේ ව්‍යාපෘතියට සැඟවුණු පැති තීරු ගොඩනඟන්න.

මෙම පිටුවේ

එය ක්රියා කරන ආකාරය

Offcanvas යනු දර්ශන තොටේ වම්, දකුණ, ඉහළ හෝ පහළ කෙළවරේ සිට දිස් වීමට JavaScript හරහා ටොගල් කළ හැකි පැති තීරු සංරචකයකි. බොත්තම් හෝ නැංගුරම් ඔබ ටොගල් කරන විශේෂිත මූලද්‍රව්‍යවලට අමුණා ඇති ප්‍රේරක ලෙස dataභාවිතා කරන අතර අපගේ ජාවාස්ක්‍රිප්ට් ආයාචනා කිරීමට උපලක්ෂණ භාවිතා කරයි.

Offcanvas එකම JavaScript කේතයන් සමහරක් මාදිලි ලෙස බෙදා ගනී. සංකල්පමය වශයෙන්, ඒවා බෙහෙවින් සමාන ය, නමුත් ඒවා වෙනම ප්ලගීන වේ.
ඒ හා සමානව, offcanvas හි මෝස්තර සහ මානයන් සඳහා වන සමහර මූලාශ්‍ර Sass විචල්‍ය මාදිලියේ විචල්‍යයන්ගෙන් උරුම වේ.
පෙන්වන විට, offcanvas හි පෙරනිමි පසුබිමක් ඇතුළත් වන අතර එය offcanvas සැඟවීමට ක්ලික් කළ හැක.
මාදිලිවලට සමානව, වරකට පෙන්විය හැක්කේ එක offcanvas එකක් පමණි.

දැනුම්දීම! CSS සජීවිකරණ හසුරුවන ආකාරය අනුව, ඔබට මූලද්‍රව්‍යයක් භාවිතා කිරීමට marginහෝ භාවිතා කිරීමට නොහැක. ඒ වෙනුවට, ස්වාධීන දවටන අංගයක් ලෙස පන්තිය භාවිතා කරන්න.translate.offcanvas

මෙම සංරචකයේ සජීවිකරණ බලපෑම prefers-reduced-motionමාධ්‍ය විමසුම මත රඳා පවතී. අපගේ ප්‍රවේශ්‍යතා ලේඛනවල අඩු කළ චලන කොටස බලන්න .

උදාහරණ

Offcanvas සංරචක

පහත දැක්වෙන්නේ පෙරනිමියෙන් පෙන්වන ඕෆ්කැන්වස් උදාහරණයකි ( .showඔන් හරහා .offcanvas). Offcanvas වසන බොත්තමක් සහිත ශීර්ෂයක් සඳහා සහය සහ සමහර ආරම්භක සඳහා විකල්ප ශරීර පන්තියක් ඇතුළත් වේ padding. අපි ඔබට හැකි සෑම විටම ඉවත දැමීමේ ක්‍රියාවන් සමඟ offcanvas ශීර්ෂ ඇතුළත් කිරීමට යෝජනා කරමු, නැතහොත් පැහැදිලි ඉවත් කිරීමේ ක්‍රියාවක් සපයන්න.

Offcanvas සඳහා අන්තර්ගතය මෙතැනට යයි. ඔබට මෙහි ඕනෑම බූට්ස්ට්‍රැප් සංරචකයක් හෝ අභිරුචි මූලද්‍රව්‍යයන් පමණ තැබිය හැක.

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 සමඟ සම්බන්ධ කරන්න

සමහර පෙළ තැන් දරන්නා ලෙස. සැබෑ ජීවිතයේ දී ඔබ තෝරාගත් අංග තිබිය හැකිය. කැමති, පෙළ, පින්තූර, ලැයිස්තු, ආදිය.

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-lgබිඳුම් ලක්ෂ්‍යයට පහළින් ඕෆ්කැන්වසයක අන්තර්ගතය සඟවයි lg, නමුත් බිඳුම් ලක්ෂ්‍යයට ඉහළින් අන්තර්ගතය පෙන්වයි lg.

ප්‍රතිචාරාත්මක offcanvas toggle පෙන්වීමට ඔබගේ බ්‍රවුසරයේ ප්‍රමාණය වෙනස් කරන්න.

මෙය තුල අන්තර්ගත වේ .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 ස්ථානගත කරන්න (ඉහත පෙන්වා ඇත)
.offcanvas-endදර්ශන තොටේ දකුණු පසින් offcanvas තබයි
.offcanvas-topදර්ශන තොටේ මුදුනේ offcanvas තබයි
.offcanvas-bottomදර්ශන තොටේ පතුලේ offcanvas තබයි

පහතින් ඉහළ, දකුණු සහ පහළ උදාහරණ උත්සාහ කරන්න.

...

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>

...

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 සඟවයි
.offcanvas-endදකුණු පස ඇති offcanvas සඟවයි
.offcanvas-topමුදුනේ offcanvas සඟවයි
.offcanvas-bottomපතුලේ ඇති offcanvas සඟවයි

data-bs-dismiss="offcanvas"ජාවාස්ක්‍රිප්ට් ක්‍රියාකාරීත්වය ක්‍රියාරම්භ කරන ගුණාංගය සමඟින් ඉවත් කිරීමේ බොත්තමක් එක් කරන්න . <button>සියලුම උපාංග හරහා නිසි හැසිරීම සඳහා එය සමඟ මූලද්‍රව්‍යය භාවිතා කිරීමට වග බලා ගන්න .

දත්ත ගුණාංග හරහා

ටොගල් කරන්න

data-bs-toggle="offcanvas"එක් ඕෆ්කැන්වස් මූලද්‍රව්‍යයක පාලනය ස්වයංක්‍රීයව පැවරීමට මූලද්‍රව්‍යයට එක් කරන්න data-bs-target. ගුණාංගය offcanvas යෙදීම සඳහා CSS තේරීමක් පිළිගනී href. offcanvas මූලද්‍රව්‍යයට data-bs-targetපන්තිය එක් කිරීමට වග බලා ගන්න . 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>

offcanvas එකක් ඉවත දැමීමේ ක්‍රම දෙකම සහය දක්වන අතර, offcanvas එකක් පිටතින් ඉවත් කිරීම ARIA Authoring Practices Guide dialog (modal) රටාවට නොගැලපෙන බව මතක තබා ගන්න . මෙය ඔබේම අවදානමකින් කරන්න.

JavaScript හරහා

සමඟ අතින් සබල කරන්න:

const offcanvasElementList = document.querySelectorAll('.offcanvas')
const offcanvasList = [...offcanvasElementList].map(offcanvasEl => new bootstrap.Offcanvas(offcanvasEl))

විකල්ප

දත්ත උපලක්ෂණ හෝ ජාවාස්ක්‍රිප්ට් හරහා විකල්ප ලබා දිය හැකි බැවින්, ඔබට විකල්ප නාමයක් data-bs-, ලෙසට එකතු කළ හැක data-bs-animation="{value}". දත්ත ගුණාංග හරහා විකල්ප සම්මත කිරීමේදී විකල්ප නාමයේ කේස් වර්ගය “ කැමල්කේස් ” සිට “ කෙබාබ්-කේස් ” ලෙස වෙනස් කිරීමට වග බලා ගන්න. උදාහරණයක් ලෙස, 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`	boolean හෝ string`static`	`true`	කැන්වස් විවෘතව තිබියදී ශරීරය මත පසුබිමක් යොදන්න. විකල්පයක් ලෙස, `static`ක්ලික් කළ විට offcanvas වසා නොයන පසුබිමක් සඳහා සඳහන් කරන්න.
`keyboard`	බූලියන්	`true`	ගැලවීමේ යතුර එබූ විට offcanvas එක වසා දමයි.
`scroll`	බූලියන්	`false`	Offcanvas විවෘතව ඇති අතරතුර ශරීරය අනුචලනය කිරීමට ඉඩ දෙන්න.

ක්රම

අසමමුහුර්ත ක්රම සහ සංක්රාන්ති

සියලුම API ක්‍රම අසමමුහුර්ත වන අතර සංක්‍රාන්තියක් ආරම්භ කරන්න . සංක්‍රාන්තිය ආරම්භ වූ වහාම නමුත් එය අවසන් වීමට පෙර ඔවුන් නැවත අමතන්නා වෙත පැමිණේ . ඊට අමතරව, සංක්‍රාන්ති සංරචකයක ක්‍රම ඇමතුමක් නොසලකා හරිනු ඇත .

වැඩි විස්තර සඳහා අපගේ JavaScript ලේඛන බලන්න .

ඔබගේ අන්තර්ගතය offcanvas මූලද්‍රව්‍යයක් ලෙස සක්‍රිය කරයි. විකල්ප විකල්ප පිළිගනී 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`	ඕෆ්කැන්වසය පෙන්වන විට, එහි පසුතලය `static`සහ ඕෆ්කැන්වසයෙන් පිටත ක්ලික් කිරීමක් සිදු කරන විට මෙම සිදුවීම සිදු වේ. `keyboard`පලා යාමේ යතුර එබූ විට සහ විකල්පය ලෙස සකසා ඇති විට සිදුවීම ද වෙඩි වේ `false`.
`show.bs.offcanvas`	`show`නිදසුන් ක්‍රමය හැඳින්වූ විට මෙම සිදුවීම වහාම ක්‍රියාත්මක වේ.
`shown.bs.offcanvas`	Offcanvas මූලද්‍රව්‍යයක් පරිශීලකයාට දෘශ්‍යමාන කර ඇති විට මෙම සිදුවීම ක්‍රියාත්මක වේ (CSS සංක්‍රාන්ති සම්පූර්ණ වන තෙක් බලා සිටිනු ඇත).

const myOffcanvas = document.getElementById('myOffcanvas')
myOffcanvas.addEventListener('hidden.bs.offcanvas', event => {
  // do something...
})

Offcanvas

එය ක්රියා කරන ආකාරය

උදාහරණ

Offcanvas සංරචක

Offcanvas

සජීවී නිරූපණය

Offcanvas

ශරීරය අනුචලනය කිරීම

ශරීරය අනුචලනය සමග Offcanvas

ශරීරය අනුචලනය සහ පසුබිම

අනුචලනය සහිත පසුබිම

ස්ථිතික පසුබිම

Offcanvas

අඳුරු කැන්වස්

Offcanvas

ප්රතිචාරාත්මක

ප්‍රතිචාරාත්මක ඕෆ්කැන්වස්

ස්ථානගත කිරීම

Offcanvas ඉහළ

Offcanvas හරි

Offcanvas පතුලේ

ප්රවේශ

CSS

විචල්යයන්

Sass විචල්යයන්

භාවිතය

දත්ත ගුණාංග හරහා

ටොගල් කරන්න

අස් කරන්න

JavaScript හරහා

විකල්ප

ක්රම

අසමමුහුර්ත ක්රම සහ සංක්රාන්ති

සිදුවීම්