अफक्यानभास

केही कक्षाहरू र हाम्रो JavaScript प्लगइनको साथ नेभिगेसन, किनमेल कार्टहरू, र थपको लागि तपाईंको परियोजनामा लुकेका साइडबारहरू बनाउनुहोस्।

यस पृष्ठमा

यसले कसरी काम गर्छ

Offcanvas एक साइडबार कम्पोनेन्ट हो जुन जाभास्क्रिप्ट मार्फत भ्यूपोर्टको बायाँ, दायाँ, माथि वा तल्लो किनारबाट देखा पर्न सकिन्छ। बटन वा एङ्करहरू ट्रिगरको रूपमा प्रयोग गरिन्छ जुन तपाइँले टगल गर्ने विशेष तत्वहरूमा संलग्न हुन्छन्, र dataविशेषताहरू हाम्रो JavaScript आह्वान गर्न प्रयोग गरिन्छ।

Offcanvas ले उही JavaScript कोड को केहि मोडलहरु को रूप मा साझा गर्दछ। वैचारिक रूपमा, तिनीहरू एकदम समान छन्, तर तिनीहरू अलग प्लगइनहरू हुन्।
त्यसै गरी, अफक्यानभासको शैली र आयामहरूका लागि केही स्रोत सास चरहरू मोडलको चरबाट प्राप्त हुन्छन्।
जब देखाइन्छ, अफक्यानभासले पूर्वनिर्धारित ब्याकड्रप समावेश गर्दछ जुन अफक्यानभास लुकाउन क्लिक गर्न सकिन्छ।
मोडलहरू जस्तै, एक पटकमा एउटा मात्र अफक्यानभास देखाउन सकिन्छ।

हेड अप! CSS ले एनिमेसनहरू कसरी ह्यान्डल गर्छ भन्ने कुरालाई ध्यानमा राखेर, तपाईंले कुनै तत्व प्रयोग marginवा प्रयोग गर्न सक्नुहुन्न। बरु, क्लासलाई स्वतन्त्र र्यापिङ तत्वको रूपमा प्रयोग गर्नुहोस्।translate.offcanvas

यस कम्पोनेन्टको एनिमेसन प्रभाव prefers-reduced-motionमिडिया क्वेरीमा निर्भर हुन्छ। हाम्रो पहुँच कागजातको घटाइएको गति खण्ड हेर्नुहोस् ।

उदाहरणहरू

अफक्यानभास कम्पोनेन्टहरू

तल एक offcanvas उदाहरण हो जुन पूर्वनिर्धारित रूपमा देखाइएको छ (मा मार्फत .show) .offcanvas। अफक्यानभासमा क्लोज बटन भएको हेडर र केही प्रारम्भिकका लागि वैकल्पिक बडी क्लासको लागि समर्थन समावेश छ padding। हामी सुझाव दिन्छौं कि तपाईंले सम्भव भएसम्म खारेज कार्यहरू सहित अफक्यानभास हेडरहरू समावेश गर्नुहोस्, वा स्पष्ट खारेज कार्य प्रदान गर्नुहोस्।

अफक्यानभासका लागि सामग्री यहाँ जान्छ। तपाईं यहाँ कुनै पनि बुटस्ट्र्याप कम्पोनेन्ट वा अनुकूलन तत्वहरू राख्न सक्नुहुन्छ।

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क्लास टगल गर्दछ .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>

स्थिर पृष्ठभूमि

ब्याकड्रपलाई स्थिरमा सेट गर्दा, अफक्यानभास बाहिर क्लिक गर्दा बन्द हुने छैन।

यदि तपाईंले मेरो बाहिर क्लिक गर्नुभयो भने म बन्द हुनेछैन।

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।

अफक्यानभास सामग्री यहाँ राख्नुहोस्।

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-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-sm
.offcanvas-md
.offcanvas-lg
.offcanvas-xl
.offcanvas-xxl

नियुक्ति

अफक्यानभास कम्पोनेन्टहरूको लागि कुनै पूर्वनिर्धारित प्लेसमेन्ट छैन, त्यसैले तपाईंले तलको परिमार्जनक वर्गहरू मध्ये एउटा थप्नुपर्छ।

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

...

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>

पहुँच

aria-labelledby="..."अफक्यानभास प्यानल अवधारणात्मक रूपमा मोडल संवाद भएको हुनाले, अफक्यानभास शीर्षकलाई सन्दर्भ गर्दै — थप्न निश्चित हुनुहोस् .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.showसामग्री देखाउँछ
.offcanvas-startबायाँमा अफक्यानभास लुकाउँछ
.offcanvas-endदायाँमा अफक्यानभास लुकाउँछ
.offcanvas-topअफक्यानभासलाई माथि लुकाउँछ
.offcanvas-bottomतल अफक्यानभास लुकाउँछ

विशेषताको साथ खारेज बटन थप्नुहोस् data-bs-dismiss="offcanvas", जसले JavaScript कार्यक्षमता ट्रिगर गर्दछ। <button>सबै यन्त्रहरूमा उचित व्यवहारको लागि यसको साथ तत्व प्रयोग गर्न निश्चित हुनुहोस् ।

डाटा विशेषताहरू मार्फत

टगल गर्नुहोस्

एक अफक्यानभास तत्वको नियन्त्रण स्वतः असाइन गर्न तत्व थप्नुहोस् data-bs-toggle="offcanvas"र a data-bs-targetवा मा। विशेषताले अफक्यानभास लागू गर्न CSS चयनकर्तालाई स्वीकार गर्छ href। अफक्यानभास तत्वमा data-bs-targetकक्षा थप्न निश्चित हुनुहोस् । 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 अथरिङ प्रैक्टिसेस गाइड डायलग (मोडल) ढाँचासँग मेल खाँदैन भन्ने कुरालाई ध्यानमा राख्नुहोस् । यो तपाईंको आफ्नै जोखिममा गर्नुहोस्।

जाभास्क्रिप्ट मार्फत

म्यानुअल रूपमा सक्षम गर्नुहोस्:

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"।

बुटस्ट्र्याप ५.२.० को रूपमा, सबै कम्पोनेन्टहरूले प्रयोगात्मक आरक्षित डेटा विशेषतालाई समर्थन गर्दछ data-bs-configजसले JSON स्ट्रिङको रूपमा साधारण कम्पोनेन्ट कन्फिगरेसन राख्न सक्छ। जब एक तत्व हुन्छ 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`	अफक्यानभास खुला हुँदा शरीरमा ब्याकड्रप लगाउनुहोस्। वैकल्पिक रूपमा, `static`ब्याकड्रपको लागि निर्दिष्ट गर्नुहोस् जसले क्लिक गर्दा अफक्यानभास बन्द गर्दैन।
`keyboard`	बुलियन	`true`	एस्केप कुञ्जी थिच्दा अफक्यानभास बन्द हुन्छ।
`scroll`	बुलियन	`false`	अफक्यानभास खुला हुँदा बडी स्क्रोलिङलाई अनुमति दिनुहोस्।

विधिहरू

एसिन्क्रोनस विधि र संक्रमण

सबै एपीआई विधिहरू एसिन्क्रोनस छन् र एक संक्रमण सुरु गर्नुहोस् । तिनीहरू संक्रमण सुरु हुने बित्तिकै तर यो समाप्त हुनु अघि कलरमा फर्कन्छन् । थप रूपमा, ट्रान्जिसनिङ कम्पोनेन्टमा विधि कललाई बेवास्ता गरिनेछ ।

थप जानकारीको लागि हाम्रो जाभास्क्रिप्ट कागजात हेर्नुहोस् ।

तपाईंको सामग्रीलाई अफक्यानभास तत्वको रूपमा सक्रिय गर्दछ। वैकल्पिक विकल्पहरू स्वीकार गर्दछ object।

तपाईं कन्स्ट्रक्टरसँग अफक्यानभास उदाहरण सिर्जना गर्न सक्नुहुन्छ, उदाहरणका लागि:

const bsOffcanvas = new bootstrap.Offcanvas('#myOffcanvas')

विधि	विवरण
`getInstance`	स्थिर विधि जसले तपाईंलाई DOM तत्वसँग सम्बन्धित offcanvas उदाहरण प्राप्त गर्न अनुमति दिन्छ।
`getOrCreateInstance`	स्थिर विधि जसले तपाईंलाई DOM तत्वसँग सम्बन्धित offcanvas उदाहरण प्राप्त गर्न अनुमति दिन्छ, वा यो प्रारम्भ नगरिएको अवस्थामा नयाँ सिर्जना गर्नुहोस्।
`hide`	अफक्यानभास तत्व लुकाउँछ। अफक्यानभास तत्व वास्तवमा लुकेको हुनु अघि कलरमा फर्कन्छ (अर्थात `hidden.bs.offcanvas`घटना हुनु अघि)।
`show`	अफक्यानभास तत्व देखाउँछ। अफक्यानभास तत्व वास्तवमा देखाइनु अघि कलरमा फर्कन्छ (अर्थात `shown.bs.offcanvas`घटना हुनु अघि)।
`toggle`	देखाउन वा लुकाउनको लागि अफक्यानभास तत्व टगल गर्दछ। अफक्यानभास तत्व वास्तवमा देखाइयो वा लुकाउनु अघि कलरमा फर्कन्छ (जस्तै `shown.bs.offcanvas`वा `hidden.bs.offcanvas`घटना हुनु अघि)।

घटनाहरू

बुटस्ट्र्यापको अफक्यानभास क्लासले अफक्यानभास कार्यक्षमतामा हुक गर्नका लागि केही घटनाहरू उजागर गर्दछ।

घटना प्रकार	विवरण
`hide.bs.offcanvas`	यो घटना तुरुन्तै निकालिएको छ जब `hide`विधि कल गरिएको छ।
`hidden.bs.offcanvas`	प्रयोगकर्ताबाट अफक्यानभास तत्व लुकाइएको बेला यो घटना निकालिन्छ (CSS ट्रान्जिसनहरू पूरा हुनको लागि पर्खनेछ)।
`hidePrevented.bs.offcanvas`	अफक्यानभास देखाइँदा, यसको ब्याकड्रप हुन्छ `static`र अफक्यानभास बाहिर क्लिक गर्दा यो घटना निकालिन्छ। एस्केप कुञ्जी थिच्दा र `keyboard`विकल्पमा सेट गरिएको बेला घटना पनि निकालिन्छ `false`।
`show.bs.offcanvas`	`show`उदाहरण विधि बोलाउँदा यो घटना तुरुन्तै सक्रिय हुन्छ ।
`shown.bs.offcanvas`	यो घटनालाई हटाइन्छ जब एक अफक्यानभास तत्व प्रयोगकर्तालाई दृश्यात्मक बनाइन्छ (CSS ट्रान्जिसनहरू पूरा हुनको लागि पर्खनेछ)।

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

अफक्यानभास

यसले कसरी काम गर्छ

उदाहरणहरू

अफक्यानभास कम्पोनेन्टहरू

अफक्यानभास

प्रत्यक्ष डेमो

अफक्यानभास

शरीर स्क्रोलिङ

बडी स्क्रोलिङको साथ अफक्यानभास

शरीर स्क्रोलिङ र ब्याकड्रप

स्क्रोलिङको साथ ब्याकड्रप

स्थिर पृष्ठभूमि

अफक्यानभास

गाढा अफक्यानभास

अफक्यानभास

उत्तरदायी

उत्तरदायी अफक्यानभास

नियुक्ति

अफक्यानभास शीर्ष

अफक्यानभास दायाँ

अफक्यानभास तल

पहुँच

CSS

चरहरू

Sass चरहरू

प्रयोग

डाटा विशेषताहरू मार्फत

टगल गर्नुहोस्

खारेज गर्नुहोस्

जाभास्क्रिप्ट मार्फत

विकल्पहरू

विधिहरू

एसिन्क्रोनस विधि र संक्रमण

घटनाहरू