@cypress-design/vue-alert
v1.0.0
Published
## Install
Downloads
601
Readme
Alert
Install
npm install @cypress-design/vue-alert
or with yarn
yarn add @cypress-design/vue-alert
Usage
import Alert from '@cypress-design/vue-alert'
The simplest is to use with plain text. By default, type is info
.
<Alert variant="error">Great Scott!!</Alert>
One can also have rich text in both the title and the body.
<div class="bg-white p-4">
<Alert>
This is an <code>info</code> message
<template #body>
<p>This is the body of <b>the alert.</b></p>
</template>
<template #details>
<p>This is the details of the alert.</p>
</template>
</Alert>
</div>
If you want the alert to be dismissible, you can add the dismissible
prop. Don't forget to add the @dismiss
prop to handle the dismiss event.
const dismissed = false
<Alert
dismissible
@dismiss="dismissed = true"
>
This is an info message
</Alert>
<p v-if="dismissed">Alert dismissed</p>
You can also remove the rounded corners and the icon of the alert by adding the notRounded
and the noIcon
props.
<Alert variant="warning" notRounded noIcon>
Look at my corners
</Alert>
<script setup>
import { ref } from 'vue'
import Button from '@cypress-design/vue-button'
const dismissed = ref(false)
</script>
<template>
<Alert variant="clear" dismissible @dismiss="dismissed = true">
<svg
width="16"
height="16"
viewBox="0 0 16 16"
fill="none"
xmlns="http://www.w3.org/2000/svg"
class="mr-2 inline"
>
<path
d="M8 0L0.552002 2.656L1.688 12.504L8 16L14.312 12.504L15.448 2.656L8 0Z"
fill="#DD0031"
/>
<path
d="M8 0L8.00001 1.776V1.768L8 16L14.312 12.504L15.448 2.656L8 0Z"
fill="#C3002F"
/>
<path
d="M8.00001 1.768L3.34401 12.208H5.08001L6.01601 9.872H9.96801L10.904 12.208H12.64L8.00001 1.768ZM9.36001 8.432H6.64001L8.00001 5.16L9.36001 8.432Z"
fill="white"
/>
</svg>
Angular component testing is available for this project
<template #body>
You can now use Cypress to develop and test individual components without
running your whole application. Generate the config in just a few clicks.
</template>
<template #footer>
<div class="p-4 flex flex-wrap overflow-x-hidden gap-4">
<Button variant="outline-indigo" size="32">Quick setup</Button>
<Button variant="link" size="32">Read our guides</Button>
<div class="md:flex-grow md:grow" />
<Button variant="link" size="32">Give feedback</Button>
</div>
</template>
</Alert>
<p v-if="dismissed">Alert dismissed</p>
</template>