Source

ቶስትስ

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

ቶስት በሞባይል እና በዴስክቶፕ ኦፕሬቲንግ ሲስተሞች ታዋቂ የሆኑትን የግፋ ማሳወቂያዎችን ለመኮረጅ የተነደፉ ቀላል ክብደት ማሳወቂያዎች ናቸው። እነሱ የተገነቡት በ 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>

አሳላፊ

ቶስት እንዲሁ ትንሽ ግልፅ ነው ፣ ስለሆነም ሊታዩ በሚችሉት ላይ ይደባለቃሉ። የCSS ንብረትን ለሚደግፉ አሳሾች backdrop-filter፣ በቶስት ስር ያሉትን ንጥረ ነገሮች ለማደብዘዝም እንሞክራለን።

<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="min-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>

የጃቫስክሪፕት ባህሪ

አጠቃቀም

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

$('.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...
})