警告提示 Alert #

<template>
    <div class="box">
        <sb-alert>This is an info alert.</sb-alert>
    </div>
</template>

<template>
  <div class="box">
    <div class="sb-row">
      <div class="sb-col">
        <sb-alert>This is an info alert.</sb-alert>
      </div>
      <div class="sb-col">
        <sb-alert type="success">This is an success alert.</sb-alert>
      </div>
      <div class="sb-col">
        <sb-alert type="warning">This is an warning alert.</sb-alert>
      </div>
      <div class="sb-col">
        <sb-alert type="error">This is an error alert.</sb-alert>
      </div>
    </div>
  </div>
</template>
<style scoped>
.sb-row {
  display: flex;
  flex-flow: row wrap;
  justify-content: flex-start;
  align-items: flex-start;
}

.sb-col {
  box-sizing: border-box;
  flex: 0 0 50%;
  width: 50%;
  padding: 10px 20px;
}
</style>

<template>
  <div class="box">
    <div class="sb-row">
      <div class="sb-col">
        <sb-alert title='Info'>This is an info alert.</sb-alert>
      </div>
      <div class="sb-col">
        <sb-alert title="Success" type="success">This is an success alert.</sb-alert>
      </div>
      <div class="sb-col">
        <sb-alert title="Warning" type="warning">This is an warning alert.</sb-alert>
      </div>
      <div class="sb-col">
        <sb-alert title="Error" type="error">This is an error alert.</sb-alert>
      </div>
    </div>
  </div>
</template>
<style scoped>
.sb-row {
  display: flex;
  flex-flow: row wrap;
  justify-content: flex-start;
  align-items: flex-start;
}

.sb-col {
  box-sizing: border-box;
  flex: 0 0 50%;
  width: 50%;
  padding: 10px 20px;
}
</style>

<template>
  <div class="box">
    <div class="sb-row">
      <div class="sb-col">
        <sb-alert v-model:visible="visible1" @click="handleClose(visible1)" closable>This is an info alert.</sb-alert>
      </div>
      <div class="sb-col">
        <sb-alert v-model:visible="visible2" @click="handleClose(visible2)" type="success" closable>This is an success
          alert.</sb-alert>
      </div>
      <div class="sb-col">
        <sb-alert v-model:visible="visible3" @click="handleClose(visible3)" type="warning" closable>This is an warning
          alert.</sb-alert>
      </div>
      <div class="sb-col">
        <sb-alert v-model:visible="visible4" @click="handleClose(visible4)" type="error" closable>This is an error
          alert.</sb-alert>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
const visible1 = ref(true)
const visible2 = ref(true)
const visible3 = ref(true)
const visible4 = ref(true)
const handleClose = (visible: any) => {
  visible.value = false;
}
</script>
<style scoped>
.sb-row {
  display: flex;
  flex-flow: row wrap;
  justify-content: flex-start;
  align-items: flex-start;
}

.sb-col {
  box-sizing: border-box;
  flex: 0 0 50%;
  width: 50%;
  padding: 10px 20px;
}
</style>

<template>
  <div class="box">
    <div class="sb-row">
      <div class="sb-col">
        <sb-alert v-model:visible="visible1" @click="handleClose(visible1)" closable>
          <template #close-element>
            ABCD
          </template>
          This is an info alert.
        </sb-alert>
      </div>
      <div class="sb-col">
        <sb-alert v-model:visible="visible2" @click="handleClose(visible2)" closable>
          <template #close-element>
            Close
          </template>
          This is an info alert.
        </sb-alert>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
const visible1 = ref(true)
const visible2 = ref(true)
const handleClose = (visible: any) => {
  visible.value = false;
}
</script>
<style scoped>
.sb-row {
  display: flex;
  flex-flow: row wrap;
  justify-content: flex-start;
  align-items: flex-start;
}

.sb-col {
  box-sizing: border-box;
  flex: 0 0 50%;
  width: 50%;
  padding: 10px 20px;
}
</style>

<template>
  <div class="box">
    <div class="sb-row">
      <div class="sb-col">
        <sb-alert :show-icon="false" title='Info'>This is an info alert.</sb-alert>
      </div>
      <div class="sb-col">
        <sb-alert :show-icon="false" title="Success" type="success">This is an success alert.</sb-alert>
      </div>
      <div class="sb-col">
        <sb-alert :show-icon="false" title="Warning" type="warning">This is an warning alert.</sb-alert>
      </div>
      <div class="sb-col">
        <sb-alert :show-icon="false" title="Error" type="error">This is an error alert.</sb-alert>
      </div>
    </div>
  </div>
</template>
<style scoped>
.sb-row {
  display: flex;
  flex-flow: row wrap;
  justify-content: flex-start;
  align-items: flex-start;
}

.sb-col {
  box-sizing: border-box;
  flex: 0 0 50%;
  width: 50%;
  padding: 10px 20px;
}
</style>

<template>
  <div class="box">
    <div class="sb-alert-space-vertical" style="width: 100%;">
      <sb-alert v-model:visible="visible1" @click="handleClose(visible1)"  closable style="margin-bottom: 24px;">
        This is an info alert.
        <template #action>
          <sb-button size="small" type="primary">Detail</sb-button>
        </template>
      </sb-alert>
      <sb-alert  v-model:visible="visible2" @click="handleClose(visible2)"  title="Example" closable>
        This is an info alert.
        <template #action>
          <sb-button size="small" type="primary">Detail</sb-button>
        </template>
      </sb-alert>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
const visible1 = ref(true)
const visible2 = ref(true)
const handleClose = (visible: any) => {
  visible.value = false;
}
</script>

<style scoped>
.sb-alert-space-vertical {
  display: inline-flex;
  flex-direction: column;
}
</style>

<template>
    <div class="box">
        <sb-alert banner>This is an info alert.</sb-alert>
    </div>
</template>