diff --git a/site/content/docs/standard/components/alerts/a-ss.html b/site/content/docs/standard/components/alerts/a-ss.html new file mode 100644 index 000000000..cf05eb49c --- /dev/null +++ b/site/content/docs/standard/components/alerts/a-ss.html @@ -0,0 +1,8 @@ +--- +--- + +
  • Usage
    • +
  • Options
    • +
  • Classes
    • +
  • Methods
    • +
  • Events
    • diff --git a/site/content/docs/standard/components/alerts/a.html b/site/content/docs/standard/components/alerts/a.html new file mode 100644 index 000000000..f7742776c --- /dev/null +++ b/site/content/docs/standard/components/alerts/a.html @@ -0,0 +1,649 @@ +--- +--- + + +
    + +
    + +

    + Usage +

    + +

    Via data attributes

    + + + {{< twsnippet/no-demo id="api-example1" >}} + + + +
    Dismiss
    + +

    + Dismissal can be achieved with data attributes on a + button within the alert as demonstrated below: +

    + + + {{< twsnippet/no-demo id="api-example2" >}} + + + +

    + or on a button outside the alert using the data-te-target as + demonstrated below: +

    + + + {{< twsnippet/no-demo id="api-example3" >}} + + + +

    Via JavaScript

    + + + {{< twsnippet/no-demo id="api-example4" >}} + + +
    + + +
    + + +
    + +

    + Options +

    + +

    + Options can be passed via data attributes or JavaScript. For data + attributes, append the option name to data-te-, as in + data-te-delay="500". +

    + +
    +
    +
    +
    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    + Name + + Type + + Default + Description
    + position + + String / null + + null + + Sets a position for the alert - top-left | top-right | + bottom-left | bottom-right. +
    + delay + + Number + + 1000 + + Sets the length of animation delay. +
    + autohide + + Boolean + + false + + Alerts will hide automatically or not. +
    + width + + String + + 'unset' + + Sets width of alert. +
    + container + + String + + - + + Defines id/class of the parent element. +
    + offset + + Number + + 10 + + Defines offset of the element. +
    + stacking + + Boolean + + false + + Enables stacking alerts. +
    + appendToBody + + Boolean + + false + + Appends element to the end of the body. +
    + color + + String / null + + null + + Allows to set the color of an alert - primary | secondary | + secondary | danger | warning | info | light | dark. +
    +
    +
    +
    +
    +
    + + +
    + + +
    + +

    + Classes +

    + +

    + Custom classes can be passed via data attributes or JavaScript. For data + attributes, append the class name to + data-te-class, as in + data-te-class-fadeIn="animate-[fade-in_0.5s_both]". +

    + +
    +
    +
    +
    + + + + + + + + + + + + + + + + + + + + +
    + Name + + Default + Description
    + fadeIn + + animate-[fade-in_0.3s_both] p-[auto] + motion-reduce:transition-none motion-reduce:animate-none + + Sets fadeIn animation styles. +
    + fadeOut + + animate-[fade-out_0.3s_both] p-[auto] + motion-reduce:transition-none motion-reduce:animate-none + + Sets fadeOut animation styles. +
    +
    +
    +
    +
    +
    + + +
    + + +
    + +

    + Methods +

    + +
    +
    +
    +
    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    + Method + + Description + Example
    + show + + Manually shows an alert. + + myAlert.show() +
    + hide + + Manually hides an alert. + + myAlert.hide() +
    + close + + Manually hides an alert (deletes it from DOM). + + myAlert.close() +
    + dispose + + Removes an te.Alert instance + + myAlert.dispose() +
    + getInstance + + Static method which allows you to get the alert instance + associated to a DOM element. + + Alert.getInstance() +
    + getOrCreateInstance + + Static method which returns an alert instance associated to + a DOM element or create a new one in case it wasn't + initialized. + + Alert.getOrCreateInstance() +
    + update + + Updates options of an te.Alert instance. + + myAlert.update({position: 'top-right'}) +
    +
    +
    +
    +
    + + + {{< twsnippet/no-demo id="api-example5" >}} + + + + +
    + + +
    + +

    + Events +

    + +
    +
    +
    +
    + + + + + + + + + + + + + + + + + +
    + Event type + Description
    + close.te.alert + + Fires immediately when the close instance method is + called. +
    + closed.te.alert + + Fired when the alert has been closed and CSS transitions + have completed. +
    +
    +
    +
    +
    + + + {{< twsnippet/no-demo id="api-example6" >}} + + + +
    +
    +