uiv

# Alert

Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages.

# Examples

Wrap any text or HTML in <alert> and use one of the four alert types (success / info / warning / danger) for basic alert messages.

<template>
  <div class="uiv">
    <alert type="success"
      ><b>Well done!</b> You successfully read this important alert
      message.</alert
    >
    <alert type="info"
      ><b>Heads up!</b> This alert needs your attention, but it's not super
      important.</alert
    >
    <alert type="warning"
      ><b>Warning!</b> Better check yourself, you're not looking too
      good.</alert
    >
    <alert type="danger"
      ><b>Oh snap!</b> Change this and that and try again.</alert
    >
  </div>
</template>

# Dismissible

Use dismissible to allow user to dismiss alerts.

<template>
  <section class="uiv">
    <alert v-if="show" type="warning" dismissible @dismissed="show = false">
      <b>Warning!</b> Better check yourself, you're not looking too good.
    </alert>
    <alert
      v-for="(item, index) in alerts"
      :key="item.key"
      dismissible
      @dismissed="alerts.splice(index, 1)"
    >
      <b>Heads up!</b> This alert needs your attention, but it's not super
      important.
    </alert>
    <hr />
    <btn type="primary" @click="addDismissibleAlert()"
      >Add Dismissible Alert</btn
    >
  </section>
</template>
<script>
export default {
  data() {
    return {
      show: true,
      alerts: [],
    }
  },
  methods: {
    addDismissibleAlert() {
      this.alerts.push({ key: new Date().getTime() })
    },
  },
}
</script>

# Auto dismissing

Use duration in milliseconds to auto dismiss alert. It can be used together with dismissible.

<template>
  <section class="uiv">
    <alert
      v-for="(item, index) in alerts"
      :key="item.key"
      :duration="duration"
      @dismissed="alerts.splice(index, 1)"
    >
      This alert <b>will dismiss after {{ duration }}ms</b>.
    </alert>
    <hr />
    <btn type="primary" @click="addAutoDismissAlert()"
      >Add Auto Dismiss Alert</btn
    >
  </section>
</template>
<script>
export default {
  data() {
    return {
      alerts: [],
      duration: 2000,
    }
  },
  methods: {
    addAutoDismissAlert() {
      this.alerts.push({ key: new Date().getTime() })
    },
  },
}
</script>

# Use with collapse

<template>
  <section class="uiv">
    <btn type="primary" @click="show = !show">Toggle Collapsing Alert</btn>
    <hr />
    <collapse v-model="show">
      <alert type="warning" dismissible @dismissed="show = false"
        >This alert <b>will collapse on open / close</b>.</alert
      >
    </collapse>
  </section>
</template>
<script>
export default {
  data() {
    return {
      show: true,
    }
  },
}
</script>

# API Reference

# Alert (opens new window)

# Props

Name Type Default Required Description
dismissible Boolean false Show dismiss button in alert.
type String info Alert type (success, info, warning, danger).
duration Number 0 Dismiss after milliseconds, use 0 to prevent self-closing.

# Slots

Name Description
default The alert body.

# Events

Name Params Description
dismissed Fire after the alert dismissed. Note: you have to hide / destroy the alert using v-if / v-show / v-for manually due to child components can't change state of parent component.

← Notification →