Sha256: 716279c96bc727e0f62c592ace3018152f41939e921f7cbddb99c7739c20f171
Contents?: true
Size: 1.52 KB
Versions: 4
Compression:
Stored size: 1.52 KB
Contents
<%= pb_rails("button", props: { text: "Short Multiline", variant: "secondary", data: { toast: "#toast-top-center-multi-short" } }) %>
<%= pb_rails("fixed_confirmation_toast", props: {
classname: "toast-to-hide",
closeable: true,
id: "toast-top-center-multi-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: { toast: "#toast-top-center-multi-long" } }) %>
<%= pb_rails("fixed_confirmation_toast", props: {
classname: "toast-to-hide",
closeable: true,
id: "toast-top-center-multi-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 alltoasts = document.queryselectorall(".toast-to-hide")
const allbuttons = document.queryselectorall("button[data-toast]")
const hidealltoasts = () => {
alltoasts.foreach((toast) => {
toast.style.display = "none"
})
}
hidealltoasts()
allbuttons.foreach((button) => {
button.onclick = () => {
hidealltoasts()
let toast = document.queryselector(button.getattribute("data-toast"))
if (toast) {
toast.style.display = "flex"
}
}
})
</script>
Version data entries
4 entries across 4 versions & 2 rubygems