Components.SystemBars.
商店
企业版
生态系统
支持
介绍
入门指南
定制
样式和动画
UI 组件
API explorer(API 概览)
Browse components(浏览组件)
Alerts(提示框)
Application(应用程序)
Aspect ratios(长宽比)
Avatars(头像)
Badges(徽章)
Banners(横幅)
Bars(栏)
App bars(应用栏)
Toolbars(工具栏)
System bars(系统栏)
Bottom navigation(底部导航栏)
Bottom sheets(底部表单)
Breadcrumbs(面包屑导航)
Buttons(按钮)
Buttons: Floating action buttons(按钮:浮动按钮)
Calendars(日历)
Cards(卡片)
Carousels(轮播)
Chips(纸片)
Dialogs(对话框)
Dividers(分隔线)
Expansion panels(扩展面板)
Footer(页脚)
Form inputs & controls(表单和控制)
Grids(栅格)
Groups(组)
Hover(悬停)
Icons(图标)
Images(图像)
Lazy(懒加载)
Lists(列表)
Menus(菜单)
Navigation drawers(导航抽屉)
Overlays(遮罩层)
Paginations(分页)
Parallax(视差)
Pickers(选择器)
Progress(进度条)
Ratings(评分)
Sheets(延展纸)
Skeleton Loaders(骨架装载器)
Snackbars(消息条)
Sparklines(迷你图表)
Steppers(步骤条)
Subheaders(副标题)
Tables(表格)
Tabs(选项卡)
Timelines(时间线)
Tooltips(提示)
Treeview(树形视图)
Virtual scrollers
Directives(指令)
专业支持
付费主题
Vue 工作
v-system-bar 组件可用于向用户显示状态。它看起来像 Android 系统栏,可以包含图标、分隔符和一些文本。
v-system-bar
v-system-bar 最简单的形式是显示一个默认主题的容器。
从下面选择您想要的组件,并查看可用的属性、插槽、事件和函数。
给组件应用 position: absolute
指定该组件作为应用程序布局的一部分。用于动态调整内容的大小。使用此 prop 的组件应该位于 v-main组件的 外 部,才能正常运行。你可以在 应用程序页面 上获得更多关于布局的信息。注意: 这个 prop 会自动将 position: fixed 应用到布局元素上。你可以使用 absolute prop 来覆盖这个功能。
v-main
absolute
将指定的颜色应用于控件 - 它可以是 material color 的名称(例如 success 或者 purple)或 css 颜色 (#033 或 rgba(255, 0, 0, 0.5))。 你可以在 colors page 中找到内置类的列表。
success
purple
#033
rgba(255, 0, 0, 0.5)
将暗色主题变量应用到组件。你可以在 dark themes 的 Material Design 文档中找到更多有关信息。
给组件应用 position: fixed
设定组件的高度。
为组件设置浅色主题。
降低系统栏不透明度。
将系统栏高度增加到 32px(24px 默认值)。
map-deep-get($headings, 'body-2', 'size') !default;
map-deep-get($headings, 'body-2', 'weight') !default;
map-deep-get($headings, 'subtitle-1', 'size') !default;
4px !default;
0 8px !default;
map-deep-get($headings, 'h6', 'size') !default;
8px !default;
下面是一些简单到复杂的例子。
您可以通过使用 color 属性更改 v-system-bar 的颜色。
color
您可以使用 lights-out 属性来降低 v-system-bar 的不透明度。
lights-out
可以将深色或浅色主题变量应用于 v-system-bar。
带有窗口控件和状态信息的窗口栏。
想要了解更多?继续阅读:
在此页面上