横幅

v-banner 组件用于通过 1-2 个操作向用户发送中级中断消息。它有两个变量，single-line 和 multi-line。这些变量在和你的消息和动作一起使用时包含图标。

用例

横幅可以有 1-2 行文本、动作和图标。

API

从下面选择您想要的组件，并查看可用的属性、插槽、事件和函数。

示例

下面是一些简单到复杂的例子。

单行（桌面端）

Single-line VBanner 用于少量信息，推荐仅在桌面分辨率下实现。你可以启用 sticky 属性来保证内容被固定到屏幕上（注意：IE11 不工作）。参阅更多 sticky positioning here。

template script

<template>
  <v-card>
    <v-system-bar></v-system-bar>
    <v-toolbar flat>
      <v-toolbar-title>My Document</v-toolbar-title>
      <v-spacer></v-spacer>
      <div>
        <v-switch
          v-model="sticky"
          label="Sticky Banner"
          hide-details
        ></v-switch>
      </div>
    </v-toolbar>
    <v-banner
      single-line
      :sticky="sticky"
    >
      We can't save your edits while you are in offline mode.
      <template v-slot:actions>
        <v-btn
          text
          color="deep-purple accent-4"
        >Get Online</v-btn>
      </template>
    </v-banner>
    <v-card-text class="grey lighten-4">
      <v-sheet
        max-width="800"
        height="300"
        class="mx-auto"
      ></v-sheet>
    </v-card-text>
  </v-card>
</template>

<script>
  export default {
    data: () => ({
      sticky: false,
    }),
  }
</script>

双行（移动端）

Two-line VBanner 能够存储大量数据，用于大量消息。

template

<template>
  <v-banner>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent cursus nec sem id malesuada.
    Curabitur lacinia sem et turpis euismod, eget elementum ex pretium.
    <template v-slot:actions>
      <v-btn text color="primary">Dismiss</v-btn>
      <v-btn text color="primary">Retry</v-btn>
    </template>
  </v-banner>
</template>

图标插槽

图标插槽允许你明确控制其包含的内容和功能。

template

<template>
  <v-banner two-line>
    <v-avatar
      slot="icon"
      color="deep-purple accent-4"
      size="40"
    >
      <v-icon
        icon="mdi-lock"
        color="white"
      >
        mdi-lock
      </v-icon>
    </v-avatar>
    Three line text string example with two actions. One to two lines is preferable. Three lines should be considered the maximum string length on desktop in order to keep messages short and actionable.
    <template v-slot:actions>
      <v-btn text color="deep-purple accent-4">Action</v-btn>
      <v-btn text color="deep-purple accent-4">Action</v-btn>
    </template>
  </v-banner>
</template>

图标点击事件

横幅上的图标在点击时发出 click:icon 事件，该事件带有自定义图标插槽。

template script

<template>
  <v-banner single-line @click:icon="alert">
    <v-icon
      slot="icon"
      color="warning"
      size="36"
    >
      mdi-wifi-strength-alert-outline
    </v-icon>
    Unable to verify your Internet connection
    <template v-slot:actions>
      <v-btn
        color="primary"
        text
      >
        Connecting Settings
      </v-btn>
    </template>
  </v-banner>
</template>

<script>
  export default {
    methods: {
      alert () {
        alert('Hello, World!')
      },
    },
  }
</script>

动作插槽

actions 插槽在其范围内具有 dismiss 功能，你可以使用它来轻松地隐藏横幅。

template script

<template>
  <div>
    <v-checkbox v-model="v0" label="Visible"></v-checkbox>
    <v-banner v-model="v0" single-line transition="slide-y-transition">
      No Internet connection
      <template v-slot:actions="{ dismiss }">
        <v-btn text color="primary" @click="dismiss">Dismiss</v-btn>
        <v-btn text color="primary">Retry</v-btn>
      </template>
    </v-banner>
  </div>
</template>

<script>
  export default {
    data: () => ({
      v0: true,
    }),
  }
</script>