Stylebook

info autohide (2500ms)

Byl jste přihlášen(a).

        {% include "@Components/sections/flash-message-modal/flash-message-modal.twig" with {
  props : {
    message_type: "info",
    message: "Byl jste přihlášen(a).",
    autohide: 2500,
  }
} %}

          
<div class="flash-message-modal --info" style="bottom: 10px;right: 10px;" data-autohide="2500">
  <div class="flash-message-close-btn"></div>
    <div class="flash-message-text">Byl jste přihlášen(a).</div>
</div>

success

Operace proběhla správně.

        {% include "@Components/sections/flash-message-modal/flash-message-modal.twig" with {
  props : {
    message_type: "success",
    message: "Operace proběhla správně."
  }
} %}

          
<div class="flash-message-modal --success" style="bottom: 10px;right: 10px;" data-autohide="">
  <div class="flash-message-close-btn"></div>
    <div class="flash-message-text">Operace proběhla správně.</div>
</div>

warning

Nesprávné údaje.

        {% include "@Components/sections/flash-message-modal/flash-message-modal.twig" with {
  props : {
    message_type: "warning",
    message: "Nesprávné údaje."
  }
} %}

          
<div class="flash-message-modal --warning" style="bottom: 10px;right: 10px;" data-autohide="">
  <div class="flash-message-close-btn"></div>
    <div class="flash-message-text">Nesprávné údaje.</div>
</div>

info

Byl jste přihlášen(a).

        {% include "@Components/sections/flash-message-modal/flash-message-modal.twig" with {
  props : {
    message_type: "info",
    message: "Byl jste přihlášen(a)."
  }
} %}

          
<div class="flash-message-modal --info" style="bottom: 10px;right: 10px;" data-autohide="">
  <div class="flash-message-close-btn"></div>
    <div class="flash-message-text">Byl jste přihlášen(a).</div>
</div>

danger

Došlo k chybě

        {% include "@Components/sections/flash-message-modal/flash-message-modal.twig" with {
  props : {
    message_type: "danger",
    message: "Došlo k chybě"
  }
} %}

          
<div class="flash-message-modal --danger" style="bottom: 10px;right: 10px;" data-autohide="">
  <div class="flash-message-close-btn"></div>
    <div class="flash-message-text">Došlo k chybě</div>
</div>

javascript (ajax usage) flashMessageNotify

        <script>
    document.addEventListener("DOMContentLoaded", () => {
        flashMessageNotify({
            message_type: "warning",
            message: "flashMessageNotify example",
            autohide: 5000
        })
    });
</script>

          <script>
    document.addEventListener("DOMContentLoaded", () => {
        flashMessageNotify({
            message_type: "warning",
            message: "flashMessageNotify example",
            autohide: 5000
        })
    });
</script>

Schema

    {
  "props": {
    "message_type": {
      "type": "string",
      "description": "Type of message (success,warning,danger,info)"
    },
    "message":{
      "type": "string",
      "description": "Text"
    },
    "autohide": {
      "type": "boolean|number",
      "description": "true | false | number ms"
    }
  }
}