@dpa-id-components/ui-snackbar

UiSnackbar Vue 2.x snackbar component based on the dpa Design Kit

Installation

yarn add @dpa-id-components/ui-snackbar

Usage

<!-- SomeComponent.vue using UiSnackbar -->
<template>
  <button @click="toggleSnackbar">toggle snackbar</button>
  <ui-snackbar v-model="showSnackbar" @action-click="handleAction">
    HELLO <span slot="action">action</span>
  </ui-snackbar>
</template>

<script>
  import UiSnakbar from "@dpa-id-components/ui-snackbar";

  export default {
    components: { UiSnackbar },
    data() {
      return {
        showSnackbar: false,
      };
    },
    methods: {
      handleAction: () => {
        console.log("clicked");
      },
    },
  };
</script>

Demo

View a demo of <ui-snackbar> on Storybook

API

Props

Name	Type	Values	Description
value	Boolean		The internal display value of the snackbar
position	String	`"left"	"right"`

Slots

Name	Description
default	Dfault slot for text of the snackbar
action	Optional slot for text in action button
icon	Optional slot for a preprended SVG icon

Events

Name	Type	Description
action-click		Emitted when the action is clicked
input	Boolean	Emitted when the snackbar is hidden