Top App Bar

Top App Bar充当应用程序标题，导航图标和操作项等项目的容器。

使用

方法1：

<m-top-app-bar adjust dense fixed
  heading='Omim'
  navigations="['favorite']"
  action-items="[{text: 'Omim'}, 'favorite_border', 'favorite_border']"
></m-top-app-bar>

方法2 (导航按钮自定义任意元素)：

<m-top-app-bar
  heading='Click to view all menus'
  adjust>
  <navigation>
    <m-avatar icon="person" background-color='#FFF' color='#0072d9' />
  </navigation>
  <actionitem>
    <m-badge css="..." content="99">
      <m-icon path="..." color="#FFF" />
    </m-badge>
  </actionitem>
  <div style='width:100%'>
    <m-tab css={`.mdc-tab-bar {background: #EEE;}`} default-active='speed' align="end" stacked>
      <item label="Recents" value="speed" icon="access_time"></item>
      <item label="Nearby" value="fire" icon="near_me"></item>
      <item label="Favorites" value="lol" icon="favorite"></item>
    </m-tab>
  </div>
</m-top-app-bar>

Omi 中使用

JSX:

方法1：

<m-top-app-bar adjust dense fixed
  heading='Omim'
  navigations={['favorite']}
  action-items={[{text: 'Omim'}, 'favorite_border', 'favorite_border']}
  onNavigation={this.onMenu}
  onAction={this.onMenu}
/>

方法2 (导航按钮自定义任意元素)：

<m-top-app-bar
  heading={'Click to show menus' + this.titleOmi}
  scroll-target={this.scrollTarget}
  onNavigation={this.onDemoStart}
  onAction={this.onMenuStart}>
  <navigation>
    <m-avatar icon="person" backgroundColor='#FFF' color={this.themeColor} />
  </navigation>
  <actionitem>
    <m-badge css={`...`} content="99">
      <m-icon path="..." color="#FFF" />
    </m-badge>
  </actionitem>
</m-top-app-bar>

API

Props