પોપોવર્સ
બૂટસ્ટ્રેપ પોપોવર્સ ઉમેરવા માટે દસ્તાવેજીકરણ અને ઉદાહરણો, જેમ કે iOS માં જોવા મળે છે, તમારી સાઇટ પરના કોઈપણ ઘટકમાં.
ઝાંખી
પોપઓવર પ્લગઇનનો ઉપયોગ કરતી વખતે જાણવા જેવી બાબતો:
- પોપોવર્સ પોઝિશનિંગ માટે 3જી પાર્ટી લાઇબ્રેરી Popper.js પર આધાર રાખે છે . તમારે bootstrap.js પહેલાં popper.min.js શામેલ કરવું આવશ્યક છે અથવા popovers કામ કરવા માટે
bootstrap.bundle.min.js
/ જેમાં Popper.js શામેલ છે તેનો ઉપયોગ કરો!bootstrap.bundle.js
- પોપોવર્સને અવલંબન તરીકે ટૂલટિપ પ્લગઇનની જરૂર છે.
- જો તમે સ્ત્રોતમાંથી અમારી JavaScript બનાવી રહ્યાં છો, તો તેને જરૂરી
util.js
છે . - પોપોવર્સ કામગીરીના કારણોસર પસંદ કરવામાં આવે છે, તેથી તમારે તેમને જાતે જ પ્રારંભ કરવું આવશ્યક છે .
- શૂન્ય-લંબાઈ
title
અનેcontent
મૂલ્યો ક્યારેય પોપઓવર બતાવશે નહીં. container: 'body'
વધુ જટિલ ઘટકો (જેમ કે અમારા ઇનપુટ જૂથો, બટન જૂથો, વગેરે) માં રેન્ડરિંગ સમસ્યાઓ ટાળવા માટે સ્પષ્ટ કરો .- છુપાયેલા તત્વો પર પોપઓવરને ટ્રિગર કરવું કામ કરશે નહીં.
.disabled
રેપર એલિમેન્ટ પર અથવાdisabled
તત્વો માટે પોપોવર્સ ટ્રિગર થવું આવશ્યક છે.- જ્યારે બહુવિધ રેખાઓ પર લપેટતા એન્કરથી ટ્રિગર થાય છે, ત્યારે પોપોવર્સ એન્કરની એકંદર પહોળાઈ વચ્ચે કેન્દ્રિત કરવામાં આવશે. આ વર્તનને ટાળવા માટે
.text-nowrap
તમારા s નો ઉપયોગ કરો.<a>
- પોપોવર્સ તેમના અનુરૂપ ઘટકોને DOMમાંથી દૂર કરવામાં આવે તે પહેલાં છુપાયેલા હોવા જોઈએ.
- પડછાયા DOM ની અંદરના તત્વને કારણે પોપોવર્સ ટ્રિગર થઈ શકે છે.
આ ઘટકની એનિમેશન અસર prefers-reduced-motion
મીડિયા ક્વેરી પર આધારિત છે. અમારા ઍક્સેસિબિલિટી દસ્તાવેજીકરણનો ઘટાડો ગતિ વિભાગ જુઓ .
કેટલાક ઉદાહરણો સાથે પોપોવર્સ કેવી રીતે કાર્ય કરે છે તે જોવા માટે વાંચવાનું ચાલુ રાખો.
ઉદાહરણ: દરેક જગ્યાએ પોપોવર્સ સક્ષમ કરો
પૃષ્ઠ પરના તમામ પોપોવર્સને પ્રારંભ કરવાની એક રીત એ છે કે તેમને તેમની data-toggle
વિશેષતા દ્વારા પસંદ કરવી:
ઉદાહરણ: container
વિકલ્પનો ઉપયોગ કરવો
જ્યારે તમારી પાસે પેરેંટ એલિમેન્ટ પર કેટલીક શૈલીઓ હોય જે પોપઓવરમાં દખલ કરે છે, ત્યારે તમે એક કસ્ટમનો ઉલ્લેખ કરવા માગો છો container
જેથી કરીને પોપઓવરનું HTML તેના બદલે તે ઘટકમાં દેખાય.
ઉદાહરણ
ચાર દિશાઓ
ચાર વિકલ્પો ઉપલબ્ધ છે: ઉપર, જમણે, નીચે અને ડાબે સંરેખિત.
આગલી ક્લિક પર કાઢી નાખો
focus
ટૉગલ એલિમેન્ટ કરતાં અલગ તત્વના વપરાશકર્તાના આગલા ક્લિક પરના પોપઓવરને કાઢી નાખવા માટે ટ્રિગરનો ઉપયોગ કરો .
ડિસમિસ-ઓન-નેક્સ્ટ-ક્લિક માટે ચોક્કસ માર્કઅપ જરૂરી છે
યોગ્ય ક્રોસ-બ્રાઉઝર અને ક્રોસ-પ્લેટફોર્મ વર્તણૂક માટે, તમારે ટૅગનો ઉપયોગ કરવો જોઈએ <a>
, ટૅગનો નહીં<button>
, અને તમારે tabindex
એટ્રિબ્યુટ પણ શામેલ કરવું આવશ્યક છે.
અક્ષમ તત્વો
એટ્રિબ્યુટ સાથેના ઘટકો disabled
ઇન્ટરેક્ટિવ નથી, એટલે કે વપરાશકર્તાઓ પોપઓવર (અથવા ટૂલટિપ) ટ્રિગર કરવા માટે તેમને હોવર અથવા ક્લિક કરી શકતા નથી. વર્કઅરાઉન્ડ તરીકે, તમે રેપરથી પોપઓવરને ટ્રિગર કરવા <div>
અથવા અક્ષમ તત્વ પર <span>
ઓવરરાઇડ કરવા માંગો છો.pointer-events
અક્ષમ પોપઓવર ટ્રિગર્સ માટે, તમે પણ પસંદ કરી શકો છો data-trigger="hover"
જેથી પોપઓવર તમારા વપરાશકર્તાઓને તાત્કાલિક દ્રશ્ય પ્રતિસાદ તરીકે દેખાય કારણ કે તેઓ અક્ષમ તત્વ પર ક્લિક કરવાની અપેક્ષા રાખતા નથી.
ઉપયોગ
JavaScript દ્વારા પોપોવર્સ સક્ષમ કરો:
GPU પ્રવેગક
GPU પ્રવેગક અને સંશોધિત સિસ્ટમ DPI ને કારણે વિન્ડોઝ 10 ઉપકરણો પર પોપોવર્સ ક્યારેક ઝાંખા દેખાય છે. v4 માં આ માટેનો ઉપાય એ છે કે તમારા પોપોવર્સ પર જરૂરિયાત મુજબ GPU પ્રવેગકને અક્ષમ કરવું.
સૂચવેલ સુધારણા:
કીબોર્ડ અને સહાયક ટેક્નોલોજી વપરાશકર્તાઓ માટે પોપઓવર કાર્ય કરે છે
કીબોર્ડ વપરાશકર્તાઓને તમારા પોપોવર્સને સક્રિય કરવાની મંજૂરી આપવા માટે, તમારે તેમને ફક્ત HTML ઘટકોમાં ઉમેરવું જોઈએ જે પરંપરાગત રીતે કીબોર્ડ-ફોકસેબલ અને ઇન્ટરેક્ટિવ હોય (જેમ કે લિંક્સ અથવા ફોર્મ નિયંત્રણો). જો કે એટ્રિબ્યુટ ઉમેરીને મનસ્વી HTML તત્વો (જેમ કે <span>
s) ને ફોકસેબલ બનાવી શકાય છે tabindex="0"
, આ કીબોર્ડ યુઝર્સ માટે નોન-ઇન્ટરેક્ટિવ એલિમેન્ટ્સ પર સંભવિત રીતે હેરાન કરનાર અને ગૂંચવણમાં મૂકે તેવા ટેબ સ્ટોપ્સ ઉમેરશે, અને મોટાભાગની સહાયક તકનીકો હાલમાં આ પરિસ્થિતિમાં પોપઓવરની સામગ્રીની જાહેરાત કરતી નથી. . વધુમાં, hover
તમારા પોપોવર્સ માટે ટ્રિગર તરીકે ફક્ત તેના પર આધાર રાખશો નહીં, કારણ કે આ કીબોર્ડ વપરાશકર્તાઓ માટે તેમને ટ્રિગર કરવાનું અશક્ય બનાવશે.
જ્યારે તમે વિકલ્પ સાથે પોપોવર્સમાં સમૃદ્ધ, સંરચિત HTML દાખલ કરી શકો છો html
, અમે ભારપૂર્વક ભલામણ કરીએ છીએ કે તમે સામગ્રીની વધુ પડતી માત્રા ઉમેરવાનું ટાળો. aria-describedby
હાલમાં જે રીતે પોપોવર્સ કામ કરે છે તે એ છે કે, એકવાર પ્રદર્શિત થયા પછી, તેમની સામગ્રી એટ્રિબ્યુટ સાથે ટ્રિગર એલિમેન્ટ સાથે જોડાયેલી છે . પરિણામે, એક લાંબી, અવિરત સ્ટ્રીમ તરીકે સહાયક ટેક્નોલોજી વપરાશકર્તાઓ માટે પોપઓવરની સંપૂર્ણ સામગ્રીની જાહેરાત કરવામાં આવશે.
વધુમાં, જ્યારે તમારા પોપઓવરમાં ઇન્ટરેક્ટિવ કંટ્રોલ (જેમ કે ફોર્મ એલિમેન્ટ્સ અથવા લિંક્સ) શામેલ કરવાનું શક્ય છે (આ ઘટકોને અથવા મંજૂર લક્ષણો અને ટૅગ્સમાં ઉમેરીને whiteList
), ત્યારે ધ્યાન રાખો કે હાલમાં પોપઓવર કીબોર્ડ ફોકસ ઓર્ડરનું સંચાલન કરતું નથી. જ્યારે કીબોર્ડ યુઝર પોપઓવર ખોલે છે, ત્યારે ફોકસ ટ્રિગરિંગ એલિમેન્ટ પર રહે છે, અને પોપઓવર સામાન્ય રીતે ડોક્યુમેન્ટના સ્ટ્રક્ચરમાં ટ્રિગરને તરત જ અનુસરતું નથી, તેની કોઈ ગેરેંટી નથી કે આગળ વધવું/દબાવુંTABકીબોર્ડ વપરાશકર્તાને પોપઓવરમાં જ ખસેડશે. ટૂંકમાં, ફક્ત પોપઓવરમાં ઇન્ટરેક્ટિવ નિયંત્રણો ઉમેરવાથી કીબોર્ડ વપરાશકર્તાઓ અને સહાયક તકનીકોના વપરાશકર્તાઓ માટે આ નિયંત્રણો અગમ્ય/અનુપયોગી બની શકે છે, અથવા ઓછામાં ઓછા એક અતાર્કિક એકંદર ફોકસ ઓર્ડર માટે બનાવે છે. આ કિસ્સાઓમાં, તેના બદલે મોડલ સંવાદનો ઉપયોગ કરવાનું વિચારો.
વિકલ્પો
વિકલ્પો ડેટા વિશેષતાઓ અથવા JavaScript દ્વારા પસાર કરી શકાય છે. ડેટા એટ્રિબ્યુટ્સ માટે, વિકલ્પ નામને data-
, જેમ કે માં ઉમેરો data-animation=""
.
નોંધ કરો કે સુરક્ષા કારણોસર sanitize
, sanitizeFn
અને whiteList
વિકલ્પો ડેટા લક્ષણોનો ઉપયોગ કરીને પૂરા પાડી શકાતા નથી.
નામ | પ્રકાર | ડિફૉલ્ટ | વર્ણન |
---|---|---|---|
એનિમેશન | બુલિયન | સાચું | પોપઓવર પર CSS ફેડ ટ્રાન્ઝિશન લાગુ કરો |
કન્ટેનર | શબ્દમાળા | તત્વ | ખોટું | ખોટું | પોપઓવરને ચોક્કસ તત્વ સાથે જોડે છે. ઉદાહરણ |
સામગ્રી | શબ્દમાળા | તત્વ | કાર્ય | '' |
|
વિલંબ | નંબર | પદાર્થ | 0 | પોપઓવર (ms) બતાવવામાં અને છુપાવવામાં વિલંબ - મેન્યુઅલ ટ્રિગર પ્રકાર પર લાગુ થતો નથી જો નંબર પૂરો પાડવામાં આવે છે, તો છુપાવો/શો બંને માટે વિલંબ લાગુ પડે છે ઑબ્જેક્ટ માળખું છે: |
html | બુલિયન | ખોટું | પોપઓવરમાં HTML દાખલ કરો. text જો ખોટું હોય, તો DOM માં સામગ્રી દાખલ કરવા માટે jQuery ની પદ્ધતિનો ઉપયોગ કરવામાં આવશે. જો તમે XSS હુમલાઓ વિશે ચિંતિત હોવ તો ટેક્સ્ટનો ઉપયોગ કરો. |
પ્લેસમેન્ટ | શબ્દમાળા | કાર્ય | 'જમણું' | પોપઓવરને કેવી રીતે સ્થાન આપવું - ઓટો | ટોચ | નીચે | ડાબે | અધિકાર જ્યારે ફંક્શનનો ઉપયોગ પ્લેસમેન્ટ નક્કી કરવા માટે થાય છે, ત્યારે તેને પોપઓવર DOM નોડ સાથે તેની પ્રથમ દલીલ તરીકે અને ટ્રિગરિંગ ઘટક DOM નોડને તેના બીજા તરીકે કહેવામાં આવે છે. સંદર્ભ |
પસંદગીકાર | શબ્દમાળા | ખોટું | ખોટું | જો પસંદગીકાર પ્રદાન કરવામાં આવે, તો પોપઓવર ઑબ્જેક્ટ્સ ઉલ્લેખિત લક્ષ્યોને સોંપવામાં આવશે. વ્યવહારમાં, આનો ઉપયોગ પોપોવર્સ ઉમેરવા માટે ગતિશીલ HTML સામગ્રીને સક્ષમ કરવા માટે થાય છે. આ અને એક માહિતીપ્રદ ઉદાહરણ જુઓ . |
નમૂનો | તાર | '<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-header"></h3><div class="popover-body"></div></div>' |
પોપઓવર બનાવતી વખતે ઉપયોગ કરવા માટે બેઝ HTML. પોપઓવરને પોપઓવરને
સૌથી બહારના રેપર તત્વમાં |
શીર્ષક | શબ્દમાળા | તત્વ | કાર્ય | '' |
|
ટ્રિગર | તાર | 'ક્લિક કરો' | કેવી રીતે પોપઓવર ટ્રિગર થાય છે - ક્લિક કરો | હોવર | ફોકસ | મેન્યુઅલ તમે બહુવિધ ટ્રિગર્સ પસાર કરી શકો છો; તેમને જગ્યા સાથે અલગ કરો. manual અન્ય કોઈપણ ટ્રિગર સાથે જોડી શકાતું નથી. |
ઓફસેટ | નંબર | તાર | 0 | તેના લક્ષ્યની તુલનામાં પોપઓવરની ઓફસેટ. વધુ માહિતી માટે Popper.js ના ઑફસેટ દસ્તાવેજોનો સંદર્ભ લો . |
ફોલબેક પ્લેસમેન્ટ | શબ્દમાળા | એરે | 'ફ્લિપ' | ફોલબેક પર પોપર કઈ સ્થિતિનો ઉપયોગ કરશે તેનો ઉલ્લેખ કરવાની મંજૂરી આપો. વધુ માહિતી માટે Popper.js ના વર્તન દસ્તાવેજોનો સંદર્ભ લો |
સીમા | શબ્દમાળા | તત્વ | 'સ્ક્રોલ પેરન્ટ' | પોપઓવરની ઓવરફ્લો અવરોધ સીમા. 'viewport' , 'window' , 'scrollParent' , અથવા HTMLElement સંદર્ભ (માત્ર JavaScript) ના મૂલ્યો સ્વીકારે છે . વધુ માહિતી માટે Popper.js ના preventOverflow દસ્તાવેજો નો સંદર્ભ લો . |
સેનિટાઇઝ | બુલિયન | સાચું | સેનિટાઇઝેશનને સક્ષમ અથવા અક્ષમ કરો. જો સક્રિય થાય છે 'template' , 'content' અને 'title' વિકલ્પોને સેનિટાઇઝ કરવામાં આવશે. |
વ્હાઇટલિસ્ટ | પદાર્થ | ડિફૉલ્ટ મૂલ્ય | ઑબ્જેક્ટ જેમાં માન્ય લક્ષણો અને ટૅગ્સ શામેલ છે |
sanitizeFn | નલ | કાર્ય | નલ | અહીં તમે તમારું પોતાનું સેનિટાઇઝ ફંક્શન આપી શકો છો. જો તમે સેનિટાઈઝેશન કરવા માટે સમર્પિત પુસ્તકાલયનો ઉપયોગ કરવાનું પસંદ કરો તો આ ઉપયોગી થઈ શકે છે. |
popperConfig | નલ | પદાર્થ | નલ | બુટસ્ટ્રેપની ડિફૉલ્ટ Popper.js રૂપરેખા બદલવા માટે, Popper.js ની ગોઠવણી જુઓ |
વ્યક્તિગત પોપોવર્સ માટે ડેટા લક્ષણો
વ્યક્તિગત પોપોવર્સ માટેના વિકલ્પો વૈકલ્પિક રીતે ડેટા એટ્રિબ્યુટ્સના ઉપયોગ દ્વારા સ્પષ્ટ કરી શકાય છે, જેમ ઉપર સમજાવ્યું છે.
પદ્ધતિઓ
અસુમેળ પદ્ધતિઓ અને સંક્રમણો
બધી API પદ્ધતિઓ અસુમેળ છે અને સંક્રમણ શરૂ કરે છે . સંક્રમણ શરૂ થતાંની સાથે જ તેઓ કૉલર પાસે પાછા ફરે છે પરંતુ તે સમાપ્ત થાય તે પહેલાં . વધુમાં, સંક્રમણ ઘટક પર પદ્ધતિ કૉલ અવગણવામાં આવશે .
$().popover(options)
તત્વ સંગ્રહ માટે પોપોવર્સનો પ્રારંભ કરે છે.
.popover('show')
તત્વના પોપઓવરને દર્શાવે છે. પોપઓવર વાસ્તવમાં બતાવવામાં આવે તે પહેલાં કૉલર પર પાછા ફરે છે (એટલે કે shown.bs.popover
ઇવેન્ટ થાય તે પહેલાં). આને પોપઓવરનું "મેન્યુઅલ" ટ્રિગરિંગ માનવામાં આવે છે. પોપોવર કે જેનું શીર્ષક અને સામગ્રી બંને શૂન્ય-લેન્થ હોય તે ક્યારેય પ્રદર્શિત થતા નથી.
.popover('hide')
તત્વના પોપઓવરને છુપાવે છે. પોપઓવર વાસ્તવમાં છુપાયેલ હોય તે પહેલાં (એટલે કે hidden.bs.popover
ઘટના બને તે પહેલાં) કોલર પાસે પરત આવે છે. આને પોપઓવરનું "મેન્યુઅલ" ટ્રિગરિંગ માનવામાં આવે છે.
.popover('toggle')
તત્વના પોપઓવરને ટૉગલ કરે છે. પોપઓવર વાસ્તવમાં બતાવવામાં આવે અથવા છુપાવવામાં આવે તે પહેલાં (એટલે કે ઘટના shown.bs.popover
અથવા hidden.bs.popover
ઘટના બને તે પહેલાં) કૉલર પર પાછા ફરે છે. આને પોપઓવરનું "મેન્યુઅલ" ટ્રિગરિંગ માનવામાં આવે છે.
.popover('dispose')
તત્વના પોપઓવરને છુપાવે છે અને તેનો નાશ કરે છે. ડેલિગેશનનો ઉપયોગ કરતા પોપોવર્સ (જે વિકલ્પનો ઉપયોગ કરીનેselector
બનાવવામાં આવે છે ) વંશજ ટ્રિગર તત્વો પર વ્યક્તિગત રીતે નાશ કરી શકાતા નથી.
.popover('enable')
એલિમેન્ટના પોપઓવરને બતાવવાની ક્ષમતા આપે છે. પોપોવર્સ ડિફૉલ્ટ રૂપે સક્ષમ છે.
.popover('disable')
એલિમેન્ટના પોપઓવર બતાવવાની ક્ષમતાને દૂર કરે છે. પોપઓવર ફક્ત ત્યારે જ બતાવવામાં સક્ષમ હશે જો તે ફરીથી સક્ષમ હશે.
.popover('toggleEnabled')
એલિમેન્ટના પોપઓવરને બતાવવા અથવા છુપાવવા માટેની ક્ષમતાને ટૉગલ કરે છે.
.popover('update')
તત્વના પોપઓવરની સ્થિતિને અપડેટ કરે છે.
ઘટનાઓ
ઇવેન્ટનો પ્રકાર | વર્ણન |
---|---|
show.bs.popover | show જ્યારે ઇન્સ્ટન્સ પદ્ધતિને બોલાવવામાં આવે ત્યારે આ ઇવેન્ટ તરત જ ફાયર થાય છે. |
દર્શાવવામાં આવ્યું છે.bs.popover | જ્યારે પોપઓવર વપરાશકર્તાને દૃશ્યક્ષમ બનાવવામાં આવે ત્યારે આ ઇવેન્ટ ફાયર કરવામાં આવે છે (CSS સંક્રમણો પૂર્ણ થવાની રાહ જોશે). |
hide.bs.popover | hide જ્યારે ઇન્સ્ટન્સ મેથડ બોલાવવામાં આવે ત્યારે આ ઇવેન્ટ તરત જ કાઢી નાખવામાં આવે છે. |
hidden.bs.popover | જ્યારે પોપઓવર વપરાશકર્તાથી છુપાવવાનું સમાપ્ત કરે છે ત્યારે આ ઇવેન્ટને ફાયર કરવામાં આવે છે (CSS સંક્રમણો પૂર્ણ થવાની રાહ જોશે). |
inserted.bs.popover | show.bs.popover જ્યારે પોપઓવર ટેમ્પલેટ DOM માં ઉમેરવામાં આવ્યું હોય ત્યારે આ ઇવેન્ટને ઇવેન્ટ પછી ફાયર કરવામાં આવે છે. |