Sha256: e28a4c932991510736893c88fad2ed292517143e06289c69d25fb87824ee5d24
Contents?: true
Size: 1.59 KB
Versions: 1098
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
1,098 entries across 1,098 versions & 2 rubygems