From 1d9579e3a9bb0d39a3e335d26c588f7407327297 Mon Sep 17 00:00:00 2001 From: igor_przybysz Date: Fri, 3 Feb 2023 16:23:26 +0100 Subject: [PATCH 1/3] Alert - add API tab --- .../docs/standard/components/alerts/a-ss.html | 8 + .../docs/standard/components/alerts/a.html | 649 ++++++++++++++++++ 2 files changed, 657 insertions(+) create mode 100644 site/content/docs/standard/components/alerts/a-ss.html create mode 100644 site/content/docs/standard/components/alerts/a.html 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..834e4c39f --- /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-example4" >}} + + + +
    +
    +
    From 105f6aa42570b5b4e0a82d11b57b13e665ff1a5b Mon Sep 17 00:00:00 2001 From: igor_przybysz Date: Mon, 6 Feb 2023 18:04:28 +0100 Subject: [PATCH 2/3] Make corrections --- site/content/docs/standard/components/alerts/a.html | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/site/content/docs/standard/components/alerts/a.html b/site/content/docs/standard/components/alerts/a.html index 834e4c39f..b108988f4 100644 --- a/site/content/docs/standard/components/alerts/a.html +++ b/site/content/docs/standard/components/alerts/a.html @@ -107,9 +107,9 @@

    Via JavaScript

    {{< twsnippet/code active=true lang="js" >}} te.Alert.getInstance(document.getElementById('myAlert')).update({ - position: ..., - width: ..., - }); + position: ..., + width: ..., + }); {{< /twsnippet/code >}} {{< /twsnippet/wrapper >}} From 0e56046c73efcdeb658c10c7defdbe3726e1e6f9 Mon Sep 17 00:00:00 2001 From: igor_przybysz Date: Mon, 6 Feb 2023 18:17:25 +0100 Subject: [PATCH 3/3] Make corrections #2 --- site/content/docs/standard/components/alerts/a.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/site/content/docs/standard/components/alerts/a.html b/site/content/docs/standard/components/alerts/a.html index b108988f4..f7742776c 100644 --- a/site/content/docs/standard/components/alerts/a.html +++ b/site/content/docs/standard/components/alerts/a.html @@ -628,8 +628,8 @@

    Via JavaScript

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