ቶስትስ

በቶስት፣ ቀላል ክብደት ያለው እና በቀላሉ ሊበጅ በሚችል የማንቂያ መልእክት ለጎብኚዎችዎ ማስታወቂያዎችን ይግፉ።

በዚህ ገጽ ላይ

ቶስት በሞባይል እና በዴስክቶፕ ኦፕሬቲንግ ሲስተሞች ታዋቂ የሆኑትን የግፋ ማሳወቂያዎችን ለመኮረጅ የተነደፉ ቀላል ክብደት ማሳወቂያዎች ናቸው። እነሱ የተገነቡት በ flexbox ነው፣ ስለዚህ በቀላሉ ለመደርደር እና ለመደርደር ቀላል ናቸው።

አጠቃላይ እይታ

የቶስት ፕለጊን ሲጠቀሙ ማወቅ ያለብዎት ነገሮች፡-

ቶስት በአፈጻጸም ምክንያቶች መርጠው የገቡ ናቸው፣ ስለዚህ እርስዎ እራስዎ ማስጀመር አለብዎት ።
ካልገለጹ ቶስትስ በራስ-ሰር ይደብቃል autohide: false።

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

ምሳሌዎች

መሰረታዊ

ሊወጡ የሚችሉ እና ሊገመቱ የሚችሉ ቶስትዎችን ለማበረታታት፣ ራስጌ እና አካልን እንመክራለን። የቶስት ራስጌዎች ይጠቀማሉ display: flex፣ ይህም በቀላሉ የይዘት አሰላለፍ በመፍቀድ ለኅዳጎቻችን እና ለflexbox መገልገያዎች ምስጋና ይግባቸው።

ቶስት እርስዎ የሚፈልጉትን ያህል ተለዋዋጭ ናቸው እና በጣም ትንሽ አስፈላጊ ምልክት አላቸው። ቢያንስ፣ የእርስዎን "የተጠበሰ" ይዘት እንዲይዝ እና የስንብት ቁልፍን በብርቱ ለማበረታታት አንድ አካል እንፈልጋለን።

ሰላም ልዑል! ይህ የቶስት መልእክት ነው።

<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-header">
    <img src="..." class="rounded me-2" alt="...">
    <strong class="me-auto">Bootstrap</strong>
    <small>11 mins ago</small>
    <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
  </div>
  <div class="toast-body">
    Hello, world! This is a toast message.
  </div>
</div>

ቀጥታ

በነባሪ የተደበቀውን ቶስት (በታችኛው ቀኝ ጥግ ላይ ካለው መገልገያዎቻችን ጋር የተቀመጠ) ለማሳየት ከዚህ በታች ያለውን ቁልፍ ጠቅ ያድርጉ .hide።

<button type="button" class="btn btn-primary" id="liveToastBtn">Show live toast</button>

<div class="position-fixed bottom-0 end-0 p-3" style="z-index: 11">
  <div id="liveToast" class="toast hide" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="toast-header">
      <img src="..." class="rounded me-2" alt="...">
      <strong class="me-auto">Bootstrap</strong>
      <small>11 mins ago</small>
      <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
    </div>
    <div class="toast-body">
      Hello, world! This is a toast message.
    </div>
  </div>
</div>

አሳላፊ

ቶስትስ ከነሱ በታች ካለው ጋር ለመዋሃድ በትንሹ ግልጥ ነው።

ሰላም ልዑል! ይህ የቶስት መልእክት ነው።

<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-header">
    <img src="..." class="rounded me-2" alt="...">
    <strong class="me-auto">Bootstrap</strong>
    <small class="text-muted">11 mins ago</small>
    <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
  </div>
  <div class="toast-body">
    Hello, world! This is a toast message.
  </div>
</div>

መደራረብ

ቶስት በቶስት ኮንቴይነር ውስጥ በመጠቅለል መቆለል ይችላሉ፣ ይህም በአቀባዊ አንዳንድ ክፍተቶችን ይጨምራል።

ተመልከት? ልክ እንደዚህ.

ወደላይ፣ ቶስት በራስ-ሰር ይቆለላሉ።

<div class="toast-container">
  <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="toast-header">
      <img src="..." class="rounded me-2" alt="...">
      <strong class="me-auto">Bootstrap</strong>
      <small class="text-muted">just now</small>
      <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
    </div>
    <div class="toast-body">
      See? Just like this.
    </div>
  </div>

  <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="toast-header">
      <img src="..." class="rounded me-2" alt="...">
      <strong class="me-auto">Bootstrap</strong>
      <small class="text-muted">2 seconds ago</small>
      <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
    </div>
    <div class="toast-body">
      Heads up, toasts will stack automatically
    </div>
  </div>
</div>

ብጁ ይዘት

ንዑስ ክፍሎችን በማስወገድ፣ በመገልገያዎች በማስተካከል ወይም የእራስዎን ምልክት በማከል ቶስትዎን ያብጁ። እዚህ ነባሪውን በማስወገድ .toast-header፣ ብጁ የድብቅ አዶን ከ Bootstrap Icons በማከል እና አንዳንድ የፍሌክስቦክስ መገልገያዎችን በመጠቀም አቀማመጡን በማስተካከል እዚህ ቀለል ያለ ቶስት ፈጥረናል ።

ሰላም ልዑል! ይህ የቶስት መልእክት ነው።

<div class="toast align-items-center" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="d-flex">
    <div class="toast-body">
    Hello, world! This is a toast message.
   </div>
    <button type="button" class="btn-close me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
  </div>
</div>

በአማራጭ፣ ተጨማሪ መቆጣጠሪያዎችን እና ክፍሎችን ወደ ቶስትስ ማከልም ይችላሉ።

ሰላም ልዑል! ይህ የቶስት መልእክት ነው።

<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-body">
    Hello, world! This is a toast message.
    <div class="mt-2 pt-2 border-top">
      <button type="button" class="btn btn-primary btn-sm">Take action</button>
      <button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="toast">Close</button>
    </div>
  </div>
</div>

የቀለም መርሃግብሮች

ከላይ ባለው ምሳሌ ላይ በመገንባት, ከቀለም እና ከጀርባ መገልገያዎቻችን ጋር የተለያዩ የቶስት ቀለም ንድፎችን መፍጠር ይችላሉ . እዚህ ጨምረናል .bg-primaryእና .text-whiteወደ .toast, እና ከዚያ .btn-close-whiteወደ መዝጊያ አዝራራችን ጨምረናል. ጥርት ላለው ጠርዝ ነባሪውን ከ ጋር እናስወግደዋለን .border-0።

ሰላም ልዑል! ይህ የቶስት መልእክት ነው።

<div class="toast align-items-center text-white bg-primary border-0" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="d-flex">
    <div class="toast-body">
      Hello, world! This is a toast message.
    </div>
    <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
  </div>
</div>

አቀማመጥ

ቶስት ከብጁ CSS ጋር እንደፈለጋቸው ያስቀምጡ። የላይኛው ቀኝ ብዙውን ጊዜ ለማሳወቂያዎች ጥቅም ላይ ይውላል, እንደ የላይኛው መካከለኛ. በአንድ ጊዜ አንድ ቶስት ብቻ የሚያሳዩ ከሆነ፣ የአቀማመጥ ስልቶቹን በትክክል በ ላይ ያድርጉት .toast።

ሰላም ልዑል! ይህ የቶስት መልእክት ነው።

<form>
  <div class="mb-3">
    <label for="selectToastPlacement">Toast placement</label>
    <select class="form-select mt-2" id="selectToastPlacement">
      <option value="" selected>Select a position...</option>
      <option value="top-0 start-0">Top left</option>
      <option value="top-0 start-50 translate-middle-x">Top center</option>
      <option value="top-0 end-0">Top right</option>
      <option value="top-50 start-0 translate-middle-y">Middle left</option>
      <option value="top-50 start-50 translate-middle">Middle center</option>
      <option value="top-50 end-0 translate-middle-y">Middle right</option>
      <option value="bottom-0 start-0">Bottom left</option>
      <option value="bottom-0 start-50 translate-middle-x">Bottom center</option>
      <option value="bottom-0 end-0">Bottom right</option>
    </select>
  </div>
</form>
<div aria-live="polite" aria-atomic="true" class="bg-dark position-relative bd-example-toasts">
  <div class="toast-container position-absolute p-3" id="toastPlacement">
    <div class="toast">
      <div class="toast-header">
        <img src="..." class="rounded me-2" alt="...">
        <strong class="me-auto">Bootstrap</strong>
        <small>11 mins ago</small>
      </div>
      <div class="toast-body">
        Hello, world! This is a toast message.
      </div>
    </div>
  </div>
</div>

ተጨማሪ ማሳወቂያዎችን ለሚፈጥሩ ስርዓቶች በቀላሉ መደርደር እንዲችሉ መጠቅለያ ኤለመንት ለመጠቀም ያስቡበት።

ተመልከት? ልክ እንደዚህ.

ወደላይ፣ ቶስት በራስ-ሰር ይቆለላሉ።

<div aria-live="polite" aria-atomic="true" class="position-relative">
  <!-- Position it: -->
  <!-- - `.toast-container` for spacing between toasts -->
  <!-- - `.position-absolute`, `top-0` & `end-0` to position the toasts in the upper right corner -->
  <!-- - `.p-3` to prevent the toasts from sticking to the edge of the container  -->
  <div class="toast-container position-absolute top-0 end-0 p-3">

    <!-- Then put toasts within -->
    <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
      <div class="toast-header">
        <img src="..." class="rounded me-2" alt="...">
        <strong class="me-auto">Bootstrap</strong>
        <small class="text-muted">just now</small>
        <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
      </div>
      <div class="toast-body">
        See? Just like this.
      </div>
    </div>

    <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
      <div class="toast-header">
        <img src="..." class="rounded me-2" alt="...">
        <strong class="me-auto">Bootstrap</strong>
        <small class="text-muted">2 seconds ago</small>
        <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
      </div>
      <div class="toast-body">
        Heads up, toasts will stack automatically
      </div>
    </div>
  </div>
</div>

ጡጦቹን በአግድም እና/ወይም በአቀባዊ ለማስተካከል በFlexbox መገልገያዎች ማስዋብ ይችላሉ።

ሰላም ልዑል! ይህ የቶስት መልእክት ነው።

<!-- Flexbox container for aligning the toasts -->
<div aria-live="polite" aria-atomic="true" class="d-flex justify-content-center align-items-center w-100">

  <!-- Then put toasts within -->
  <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="toast-header">
      <img src="..." class="rounded me-2" alt="...">
      <strong class="me-auto">Bootstrap</strong>
      <small>11 mins ago</small>
      <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
    </div>
    <div class="toast-body">
      Hello, world! This is a toast message.
    </div>
  </div>
</div>

ተደራሽነት

aria-liveቶስት ለጎብኝዎችዎ ወይም ለተጠቃሚዎችዎ ትንሽ መስተጓጎል እንዲሆን የታሰበ ነው፣ ስለዚህ ስክሪን አንባቢ ያላቸውን እና ተመሳሳይ አጋዥ ቴክኖሎጂዎችን ለመርዳት፣ ቶስትዎን በክልል ውስጥ መጠቅለል አለብዎት ። የቀጥታ ክልሎች ለውጦች (እንደ ቶስት ክፍልን መወጋት/ማዘመን) የተጠቃሚውን ትኩረት ማንቀሳቀስ ወይም ተጠቃሚውን ማቋረጥ ሳያስፈልጋቸው በስክሪን አንባቢዎች በራስ-ሰር ይታወቃሉ። በተጨማሪም፣ aria-atomic="true"ሙሉው ቶስት ሁልጊዜ እንደ አንድ (አቶሚክ) አሃድ መታወጁን ያካትቱ፣ ምን እንደተለወጠ ብቻ ከማወጅ ይልቅ (ይህም የጡጦውን ይዘት ከፊል ካዘመኑ ብቻ ወደ ችግር ሊመራ ይችላል፣ ወይም ተመሳሳይ ጥብስ ይዘት ካሳዩ ወደ ችግር ሊመራ ይችላል) ከጊዜ በኋላ). አስፈላጊው መረጃ ለሂደቱ አስፈላጊ ከሆነ ለምሳሌ በቅጽ ውስጥ ያሉ ስህተቶች ዝርዝር, ከዚያም የማንቂያ ክፍሉን ይጠቀሙበቶስት ፋንታ.

ቶስት ከመፈጠሩ ወይም ከመዘመን በፊት የቀጥታ ክልሉ በምልክቱ ውስጥ መገኘት እንዳለበት ልብ ይበሉ ። በተለዋዋጭ ሁለቱንም በተመሳሳይ ጊዜ ካመነጩ እና ወደ ገጹ ካስገባቸው፣ በአጠቃላይ በረዳት ቴክኖሎጂዎች አይታወቁም።

roleእንዲሁም እንደ ይዘቱ እና aria-liveደረጃውን ማስተካከል ያስፈልግዎታል . እንደ ስህተት ያለ አስፈላጊ መልእክት ከሆነ ተጠቀም role="alert" aria-live="assertive"አለበለዚያ role="status" aria-live="polite"ባህሪያትን ተጠቀም።

የሚያሳዩት ይዘት ሲቀየር ተጠቃሚዎች ቶስት ለማንበብ በቂ ጊዜ እንዲኖራቸው ጊዜ delayማብቂያውን ማዘመንዎን ያረጋግጡ።

<div class="toast" role="alert" aria-live="polite" aria-atomic="true" data-bs-delay="10000">
  <div role="alert" aria-live="assertive" aria-atomic="true">...</div>
</div>

ሲጠቀሙ autohide: falseተጠቃሚዎች ቶስትን እንዲያሰናብቱ ለማድረግ የመዝጊያ ቁልፍ ማከል አለብዎት።

ሰላም ልዑል! ይህ የቶስት መልእክት ነው።

<div role="alert" aria-live="assertive" aria-atomic="true" class="toast" data-bs-autohide="false">
  <div class="toast-header">
    <img src="..." class="rounded me-2" alt="...">
    <strong class="me-auto">Bootstrap</strong>
    <small>11 mins ago</small>
    <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
  </div>
  <div class="toast-body">
    Hello, world! This is a toast message.
  </div>
</div>

በቴክኒካል በቶስትዎ ውስጥ ሊተኩሩ የሚችሉ/ተግባራዊ ቁጥጥሮችን (እንደ ተጨማሪ አዝራሮች ወይም ማገናኛዎች) ማከል ቢቻልም፣ ቶስትን በራስ-ሰር ለመደበቅ ይህን ከማድረግ መቆጠብ አለብዎት። ምንም እንኳን ለጡጦው ረጅም delayጊዜ ቢሰጥም የቁልፍ ሰሌዳ እና አጋዥ ቴክኖሎጂ ተጠቃሚዎች እርምጃ ለመውሰድ በጊዜው ቶስት ላይ መድረስ ሊከብዳቸው ይችላል (ቶስት ሲታዩ ትኩረት ስለማያገኙ)። ተጨማሪ ቁጥጥሮች ሊኖሩዎት የሚገባ ከሆነ፣ ቶስት ከ ጋር እንዲጠቀሙ እንመክራለን autohide: false።

ሳስ

ተለዋዋጮች

$toast-max-width:                   350px;
$toast-padding-x:                   .75rem;
$toast-padding-y:                   .5rem;
$toast-font-size:                   .875rem;
$toast-color:                       null;
$toast-background-color:            rgba($white, .85);
$toast-border-width:                1px;
$toast-border-color:                rgba(0, 0, 0, .1);
$toast-border-radius:               $border-radius;
$toast-box-shadow:                  $box-shadow;
$toast-spacing:                     $container-padding-x;

$toast-header-color:                $gray-600;
$toast-header-background-color:     rgba($white, .85);
$toast-header-border-color:         rgba(0, 0, 0, .05);

አጠቃቀም

ቶስትን በጃቫስክሪፕት ያስጀምሩ፡

var toastElList = [].slice.call(document.querySelectorAll('.toast'))
var toastList = toastElList.map(function (toastEl) {
  return new bootstrap.Toast(toastEl, option)
})

አማራጮች

አማራጮች በመረጃ ባህሪያት ወይም በጃቫስክሪፕት ሊተላለፉ ይችላሉ. ለውሂብ ባህሪያት፣ data-bs-እንደ ውስጥ ያለውን የአማራጭ ስም ወደ ላይ ጨምር data-bs-animation=""።

ስም	ዓይነት	ነባሪ	መግለጫ
`animation`	ቡሊያን	`true`	የ CSS ደብዝዝ ሽግግር ወደ ቶስት ተግብር
`autohide`	ቡሊያን	`true`	ቶስትን በራስ-ሰር ደብቅ
`delay`	ቁጥር	`5000`	ቶስትን መደበቅ ዘግይቷል (ሚሴ)

ዘዴዎች

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

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

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

አሳይ

የአንድ ንጥረ ነገር ቶስት ያሳያል። ቶስት በትክክል ከመታየቱ በፊት (ማለትም shown.bs.toastክስተቱ ከመፈጠሩ በፊት) ወደ ደዋዩ ይመለሳል። ይህንን ዘዴ እራስዎ መጥራት አለብዎት፣ ይልቁንም የእርስዎ ቶስት አይታይም።

toast.show()

መደበቅ

የአንድ ንጥረ ነገር ጥብስ ይደብቃል። ቶስት በትክክል ከመደበቅ በፊት (ማለትም hidden.bs.toastክስተቱ ከመፈጠሩ በፊት) ወደ ደዋዩ ይመለሳል። ይህን ዘዴ ካደረጉት እራስዎ መደወል autohideአለብዎት false.

toast.hide()

ማስወገድ

የአንድ ንጥረ ነገር ጥብስ ይደብቃል። የእርስዎ ቶስት በDOM ላይ ይቆያል ነገር ግን ከአሁን በኋላ አይታይም።

toast.dispose()

getInstance

ከDOM ኤለመንት ጋር የተገናኘውን የማሸብለል ስፓይ ምሳሌ እንድታገኝ የሚያስችል የማይንቀሳቀስ ዘዴ

var myToastEl = document.getElementById('myToastEl')
var myToast = bootstrap.Toast.getInstance(myToastEl) // Returns a Bootstrap toast instance

getOrCreateInstance

ከ DOM ኤለመንት ጋር የተገናኘውን የማሸብለል ስፓይ ምሳሌ እንድታገኝ ወይም ካልተጀመረ አዲስ ለመፍጠር የሚያስችል የማይንቀሳቀስ ዘዴ

var myToastEl = document.getElementById('myToastEl')
var myToast = bootstrap.Toast.getOrCreateInstance(myToastEl) // Returns a Bootstrap toast instance

ክስተቶች

የክስተት አይነት	መግለጫ
`show.bs.toast`	`show`የምሳሌው ዘዴ ሲጠራ ይህ ክስተት ወዲያውኑ ይቃጠላል .
`shown.bs.toast`	ይህ ክስተት የሚቀጣጠለው ቶስት ለተጠቃሚው እንዲታይ ሲደረግ ነው።
`hide.bs.toast`	`hide`የምሳሌው ዘዴ ሲጠራ ይህ ክስተት ወዲያውኑ ይቃጠላል .
`hidden.bs.toast`	ይህ ክስተት የሚቀጣጠለው ቶስት ከተጠቃሚው ተደብቆ ሲጠናቀቅ ነው።

var myToastEl = document.getElementById('myToast')
myToastEl.addEventListener('hidden.bs.toast', function () {
  // do something...
})