ક્રિયાપ્રતિક્રિયાઓ
યુટિલિટી વર્ગો જે વપરાશકર્તાઓ વેબસાઇટની સામગ્રી સાથે કેવી રીતે ક્રિયાપ્રતિક્રિયા કરે છે તે બદલાય છે.
ટેક્સ્ટની પસંદગી
જ્યારે વપરાશકર્તા તેની સાથે ક્રિયાપ્રતિક્રિયા કરે ત્યારે સામગ્રી પસંદ કરવાની રીત બદલો.
જ્યારે વપરાશકર્તા દ્વારા ક્લિક કરવામાં આવશે ત્યારે આ ફકરો સંપૂર્ણપણે પસંદ કરવામાં આવશે.
આ ફકરામાં ડિફૉલ્ટ પસંદગીની વર્તણૂક છે.
જ્યારે વપરાશકર્તા દ્વારા ક્લિક કરવામાં આવે ત્યારે આ ફકરો પસંદ કરી શકાશે નહીં.
<p class="user-select-all">This paragraph will be entirely selected when clicked by the user.</p>
<p class="user-select-auto">This paragraph has default select behavior.</p>
<p class="user-select-none">This paragraph will not be selectable when clicked by the user.</p>
નિર્દેશક ઘટનાઓ
બુટસ્ટ્રેપ તત્વ ક્રિયાપ્રતિક્રિયાઓને રોકવા અથવા ઉમેરવા માટે વર્ગો પ્રદાન .pe-none
કરે છે..pe-auto
આ લિંક પર ક્લિક કરી શકાતું નથી.
આ લિંક પર ક્લિક કરી શકાય છે (આ ડિફૉલ્ટ વર્તન છે).
આ લિંકને ક્લિક કરી શકાતી નથી કારણ કે pointer-events
મિલકત તેના માતાપિતા પાસેથી વારસામાં મળેલી છે. જો કે, આ લિંકનો એક pe-auto
વર્ગ છે અને તેને ક્લિક કરી શકાય છે.
<p><a href="#" class="pe-none" tabindex="-1" aria-disabled="true">This link</a> can not be clicked.</p>
<p><a href="#" class="pe-auto">This link</a> can be clicked (this is default behavior).</p>
<p class="pe-none"><a href="#" tabindex="-1" aria-disabled="true">This link</a> can not be clicked because the <code>pointer-events</code> property is inherited from its parent. However, <a href="#" class="pe-auto">this link</a> has a <code>pe-auto</code> class and can be clicked.</p>
.pe-none
વર્ગ (અને
CSS પ્રોપર્ટી
તે
pointer-events
સેટ કરે છે) માત્ર પોઇન્ટર (માઉસ, સ્ટાઈલસ, ટચ) સાથેની ક્રિયાપ્રતિક્રિયાઓને અટકાવે છે. સાથેની લિંક્સ અને નિયંત્રણો
.pe-none
, ડિફૉલ્ટ રૂપે, કીબોર્ડ વપરાશકર્તાઓ માટે હજુ પણ ધ્યાન કેન્દ્રિત કરવા યોગ્ય અને કાર્યવાહી કરવા યોગ્ય છે. કીબોર્ડ વપરાશકર્તાઓ માટે પણ તેઓ સંપૂર્ણપણે તટસ્થ છે તેની ખાતરી કરવા માટે, તમારે વધુ વિશેષતાઓ ઉમેરવાની જરૂર પડી શકે છે જેમ કે
tabindex="-1"
(તેમને કીબોર્ડ ફોકસ પ્રાપ્ત કરવાથી અટકાવવા) અને
aria-disabled="true"
(તેઓ અસરકારક રીતે સહાયક તકનીકો માટે અક્ષમ છે તે હકીકત જણાવવા માટે), અને સંભવતઃ જાવાસ્ક્રિપ્ટનો ઉપયોગ કરવા માટે. તેમને ક્રિયાશીલ બનવાથી સંપૂર્ણપણે અટકાવો. ફોર્મ નિયંત્રણો માટે,
disabled
તેના બદલે HTML વિશેષતાનો ઉપયોગ કરવાનું વિચારો.
સસ
ઉપયોગિતાઓ API
ક્રિયાપ્રતિક્રિયા ઉપયોગિતાઓ અમારી ઉપયોગિતાઓ API માં જાહેર કરવામાં આવી છે scss/_utilities.scss
. ઉપયોગિતા API નો ઉપયોગ કેવી રીતે કરવો તે જાણો.
"user-select": (
property: user-select,
values: all auto none
),
"pointer-events": (
property: pointer-events,
class: pe,
values: none auto,
),