முக்கிய உள்ளடக்கத்திற்கு செல்க டாக்ஸ் வழிசெலுத்தலுக்குச் செல்லவும்
Check
in English

ஆஃப்கான்வாஸ்

சில வகுப்புகள் மற்றும் எங்கள் ஜாவாஸ்கிரிப்ட் செருகுநிரல் மூலம் வழிசெலுத்தல், வணிக வண்டிகள் மற்றும் பலவற்றிற்கான உங்கள் திட்டத்தில் மறைக்கப்பட்ட பக்கப்பட்டிகளை உருவாக்கவும்.

இந்தப் பக்கத்தில்

எப்படி இது செயல்படுகிறது

Offcanvas என்பது ஒரு பக்கப்பட்டி கூறு ஆகும், இது ஜாவாஸ்கிரிப்ட் வழியாக காட்சிப் போர்ட்டின் இடது, வலது, மேல் அல்லது கீழ் விளிம்பிலிருந்து தோன்றும். பொத்தான்கள் அல்லது ஆங்கர்கள் நீங்கள் நிலைமாற்றும் குறிப்பிட்ட உறுப்புகளுடன் இணைக்கப்பட்ட தூண்டுதல்களாகப் பயன்படுத்தப்படுகின்றன, மேலும் dataஎங்களின் ஜாவாஸ்கிரிப்டைப் பயன்படுத்த பண்புக்கூறுகள் பயன்படுத்தப்படுகின்றன.

  • Offcanvas சில ஜாவாஸ்கிரிப்ட் குறியீட்டை மாதிரிகளாகப் பகிர்ந்து கொள்கிறது. கருத்தியல் ரீதியாக, அவை மிகவும் ஒத்தவை, ஆனால் அவை தனித்தனி செருகுநிரல்கள்.
  • இதேபோல், ஆஃப்கான்வாஸின் பாணிகள் மற்றும் பரிமாணங்களுக்கான சில ஆதார சாஸ் மாறிகள் மாதிரியின் மாறிகளிலிருந்து பெறப்படுகின்றன.
  • ஆஃப்கேன்வாஸ் காட்டப்படும்போது, ​​ஆஃப்கேன்வாஸை மறைக்க கிளிக் செய்யக்கூடிய இயல்புநிலை பின்னணி உள்ளது.
  • மாதிரிகளைப் போலவே, ஒரு நேரத்தில் ஒரு ஆஃப்கேன்வாஸை மட்டுமே காட்ட முடியும்.

எச்சரிக்கை! CSS அனிமேஷன்களை எவ்வாறு கையாளுகிறது என்பதைப் பொறுத்தவரை, நீங்கள் ஒரு உறுப்பைப் பயன்படுத்தவோ அல்லது marginபயன்படுத்தவோ முடியாது . அதற்கு பதிலாக, வகுப்பை ஒரு சுயாதீன மடக்குதல் உறுப்பாகப் பயன்படுத்தவும்.translate.offcanvas

இந்தக் கூறுகளின் அனிமேஷன் விளைவு prefers-reduced-motionமீடியா வினவலைச் சார்ந்தது. எங்கள் அணுகல்தன்மை ஆவணத்தின் குறைக்கப்பட்ட இயக்கம் பகுதியைப் பார்க்கவும் .

எடுத்துக்காட்டுகள்

ஆஃப்கான்வாஸ் கூறுகள்

முன்னிருப்பாகக் காட்டப்படும் ஆஃப்கான்வாஸ் உதாரணம் கீழே உள்ளது ( .showஇல் வழியாக .offcanvas). 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>
Offcanvas வலது
...
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"ஜாவாஸ்கிரிப்ட் வழியாக நாங்கள் ஏற்கனவே சேர்த்திருப்பதால் நீங்கள் சேர்க்க வேண்டியதில்லை என்பதை நினைவில் கொள்ளவும் .

CSS

மாறிகள்

v5.2.0 இல் சேர்க்கப்பட்டது

பூட்ஸ்டார்ப்பின் வளர்ந்து வரும் CSS மாறிகள் அணுகுமுறையின் ஒரு பகுதியாக, .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};

சாஸ் மாறிகள்

$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"ஜாவாஸ்கிரிப்ட் செயல்பாட்டைத் தூண்டும் பண்புக்கூறுடன் தள்ளுபடி பொத்தானைச் சேர்க்கவும் . <button>எல்லா சாதனங்களிலும் சரியான நடத்தைக்கு உறுப்பை அதனுடன் பயன்படுத்துவதை உறுதிசெய்யவும் .

தரவு பண்புக்கூறுகள் மூலம்

நிலைமாற்று

data-bs-toggle="offcanvas"ஒரு ஆஃப்கான்வாஸ் உறுப்பின் கட்டுப்பாட்டை தானாக ஒதுக்க data-bs-target, hrefஉறுப்பைச் சேர்க்கவும் . ஆஃப்கேன்வாஸைப் data-bs-targetபயன்படுத்த CSS தேர்வியை பண்புக்கூறு ஏற்றுக்கொள்கிறது. 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))

விருப்பங்கள்

தரவு பண்புக்கூறுகள் அல்லது ஜாவாஸ்கிரிப்ட் வழியாக விருப்பங்களை அனுப்ப முடியும் என்பதால், இல் உள்ளதைப் போல விருப்பப் பெயரை நீங்கள் data-bs-சேர்க்கலாம் data-bs-animation="{value}". தரவு பண்புக்கூறுகள் வழியாக விருப்பங்களை அனுப்பும் போது, ​​" camelCase " என்பதிலிருந்து " kebab-case " என்ற விருப்பப் பெயரின் கேஸ் வகையை மாற்றுவதை உறுதிசெய்யவும் . எடுத்துக்காட்டாக, க்கு data-bs-custom-class="beautifier"பதிலாக பயன்படுத்தவும் data-bs-customClass="beautifier".

பூட்ஸ்டார்ப் 5.2.0 இன் படி, அனைத்து கூறுகளும் ஒரு சோதனை முன்பதிவு செய்யப்பட்ட தரவு பண்புக்கூறை ஆதரிக்கின்றன 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 ஆஃப்கேன்வாஸ் திறந்திருக்கும் போது உடல் ஸ்க்ரோலிங்கை அனுமதிக்கவும்.

முறைகள்

ஒத்திசைவற்ற முறைகள் மற்றும் மாற்றங்கள்

அனைத்து API முறைகளும் ஒத்திசைவற்றவை மற்றும் மாற்றத்தைத் தொடங்குகின்றன . மாற்றம் தொடங்கப்பட்டவுடன், ஆனால் அது முடிவதற்குள் அவர்கள் அழைப்பாளரிடம் திரும்புகிறார்கள் . கூடுதலாக, மாற்றும் கூறுகளின் முறை அழைப்பு புறக்கணிக்கப்படும் .

மேலும் தகவலுக்கு எங்கள் ஜாவாஸ்கிரிப்ட் ஆவணங்களைப் பார்க்கவும் .

உங்கள் உள்ளடக்கத்தை ஆஃப்கான்வாஸ் உறுப்பாக செயல்படுத்துகிறது. விருப்ப விருப்பங்களை ஏற்றுக்கொள்கிறது object.

கன்ஸ்ட்ரக்டருடன் ஆஃப்கான்வாஸ் நிகழ்வை உருவாக்கலாம், எடுத்துக்காட்டாக:

const bsOffcanvas = new bootstrap.Offcanvas('#myOffcanvas')
முறை விளக்கம்
getInstance DOM உறுப்புடன் தொடர்புடைய ஆஃப்கான்வாஸ் நிகழ்வைப் பெற உங்களை அனுமதிக்கும் நிலையான முறை.
getOrCreateInstance DOM உறுப்புடன் தொடர்புடைய ஆஃப்கேன்வாஸ் நிகழ்வைப் பெற உங்களை அனுமதிக்கும் நிலையான முறை, அல்லது அது துவக்கப்படாமல் இருந்தால் புதிய ஒன்றை உருவாக்கவும்.
hide ஆஃப்கான்வாஸ் உறுப்பை மறைக்கிறது. ஆஃப்கான்வாஸ் உறுப்பு உண்மையில் மறைக்கப்படுவதற்கு முன்பு அழைப்பாளருக்குத் திரும்பும் (அதாவது hidden.bs.offcanvasநிகழ்வு நிகழும் முன்).
show ஆஃப்கான்வாஸ் உறுப்பைக் காட்டுகிறது. ஆஃப்கான்வாஸ் உறுப்பு உண்மையில் காட்டப்படுவதற்கு முன்பு அழைப்பாளருக்குத் திரும்புகிறது (அதாவது shown.bs.offcanvasநிகழ்வு நிகழும் முன்).
toggle ஆஃப்கேன்வாஸ் உறுப்பைக் காட்ட அல்லது மறைக்க மாற்றுகிறது. ஆஃப்கான்வாஸ் உறுப்பு உண்மையில் காட்டப்படுவதற்கு அல்லது மறைக்கப்படுவதற்கு முன் அழைப்பாளருக்குத் திரும்பும் (அதாவது நிகழ்வு shown.bs.offcanvasஅல்லது hidden.bs.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...
})