Sha256: e28a4c932991510736893c88fad2ed292517143e06289c69d25fb87824ee5d24
Contents?: true
Size: 1.59 KB
Versions: 825
Compression:
Stored size: 1.59 KB
Contents
<%= pb_rails("button", props: { text: "Short Multiline", variant: "secondary", data: { multitoast: "#toast-short" } }) %>
<%= pb_rails("fixed_confirmation_toast", props: {
classname: "multitoast-to-hide",
closeable: true,
id: "toast-short",
multi_line: true,
text: "Multi-line is used when the given text will not fit on one line.",
status: "tip",
vertical: "top",
horizontal: "center"
}) %>
<%= pb_rails("button", props: { text: "Long Multiline", variant: "secondary", data: { multitoast: "#toast-long" } }) %>
<%= pb_rails("fixed_confirmation_toast", props: {
classname: "multitoast-to-hide",
closeable: true,
id: "toast-long",
multi_line: true,
text: "Multi-line is used when the given text will not fit on one line. Using Multi Line allows the height of the confirmation toast to grow. Simply resize the screen to see the fixed confirmation toast wrap the text.",
status: "tip",
vertical: "top",
horizontal: "center"
}) %>
<script type="text/javascript">
const multitoasts = document.querySelectorAll(".multitoast-to-hide")
const multibuttons = document.querySelectorAll("button[data-multitoast]")
const hideMultiToasts = () => {
multitoasts.forEach((toast) => {
toast.style.display = "none"
})
}
multibuttons.forEach((button) => {
button.onclick = () => {
hideMultiToasts()
let toast = document.querySelector(button.getAttribute("data-multitoast"))
if (toast) {
toast.style.display = "flex"
}
}
})
</script>
<!-- hiding toast on page load -->
<style>
#toast-long, #toast-short {
display: none;
}
</style>
Version data entries
825 entries across 825 versions & 2 rubygems