系统栏

v-system-bar 组件可用于向用户显示状态。它看起来像 Android 系统栏，可以包含图标、分隔符和一些文本。

用例

v-system-bar 最简单的形式是显示一个默认主题的容器。

template

  1. <template>
  2.   <v-system-bar></v-system-bar>
  3. </template>

System bars（系统栏） - 图1

API

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

System bars（系统栏） - 图2

实战场

template script

  1. <template>
  2.   <v-row justify="center" align="center">
  3.     <v-container fluid>
  4.       <v-card img="https://cdn.vuetifyjs.com/images/home/vuetify_layout1.svg" height="200px" class="mb-6">
  5.         <v-system-bar
  6.           color="orange"
  7.           :height="height"
  8.           :lights-out="lightsOut"
  9.           :window="window"
  10.         >
  11.           <v-icon>mdi-gmail</v-icon>
  12.           <span>10 unread emails</span>
  13.           <v-spacer></v-spacer>
  14.           <v-icon>mdi-wifi-strength-4</v-icon>
  15.           <v-icon>mdi-signal-cellular-outline</v-icon>
  16.           <v-icon>mdi-battery</v-icon>
  17.           <span>12:30</span>
  18.         </v-system-bar>
  19.       </v-card>
  20.     </v-container>
  22.     <v-row>
  23.       <v-col cols="4">
  24.         <v-text-field
  25.           v-model="height"
  26.           class="mx-4"
  27.           label="Height - px"
  28.           max="30"
  29.           min="1"
  30.           step="1"
  31.           style="width: 125px"
  32.           type="number"
  33.           @keydown="false"
  34.         ></v-text-field>
  35.       </v-col>
  36.       <v-col cols="4">
  37.         <v-switch v-model="lightsOut" label="Toggle lights-out" class="mx-4"></v-switch>
  38.       </v-col>
  39.       <v-col cols="4">
  40.         <v-switch v-model="window" label="Toggle window" class="mx-4"></v-switch>
  41.       </v-col>
  42.     </v-row>
  43.   </v-row>
  44. </template>
  1. <script>
  2.   export default {
  3.     data: () => ({
  4.       height: 30,
  5.       lightsOut: false,
  6.       window: false,
  7.     }),
  8.   }
  9. </script>

System bars（系统栏） - 图3

示例

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

彩色栏

您可以通过使用 color 属性更改 v-system-bar 的颜色。

template

  1. <template>
  2.   <div>
  3.     <v-system-bar dark color="primary">
  4.       <v-spacer></v-spacer>
  5.       <v-icon>mdi-wifi-strength-4</v-icon>
  6.       <v-icon>mdi-signal-cellular-outline</v-icon>
  7.       <v-icon>mdi-battery</v-icon>
  8.       <span>12:30</span>
  9.     </v-system-bar>
  10.     <br>
  11.     <v-system-bar dark color="red lighten-2">
  12.       <v-spacer></v-spacer>
  13.       <v-icon>mdi-wifi-strength-4</v-icon>
  14.       <v-icon>mdi-signal-cellular-outline</v-icon>
  15.       <v-icon>mdi-battery</v-icon>
  16.       <span>12:30</span>
  17.     </v-system-bar>
  18.     <br>
  19.     <v-system-bar dark color="indigo darken-2">
  20.       <v-spacer></v-spacer>
  21.       <v-icon>mdi-wifi-strength-4</v-icon>
  22.       <v-icon>mdi-signal-cellular-outline</v-icon>
  23.       <v-icon>mdi-battery</v-icon>
  24.       <span>12:30</span>
  25.     </v-system-bar>
  26.   </div>
  27. </template>

System bars（系统栏） - 图4

熄灯

您可以使用 lights-out 属性来降低 v-system-bar 的不透明度。

template

  1. <template>
  2.   <div>
  3.     <v-subheader>Lights out (light)</v-subheader>
  4.     <v-card img="https://cdn.vuetifyjs.com/images/home/vuetify_layout2.svg" height="200px">
  5.       <v-system-bar color="primary" lights-out>
  6.         <v-spacer></v-spacer>
  7.         <v-icon>mdi-wifi-strength-4</v-icon>
  8.         <v-icon>mdi-signal-cellular-outline</v-icon>
  9.         <v-icon>mdi-battery</v-icon>
  10.         <span>12:30</span>
  11.       </v-system-bar>
  12.     </v-card>
  13.     <v-subheader>Lights out (dark)</v-subheader>
  14.     <v-card img="https://cdn.vuetifyjs.com/images/home/vuetify_layout2.svg" height="200px">
  15.       <v-system-bar color="primary" lights-out dark>
  16.         <v-spacer></v-spacer>
  17.         <v-icon>mdi-wifi-strength-4</v-icon>
  18.         <v-icon>mdi-signal-cellular-outline</v-icon>
  19.         <v-icon>mdi-battery</v-icon>
  20.         <span>12:30</span>
  21.       </v-system-bar>
  22.     </v-card>
  23.   </div>
  24. </template>

System bars（系统栏） - 图5

Enterprise support through Tidelift

The Tidelift Subscription is a managed open source subscription for application dependencies.

ads by Vuetify

]($a0bade116661502f.md)

主题

可以将深色或浅色主题变量应用于 v-system-bar。

template

  1. <template>
  2.   <div>
  3.     <v-subheader>Light status bar</v-subheader>
  4.     <v-card img="https://cdn.vuetifyjs.com/images/home/vuetify_layout1.svg" height="200px">
  5.       <v-system-bar color="primary">
  6.         <v-spacer></v-spacer>
  7.         <v-icon>mdi-wifi-strength-4</v-icon>
  8.         <v-icon>mdi-signal-cellular-outline</v-icon>
  9.         <v-icon>mdi-battery</v-icon>
  10.         <span>12:30</span>
  11.       </v-system-bar>
  12.     </v-card>
  13.     <v-subheader>Dark status bar</v-subheader>
  14.     <v-card img="https://cdn.vuetifyjs.com/images/home/vuetify_layout1.svg" height="200px">
  15.       <v-system-bar color="primary" dark>
  16.         <v-spacer></v-spacer>
  17.         <v-icon>mdi-wifi-strength-4</v-icon>
  18.         <v-icon>mdi-signal-cellular-outline</v-icon>
  19.         <v-icon>mdi-battery</v-icon>
  20.         <span>12:30</span>
  21.       </v-system-bar>
  22.     </v-card>
  23.   </div>
  24. </template>

System bars（系统栏） - 图6

窗口栏

带有窗口控件和状态信息的窗口栏。

template

  1. <template>
  2.   <div>
  3.     <v-system-bar window dark>
  4.       <v-icon>mdi-message</v-icon>
  5.       <span>10 unread messages</span>
  6.       <v-spacer></v-spacer>
  7.       <v-icon>mdi-minus</v-icon>
  8.       <v-icon>mdi-checkbox-blank-outline</v-icon>
  9.       <v-icon>mdi-close</v-icon>
  10.     </v-system-bar>
  11.   </div>
  12. </template>

System bars（系统栏） - 图7