ፖፖቨርስ

በiOS ውስጥ እንዳሉት የBootstrap popovers በጣቢያዎ ላይ ወዳለ ማንኛውም አካል ለመጨመር ሰነዶች እና ምሳሌዎች።

በዚህ ገጽ ላይ

አጠቃላይ እይታ

የፖፖቨር ፕለጊን ሲጠቀሙ ማወቅ ያለባቸው ነገሮች፡-

ፖፖፖች ለቦታ አቀማመጥ በሶስተኛ ወገን ቤተ-መጽሐፍት ፖፐር ላይ ይተማመናሉ ። ከዚህ በፊት popper.min.jsን ማካተት አለቦት bootstrap.jsወይም bootstrap.bundle.min.jsፖፐር የያዘውን ይጠቀሙ።
ፖፖቨር ፖፕቨር ፕለጊን እንደ ጥገኝነት ይፈልጋል።
ፖፖቨር በአፈጻጸም ምክንያቶች መርጠው የገቡ ናቸው፣ ስለዚህ እርስዎ እራስዎ ማስጀመር አለብዎት ።
ዜሮ-ርዝመት titleእና contentእሴቶች መቼም ብቅ-ባይ አያሳዩም።
container: 'body'ይበልጥ ውስብስብ በሆኑ ክፍሎች (እንደ የግቤት ቡድኖቻችን፣ የአዝራር ቡድኖች፣ ወዘተ) ያሉ ችግሮችን ከመስጠት ለመዳን ይግለጹ ።
በተደበቁ አካላት ላይ ብቅ-ባይ ማነሳሳት አይሰራም።
ፖፖቨርስ .disabledወይም disabledኤለመንቶች በአንድ ጥቅል አካል ላይ መቀስቀስ አለባቸው።
በበርካታ መስመሮች ላይ የሚጠቅሱ መልሕቆች ከተነሳ ፖፖዎች በአንደኛ ደረጃ አጠቃላይ ስፋት መካከል ማዕከላዊ ይሆናል. ይህንን ባህሪ ለማስወገድ .text-nowrapበእርስዎ s ላይ ይጠቀሙ ።<a>
ፖፖቨር ተጓዳኝ ክፍሎቻቸው ከDOM ከመወገዳቸው በፊት መደበቅ አለባቸው።
በጥላ DOM ውስጥ ላለ አካል ምስጋና ይግባው ፖፖቨርስ ሊነቃ ይችላል።

በነባሪ፣ ይህ አካል አብሮ የተሰራውን የይዘት ማጽጃ ይጠቀማል፣ ይህም በግልጽ ያልተፈቀዱትን የኤችቲኤምኤል ኤለመንቶችን ያስወግዳል። ለበለጠ ዝርዝር የጃቫ ስክሪፕት ሰነዶቻችን የንፅህና መጠበቂያ ክፍልን ይመልከቱ።

የዚህ አካል አኒሜሽን ተጽእኖ prefers-reduced-motionበመገናኛ ብዙሃን ጥያቄ ላይ የተመሰረተ ነው. የእኛን የተደራሽነት ሰነድ የተቀነሰውን እንቅስቃሴ ክፍል ይመልከቱ ።

ብቅ-ባይ ከአንዳንድ ምሳሌዎች ጋር እንዴት እንደሚሰራ ለማየት ማንበብዎን ይቀጥሉ።

ምሳሌዎች

ብቅ-ባዮችን አንቃ

ከላይ እንደተጠቀሰው ፖፖቨር ጥቅም ላይ ከመዋሉ በፊት ማስጀመር አለብዎት። በአንድ ገጽ ላይ ሁሉንም ብቅ-ባዮችን የማስጀመር አንዱ መንገድ እነሱን በባህሪያቸው መምረጥ data-bs-toggleነው ፣ ለምሳሌ

const popoverTriggerList = document.querySelectorAll('[data-bs-toggle="popover"]')
const popoverList = [...popoverTriggerList].map(popoverTriggerEl => new bootstrap.Popover(popoverTriggerEl))

የቀጥታ ማሳያ

የሚከተለውን የቀጥታ ፖፖቨር ለማቅረብ ከላይ ካለው ቅንጣቢ ጋር ተመሳሳይ የሆነውን ጃቫስክሪፕት እንጠቀማለን። ርዕሶች የሚዘጋጁት በ በኩል data-bs-titleነው እና የሰውነት ይዘት በ data-bs-content.

በኤችቲኤምኤልዎ ውስጥ titleአንዱን ለመጠቀም ነፃነት ይሰማዎ። data-bs-titleጥቅም ላይ በሚውልበት ጊዜ ፖፐር ንጥረ ነገሩ በሚሰራበት ጊዜ titleበራስ-ሰር ይተካዋል ።data-bs-title

html

<button type="button" class="btn btn-lg btn-danger" data-bs-toggle="popover" data-bs-title="Popover title" data-bs-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>

አራት አቅጣጫዎች

አራት አማራጮች አሉ-ከላይ ፣ ቀኝ ፣ ታች እና ግራ ። በ RTL ውስጥ Bootstrapን ሲጠቀሙ አቅጣጫዎች ይንፀባርቃሉ። data-bs-placementአቅጣጫውን ለመቀየር ያዘጋጁ ።

html

<button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="top" data-bs-content="Top popover">
  Popover on top
</button>
<button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="right" data-bs-content="Right popover">
  Popover on right
</button>
<button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="bottom" data-bs-content="Bottom popover">
  Popover on bottom
</button>
<button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="left" data-bs-content="Left popover">
  Popover on left
</button>

ብጁ`container`

ብቅ-ባይን የሚያስተጓጉሉ አንዳንድ የወላጅ ኤለመንት ቅጦች ሲኖርዎት፣ containerበምትኩ የፖፖቨር ኤችቲኤምኤል በዚያ አካል ውስጥ እንዲታይ ብጁ መግለጽ ያስፈልግዎታል። ይህ ምላሽ ሰጭ ሠንጠረዦች፣ የግብዓት ቡድኖች እና የመሳሰሉት የተለመደ ነው።

const popover = new bootstrap.Popover('.example-popover', {
  container: 'body'
})

ፖፖቭ ራሱ እራሱን containerለሻሻይ እንደሚገኝ ለማረጋገጥ ግልጽ የሆነ ባህላዊ ጽሑፍን ለማዘጋጀት የሚፈለግበት ሌላው ሁኔታ የአስተማሪዎች ፖፖዎች ናቸው. ይህ በተለይ መስተጋብራዊ አካላትን ለያዙ ብቅ-ባዮች በጣም አስፈላጊ ነው - ሞዳል መገናኛዎች ትኩረትን ያጠምዳሉ፣ ስለዚህ ብቅ-ባይ የሞዳል የልጅ አካል ካልሆነ በስተቀር ተጠቃሚዎች እነዚህን በይነተገናኝ አካላት ማተኮር ወይም ማንቃት አይችሉም።

const popover = new bootstrap.Popover('.example-popover', {
  container: '.modal-body'
})

ብጁ ፖፖቨርስ

በ v5.2.0 ውስጥ ተጨምሯል

የሲኤስኤስ ተለዋዋጮችን በመጠቀም የፖፖቨርን ገጽታ ማበጀት ይችላሉ ። ብጁ መደብ data-bs-custom-class="custom-popover"አዘጋጀን ብጁ ገጽታችንን እና አንዳንድ የአካባቢያዊ የሲኤስኤስ ተለዋዋጮችን ለመሻር እንጠቀምበታለን።

.custom-popover {
  --bs-popover-max-width: 200px;
  --bs-popover-border-color: var(--bs-primary);
  --bs-popover-header-bg: var(--bs-primary);
  --bs-popover-header-color: var(--bs-white);
  --bs-popover-body-padding-x: 1rem;
  --bs-popover-body-padding-y: .5rem;
}

html

<button type="button" class="btn btn-secondary"
        data-bs-toggle="popover" data-bs-placement="right"
        data-bs-custom-class="custom-popover"
        data-bs-title="Custom popover"
        data-bs-content="This popover is themed via CSS variables.">
  Custom popover
</button>

በሚቀጥለው ጠቅታ አሰናብት

focusከተቀያሪ ኤለመንት የተለየ ኤለመንት በሚቀጥለው ጠቅታ ላይ ብቅ-ባዮችን ለማሰናበት ቀስቅሴውን ይጠቀሙ ።

ለማሰናበት-ቀጣይ-ጠቅታ ልዩ ምልክት ማድረጊያ ያስፈልጋል

ለትክክለኛው የአሳሽ እና የመድረክ-አቋራጭ ባህሪ፣ መለያውን ሳይሆን መለያውን መጠቀም አለብዎት ፣ <a>እና እንዲሁም<button> ባህሪን ማካተት አለብዎት tabindex።

ሊወገድ የማይችል ብቅ-ባይ

html

<a tabindex="0" class="btn btn-lg btn-danger" role="button" data-bs-toggle="popover" data-bs-trigger="focus" data-bs-title="Dismissible popover" data-bs-content="And here's some amazing content. It's very engaging. Right?">Dismissible popover</a>

const popover = new bootstrap.Popover('.popover-dismiss', {
  trigger: 'focus'
})

የተሰናከሉ አባሎች

ባህሪው ያላቸው አካላት disabledበይነተገናኝ አይደሉም፣ ይህም ማለት ተጠቃሚዎች ብቅ ባይ (ወይም የመሳሪያ ጥቆማ) ለማንዣበብ ወይም ጠቅ ማድረግ አይችሉም። እንደ መፍትሄ፣ ፖፖቨርን ከጥቅል <div>ወይም <span>በቁልፍ ሰሌዳው ላይ ሊያተኩር የሚችል በመጠቀም ማስነሳት ይፈልጋሉ tabindex="0"።

ለአካል ጉዳተኛ ብቅ-ባይ ቀስቅሴዎች እንዲሁም ብቅ-ባይ ለተጠቃሚዎችዎ የአካል ጉዳተኛ አካል ላይ ጠቅdata-bs-trigger="hover focus" ያደርጋሉ ብለው ስለማይጠብቁ ወዲያውኑ ምስላዊ ግብረመልስ እንዲታይ ሊመርጡ ይችላሉ ።

html

<span class="d-inline-block" tabindex="0" data-bs-toggle="popover" data-bs-trigger="hover focus" data-bs-content="Disabled popover">
  <button class="btn btn-primary" type="button" disabled>Disabled button</button>
</span>

CSS

ተለዋዋጮች

በ v5.2.0 ውስጥ ተጨምሯል

እንደ የ Bootstrap የ CSS ተለዋዋጮች አካሄድ አካል፣ ብቅ .popover-ባዮች አሁን ለተሻሻለ የአሁናዊ ማበጀት የአካባቢያዊ CSS ተለዋዋጮችን ይጠቀማሉ። የCSS ተለዋዋጮች እሴቶች በ Sass በኩል ተቀናብረዋል፣ ስለዚህ Sass ማበጀት አሁንም ይደገፋል።

  --#{$prefix}popover-zindex: #{$zindex-popover};
  --#{$prefix}popover-max-width: #{$popover-max-width};
  @include rfs($popover-font-size, --#{$prefix}popover-font-size);
  --#{$prefix}popover-bg: #{$popover-bg};
  --#{$prefix}popover-border-width: #{$popover-border-width};
  --#{$prefix}popover-border-color: #{$popover-border-color};
  --#{$prefix}popover-border-radius: #{$popover-border-radius};
  --#{$prefix}popover-inner-border-radius: #{$popover-inner-border-radius};
  --#{$prefix}popover-box-shadow: #{$popover-box-shadow};
  --#{$prefix}popover-header-padding-x: #{$popover-header-padding-x};
  --#{$prefix}popover-header-padding-y: #{$popover-header-padding-y};
  @include rfs($popover-header-font-size, --#{$prefix}popover-header-font-size);
  --#{$prefix}popover-header-color: #{$popover-header-color};
  --#{$prefix}popover-header-bg: #{$popover-header-bg};
  --#{$prefix}popover-body-padding-x: #{$popover-body-padding-x};
  --#{$prefix}popover-body-padding-y: #{$popover-body-padding-y};
  --#{$prefix}popover-body-color: #{$popover-body-color};
  --#{$prefix}popover-arrow-width: #{$popover-arrow-width};
  --#{$prefix}popover-arrow-height: #{$popover-arrow-height};
  --#{$prefix}popover-arrow-border: var(--#{$prefix}popover-border-color);

Sass ተለዋዋጮች

$popover-font-size:                 $font-size-sm;
$popover-bg:                        $white;
$popover-max-width:                 276px;
$popover-border-width:              $border-width;
$popover-border-color:              var(--#{$prefix}border-color-translucent);
$popover-border-radius:             $border-radius-lg;
$popover-inner-border-radius:       subtract($popover-border-radius, $popover-border-width);
$popover-box-shadow:                $box-shadow;

$popover-header-font-size:          $font-size-base;
$popover-header-bg:                 shade-color($popover-bg, 6%);
$popover-header-color:              $headings-color;
$popover-header-padding-y:          .5rem;
$popover-header-padding-x:          $spacer;

$popover-body-color:                $body-color;
$popover-body-padding-y:            $spacer;
$popover-body-padding-x:            $spacer;

$popover-arrow-width:               1rem;
$popover-arrow-height:              .5rem;

አጠቃቀም

በጃቫስክሪፕት በኩል ብቅ-ባዮችን አንቃ፡-

const exampleEl = document.getElementById('example')
const popover = new bootstrap.Popover(exampleEl, options)

ፖፖቨር ለቁልፍ ሰሌዳ እና አጋዥ ቴክኖሎጂ ተጠቃሚዎች እንዲሰራ ማድረግ

የቁልፍ ሰሌዳ ተጠቃሚዎች የእርስዎን ፖፖቨር እንዲያነቁ ለማድረግ፣ ወደ ኤችቲኤምኤል አባላት ማከል ያለብዎት በተለምዶ በቁልፍ ሰሌዳ-ተኮር እና በይነተገናኝ (እንደ ማገናኛዎች ወይም የቅጽ መቆጣጠሪያዎች)። ምንም እንኳን የዘፈቀደ የኤችቲኤምኤል ኤለመንቶች (እንደ <span>ዎች) ባህሪውን በማከል ትኩረት እንዲደረግ ማድረግ ቢቻልም tabindex="0"፣ ይህ ምናልባት ለቁልፍ ሰሌዳ ተጠቃሚዎች መስተጋብራዊ ባልሆኑ አካላት ላይ የሚያበሳጭ እና ግራ የሚያጋቡ የትር ማቆሚያዎችን ይጨምራል፣ እና አብዛኛዎቹ አጋዥ ቴክኖሎጂዎች በአሁኑ ጊዜ በዚህ ሁኔታ ውስጥ የፖፖቨርን ይዘት አያስተዋውቁም። . በተጨማሪም፣ hoverለፖፖቨርዎ ቀስቅሴ ብቻ አትመኑ፣ ይህ ደግሞ ለቁልፍ ሰሌዳ ተጠቃሚዎች መቀስቀስ እንዳይችሉ ያደርጋቸዋል።

የበለጸገ፣ የተዋቀረ HTML በፖፖቨርስ ውስጥ ከአማራጩ ጋር ማስገባት ቢችሉም፣ htmlከመጠን በላይ የሆነ ይዘት ከመጨመር እንዲቆጠቡ አበክረን እንመክራለን። በአሁኑ ጊዜ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ማለት ነው aria-describedby. በዚህ ምክንያት የፖፖቨር ይዘቱ ሙሉ በሙሉ ለረዳት ቴክኖሎጂ ተጠቃሚዎች እንደ አንድ ረጅም እና ያልተቋረጠ ዥረት ይገለጻል።

በተጨማሪም፣ በፖፖቨርዎ ውስጥ በይነተገናኝ መቆጣጠሪያዎችን (እንደ ቅጽ ኤለመንቶች ወይም አገናኞች ያሉ) ማካተት ቢቻልም (እነዚህን ንጥረ ነገሮች ወደተፈቀደላቸው allowListባህሪያት እና መለያዎች በመጨመር) በአሁኑ ጊዜ ብቅ-ባይ የቁልፍ ሰሌዳ የትኩረት ቅደም ተከተልን እንደማያስተዳድር ይወቁ። የቁልፍ ሰሌዳ ተጠቃሚ ፖፖቨርን ሲከፍት ትኩረቱ ቀስቅሴው አካል ላይ ነው፣ እና ፖፖቨር አብዛኛውን ጊዜ በሰነዱ መዋቅር ውስጥ ያለውን ቀስቅሴ ስለማይከተል፣ ወደፊት ለመራመዱ/ለመጫኑ ምንም ዋስትና የለም።TABየቁልፍ ሰሌዳ ተጠቃሚን ራሱ ወደ ፖፖቨር ያንቀሳቅሰዋል። በአጭሩ፣ በቀላሉ በይነተገናኝ መቆጣጠሪያዎችን ወደ ፖፖቨር ማከል እነዚህ መቆጣጠሪያዎች ለቁልፍ ሰሌዳ ተጠቃሚዎች እና አጋዥ ቴክኖሎጂዎች ተጠቃሚዎች የማይደረስ/የማይጠቀሙ ያደርጋቸዋል ወይም ቢያንስ አመክንዮአዊ ያልሆነ አጠቃላይ የትኩረት ቅደም ተከተል እንዲፈጠር ያደርጋል። በእነዚህ አጋጣሚዎች በምትኩ የሞዳል ንግግር መጠቀም ያስቡበት።

አማራጮች

አማራጮች በውሂብ ባህሪያት ወይም በጃቫ ስክሪፕት ሊተላለፉ ስለሚችሉ፣ በ ውስጥ እንዳለ የአማራጭ ስም ወደ ላይ ማከል data-bs-ይችላሉ data-bs-animation="{value}"። በመረጃ ባህሪያት በኩል አማራጮችን ሲያስተላልፉ የአማራጭ ስም የጉዳይ አይነትን ከ " camelcase " ወደ " kebab-case " መቀየርዎን ያረጋግጡ. ለምሳሌ, data-bs-custom-class="beautifier"በምትኩ ይጠቀሙ data-bs-customClass="beautifier".

ከ Bootstrap 5.2.0 ጀምሮ፣ ሁሉም አካላት ቀላል የአካል ክፍሎችን እንደ JSON string ውቅረት ሊያስቀምጥ የሚችል በሙከራ የተያዘ የውሂብ ባህሪን ይደግፋሉ። data-bs-configአንድ ኤለመንት ሲኖረው data-bs-config='{"delay":0, "title":123}'እና data-bs-title="456"ባህሪያቱ ሲኖረው፣ የመጨረሻው titleእሴት ይሆናል 456እና የተለዩ የውሂብ ባህሪያት በ ላይ የተሰጡ እሴቶችን ይሽራሉ data-bs-config። በተጨማሪም፣ ነባር የውሂብ ባህሪያት እንደ JSON ያሉ እሴቶችን ማኖር ይችላሉ data-bs-delay='{"show":0,"hide":150}'።

ለደህንነት ሲባል፣፣ sanitizeእና sanitizeFnአማራጮች allowListየውሂብ ባህሪያትን በመጠቀም ሊቀርቡ እንደማይችሉ ልብ ይበሉ።

ስም	ዓይነት	ነባሪ	መግለጫ
`allowList`	ነገር	ነባሪ እሴት	የተፈቀዱ ባህሪያትን እና መለያዎችን የያዘ ነገር።
`animation`	ቡሊያን	`true`	የ CSS ደብዝዝ ሽግግር ወደ ፖፖቨር ይተግብሩ።
`boundary`	ሕብረቁምፊ, ኤለመንት	`'clippingParents'`	የፖፖቨር የትርፍ ፍሰት ገደብ ወሰን (የሚመለከተው ለፖፐር ከመጠን በላይ ፍሰት መቀየሪያን ብቻ ነው)። በነባሪ፣ `'clippingParents'`HTMLElement ማጣቀሻ ነው እና መቀበል ይችላል (በጃቫ ስክሪፕት ብቻ)። ለበለጠ መረጃ የፖፐርን ማወቂያ ከመጠን በላይ ፍሰት ሰነዶችን ይመልከቱ ።
`container`	ሕብረቁምፊ፣ አባል፣ ሐሰት	`false`	ፖፖውን ከአንድ የተወሰነ አካል ጋር ያያይዘዋል። ምሳሌ `container: 'body'`፡. ይህ አማራጭ በጣም ጠቃሚ ነው, በተለይም በመስታወቱ ወቅት ከሚያስከትሉት ቀስቅሴ ንጥረ ነገር እንዳይቀላቀል የሚከለክለው ፖፖቨር ላይ ከሚያስከትለው ንጥረ ነገር እንዳይቀንስ ይፈቅድለታል.
`content`	ሕብረቁምፊ፣ አካል፣ ተግባር	`''`	ባህሪው ከሌለ ነባሪ የይዘት ዋጋ `data-bs-content`። አንድ ተግባር ከተሰጠ `this`ፖፑቨር ከተገጠመለት ንጥረ ነገር ጋር በማጣቀሻው ይጠራል.
`customClass`	ሕብረቁምፊ, ተግባር	`''`	በሚታይበት ጊዜ ክፍሎችን ወደ ፖፖቨር ያክሉ። እነዚህ ክፍሎች በአብነት ውስጥ ከተገለጹት ክፍሎች በተጨማሪ እንደሚጨመሩ ልብ ይበሉ። ብዙ ክፍሎችን ለመጨመር በክፍተቶች ይለያቸዋል `'class-1 class-2'`፡. እንዲሁም ተጨማሪ የክፍል ስሞችን የያዘ ነጠላ ሕብረቁምፊ መመለስ ያለበትን ተግባር ማለፍ ይችላሉ።
`delay`	ቁጥር, እቃ	`0`	POPover (MS) - መደበቅ እና መደበቅ - በእጅ ሞክር ዓይነት አይመለከትም. ቁጥር ከቀረበ፣ መዘግየት በሁለቱም መደበቅ/ማሳየት ላይ ይተገበራል። የነገር መዋቅር ነው `delay: { "show": 500, "hide": 100 }`፡.
`fallbackPlacements`	ሕብረቁምፊ, ድርድር	`['top', 'right', 'bottom', 'left']`	በድርድር (በምርጫ ቅደም ተከተል) የተቀመጡ ቦታዎችን ዝርዝር በማቅረብ የኋላ ኋላ ምደባዎችን ይግለጹ። ለበለጠ መረጃ የፖፐር ባህሪ ሰነዶችን ይመልከቱ ።
`html`	ቡሊያን	`false`	ኤችቲኤምኤል በፖፖቨር ውስጥ ፍቀድ። እውነት ከሆነ፣ በፖፖቨር ውስጥ ያሉ የኤችቲኤምኤል መለያዎች `title`በፖፖቨር ውስጥ ይሰጣሉ። ውሸት ከሆነ `innerText`ንብረቱ ወደ DOM ይዘት ለማስገባት ስራ ላይ ይውላል። ስለ XSS ጥቃቶች የሚጨነቁ ከሆነ ጽሑፍ ይጠቀሙ።
`offset`	ቁጥር, ሕብረቁምፊ, ተግባር	`[0, 0]`	ከዒላማው አንጻር የፖፖቨር ማካካሻ። `data-bs-offset="10,20"`በመረጃ ባህሪያት ውስጥ ሕብረቁምፊን በነጠላ ሰረዝ የተለያዩ እሴቶች ማለፍ ይችላሉ አንድ ተግባር ማካካሻውን ለመወሰን ጥቅም ላይ በሚውልበት ጊዜ እንደ መጀመሪያው መከራከሪያ ፖፐር አቀማመጥ, ማጣቀሻ እና ፖፐር rects ከያዘ ነገር ጋር ይባላል. ቀስቃሽ ኤለመንት DOM ኖድ እንደ ሁለተኛው ነጋሪ እሴት ተላልፏል። ተግባሩ ከሁለት ቁጥሮች ጋር ድርድር መመለስ አለበት: መንሸራተት , ርቀት . ለበለጠ መረጃ የፖፐር ማካካሻ ሰነዶችን ይመልከቱ ።
`placement`	ሕብረቁምፊ, ተግባር	`'top'`	ፖፖውን እንዴት እንደሚቀመጥ፡- አውቶማቲክ፣ ላይኛ፣ ታች፣ ግራ፣ ቀኝ። ሲገለጽ `auto`፣ ብቅ ባይን በተለዋዋጭ መንገድ አቅጣጫ ያስቀምጣል። አንድ ተግባር ቦታውን ለመወሰን ጥቅም ላይ በሚውልበት ጊዜ በፖፖቨር DOM ኖድ እንደ መጀመሪያው ክርክር እና ቀስቃሽ ኤለመንት DOM ኖድ እንደ ሁለተኛው ይባላል። `this`አውድ ወደ ብቅ ባይነት ተቀናብሯል ።
`popperConfig`	ባዶ ፣ ዕቃ ፣ ተግባር	`null`	የ Bootstrapን ነባሪ የፖፕ አወቃቀሩን ለመቀየር የፖፐርን አወቃቀር ይመልከቱ ። አንድ ተግባር የፖፐር ውቅረትን ለመፍጠር ጥቅም ላይ ሲውል የቡትስትራፕ ነባሪ የፖፐር ውቅረት ካለው ዕቃ ጋር ይጠራል። ነባሪውን ከራስዎ ውቅር ጋር እንዲጠቀሙ እና እንዲያዋህዱ ያግዝዎታል። ተግባሩ ለፖፐር የውቅር ነገር መመለስ አለበት።
`sanitize`	ቡሊያን	`true`	ንጽህናን አንቃ ወይም አሰናክል። ከነቃ `'template'`እና አማራጮች ይጸዳሉ `'content'`።`'title'`
`sanitizeFn`	ባዶ ፣ ተግባር	`null`	እዚህ የራስዎን የንፅህና አገልግሎት መስጠት ይችላሉ. የንፅህና አጠባበቅን ለማከናወን የተለየ ቤተ-መጽሐፍት ለመጠቀም ከመረጡ ይህ ጠቃሚ ሊሆን ይችላል።
`selector`	ሕብረቁምፊ፣ ሐሰት	`false`	መራጭ ከተሰጠ፣ ብቅ ያሉ ነገሮች ለተገለጹት ኢላማዎች ይላካሉ። በተግባር፣ ይህ በተለዋዋጭ ለተጨመሩ DOM ኤለመንቶች ( `jQuery.on`ድጋፍ) ፖፖቨርን ለመተግበርም ያገለግላል። ይህንን እትም እና መረጃ ሰጭ ምሳሌ ይመልከቱ ።
`template`	ሕብረቁምፊ	`'<div class="popover" role="popover"><div class="popover-arrow"></div><div class="popover-inner"></div></div>'`	ብቅ-ባይ ሲፈጥሩ ለመጠቀም HTML መሰረት ያድርጉ። ፖፖቨርስ `title`ወደ ውስጥ ይገባል `.popover-inner`. `.popover-arrow`የፖፖቨር ቀስት ይሆናል። በጣም ውጫዊው የመጠቅለያ ክፍል `.popover`ክፍሉ እና ሊኖረው ይገባል `role="popover"`.
`title`	ሕብረቁምፊ፣ አካል፣ ተግባር	`''`	ባህሪው ከሌለ ነባሪ የርዕስ ዋጋ `title`። አንድ ተግባር ከተሰጠ `this`ፖፑቨር ከተገጠመለት ንጥረ ነገር ጋር በማጣቀሻው ይጠራል.
`trigger`	ሕብረቁምፊ	`'hover focus'`	ብቅ ባይ እንዴት እንደሚቀሰቀስ፡ ጠቅ ያድርጉ፣ ማንዣበብ፣ ትኩረት፣ መመሪያ። ብዙ ቀስቅሴዎችን ማለፍ ይችላሉ; ከቦታ ጋር ይለያዩዋቸው. ብቅ-ባይ በ , እና ዘዴዎች `'manual'`በፕሮግራም እንደሚቀሰቀስ ያመለክታል ; ይህ ዋጋ ከሌላ ቀስቅሴ ጋር ሊጣመር አይችልም. በራሱ በቁልፍ ሰሌዳው ሊነሳ የማይችል ብቅ-ባይ (popover) ያስከትላል እና ጥቅም ላይ መዋል ያለበት ለቁልፍ ሰሌዳ ተጠቃሚዎች ተመሳሳይ መረጃ ለማስተላለፍ አማራጭ ዘዴዎች ካሉ ብቻ ነው።`.popover('show').popover('hide').popover('toggle')'hover'`

ለግለሰብ ብቅ-ባዮች የውሂብ ባህሪዎች

ከላይ እንደተገለፀው ለግለሰብ ብቅ-ባይ አማራጮች በአማራጭ የውሂብ ባህሪያትን በመጠቀም ሊገለጹ ይችላሉ።

ተግባርን በመጠቀም`popperConfig`

const popover = new bootstrap.Popover(element, {
  popperConfig(defaultBsPopperConfig) {
    // const newPopperConfig = {...}
    // use defaultBsPopperConfig if needed...
    // return newPopperConfig
  }
})

ዘዴዎች

ያልተመሳሰሉ ዘዴዎች እና ሽግግሮች

ሁሉም የኤፒአይ ዘዴዎች ያልተመሳሰሉ ናቸው እና ሽግግር ይጀምራሉ ። ሽግግሩ እንደተጀመረ ግን ከማለቁ በፊት ወደ ደዋዩ ይመለሳሉ ። በተጨማሪም, በመሸጋገሪያ አካል ላይ የሚደረግ ዘዴ ጥሪ ችላ ይባላል .

ለበለጠ መረጃ የእኛን ጃቫስክሪፕት ሰነድ ይመልከቱ ።

ዘዴ	መግለጫ
`disable`	የአንድ ንጥረ ነገር ብቅ-ባይ የመታየት ችሎታን ያስወግዳል። ብቅ-ባይ መታየት የሚቻለው እንደገና ከነቃ ብቻ ነው።
`dispose`	የአንድን ንጥረ ነገር ብቅ-ባይ ይደብቃል እና ያጠፋል (በDOM ኤለመንት ላይ የተከማቸ ውሂብን ያስወግዳል)። ውክልና የሚጠቀሙ ፖፖቨር (አማራጩን በመጠቀም የተፈጠሩ ) `selector`በተወለዱ ቀስቃሽ አካላት ላይ በተናጠል ሊጠፉ አይችሉም።
`enable`	የአንድ ንጥረ ነገር ብቅ-ባይ የመታየት ችሎታን ይሰጣል። ፖፖቨር በነባሪነት ነቅቷል።
`getInstance`	ከDOM ኤለመንት ጋር የተገናኘውን ብቅ-ባይ ምሳሌ እንድታገኝ የሚያስችል የማይንቀሳቀስ ዘዴ ።
`getOrCreateInstance`	ከDOM ኤለመንት ጋር የተገናኘውን ብቅ-ባይ ምሳሌ እንድታገኝ ወይም ካልተጀመረ አዲስ ለመፍጠር የሚያስችል የማይንቀሳቀስ ዘዴ።
`hide`	የአንድን ንጥረ ነገር ብቅ-ባይ ይደብቃል። ብቅ-ባይ ከመደበቅ በፊት (ማለትም ክስተቱ ከመፈጠሩ በፊት) ወደ ደዋዩ ይመለሳል ። `hidden.bs.popover`ይህ እንደ “በእጅ” የፖፖውን ቀስቅሴ ይቆጠራል።
`setContent`	ከተነሳ በኋላ ብቅ-ባይ ይዘቱን ለመለወጥ መንገድ ይሰጣል።
`show`	የአንድ ንጥረ ነገር ብቅ-ባይ ያሳያል። ብቅ-ባይ ከመታየቱ በፊት (ማለትም ክስተቱ ከመከሰቱ በፊት) ወደ ደዋዩ ይመለሳል ። `shown.bs.popover`ይህ እንደ “በእጅ” የፖፖውን ቀስቅሴ ይቆጠራል። ርዕሳቸው እና ይዘታቸው ዜሮ ርዝመት ያላቸው ፖፖቨር በጭራሽ አይታዩም።
`toggle`	የአንድን ንጥረ ነገር ብቅ-ባይ ይቀያይራል። ብቅ-ባይ ከመታየቱ ወይም ከመደበቁ በፊት (ማለትም ክስተቱ ከመከሰቱ በፊት) ወደ ደዋዩ ይመለሳል። ይህ እንደ “በእጅ” የፖፖውን ቀስቅሴ ይቆጠራል።`shown.bs.popoverhidden.bs.popover`
`toggleEnabled`	የአንድ ንጥረ ነገር ብቅ-ባይ የመታየት ወይም የመደበቅ ችሎታን ይቀያይራል።
`update`	የአንድ ንጥረ ነገር ብቅ-ባይ ቦታን ያዘምናል።

// getOrCreateInstance example
const popover = bootstrap.Popover.getOrCreateInstance('#example') // Returns a Bootstrap popover instance

// setContent example
myPopover.setContent({
  '.popover-header': 'another title',
  '.popover-body': 'another content'
})

ዘዴው ክርክርን setContentይቀበላል ፣ እያንዳንዱ የንብረት ቁልፍ በፖፖቨር አብነት ውስጥ objectትክክለኛ መራጭ ሲሆን እያንዳንዱ ተዛማጅ ንብረት-እሴት ሊሆን ይችላል | | | stringstringelementfunctionnull

ክስተቶች

ክስተት	መግለጫ
`hide.bs.popover`	`hide`የምሳሌው ዘዴ ሲጠራ ይህ ክስተት ወዲያውኑ ይቃጠላል .
`hidden.bs.popover`	ይህ ክስተት የሚቀጣጠለው ብቅ-ባይ ከተጠቃሚው ተደብቆ ሲያልቅ ነው (የ CSS ሽግግሮች እስኪጠናቀቁ ድረስ ይጠብቃል)።
`inserted.bs.popover`	`show.bs.popover`የፖፖቨር አብነት ወደ DOM ከተጨመረ ይህ ክስተት ከክስተቱ በኋላ ተቃጥሏል።
`show.bs.popover`	`show`የምሳሌው ዘዴ ሲጠራ ይህ ክስተት ወዲያውኑ ይቃጠላል .
`shown.bs.popover`	ይህ ክስተት የሚቀጣጠለው ብቅ-ባይ ለተጠቃሚው እንዲታይ ሲደረግ ነው (የ CSS ሽግግሮች እስኪጠናቀቁ ድረስ ይጠብቃል)።

const myPopoverTrigger = document.getElementById('myPopover')
myPopoverTrigger.addEventListener('hidden.bs.popover', () => {
  // do something...
})

ፖፖቨርስ

አጠቃላይ እይታ

ምሳሌዎች

ብቅ-ባዮችን አንቃ

የቀጥታ ማሳያ

አራት አቅጣጫዎች

ብጁcontainer

ብጁ ፖፖቨርስ

በሚቀጥለው ጠቅታ አሰናብት

ለማሰናበት-ቀጣይ-ጠቅታ ልዩ ምልክት ማድረጊያ ያስፈልጋል

የተሰናከሉ አባሎች

CSS

ተለዋዋጮች

Sass ተለዋዋጮች

አጠቃቀም

ፖፖቨር ለቁልፍ ሰሌዳ እና አጋዥ ቴክኖሎጂ ተጠቃሚዎች እንዲሰራ ማድረግ

አማራጮች

ለግለሰብ ብቅ-ባዮች የውሂብ ባህሪዎች

ተግባርን በመጠቀምpopperConfig

ዘዴዎች

ያልተመሳሰሉ ዘዴዎች እና ሽግግሮች

ክስተቶች

ብጁ`container`

ተግባርን በመጠቀም`popperConfig`