Appbar Svelte コンポーネント

Appbar Svelteコンポーネントは、Appbar要素を表します。

Appbar Svelteは、Appbar要素を表します。Auroraテーマのデスクトップアプリでの使用を想定しています。

Appbarコンポーネント

以下のコンポーネントが含まれています。

Appbar（アプリバー

アプリバーのプロパティ

Prop	Type	Default	Description
<Appbar> properties
inner	boolean	true	有効（デフォルト）にすると、すべてのコンテンツが内部の `appbar-inner` 要素に格納されます。完全にカスタムなレイアウトを内部に配置したい場合にのみ、これを無効にしてください。
noShadow	boolean	false	MDテーマのシャドウレンダリングを無効にする
noHairline	boolean	false	iOSテーマでappbar bottom thin border (hairline)を無効にします。
innerClass	string		appbar-inner`要素に追加クラスを追加します。
innerClassName	string		innerClass`の別名です。

Examples

<Appbar>
    <div class="left">
      <Button small panelToggle="left" class="display-flex" iconF7="bars" />
      <Button small class="display-flex margin-left-half" iconF7="square_list" />
      <Button small class="display-flex margin-left-half" iconF7="arrowshape_turn_up_left_fill" />
    </div>
    <div class="right">
      <Searchbar
        inline
        customSearch
        disableButton={false}
      />
    </div>
  </Appbar>
  <Panel left>
    <Block>
      <p>Panel left content</p>
    </Block>
  </Panel>
  
<Page>
  <Navbar title="Appbar" />
  <Block strong>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus sed sagittis dui. Fusce nulla massa, scelerisque vitae auctor in, luctus in ipsum. Sed eu lectus vel magna malesuada lacinia. Ut at vestibulum sem. In semper, arcu pulvinar volutpat fermentum, felis magna fringilla felis, nec volutpat nisi nunc quis ante. Fusce elementum egestas tortor ut porta. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis id commodo elit. Sed massa dui, laoreet a orci sed, egestas vehicula tellus. Nulla pulvinar ornare justo sed finibus. Aliquam hendrerit dui at nulla eleifend, quis feugiat enim aliquam. Nulla facilisi. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
  </Block>
</Page>
  


<script>
  import {Appbar, Panel, Button, Searchbar, Page, Navbar, Block} from 'framework7-svelte';
</script>