Nasihun kayan aiki
Takaddun bayanai da misalai don ƙara kayan aikin Bootstrap na al'ada tare da CSS da JavaScript ta amfani da CSS3 don rayarwa da bayanan-bs-halaye don ajiyar take na gida.
Dubawa
Abubuwan da ya kamata ku sani lokacin amfani da plugin ɗin kayan aiki:
- Bayanan kayan aiki sun dogara da ɗakin karatu na ɓangare na uku Popper don matsayi. Dole ne ku haɗa popper.min.js kafin bootstrap.js ko amfani
bootstrap.bundle.min.js
/bootstrap.bundle.js
wanda ya ƙunshi Popper don kayan aikin kayan aiki suyi aiki! - Nasihun kayan aiki suna shiga don dalilan aiki, don haka dole ne ka fara su da kanka .
- Ba a taɓa nuna nassoshin kayan aiki masu tsayin sifili ba.
- Ƙayyade
container: 'body'
don guje wa yin matsaloli a cikin ƙarin hadaddun abubuwa (kamar ƙungiyoyin shigar da mu, ƙungiyoyin maɓalli, da sauransu). - Ƙirar kayan aiki akan abubuwan ɓoye ba zai yi aiki ba.
- Dole ne a kunna nassosin kayan aiki don
.disabled
kodisabled
abubuwa akan abin nadi. - Lokacin da aka jawo daga hyperlinks waɗanda ke kan layi da yawa, kayan aikin kayan aiki za su kasance a tsakiya. Yi amfani
white-space: nowrap;
da<a>
s ɗin ku don guje wa wannan halin. - Dole ne a ɓoye bayanan kayan aiki kafin a cire abubuwan da suka dace daga DOM.
- Ana iya kunna nassosin kayan aiki godiya ga wani abu a cikin inuwa DOM.
prefers-reduced-motion
tambayar kafofin watsa labarai. Dubi
raguwar sashin motsi na takaddun damar mu .
Samu duk wannan? Mai girma, bari mu ga yadda suke aiki tare da wasu misalai.
Misali: Kunna shawarwarin kayan aiki a ko'ina
Hanya ɗaya don fara duk shawarwarin kayan aiki akan shafi shine zaɓi su ta yanayin su data-bs-toggle
:
var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
return new bootstrap.Tooltip(tooltipTriggerEl)
})
Misalai
Tsallake kan hanyoyin da ke ƙasa don ganin kayan aiki:
Rubutun ɗigon wuri don nuna wasu hanyoyin haɗin layi tare da tukwici na kayan aiki. Wannan yanzu kawai filler ne, babu kisa. Abun ciki da aka sanya anan kawai don kwaikwayi kasancewar ainihin rubutu . Kuma duk wannan kawai don ba ku ra'ayin yadda kayan aikin kayan aiki zasu kasance yayin amfani da su a cikin yanayi na ainihi. Don haka da fatan kun ga yanzu yadda waɗannan nasihun kayan aiki akan hanyoyin haɗin gwiwa zasu iya aiki a aikace, da zarar kun yi amfani da su akan rukunin yanar gizonku ko aikinku .
Tsaya akan maɓallan da ke ƙasa don ganin kwatancen kayan aiki guda huɗu: sama, dama, ƙasa, da hagu. Ana nuna kwatance yayin amfani da Bootstrap a cikin RTL.
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="top" title="Tooltip on top">
Tooltip on top
</button>
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="right" title="Tooltip on right">
Tooltip on right
</button>
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Tooltip on bottom">
Tooltip on bottom
</button>
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="left" title="Tooltip on left">
Tooltip on left
</button>
Kuma tare da ƙarin HTML na al'ada:
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-html="true" title="<em>Tooltip</em> <u>with</u> <b>HTML</b>">
Tooltip with HTML
</button>
Tare da SVG:
Sass
Masu canji
$tooltip-font-size: $font-size-sm;
$tooltip-max-width: 200px;
$tooltip-color: $white;
$tooltip-bg: $black;
$tooltip-border-radius: $border-radius;
$tooltip-opacity: .9;
$tooltip-padding-y: $spacer * .25;
$tooltip-padding-x: $spacer * .5;
$tooltip-margin: 0;
$tooltip-arrow-width: .8rem;
$tooltip-arrow-height: .4rem;
$tooltip-arrow-color: $tooltip-bg;
Amfani
Filogin kayan aiki yana haifar da abun ciki da alama akan buƙata, kuma ta tsohuwa wuraren abubuwan kayan aiki bayan abubuwan da suka haifar da su.
Ƙaddamar da kayan aiki ta hanyar JavaScript:
var exampleEl = document.getElementById('example')
var tooltip = new bootstrap.Tooltip(exampleEl, options)
ambaliya auto
dascroll
Matsayin kayan aiki yana ƙoƙarin canzawa ta atomatik lokacin da kwandon iyaye yana da overflow: auto
ko overflow: scroll
son namu .table-responsive
, amma har yanzu yana kiyaye matsayin wuri na asali. Don warware wannan, saita boundary
zaɓi (don mai canza juzu'i ta amfani da popperConfig
zaɓi) zuwa kowane HTMLElement don soke ƙimar tsoho 'clippingParents'
, kamar document.body
:
var exampleEl = document.getElementById('example')
var tooltip = new bootstrap.Tooltip(exampleEl, {
boundary: document.body // or document.querySelector('#boundary')
})
Alamar alama
Alamar da ake buƙata don tip ɗin kayan aiki data
sifa ce kawai kuma title
akan ɓangarorin HTML ɗin da kuke son samun tip ɗin kayan aiki. Samfuran alamar kayan aiki yana da sauƙi, kodayake yana buƙatar matsayi (ta tsohuwa, an saita shi top
ta plugin).
Yin shawarwarin kayan aiki suyi aiki ga madannai da masu amfani da fasaha masu taimako
Ya kamata ku ƙara kayan aiki kawai zuwa abubuwan HTML waɗanda ke al'adar madannai-maida hankali da mu'amala (kamar hanyoyin haɗin gwiwa ko sarrafa tsari). Kodayake abubuwan HTML na sabani (kamar <span>
s) ana iya mai da hankali ta hanyar ƙara tabindex="0"
sifa, wannan zai ƙara yuwuwar tsayawar shafin mai ban haushi da ruɗani akan abubuwan da ba sa mu'amala da masu amfani da madannai, kuma galibin fasahar taimako a halin yanzu ba sa sanar da kayan aiki a cikin wannan yanayin. Bugu da ƙari, kar a dogara kawai a hover
matsayin abin faɗakar da kayan aikin ku, saboda wannan zai sa na'urorin ku ba su yiwu su jawo masu amfani da madannai ba.
<!-- HTML to write -->
<a href="#" data-bs-toggle="tooltip" title="Some tooltip text!">Hover over me</a>
<!-- Generated markup by the plugin -->
<div class="tooltip bs-tooltip-top" role="tooltip">
<div class="tooltip-arrow"></div>
<div class="tooltip-inner">
Some tooltip text!
</div>
</div>
Abubuwan da aka kashe
Abubuwan da ke da disabled
sifa ba sa mu'amala da juna, ma'ana masu amfani ba za su iya mai da hankali ba, shawagi, ko danna su don faɗakar da kayan aiki (ko popover). A matsayin madaidaicin aiki, za ku so ku kunna tukwici na kayan aiki daga nannade <div>
ko <span>
, wanda aka yi daidai da maballin madannai ta amfani da tabindex="0"
.
<span class="d-inline-block" tabindex="0" data-bs-toggle="tooltip" title="Disabled tooltip">
<button class="btn btn-primary" type="button" disabled>Disabled button</button>
</span>
Zabuka
Za a iya wucewa ta hanyar sifofin bayanai ko JavaScript. Don halayen bayanai, saka sunan zaɓin zuwa data-bs-
, kamar a cikin data-bs-animation=""
. Tabbatar canza nau'in shari'ar sunan zaɓi daga raƙumi zuwa kebab-case lokacin ƙaddamar da zaɓuɓɓuka ta hanyar halayen bayanai. Misali, maimakon yin amfani da data-bs-customClass="beautifier"
, yi amfani da data-bs-custom-class="beautifier"
.
sanitize
,
sanitizeFn
, da
zaɓuɓɓuka ta amfani da halayen bayanai ba.allowList
Suna | Nau'in | Default | Bayani |
---|---|---|---|
animation |
boolean | true |
Aiwatar da canjin CSS fade zuwa tip ɗin kayan aiki |
container |
zaren | kashi | karya | false |
Yana haɗa tip ɗin kayan aiki zuwa takamaiman yanki. Misali |
delay |
lamba | abu | 0 |
Jinkirin nunawa da ɓoye bayanan kayan aiki (ms) - baya aiki ga nau'in fararwa na hannu Idan an ba da lamba, ana amfani da jinkiri ga duka ɓoye/nunawa Tsarin abu shine: |
html |
boolean | false |
Bada HTML a cikin tukwici na kayan aiki. Idan gaskiya ne, HTML tags a cikin Tooltip's Yi amfani da rubutu idan kun damu da harin XSS. |
placement |
zaren | aiki | 'top' |
Yadda ake saka kayan aiki - auto | saman | kasa | hagu | dama. Lokacin da aka yi amfani da aiki don ƙayyade wuri, ana kiran shi tare da kayan aiki na DOM node a matsayin hujja ta farko da maɓallin DOM mai jawowa a matsayin na biyu. An |
selector |
zaren | karya | false |
Idan an samar da mai zaɓe, za a ba da abubuwan da suka shafi kayan aiki zuwa takamaiman maƙasudai. A aikace, ana amfani da wannan don amfani da nassoshi na kayan aiki zuwa abubuwan DOM masu ƙarfi ( jQuery.on goyan baya). Dubi wannan da misali mai ba da labari . |
template |
kirtani | '<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>' |
Tushen HTML don amfani yayin ƙirƙirar tukwici. Za
Abun nadi na waje yakamata ya kasance yana da |
title |
zaren | kashi | aiki | '' |
Tsohuwar ƙimar take idan babu Idan an ba da aiki, za a kira shi tare da |
trigger |
kirtani | 'hover focus' |
Yadda ake kunna tip ɗin kayan aiki - danna | shawa | mayar da hankali | manual. Kuna iya wuce abubuwan jan hankali da yawa; raba su da sarari.
|
fallbackPlacements |
tsararru | ['top', 'right', 'bottom', 'left'] |
Ƙayyade jeri na faɗuwa ta hanyar samar da jerin jeri a tsararru (domin fifiko). Don ƙarin bayani koma zuwa Docs halayyar Popper |
boundary |
zaren | kashi | 'clippingParents' |
Matsakaicin ƙayyadaddun ƙayyadaddun ƙayyadaddun ƙayyadaddun kayan aiki (yana aiki ne kawai ga Popper's preventOverflow modifier). Ta hanyar tsoho yana 'clippingParents' kuma yana iya karɓar bayanin HTMLElement (ta JavaScript kawai). Don ƙarin bayani koma zuwa Popper's detectOverflow docs . |
customClass |
zaren | aiki | '' |
Ƙara azuzuwan zuwa matakin kayan aiki lokacin da aka nuna shi. Lura cewa waɗannan azuzuwan za a ƙara su ban da kowane nau'i da aka kayyade a cikin samfuri. Don ƙara azuzuwan da yawa, raba su da sarari: Hakanan zaka iya wuce aikin da yakamata ya dawo da kirtani ɗaya mai ɗauke da ƙarin sunayen aji. |
sanitize |
boolean | true |
Kunna ko kashe tsaftar. Idan an kunna 'template' kuma 'title' za a tsabtace zaɓuɓɓuka. Duba sashin sanitizer a cikin takaddun JavaScript ɗin mu . |
allowList |
abu | Ƙimar ta asali | Abu wanda ya ƙunshi halayen da aka yarda da alamun |
sanitizeFn |
null | aiki | null |
Anan zaku iya samar da aikin tsabtace ku. Wannan na iya zama da amfani idan kun fi son yin amfani da ɗakin karatu da aka keɓe don yin tsafta. |
offset |
tsararru | zaren | aiki | [0, 0] |
Matsakaicin matakin kayan aiki dangane da manufar sa. Kuna iya wuce kirtani a cikin sifofin bayanai tare da raba waƙafi kamar: Lokacin da aka yi amfani da aiki don tantance abin kashewa, ana kiran shi da wani abu mai ɗauke da popper placement, the reference, and popper rects as his first case. An wuce kullin DOM mai jawowa azaman hujja ta biyu. Dole ne aikin ya dawo da jeri tare da lambobi biyu: . Don ƙarin bayani koma zuwa Popper's offset docs . |
popperConfig |
null | abu | aiki | null |
Don canza saitunan Popper tsoho na Bootstrap, duba Tsarin Popper . Lokacin da aka yi amfani da aiki don ƙirƙirar tsarin Popper, ana kiran shi da wani abu da ke ɗauke da tsohowar Popper na Bootstrap. Yana taimaka muku amfani da haɗa tsoho tare da tsarin ku. Dole ne aikin ya dawo da abin daidaitawa don Popper. |
Halayen bayanai don ƙa'idodin kayan aiki guda ɗaya
Zaɓuɓɓuka don ƙayyadaddun bayanan kayan aiki ɗaya na iya zama a madadin ta hanyar amfani da sifofin bayanai, kamar yadda aka bayyana a sama.
Amfani da aiki tare dapopperConfig
var tooltip = new bootstrap.Tooltip(element, {
popperConfig: function (defaultBsPopperConfig) {
// var newPopperConfig = {...}
// use defaultBsPopperConfig if needed...
// return newPopperConfig
}
})
Hanyoyin
Hanyoyi masu daidaitawa da canji
Duk hanyoyin API ba daidai ba ne kuma suna fara canji . Suna komawa ga mai kiran da zarar an fara canji amma kafin ya ƙare . Bugu da ƙari, za a yi watsi da kiran hanya akan ɓangaren canji .
nuna
Yana bayyana matakin kayan aiki. Komawa ga mai kira kafin a nuna matakin kayan aiki (watau kafin shown.bs.tooltip
abin ya faru). Ana ɗaukar wannan a matsayin "manual" yana haifar da tip ɗin kayan aiki. Ba a taɓa nuna nassoshin kayan aiki masu tsayin sifili ba.
tooltip.show()
boye
Yana ɓoye bayanan kayan aiki. Komawa ga mai kira kafin a ɓoye bayanan kayan aiki (watau kafin hidden.bs.tooltip
abin ya faru). Ana ɗaukar wannan a matsayin "manual" yana haifar da tip ɗin kayan aiki.
tooltip.hide()
juya
Yana jujjuya matakin kayan aiki. Komawa ga mai kira kafin a nuna tip ɗin kayan aiki a zahiri ko a ɓoye (watau kafin abin shown.bs.tooltip
ko hidden.bs.tooltip
ya faru). Ana ɗaukar wannan a matsayin "manual" yana haifar da tip ɗin kayan aiki.
tooltip.toggle()
jefar
Yana ɓoyewa da lalata bayanan kayan aiki (Yana cire bayanan da aka adana akan ɓangaren DOM). Nasihun kayan aiki waɗanda ke amfani da wakilai (wanda aka ƙirƙira ta amfani da selector
zaɓi ) ba za a iya lalata su daban-daban akan abubuwan da ke haifar da zuriya ba.
tooltip.dispose()
ba da damar
Yana ba da tip ɗin kayan aiki ikon nunawa. Ana kunna bayanan kayan aiki ta tsohuwa.
tooltip.enable()
kashe
Yana kawar da damar da za a nuna tip ɗin kayan aiki. Za a iya nuna tip ɗin kayan aiki ne kawai idan an sake kunna shi.
tooltip.disable()
An kunna kunnawa
Yana jujjuya ikon kayan aikin abun nunawa ko ɓoye.
tooltip.toggleEnabled()
sabunta
Yana sabunta matsayi na tukwici na kayan aiki.
tooltip.update()
samunInstance
Hanyar a tsaye wacce ke ba ku damar samun misalin kayan aikin da ke da alaƙa da ɓangaren DOM
var exampleTriggerEl = document.getElementById('example')
var tooltip = bootstrap.Tooltip.getInstance(exampleTriggerEl) // Returns a Bootstrap tooltip instance
samunOrCreateInstance
Hanyar a tsaye wacce ke ba ku damar samun misalin kayan aikin da ke da alaƙa da ɓangaren DOM, ko ƙirƙirar sabo idan ba a fara shi ba.
var exampleTriggerEl = document.getElementById('example')
var tooltip = bootstrap.Tooltip.getOrCreateInstance(exampleTriggerEl) // Returns a Bootstrap tooltip instance
Abubuwan da suka faru
Nau'in taron | Bayani |
---|---|
show.bs.tooltip |
Wannan taron yana gobara nan da nan lokacin da show aka kira hanyar misali. |
shown.bs.tooltip |
Ana korar wannan taron lokacin da aka bayyana kayan aikin ga mai amfani (zai jira canjin CSS ya kammala). |
hide.bs.tooltip |
Ana korar wannan taron nan da nan lokacin da hide aka kira hanyar misali. |
hidden.bs.tooltip |
Ana korar wannan taron lokacin da kayan aikin ya gama ɓoye daga mai amfani (zai jira canjin CSS ya kammala). |
inserted.bs.tooltip |
An kori wannan taron bayan show.bs.tooltip taron lokacin da aka ƙara samfurin kayan aiki zuwa DOM. |
var myTooltipEl = document.getElementById('myTooltip')
var tooltip = new bootstrap.Tooltip(myTooltipEl)
myTooltipEl.addEventListener('hidden.bs.tooltip', function () {
// do something...
})
tooltip.hide()