CSS: callout ​

div[class~="instui-callout"] — Տողային տեղեկատվական ծանուցում՝ կարճ հիշեցման կամ գրառման համար.

✅ Callout-ը օգտագործել երբ՝

  • Պետք է տողում ընդգծեք կարևոր տեղեկություններ կամ հիշեցումներ

  • Հաղորդագրությունը որպես կանոն կարճ է (մի նախադասությունից մինչև կարճ պարբերություն)

  • Ծանուցումը պետք է գրավի ուշադրությունը առանց հիմնական հոսքը ընդհատելու 🚫 Չօգտագործել Callout երբ՝

  • Հաղորդագրությունը պահանջում է փոխգործակցություն կամ մի քանի քայլեր — օգտագործել Modal կամ Alert Dialog

  • Բովանդակությունը էջի հիմնական ուշադրության կենտրոնն է — դրա փոխարեն օգտագործեք Card կամ Hero կառուցվածք

Մուտքականություն ​

  • Համոզվել, որ alert դերակատարը ճիշտ է կիրառված (role="alert" կամ role="status")
  • Օգտագործել սեմանտիկ գունային կոնտրաստ, որը համապատասխանում է WCAG AA ստանդարտներին
  • Մի վստահեք միայն գույնին՝ հաղորդելու համար

Օգտագործում ​

css
@import "@pantoken/plugin-layouts/layouts.css";

Նրբեր (Slots) ​

Նրբասեղան (Slot)Նկարագիր
messageԾանուցման հաղորդագրության բովանդակություն

Մասեր ​

ՄասՆկարագիր
.instui-contentՏեքստային բովանդակության կոնտեյներ.
.instui-iconԲովանդակության ձախ կողմում տեղադրվող ընտրովի պատկերակ.

Պսևդո-էլեմենտներ ​

Պսևդո-էլեմենտՆկարագիր
::before—

Փոփոխական վիճակներ ​

ՎիճակՆկարագիր
:optional—

Ցուցիչներ սպառված ​

TokenՏիպԱրժեք
--instui-color-info-background——
--instui-color-info-border——
--instui-color-info-text——
--instui-radius-medium——
--instui-size-small<length>—
--instui-space-medium——
--instui-space-small——

Ավելին կապված ​