ஆஃப்கான்வாஸ்
சில வகுப்புகள் மற்றும் எங்கள் ஜாவாஸ்கிரிப்ட் செருகுநிரல் மூலம் வழிசெலுத்தல், வணிக வண்டிகள் மற்றும் பலவற்றிற்கான உங்கள் திட்டத்தில் மறைக்கப்பட்ட பக்கப்பட்டிகளை உருவாக்கவும்.
எப்படி இது செயல்படுகிறது
Offcanvas என்பது ஒரு பக்கப்பட்டி கூறு ஆகும், இது ஜாவாஸ்கிரிப்ட் வழியாக காட்சிப் போர்ட்டின் இடது, வலது அல்லது கீழ் விளிம்பிலிருந்து தோன்றும். பொத்தான்கள் அல்லது ஆங்கர்கள் நீங்கள் நிலைமாற்றும் குறிப்பிட்ட உறுப்புகளுடன் இணைக்கப்பட்ட தூண்டுதல்களாகப் பயன்படுத்தப்படுகின்றன, மேலும் data
எங்களின் ஜாவாஸ்கிரிப்டைப் பயன்படுத்த பண்புக்கூறுகள் பயன்படுத்தப்படுகின்றன.
- Offcanvas சில ஜாவாஸ்கிரிப்ட் குறியீட்டை மாதிரிகளாகப் பகிர்ந்து கொள்கிறது. கருத்தியல் ரீதியாக, அவை மிகவும் ஒத்தவை, ஆனால் அவை தனித்தனி செருகுநிரல்கள்.
- இதேபோல், ஆஃப்கான்வாஸின் பாணிகள் மற்றும் பரிமாணங்களுக்கான சில ஆதார சாஸ் மாறிகள் மாதிரியின் மாறிகளிலிருந்து பெறப்படுகின்றன.
- ஆஃப்கேன்வாஸ் காட்டப்படும்போது, ஆஃப்கேன்வாஸை மறைக்க கிளிக் செய்யக்கூடிய இயல்புநிலை பின்னணி உள்ளது.
- மாதிரிகளைப் போலவே, ஒரு நேரத்தில் ஒரு ஆஃப்கேன்வாஸை மட்டுமே காட்ட முடியும்.
எச்சரிக்கை! CSS அனிமேஷன்களை எவ்வாறு கையாளுகிறது என்பதைப் பொறுத்தவரை, நீங்கள் ஒரு உறுப்பைப் பயன்படுத்தவோ அல்லது margin
பயன்படுத்தவோ முடியாது . அதற்கு பதிலாக, வகுப்பை ஒரு சுயாதீன மடக்குதல் உறுப்பாகப் பயன்படுத்தவும்.translate
.offcanvas
prefers-reduced-motion
மீடியா வினவலைச் சார்ந்தது. எங்கள் அணுகல்தன்மை ஆவணத்தின் குறைக்கப்பட்ட இயக்கம் பகுதியைப் பார்க்கவும்
.
எடுத்துக்காட்டுகள்
ஆஃப்கான்வாஸ் கூறுகள்
முன்னிருப்பாகக் காட்டப்படும் ஆஃப்கான்வாஸ் உதாரணம் கீழே உள்ளது ( .show
இல் வழியாக .offcanvas
). 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"
தேவை.
ஆஃப்கான்வாஸ்
<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>
Offcanvas வலது
<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">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>
அணுகல்
ஆஃப்கான்வாஸ் பேனல் கருத்துரீதியாக ஒரு மாதிரி உரையாடலாக இருப்பதால், 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.show
உள்ளடக்கத்தைக் காட்டுகிறது.offcanvas-start
இடதுபுறத்தில் உள்ள கேன்வாஸை மறைக்கிறது.offcanvas-end
வலதுபுறத்தில் ஆஃப்கான்வாஸை மறைக்கிறது.offcanvas-bottom
கீழே உள்ள ஆஃப்கான்வாஸை மறைக்கிறது
data-bs-dismiss="offcanvas"
ஜாவாஸ்கிரிப்ட் செயல்பாட்டைத் தூண்டும் பண்புக்கூறுடன் தள்ளுபடி பொத்தானைச் சேர்க்கவும் . <button>
எல்லா சாதனங்களிலும் சரியான நடத்தைக்கு உறுப்பை அதனுடன் பயன்படுத்துவதை உறுதிசெய்யவும் .
தரவு பண்புக்கூறுகள் மூலம்
data-bs-toggle="offcanvas"
ஒரு ஆஃப்கான்வாஸ் உறுப்பின் கட்டுப்பாட்டை தானாக ஒதுக்க data-bs-target
, href
உறுப்பைச் சேர்க்கவும் . ஆஃப்கேன்வாஸைப் data-bs-target
பயன்படுத்த CSS தேர்வியை பண்புக்கூறு ஏற்றுக்கொள்கிறது. 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 |
எஸ்கேப் விசையை அழுத்தும் போது ஆஃப்கேன்வாஸை மூடுகிறது |
scroll |
பூலியன் | false |
ஆஃப்கேன்வாஸ் திறந்திருக்கும் போது உடல் ஸ்க்ரோலிங்கை அனுமதிக்கவும் |
முறைகள்
ஒத்திசைவற்ற முறைகள் மற்றும் மாற்றங்கள்
அனைத்து API முறைகளும் ஒத்திசைவற்றவை மற்றும் மாற்றத்தைத் தொடங்குகின்றன . மாற்றம் தொடங்கப்பட்டவுடன், ஆனால் அது முடிவதற்குள் அவர்கள் அழைப்பாளரிடம் திரும்புகிறார்கள் . கூடுதலாக, மாற்றும் கூறுகளின் முறை அழைப்பு புறக்கணிக்கப்படும் .
மேலும் தகவலுக்கு எங்கள் ஜாவாஸ்கிரிப்ட் ஆவணங்களைப் பார்க்கவும் .
உங்கள் உள்ளடக்கத்தை ஆஃப்கான்வாஸ் உறுப்பாக செயல்படுத்துகிறது. விருப்ப விருப்பங்களை ஏற்றுக்கொள்கிறது 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 |
ஒரு offcanvas உறுப்பு பயனருக்குத் தெரியும் போது இந்த நிகழ்வு நீக்கப்படும் (CSS மாற்றங்கள் முடியும் வரை காத்திருக்கும்). |
hide.bs.offcanvas |
hide முறை அழைக்கப்படும் போது இந்த நிகழ்வு உடனடியாக நீக்கப்பட்டது . |
hidden.bs.offcanvas |
ஒரு offcanvas உறுப்பு பயனரிடமிருந்து மறைக்கப்படும் போது இந்த நிகழ்வு நீக்கப்படும் (CSS மாற்றங்கள் முடியும் வரை காத்திருக்கும்). |
var myOffcanvas = document.getElementById('myOffcanvas')
myOffcanvas.addEventListener('hidden.bs.offcanvas', function () {
// do something...
})