ინსტრუმენტების რჩევები
დოკუმენტაცია და მაგალითები პერსონალური Bootstrap ინსტრუმენტების დასამატებლად CSS-ით და JavaScript-ით CSS3-ის გამოყენებით ანიმაციებისთვის და მონაცემთა-bs-ატრიბუტები ლოკალური სათაურის შესანახად.
მიმოხილვა
რა უნდა იცოდეთ ხელსაწყოების მოდულის გამოყენებისას:
- ინსტრუმენტების რჩევები ეყრდნობა მესამე მხარის ბიბლიოთეკას Popper- ს პოზიციონირებისთვის. თქვენ უნდა შეიტანოთ popper.min.js bootstrap.js-მდე ან გამოიყენოთ
bootstrap.bundle.min.js
/bootstrap.bundle.js
რომელიც შეიცავს Popper-ს, რათა ინსტრუმენტების რჩევები იმუშაოს! - ინსტრუმენტების მინიშნებები დაშვებულია შესრულების მიზეზების გამო, ამიტომ თქვენ თავად უნდა მოაწყოთ ისინი .
- ინსტრუმენტების რჩევები ნულოვანი სიგრძის სათაურებით არასოდეს არის ნაჩვენები.
- მიუთითეთ
container: 'body'
, რათა თავიდან აიცილოთ პრობლემები უფრო რთულ კომპონენტებში (როგორიცაა ჩვენი შეყვანის ჯგუფები, ღილაკების ჯგუფები და ა.შ.). - დამალულ ელემენტებზე ხელსაწყოების ჩართვა არ იმუშავებს.
- ინსტრუმენტების რჩევები
.disabled
ანdisabled
ელემენტები უნდა იყოს ჩართული შეფუთვის ელემენტზე. - როდესაც ამოქმედდება ჰიპერბმულებიდან, რომლებიც მოიცავს მრავალ ხაზს, ინსტრუმენტების რჩევები იქნება ცენტრში. გამოიყენეთ
white-space: nowrap;
თქვენი<a>
s, რათა თავიდან აიცილოთ ეს ქცევა. - ინსტრუმენტების მინიშნებები უნდა იყოს დამალული, სანამ მათი შესაბამისი ელემენტები DOM-დან წაიშლება.
- ინსტრუმენტების მინიშნებების გააქტიურება შესაძლებელია ჩრდილოვანი DOM-ის შიგნით არსებული ელემენტის წყალობით.
prefers-reduced-motion
მედიის მოთხოვნაზე. იხილეთ
ჩვენი ხელმისაწვდომობის დოკუმენტაციის შემცირებული მოძრაობის განყოფილება .
მიიღე ეს ყველაფერი? კარგია, ვნახოთ, როგორ მუშაობენ ისინი რამდენიმე მაგალითით.
მაგალითი: ჩართეთ ინსტრუმენტების რჩევები ყველგან
გვერდზე ყველა ინსტრუმენტების ინიციალიზაციის ერთ-ერთი გზა იქნება მათი data-bs-toggle
ატრიბუტის მიხედვით შერჩევა:
var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
return new bootstrap.Tooltip(tooltipTriggerEl)
})
მაგალითები
ინსტრუმენტების რჩევების სანახავად გადაიტანეთ მაუსი ქვემოთ მოცემულ ბმულებზე:
ადგილის ველის ტექსტი ინსტრუმენტების რჩევებით რამდენიმე შიდა ბმულის დემონსტრირებისთვის . ეს ახლა მხოლოდ შემავსებელია, არა მკვლელი. აქ განთავსებული კონტენტი მხოლოდ რეალური ტექსტის არსებობის იმიტაციისთვის . და ეს ყველაფერი მხოლოდ იმისთვის, რომ წარმოდგენა მოგცეთ იმის შესახებ, თუ როგორ გამოიყურება ინსტრუმენტების რჩევები რეალურ სამყაროში გამოყენებისას. ასე რომ, იმედია, თქვენ ახლა ნახეთ, როგორ შეიძლება პრაქტიკაში იმუშაოს ეს ინსტრუმენტები ლინკებზე , როდესაც გამოიყენებთ მათ საკუთარ საიტზე ან პროექტში.
გადაახვიეთ ქვემოთ მოცემულ ღილაკებზე, რათა ნახოთ ოთხი ინსტრუმენტების მიმართულება: ზედა, მარჯვნივ, ქვედა და მარცხნივ. RTL-ში Bootstrap-ის გამოყენებისას მიმართულებები ასახულია.
<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>
და მორგებული HTML-ით დამატებული:
<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>
SVG-ით:
სას
ცვლადები
$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;
გამოყენება
Tooltip დანამატი წარმოქმნის შინაარსს და მარკირებას მოთხოვნისამებრ, და ნაგულისხმევად ათავსებს ინსტრუმენტების რჩევებს მათი ტრიგერის ელემენტის შემდეგ.
ჩართეთ ინსტრუმენტული მინიშნება JavaScript-ის საშუალებით:
var exampleEl = document.getElementById('example')
var tooltip = new bootstrap.Tooltip(exampleEl, options)
გადადინება auto
დაscroll
Tooltip პოზიცია ცდილობს ავტომატურად შეიცვალოს, როდესაც მშობელი კონტეინერი აქვს overflow: auto
ან overflow: scroll
მოსწონს ჩვენი .table-responsive
, მაგრამ მაინც ინარჩუნებს თავდაპირველ განლაგებას. ამის გადასაჭრელად, დააყენეთ boundary
ოფცია (შებრუნების მოდიფიკატორისთვის, რომელიც იყენებს popperConfig
ოფციას) ნებისმიერ HTMLElement-ზე, რათა გადალახოს ნაგულისხმევი მნიშვნელობა, 'clippingParents'
როგორიცაა document.body
:
var exampleEl = document.getElementById('example')
var tooltip = new bootstrap.Tooltip(exampleEl, {
boundary: document.body // or document.querySelector('#boundary')
})
მარკირება
ინსტრუმენტის მითითებისთვის საჭირო მარკირება მხოლოდ data
ატრიბუტია და title
HTML ელემენტზე გსურთ გქონდეთ ინსტრუმენტული მინიშნება. ინსტრუმენტთა რჩევის გენერირებული მარკირება საკმაოდ მარტივია, თუმცა ის მოითხოვს პოზიციას (ნაგულისხმევად, დაყენებულია top
დანამატის მიერ).
კლავიატურის და დამხმარე ტექნოლოგიების მომხმარებელთათვის ინსტრუმენტების რჩევების გაკეთება
თქვენ უნდა დაამატოთ მხოლოდ ინსტრუმენტების რჩევები HTML ელემენტებს, რომლებიც ტრადიციულად კლავიატურაზე ფოკუსირებული და ინტერაქტიულია (როგორიცაა ბმულები ან ფორმის კონტროლი). მიუხედავად იმისა, რომ თვითნებური HTML ელემენტები (როგორიცაა <span>
s) შეიძლება ფოკუსირებადი გახდეს tabindex="0"
ატრიბუტის დამატებით, ეს დაამატებს პოტენციურად შემაწუხებელ და დამაბნეველ ჩანართებს არაინტერაქტიულ ელემენტებზე კლავიატურის მომხმარებლებისთვის, და დამხმარე ტექნოლოგიების უმეტესობა ამჟამად არ აცხადებს ინსტრუმენტთა რჩევას ამ სიტუაციაში. გარდა ამისა, არ დაეყრდნოთ მხოლოდ hover
თქვენი ინსტრუმენტების მინიშნებას, რადგან ეს შეუძლებელს გახდის თქვენი ინსტრუმენტების ჩართვას კლავიატურის მომხმარებლებისთვის.
<!-- 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>
გამორთული ელემენტები
ატრიბუტის მქონე ელემენტები disabled
არ არის ინტერაქტიული, რაც იმას ნიშნავს, რომ მომხმარებლებს არ შეუძლიათ ფოკუსირება, მაუსის გადატანა ან დაწკაპუნება მათზე, რათა გამოიწვიონ ინსტრუმენტების მინიშნება (ან popover). გამოსავლის გამოსავალად, თქვენ მოგინდებათ ჩართოთ ხელსაწყოს მინიშნება შეფუთვიდან <div>
ან <span>
იდეალურად შექმნილი კლავიატურაზე ფოკუსირებადი გამოყენებით 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>
Პარამეტრები
ოფციების გადაცემა შესაძლებელია მონაცემთა ატრიბუტების ან JavaScript-ის საშუალებით. მონაცემთა ატრიბუტებისთვის, დაამატეთ ვარიანტის სახელი data-bs-
, როგორც data-bs-animation=""
. დარწმუნდით, რომ შეცვალეთ ოფციის სახელის ქეისის ტიპი camelCase-დან kebab-case-ზე, როდესაც ოფციონებს მონაცემთა ატრიბუტებით გადასცემთ. მაგალითად, გამოყენების ნაცვლად data-bs-customClass="beautifier"
გამოიყენეთ data-bs-custom-class="beautifier"
.
sanitize
,
sanitizeFn
, და
allowList
პარამეტრების მიწოდება შეუძლებელია მონაცემთა ატრიბუტების გამოყენებით.
სახელი | ტიპი | ნაგულისხმევი | აღწერა |
---|---|---|---|
animation |
ლოგიკური | true |
გამოიყენეთ CSS fade გადასვლა ინსტრუმენტზე |
container |
სიმებიანი | ელემენტი | ყალბი | false |
ანიჭებს ხელსაწყოს მინიშნებას კონკრეტულ ელემენტს. მაგალითი |
delay |
ნომერი | ობიექტი | 0 |
ინსტრუმენტების მითითების ჩვენება და დამალვის დაგვიანება (ms) - არ ვრცელდება ხელით ტრიგერის ტიპზე თუ ნომერი მოწოდებულია, დაგვიანება გამოიყენება ორივე დამალვა/ჩვენებაზე ობიექტის სტრუქტურა არის: |
html |
ლოგიკური | false |
HTML-ის დაშვება ხელსაწყოს მინიშნებში. თუ სიმართლეა, HTML ტეგები ინსტრუმენტების მინიშნებში გამოიყენეთ ტექსტი, თუ გაწუხებთ XSS შეტევები. |
placement |
სიმებიანი | ფუნქცია | 'top' |
როგორ განვათავსოთ ინსტრუმენტის მინიშნება - ავტომატური | ზედა | ქვედა | მარცხენა | უფლება. როდესაც ფუნქცია გამოიყენება განლაგების დასადგენად, ის გამოიძახება ინსტრუმენტების რჩევით DOM კვანძით, როგორც მისი პირველი არგუმენტი და გამომწვევი ელემენტის DOM კვანძით, როგორც მეორე. |
selector |
სიმებიანი | ყალბი | false |
თუ სელექტორი არის მოწოდებული, ხელსაწყოს მინიშნების ობიექტები დელეგირებული იქნება მითითებულ სამიზნეებზე. პრაქტიკაში, ეს გამოიყენება აგრეთვე ინსტრუმენტთა რჩევების გამოსაყენებლად დინამიურად დამატებულ DOM ელემენტებზე ( jQuery.on მხარდაჭერა). იხილეთ ეს და ინფორმაციული მაგალითი . |
template |
სიმებიანი | '<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>' |
HTML-ის საბაზისო გამოყენება ინსტრუმენტთა რჩევის შექმნისას. ხელსაწყოთი
ყველაზე გარე შეფუთვის ელემენტს უნდა ჰქონდეს |
title |
სიმებიანი | ელემენტი | ფუნქცია | '' |
სათაურის ნაგულისხმევი მნიშვნელობა, თუ თუ ფუნქცია მოცემულია, ის გამოიძახება მისი |
trigger |
სიმებიანი | 'hover focus' |
როგორ ხდება ინსტრუმენტული მინიშნება - დააწკაპუნეთ | hover | ფოკუსირება | სახელმძღვანელო. თქვენ შეგიძლიათ გაიაროთ მრავალი ტრიგერი; გამოყავით ისინი სივრცეში.
|
fallbackPlacements |
მასივი | ['top', 'right', 'bottom', 'left'] |
განსაზღვრეთ სარეზერვო განლაგება მასივში განლაგების სიის მიწოდებით (უპირატესობის მიხედვით). დამატებითი ინფორმაციისთვის იხილეთ პოპერის ქცევის დოკუმენტები |
boundary |
სიმებიანი | ელემენტი | 'clippingParents' |
ხელსაწყოს მინიშნების საზღვრები გადასასვლელის შეზღუდვის (გამოიყენება მხოლოდ Popper-ის preventOverflow მოდიფიკატორზე). ნაგულისხმევად ის არის 'clippingParents' და შეუძლია მიიღოს HTMLElement მითითება (მხოლოდ JavaScript-ის საშუალებით). დამატებითი ინფორმაციისთვის იხილეთ Popper's detectOverflow docs . |
customClass |
სიმებიანი | ფუნქცია | '' |
დაამატეთ კლასები ხელსაწყოს მინიშნებაში, როდესაც ის გამოჩნდება. გაითვალისწინეთ, რომ ეს კლასები დაემატება შაბლონში მითითებულ კლასებს. რამდენიმე კლასის დასამატებლად გამოყავით ისინი ინტერვალით: თქვენ ასევე შეგიძლიათ გადასცეთ ფუნქცია, რომელიც უნდა დააბრუნოს ერთი სტრიქონი, რომელიც შეიცავს დამატებით კლასის სახელებს. |
sanitize |
ლოგიკური | true |
ჩართეთ ან გამორთეთ სანიტარიზაცია. თუ გააქტიურებულია 'template' და 'title' ოფციები იქნება გაწმენდილი. იხილეთ სადეზინფექციო განყოფილება ჩვენს JavaScript დოკუმენტაციაში . |
allowList |
ობიექტი | ნაგულისხმევი მნიშვნელობა | ობიექტი, რომელიც შეიცავს დაშვებულ ატრიბუტებსა და ტეგებს |
sanitizeFn |
null | ფუნქცია | null |
აქ შეგიძლიათ მიაწოდოთ თქვენი საკუთარი სადეზინფექციო ფუნქცია. ეს შეიძლება იყოს სასარგებლო, თუ გირჩევნიათ გამოიყენოთ გამოყოფილი ბიბლიოთეკა სანიტარიულობის შესასრულებლად. |
offset |
მასივი | სიმებიანი | ფუნქცია | [0, 0] |
ინსტრუმენტული ინსტრუმენტების ოფსეტური მიზანთან შედარებით. თქვენ შეგიძლიათ გადასცეთ სტრიქონი მონაცემთა ატრიბუტებში მძიმით გამოყოფილი მნიშვნელობებით, როგორიცაა: როდესაც ფუნქცია გამოიყენება ოფსეტის დასადგენად, ის გამოიძახება ობიექტით, რომელიც შეიცავს პოპერის განლაგებას, მითითებას და პოპერის რექტს, როგორც მის პირველ არგუმენტს. გამომწვევი ელემენტი DOM კვანძი გადაეცემა მეორე არგუმენტად. ფუნქციამ უნდა დააბრუნოს მასივი ორი რიცხვით: . დამატებითი ინფორმაციისთვის იხილეთ პოპერის ოფსეტური დოკუმენტები . |
popperConfig |
null | ობიექტი | ფუნქცია | null |
Bootstrap-ის ნაგულისხმევი Popper კონფიგურაციის შესაცვლელად იხილეთ Popper-ის კონფიგურაცია . როდესაც ფუნქცია გამოიყენება Popper-ის კონფიგურაციის შესაქმნელად, მას უწოდებენ ობიექტს, რომელიც შეიცავს Bootstrap-ის ნაგულისხმევ პოპერის კონფიგურაციას. ის გეხმარებათ გამოიყენოთ და შეაერთოთ ნაგულისხმევი კონფიგურაცია. ფუნქციამ უნდა დააბრუნოს Popper-ის კონფიგურაციის ობიექტი. |
მონაცემთა ატრიბუტები ინდივიდუალური ინსტრუმენტებისთვის
ცალკეული ინსტრუმენტების რჩევების ვარიანტები შეიძლება ალტერნატიულად განისაზღვროს მონაცემთა ატრიბუტების გამოყენებით, როგორც ეს ზემოთ იყო ახსნილი.
ფუნქციის გამოყენებაpopperConfig
var tooltip = new bootstrap.Tooltip(element, {
popperConfig: function (defaultBsPopperConfig) {
// var newPopperConfig = {...}
// use defaultBsPopperConfig if needed...
// return newPopperConfig
}
})
მეთოდები
ასინქრონული მეთოდები და გადასვლები
ყველა API მეთოდი ასინქრონულია და იწყებს გადასვლას . ისინი უბრუნდებიან აბონენტს გადასვლის დაწყებისთანავე, მაგრამ მის დასრულებამდე . გარდა ამისა, მეთოდის გამოძახება გარდამავალ კომპონენტზე იგნორირებული იქნება .
იხილეთ ჩვენი JavaScript დოკუმენტაცია დამატებითი ინფორმაციისთვის .
შოუ
ავლენს ელემენტის ინსტრუმენტს. უბრუნდება აბონენტს ინსტრუმენტების მითითების რეალურად ჩვენებამდე (ანუ shown.bs.tooltip
მოვლენის დადგომამდე). ეს განიხილება ინსტრუმენტების რჩევის „ხელით“ გააქტიურებად. ინსტრუმენტების რჩევები ნულოვანი სიგრძის სათაურებით არასოდეს არის ნაჩვენები.
tooltip.show()
დამალვა
მალავს ელემენტის ხელსაწყოს მინიშნებას. უბრუნდება აბონენტს მანამ, სანამ ინსტრუმენტების მინიშნება რეალურად იქნება დამალული (ანუ hidden.bs.tooltip
მოვლენის დადგომამდე). ეს განიხილება ინსტრუმენტების რჩევის „ხელით“ გააქტიურებად.
tooltip.hide()
გადართვა
ცვლის ელემენტის ხელსაწყოს მინიშნებას. უბრუნდება აბონენტს მანამ, სანამ ინსტრუმენტის მინიშნება რეალურად გამოჩნდება ან დამალული იქნებაshown.bs.tooltip
( ანუ, სანამ მოხდება hidden.bs.tooltip
მოვლენა). ეს განიხილება ინსტრუმენტების რჩევის „ხელით“ გააქტიურებად.
tooltip.toggle()
განკარგავს
მალავს და ანადგურებს ელემენტის ინსტრუმენტს (შლის DOM ელემენტზე შენახულ მონაცემებს). ინსტრუმენტების რჩევები, რომლებიც იყენებენ დელეგირებასselector
(რომლებიც შექმნილია ოფციის გამოყენებით ) არ შეიძლება ინდივიდუალურად განადგურდეს შთამომავლობის ტრიგერების ელემენტებზე.
tooltip.dispose()
ჩართვა
ელემენტის ინსტრუმენტს აძლევს ჩვენების შესაძლებლობას. ინსტრუმენტების რჩევები ჩართულია ნაგულისხმევად.
tooltip.enable()
გამორთვა
შლის ელემენტის ხელსაწყოს მინიშნების ჩვენების შესაძლებლობას. ინსტრუმენტების მინიშნება გამოჩნდება მხოლოდ ხელახლა ჩართვის შემთხვევაში.
tooltip.disable()
გადართვა ჩართულია
ცვლის ელემენტის ხელსაწყოს მინიშნების ჩვენების ან დამალვის შესაძლებლობას.
tooltip.toggleEnabled()
განახლება
აახლებს ელემენტის ხელსაწყოს მინიშნების პოზიციას.
tooltip.update()
getInstance
სტატიკური მეთოდი, რომელიც საშუალებას გაძლევთ მიიღოთ DOM ელემენტთან ასოცირებული ინსტრუმენტული მინიშნება
var exampleTriggerEl = document.getElementById('example')
var tooltip = bootstrap.Tooltip.getInstance(exampleTriggerEl) // Returns a Bootstrap tooltip instance
getOrCreateInstance
სტატიკური მეთოდი, რომელიც საშუალებას გაძლევთ მიიღოთ DOM ელემენტთან ასოცირებული ინსტრუმენტული მინიშნება, ან შექმნათ ახალი, თუ ის არ იყო ინიციალიზებული
var exampleTriggerEl = document.getElementById('example')
var tooltip = bootstrap.Tooltip.getOrCreateInstance(exampleTriggerEl) // Returns a Bootstrap tooltip instance
Ივენთი
ღონისძიების ტიპი | აღწერა |
---|---|
show.bs.tooltip |
ეს მოვლენა მაშინვე ირთვება, როდესაც show გამოიძახება ეგზემპლარის მეთოდი. |
shown.bs.tooltip |
ეს ღონისძიება გააქტიურებულია, როდესაც ინსტრუმენტების მინიშნება გახდება მომხმარებლისთვის ხილული (დაელოდება CSS გადასვლების დასრულებას). |
hide.bs.tooltip |
ეს ღონისძიება გააქტიურებულია მაშინვე, როდესაც hide გამოიძახება ინსტანციის მეთოდი. |
hidden.bs.tooltip |
ეს ღონისძიება გააქტიურებულია, როდესაც ინსტრუმენტების მინიშნება დასრულდა მომხმარებლისგან დამალული (დაელოდება CSS გადასვლების დასრულებას). |
inserted.bs.tooltip |
ეს ღონისძიება გააქტიურებულია show.bs.tooltip ღონისძიების შემდეგ, როდესაც ინსტრუმენტის მინიშნება შაბლონი დაემატება DOM-ს. |
var myTooltipEl = document.getElementById('myTooltip')
var tooltip = new bootstrap.Tooltip(myTooltipEl)
myTooltipEl.addEventListener('hidden.bs.tooltip', function () {
// do something...
})
tooltip.hide()