Skip to content
Alebat

SnackBar

Props

const props = defineProps({
  showSnackbar: { type: Boolean, default: true },
  text: { type: String, required: true },
  color: { type: Object, required: true },
  activeButton: { type: Boolean, required: true },
  timeout: { type: String, required: true, default: "3000" },
});

Props description

  • showSnackbar: Display the Snackbar
  • text: Informative text for the user
  • color: Background color of the snackbar
  • activeButton: true = show the support button - false = hide it

  • timeout: Time in ms the snackbar lasts before closing (-1 for indefinite)

How to use?

You have to create a const with the name showModal and its value should be false

const msgError = ref(false)
<div v-if="msgError">
    <SnackBar
      :color="redColor"
      :text="'Message'"
      :showSnackbar="true"
      :activeButton="true"
      timeout="8000"
    />
  </div>

How to activate?

With the v-if, it checks whether or not to display the snackbar. The change from true to false varies depending on the development.