logo
English

导航菜单

Documents

Alert

Introduction

The Alert component is used to display important alert messages to users, supporting various types of alert styles and interactive effects.

Examples

---
import { Alert } from "@coffic/cosy-ui";
---

<Alert type="info" closable> 这是一条可以关闭的信息提示 </Alert>

<script setup lang="ts">
  import { Alert } from '@coffic/cosy-ui/vue';
</script>

<template>
  <Alert type="info" closable> 这是一条可以关闭的信息提示 </Alert>
</template>

Props

class

Custom CSS class name for overriding default styles.

---
import { Alert } from '@coffic/cosy-ui';
---
<Alert class="my-alert-class" type="info">自定义 class 的 Alert</Alert>

---
import { Alert } from '@coffic/cosy-ui';
---
<Alert type="info">未设置 class 的 Alert</Alert>

<script setup lang="ts">
import { Alert } from '@coffic/cosy-ui/vue';
</script>
<template>
    <Alert class="my-alert-class" type="info">自定义 class 的 Alert</Alert>
</template>

<script setup lang="ts">
import { Alert } from '@coffic/cosy-ui/vue';
</script>
<template>
    <Alert type="info">未设置 class 的 Alert</Alert>
</template>

closable

Whether the alert is closable. When set to false, the close button is hidden.

---
import { Alert } from '@coffic/cosy-ui';
---
<Alert type="info" closable={true}>可关闭的提示信息</Alert>

---
import { Alert } from '@coffic/cosy-ui';
---
<Alert type="warning" closable={false}>不可关闭的提示信息</Alert>

<script setup lang="ts">
import { Alert } from '@coffic/cosy-ui/vue';
</script>
<template>
    <Alert type="info" :closable="true">可关闭的提示信息</Alert>
</template>

<script setup lang="ts">
import { Alert } from '@coffic/cosy-ui/vue';
</script>
<template>
    <Alert type="warning" :closable="false">不可关闭的提示信息</Alert>
</template>

marginY

Vertical margin size, supporting preset size values.

---
import { Alert } from '@coffic/cosy-ui';
---
<Alert type="info" marginY="xs">marginY="xs" - 超小间距的提示信息</Alert>

---
import { Alert } from '@coffic/cosy-ui';
---
<Alert type="success" marginY="sm">marginY="sm" - 小间距的成功提示</Alert>

---
import { Alert } from '@coffic/cosy-ui';
---
<Alert type="warning" marginY="md">marginY="md" - 中等间距的警告提示</Alert>

---
import { Alert } from '@coffic/cosy-ui';
---
<Alert type="error" marginY="lg">marginY="lg" - 大间距的错误提示</Alert>

---
import { Alert } from '@coffic/cosy-ui';
---
<Alert type="info" marginY="xl">marginY="xl" - 超大间距的信息提示</Alert>

<script setup lang="ts">
import { Alert } from '@coffic/cosy-ui/vue';
</script>
<template>
    <Alert type="info" marginY="xs">marginY="xs" - 超小间距的提示信息</Alert>
</template>

<script setup lang="ts">
import { Alert } from '@coffic/cosy-ui/vue';
</script>
<template>
    <Alert type="success" marginY="sm">marginY="sm" - 小间距的成功提示</Alert>
</template>

<script setup lang="ts">
import { Alert } from '@coffic/cosy-ui/vue';
</script>
<template>
    <Alert type="warning" marginY="md">marginY="md" - 中等间距的警告提示</Alert>
</template>

<script setup lang="ts">
import { Alert } from '@coffic/cosy-ui/vue';
</script>
<template>
    <Alert type="error" marginY="lg">marginY="lg" - 大间距的错误提示</Alert>
</template>

<script setup lang="ts">
import { Alert } from '@coffic/cosy-ui/vue';
</script>
<template>
    <Alert type="info" marginY="xl">marginY="xl" - 超大间距的信息提示</Alert>
</template>

showIcon

Whether to display the icon. When set to false, the type-specific icon is hidden.

---
import { Alert } from '@coffic/cosy-ui';
---
<Alert type="info" showIcon={true}>显示图标的信息提示</Alert>


---
import { Alert } from '@coffic/cosy-ui';
---
<Alert type="warning" showIcon={false}>不显示图标的警告提示</Alert>


<script setup lang="ts">
import { Alert } from '@coffic/cosy-ui/vue';
</script>
<template>
    <Alert type="info" :showIcon="true">显示图标的信息提示</Alert>
</template>

<script setup lang="ts">
import { Alert } from '@coffic/cosy-ui/vue';
</script>
<template>
    <Alert type="warning" :showIcon="false">不显示图标的警告提示</Alert>
</template>

title

Alert title, optional, displayed as bold text. After setting the title, you can add description text via the description property.

---


import { Alert } from "@coffic/cosy-ui";
---

<Alert type="success" title="操作成功">您的操作已成功完成</Alert>

---
import { Alert } from '@coffic/cosy-ui';
---
<Alert type="info">没有 title 的提示</Alert>

<script setup lang="ts">
  import { Alert } from '@coffic/cosy-ui/vue';
</script>

<template>
  <Alert type="success" title="操作成功">您的操作已成功完成</Alert>
</template>

<script setup lang="ts">
import { Alert } from '@coffic/cosy-ui/vue';
</script>
<template>
    <Alert type="info">没有 title 的提示</Alert>
</template>

type

Alert type, affecting color and icon. Supports four types: info, success, warning, error.

---
import { Alert } from '@coffic/cosy-ui';
---
<Alert type="info">这是一条信息提示</Alert>


---
import { Alert } from '@coffic/cosy-ui';
---
<Alert type="success">这是一条成功提示</Alert>


---
import { Alert } from '@coffic/cosy-ui';
---
<Alert type="warning">这是一条警告提示</Alert>


---
import { Alert } from '@coffic/cosy-ui';
---
<Alert type="error">这是一条错误提示</Alert>


<script setup lang="ts">
import { Alert } from '@coffic/cosy-ui/vue';
</script>
<template>
    <Alert type="info">这是一条信息提示</Alert>
</template>

<script setup lang="ts">
import { Alert } from '@coffic/cosy-ui/vue';
</script>
<template>
    <Alert type="success">这是一条成功提示</Alert>
</template>

<script setup lang="ts">
import { Alert } from '@coffic/cosy-ui/vue';
</script>
<template>
    <Alert type="warning">这是一条警告提示</Alert>
</template>

<script setup lang="ts">
import { Alert } from '@coffic/cosy-ui/vue';
</script>
<template>
    <Alert type="error">这是一条错误提示</Alert>
</template>

variant

Style variant, supporting four styles: solid (filled), outline (bordered), dash (dashed), soft (gentle), covering all types.

---
import { Alert } from '@coffic/cosy-ui';
---
<Alert type="info" variant="solid">这是 Solid 实心风格的提示</Alert>

<script setup lang="ts">
import { Alert } from '@coffic/cosy-ui/vue';
</script>
<template>
    <Alert type="info" variant="solid">这是 Solid 实心风格的提示</Alert>
</template>

---
import { Alert } from '@coffic/cosy-ui';
---
<Alert type="info" variant="outline">这是 Outline 描边风格的提示</Alert>

<script setup lang="ts">
import { Alert } from '@coffic/cosy-ui/vue';
</script>
<template>
    <Alert type="info" variant="outline">这是 Outline 描边风格的提示</Alert>
</template>

---
import { Alert } from '@coffic/cosy-ui';
---
<Alert type="warning" variant="dash">这是 Dash 虚线风格的提示</Alert>

<script setup lang="ts">
import { Alert } from '@coffic/cosy-ui/vue';
</script>
<template>
    <Alert type="warning" variant="dash">这是 Dash 虚线风格的提示</Alert>
</template>

---
import { Alert } from '@coffic/cosy-ui';
---
<Alert type="success" variant="soft">这是 Soft 柔和风格的提示</Alert>

<script setup lang="ts">
import { Alert } from '@coffic/cosy-ui/vue';
</script>
<template>
    <Alert type="success" variant="soft">这是 Soft 柔和风格的提示</Alert>
</template>

Slots

action

You can use the action slot to add a custom action button on the right side of the Alert:

---
import { Alert } from '@coffic/cosy-ui';
---

<Alert type="info" title="自定义操作">
    你可以通过 action slot 在右侧自定义按钮。
    <div slot="action">
        <button
            style="
        background-color: #3b82f6;
        color: white;
        border: none;
        padding: 0.5rem 1rem;
        border-radius: 0.375rem;
        cursor: pointer;
        font-size: 0.875rem;
      "
            onclick="alert('自定义操作')">
            自定义操作
        </button>
    </div>
</Alert>

<script setup lang="ts">
  import { Alert } from '@coffic/cosy-ui/vue';
</script>

<template>
  <Alert type="info" title="自定义操作">
    你可以通过 action slot 在右侧自定义按钮。
    <template #action>
      <button
        style="
          background-color: #3b82f6;
          color: white;
          border: none;
          padding: 0.5rem 1rem;
          border-radius: 0.375rem;
          cursor: pointer;
          font-size: 0.875rem;
        "
        @click="alert('自定义操作')">
        自定义操作
      </button>
    </template>
  </Alert>
</template>

搜索