अफक्यानभास

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

यस पृष्ठमा

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

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

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

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

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

उदाहरणहरू

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

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

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

<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"आवश्यक छ।

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

पहुँच

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

अफक्यानभास खारेज गर्ने दुबै तरिकाहरू समर्थित हुँदा, अफक्यानभास बाहिरबाट खारेज गर्दा WAI-ARIA मोडल संवाद डिजाइन ढाँचासँग मेल खाँदैन भन्ने कुरालाई ध्यानमा राख्नुहोस् । यो तपाईंको आफ्नै जोखिममा गर्नुहोस्।

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

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

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`	अफक्यानभास खुला हुँदा शरीरमा ब्याकड्रप लगाउनुहोस्
`keyboard`	बुलियन	`true`	एस्केप कुञ्जी थिच्दा अफक्यानभास बन्द हुन्छ
`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 तत्वसँग सम्बन्धित offcanvas उदाहरण प्राप्त गर्न अनुमति दिन्छ
`getOrCreateInstance`	स्थिर विधि जसले तपाइँलाई DOM तत्वसँग सम्बन्धित offcanvas उदाहरण प्राप्त गर्न अनुमति दिन्छ, वा यो प्रारम्भ नगरिएको अवस्थामा नयाँ सिर्जना गर्न अनुमति दिन्छ।

घटनाहरू

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

घटना प्रकार	विवरण
`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...
})

अफक्यानभास

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

उदाहरणहरू

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

अफक्यानभास

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

अफक्यानभास

नियुक्ति

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

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

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

ब्याकड्रप

स्क्रोलिङ संग रंगीन

ब्याकड्रपको साथ अफक्यानभास

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

पहुँच

सास

चरहरू

प्रयोग

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

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

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

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

विकल्पहरू

विधिहरू

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

घटनाहरू