Toolbar

工具条 / Toolbar

工具条一般放在Header或者Footer中, 工具条中包含按钮组或者title, 也可以放segment和searchbar组件. 目前来说, Toolbar组件只是一个容器.

位置属性

Toolbar组件中的元素设置位置标记: start/end/left/end 可以切换他们的位置. 比如backButton后退按钮始终在最左边, 标记end/right的menu-toggle按钮始终在最右边.

Toolbar组件内提供Buttons组件, 用于整体标记位置.

名称 back-button menu-toggle-start buttons-left buttons-start content buttons-end buttons-right menu-toggle-end
order 0 1 2 3 4 5 6 7

Button组件

注意在Toolbar组件中的Button组件需要加上role="bar-button"属性, 这样才能正确显示样式.

可用的样式属性

  • [transparent] - 背景透明

如何引入

这里有点特别, Title组件的名称是在Title.name中定义的, 使用时小心.

// 引入
import { Toolbar, Buttons, Title } from 'vimo'
// 安装
Vue.component(Toolbar.name, Toolbar)
Vue.component(Title.name, Title)
Vue.component(Buttons.name, Buttons)
源码:

传入属性 / Props:

Name Type Attributes Description
color String <optional>
 颜色

插槽 / Slots:

Name Attributes Description
空 <optional>
 作为内容, 比如Title/Searchbar/Segment放置的位置
buttons <optional>
 按钮组, 别忘记加[left]/[right]/[end]属性标记位置

用法 / Usages

<Toolbar color="danger">
   <!--start-->
   <Buttons start slot="buttons">
       <Button icon-only role="bar-button">
           <Icon class="icon" name="contact"></Icon>
       </Button>
       <Button icon-only role="bar-button">
           <Icon class="icon" name="search"></Icon>
       </Button>
   </Buttons>
   <!--end-->
   <Buttons end slot="buttons">
       <Button icon-only role="bar-button">
           <Icon class="icon" name="more"></Icon>
       </Button>
   </Buttons>
   <!--title-->
   <Title>My Toolbar Title</Title>
</Toolbar>

 <Toolbar>
   <!--menutoggle-->
   <Button left icon-only role="bar-button" menutoggle slot="buttons">
       <Icon class="icon" name="menu"></Icon>
   </Button>
   <!--title-->
   <Title>Left Menu</Title>
</Toolbar>