in English

ቶስትስ

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

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

አጠቃላይ እይታ

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

  • የእኛን ጃቫ ስክሪፕት ከምንጩ እየገነቡ ከሆነ ያስፈልገዋልutil.js ።
  • ቶስት በአፈጻጸም ምክንያቶች መርጠው የገቡ ናቸው፣ ስለዚህ እርስዎ እራስዎ ማስጀመር አለብዎት ።
  • እባክዎን ቶስትን የማስቀመጥ ሃላፊነት እርስዎ እንደሆኑ ልብ ይበሉ።
  • ካልገለጹ ቶስትስ በራስ-ሰር ይደብቃል 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 mr-2" alt="...">
    <strong class="mr-auto">Bootstrap</strong>
    <small>11 mins ago</small>
    <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </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 right-0 p-3" style="z-index: 5; right: 0; bottom: 0;">
  <div id="liveToast" class="toast hide" role="alert" aria-live="assertive" aria-atomic="true" data-delay="2000">
    <div class="toast-header">
      <img src="..." class="rounded mr-2" alt="...">
      <strong class="mr-auto">Bootstrap</strong>
      <small>11 mins ago</small>
      <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
        <span aria-hidden="true">&times;</span>
      </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 mr-2" alt="...">
    <strong class="mr-auto">Bootstrap</strong>
    <small class="text-muted">11 mins ago</small>
    <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="toast-body">
    Hello, world! This is a toast message.
  </div>
</div>

መደራረብ

ብዙ ጥብስ ሲኖርዎት፣ በሚነበብ መልኩ በአቀባዊ ለመደርደር ነባሪ እናደርጋለን።

<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-header">
    <img src="..." class="rounded mr-2" alt="...">
    <strong class="mr-auto">Bootstrap</strong>
    <small class="text-muted">just now</small>
    <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </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 mr-2" alt="...">
    <strong class="mr-auto">Bootstrap</strong>
    <small class="text-muted">2 seconds ago</small>
    <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="toast-body">
    Heads up, toasts will stack automatically
  </div>
</div>

አቀማመጥ

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

ቡት ማሰሪያ ከ11 ደቂቃ በፊት
ሰላም ልዑል! ይህ የቶስት መልእክት ነው። 
<div aria-live="polite" aria-atomic="true" style="position: relative; min-height: 200px;">
  <div class="toast" style="position: absolute; top: 0; right: 0;">
    <div class="toast-header">
      <img src="..." class="rounded mr-2" alt="...">
      <strong class="mr-auto">Bootstrap</strong>
      <small>11 mins ago</small>
      <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
        <span aria-hidden="true">&times;</span>
      </button>
    </div>
    <div class="toast-body">
      Hello, world! This is a toast message.
    </div>
  </div>
</div>

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

<div aria-live="polite" aria-atomic="true" style="position: relative; min-height: 200px;">
  <!-- Position it -->
  <div style="position: absolute; top: 0; right: 0;">

    <!-- Then put toasts within -->
    <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
      <div class="toast-header">
        <img src="..." class="rounded mr-2" alt="...">
        <strong class="mr-auto">Bootstrap</strong>
        <small class="text-muted">just now</small>
        <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </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 mr-2" alt="...">
        <strong class="mr-auto">Bootstrap</strong>
        <small class="text-muted">2 seconds ago</small>
        <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </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" style="height: 200px;">

  <!-- Then put toasts within -->
  <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="toast-header">
      <img src="..." class="rounded mr-2" alt="...">
      <strong class="mr-auto">Bootstrap</strong>
      <small>11 mins ago</small>
      <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
        <span aria-hidden="true">&times;</span>
      </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-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-autohide="false">
  <div class="toast-header">
    <img src="..." class="rounded mr-2" alt="...">
    <strong class="mr-auto">Bootstrap</strong>
    <small>11 mins ago</small>
    <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="toast-body">
    Hello, world! This is a toast message.
  </div>
</div>

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

የጃቫስክሪፕት ባህሪ

አጠቃቀም

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

$('.toast').toast(option)

አማራጮች

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

ስም ዓይነት ነባሪ መግለጫ
አኒሜሽን ቡሊያን እውነት ነው። የ CSS ደብዝዝ ሽግግር ወደ ቶስት ተግብር
ራስ-ደብቅ ቡሊያን እውነት ነው። ቶስትን በራስ-ሰር ደብቅ
መዘግየት ቁጥር 500 ቶስትን መደበቅ ዘግይቷል (ሚሴ)

ዘዴዎች

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

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

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

$().toast(options)

የቶስት ተቆጣጣሪን ከአንድ ንጥረ ነገር ስብስብ ጋር ያያይዘዋል።

.toast('show')

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

$('#element').toast('show')

.toast('hide')

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

$('#element').toast('hide')

.toast('dispose')

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

$('#element').toast('dispose')

ክስተቶች

የክስተት አይነት መግለጫ
አሳይ.bs.ቶስት showየምሳሌው ዘዴ ሲጠራ ይህ ክስተት ወዲያውኑ ይቃጠላል .
ታየ.bs.toast ይህ ክስተት የሚቀጣጠለው ቶስት ለተጠቃሚው እንዲታይ ሲደረግ ነው።
ደብቅ.bs.toast hideየምሳሌው ዘዴ ሲጠራ ይህ ክስተት ወዲያውኑ ይቃጠላል .
የተደበቀ.bs.toast ይህ ክስተት የሚቀጣጠለው ቶስት ከተጠቃሚው ተደብቆ ሲጠናቀቅ ነው። 
$('#myToast').on('hidden.bs.toast', function () {
  // do something...
})