@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" | Position of the snackbar: either "left" (default) or "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 |