Alert ​

<template>
  <tu-alert title="This is an default alert." />
</template>

<template>
  <tu-alert title="This is an default alert." />
</template>

<template>
  <tu-alert title="This is an success alert." type="success" effect="light" />
  <tu-alert title="This is an warning alert." type="warning" effect="light" />
  <tu-alert title="This is an error alert." type="error" effect="light" />
  <tu-alert title="This is an info alert." type="info" effect="light" />
</template>

<style>
.tu-alert:not(:last-child) {
  margin-bottom: 20px;
}
</style>

<template>
  <tu-alert title="This is an success alert." type="success" effect="light" />
  <tu-alert title="This is an warning alert." type="warning" effect="light" />
  <tu-alert title="This is an error alert." type="error" effect="light" />
  <tu-alert title="This is an info alert." type="info" effect="light" />
</template>

<style>
.tu-alert:not(:last-child) {
  margin-bottom: 20px;
}
</style>

<template>
  <tu-alert title="This is an outset alert." effect="outset" />
  <tu-alert title="This is an inset alert." effect="inset" />
  <tu-alert title="This is an dark alert." effect="dark" type="success" />
  <tu-alert title="This is an light alert." effect="light" type="success" />
  <tu-alert title="This is an plain alert." effect="plain" type="success" />
</template>

<style>
.tu-alert:not(:last-child) {
  margin-bottom: 20px;
}
</style>

<template>
  <tu-alert title="This is an outset alert." effect="outset" />
  <tu-alert title="This is an inset alert." effect="inset" />
  <tu-alert title="This is an dark alert." effect="dark" type="success" />
  <tu-alert title="This is an light alert." effect="light" type="success" />
  <tu-alert title="This is an plain alert." effect="plain" type="success" />
</template>

<style>
.tu-alert:not(:last-child) {
  margin-bottom: 20px;
}
</style>

<template>
  <tu-alert title="Alert title" :closable="false" />
  <tu-alert
    title="This is alert description."
    close-text="close"
    @close="close"
  />
</template>

<script lang="ts" setup>
const close = () => {
  console.log('close');
};
</script>

<style>
.tu-alert:not(:last-child) {
  margin-bottom: 20px;
}
</style>

<template>
  <tu-alert title="Alert title" :closable="false" />
  <tu-alert
    title="This is alert description."
    close-text="close"
    @close="close"
  />
</template>

<script lang="ts" setup>
const close = () => {
  console.log('close');
};
</script>

<style>
.tu-alert:not(:last-child) {
  margin-bottom: 20px;
}
</style>

<template>
  <tu-alert
    title="This is alert description."
    type="success"
    effect="light"
    showIcon
  />
  <tu-alert
    title="This is alert description."
    type="warning"
    effect="light"
    showIcon
  />
  <tu-alert
    title="This is alert description."
    type="error"
    effect="light"
    showIcon
  />
  <tu-alert
    title="This is alert description."
    type="info"
    effect="light"
    showIcon
  />
</template>

<style>
.tu-alert:not(:last-child) {
  margin-bottom: 20px;
}
</style>

<template>
  <tu-alert
    title="This is alert description."
    type="success"
    effect="light"
    showIcon
  />
  <tu-alert
    title="This is alert description."
    type="warning"
    effect="light"
    showIcon
  />
  <tu-alert
    title="This is alert description."
    type="error"
    effect="light"
    showIcon
  />
  <tu-alert
    title="This is alert description."
    type="info"
    effect="light"
    showIcon
  />
</template>

<style>
.tu-alert:not(:last-child) {
  margin-bottom: 20px;
}
</style>

<template>
  <tu-alert title="Alert Title" description="This is alert description." />
  <tu-alert title="Alert Title">
    <p style="line-height: 1">This is alert description.</p>
    <p style="line-height: 1">This is alert description.</p>
  </tu-alert>
</template>

<template>
  <tu-alert title="Alert Title" description="This is alert description." />
  <tu-alert title="Alert Title">
    <p style="line-height: 1">This is alert description.</p>
    <p style="line-height: 1">This is alert description.</p>
  </tu-alert>
</template>

<template>
  <tu-alert title="Alert Title" type="success" effect="light" showIcon>
    <p style="line-height: 1">This is alert description.</p>
    <p style="line-height: 1">This is alert description.</p>
  </tu-alert>
</template>

<template>
  <tu-alert title="Alert Title" type="success" effect="light" showIcon>
    <p style="line-height: 1">This is alert description.</p>
    <p style="line-height: 1">This is alert description.</p>
  </tu-alert>
</template>

<template>
  <tu-alert title="This is alert description." size="mini" />
  <tu-alert title="This is alert description." size="small" />
  <tu-alert title="This is alert description." />
  <tu-alert title="This is alert description." size="large" />
</template>

<style>
.tu-alert:not(:last-child) {
  margin-bottom: 20px;
}
</style>

<template>
  <tu-alert title="This is alert description." size="mini" />
  <tu-alert title="This is alert description." size="small" />
  <tu-alert title="This is alert description." />
  <tu-alert title="This is alert description." size="large" />
</template>

<style>
.tu-alert:not(:last-child) {
  margin-bottom: 20px;
}
</style>