フローティング・アクション・ボタン Svelteコンポーネント

フローティングアクションボタン(FAB)は、プロモーション用のアクションに使用されます。丸いアイコンがUIの上に浮かんでいるのが特徴で、モーフィング、起動、アンカーポイントの移動などのモーションビヘイビアを持っています。

Floating Action Button Svelteは、Floating Action Button要素を表します。

FABコンポーネント

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

Fab - メインの FAB 要素
FabButtons - スピードダイヤル FAB として使用される複数の FAB ボタンのラッパー
FabButton - ひとつのFABスピードダイヤルボタン
FabBackdrop - FAB バックドロップ要素

FAB のプロパティ

Prop	Type	Default	Description
<Fab> properties
href	string boolean		ロードするページの URL（設定されている場合）。メイン FAB リンクの `href` 属性を設定します。ブール値 `href="false"` の場合、`href` タグは追加されません。
target	string		リンクのターゲット属性の値、例えば `_blank`, `_self` など。
position	string	right-bottom	FABの位置。以下のいずれかになります。 `right-bottom` (右下) 中央-下端左下 `right-center` (中央) 中央-中央左中央 `right-top` （右上）。センタートップ `left-top` (左上)
morphTo	string		文字列 FAB モーフターゲットの CSS セレクタ
text	string		FABボタンのテキストです。指定された場合は、テキストラベル付きの拡張Fabとして表示されます。
tooltip	string		FAB tooltip ボタンのホバー/プレス時に表示するテキストです。
tooltipTrigger	string	hover	どのようにしてTooltipを開くかを定義します。hover`,` click`,` manual` のいずれかです。
<FabButtons> properties
position	string	top	スピードダイヤルボタンの位置、以下のいずれかになります。 `top` - ボタンは、FABの上部に表示されます。 `right` - ボタンは、FABの右側に表示されます。 `bottom` - FABの下部に表示されます。 `left` - FABの左にボタンが表示されます。 `center` - FABの周囲にボタンが表示されます。
<FabButton> properties
fabClose	boolean	false	有効にすると、このボタンをクリックすると、FABを閉じます。
target	string		リンクのターゲット属性の値、例： `_blank`, `_self` など
label	string		ボタンのテキストラベル
tooltip	string		ボタンのホバー/プレス時に表示されるtooltipのテキストです。
tooltipTrigger	string	hover	どのようにしてTooltipを開くかを定義します。hover`,` click`,` manual` のいずれかです。

FABイベント

Event	Description
<Fab> events
click	FABをクリックすると、イベントが発生します。
<FabButton> events
click	FABスピードダイヤルボタンをクリックすると、イベントが発生します。

FABスロット

FAB Svelte コンポーネント (<Fab>) には、カスタムエレメント用の追加スロットがあります。

default - 子要素はメインの FAB リンク <a> 要素の内側に挿入されます。ただし、子要素が FabButtons である場合は、メインの FAB 要素の最後に挿入されます。
link - 子エレメントはメインのFABリンク <a> エレメントの内側に挿入されます。
root - 子要素はメインのFAB要素の最後に挿入されます。
text - 拡張FABのテキスト要素に挿入される子要素です。

Examples

<Page>
  <Navbar title="Floating Action Button" />

  <Toolbar bottom class="fab-morph-target">
    <Link>Link 1</Link>
    <Link>Link 2</Link>
    <Link>Link 3</Link>
  </Toolbar>

  <Fab position="left-top" color="yellow">
    <Icon ios="f7:plus" aurora="f7:plus" md="material:add"></Icon>
    <Icon ios="f7:xmark" aurora="f7:xmark" md="material:close"></Icon>
    <FabButtons position="bottom">
      <FabButton>1</FabButton>
      <FabButton>2</FabButton>
      <FabButton>3</FabButton>
    </FabButtons>
  </Fab>

  <Fab position="right-top" color="pink">
    <Icon ios="f7:plus" aurora="f7:plus" md="material:add"></Icon>
    <Icon ios="f7:xmark" aurora="f7:xmark" md="material:close"></Icon>
    <FabButtons position="left">
      <FabButton>1</FabButton>
      <FabButton>2</FabButton>
      <FabButton>3</FabButton>
    </FabButtons>
  </Fab>

  <Fab position="center-center" color="green">
    <Icon ios="f7:plus" aurora="f7:plus" md="material:add"></Icon>
    <Icon ios="f7:xmark" aurora="f7:xmark" md="material:close"></Icon>
    <FabButtons position="center">
      <FabButton>1</FabButton>
      <FabButton>2</FabButton>
      <FabButton>3</FabButton>
      <FabButton>4</FabButton>
    </FabButtons>
  </Fab>

  <Fab position="left-bottom" morphTo=".toolbar.fab-morph-target">
    <Icon ios="f7:plus" aurora="f7:plus" md="material:add"></Icon>
    <Icon ios="f7:xmark" aurora="f7:xmark" md="material:close"></Icon>
  </Fab>

  <Fab position="right-bottom" color="orange">
    <Icon ios="f7:plus" aurora="f7:plus" md="material:add"></Icon>
    <Icon ios="f7:xmark" aurora="f7:xmark" md="material:close"></Icon>
    <FabButtons position="top">
      <FabButton label="Action 1">1</FabButton>
      <FabButton label="Action 2">2</FabButton>
    </FabButtons>
  </Fab>

  <Fab position="center-bottom" text="Create" color="red">
    <Icon ios="f7:plus" aurora="f7:plus" md="material:add"></Icon>
  </Fab>

  <Block>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia, quo rem beatae, delectus eligendi est saepe molestias perferendis suscipit, commodi labore ipsa non quasi eum magnam neque ducimus! Quasi, numquam.</p>
    <p>Maiores culpa, itaque! Eaque natus ab cum ipsam numquam blanditiis a, quia, molestiae aut laudantium recusandae ipsa. Ad iste ex asperiores ipsa, mollitia perferendis consectetur quam eaque, voluptate laboriosam unde.</p>
    <p>Sed odit quis aperiam temporibus vitae necessitatibus, laboriosam, exercitationem dolores odio sapiente provident. Accusantium id, itaque aliquam libero ipsum eos fugiat distinctio laboriosam exercitationem sequi facere quas quidem magnam reprehenderit.</p>
    <p>Pariatur corporis illo, amet doloremque. Ab veritatis sunt nisi consectetur error modi, nam illo et nostrum quia aliquam ipsam vitae facere voluptates atque similique odit mollitia, rerum placeat nobis est.</p>
    <p>Et impedit soluta minus a autem adipisci cupiditate eius dignissimos nihil officia dolore voluptatibus aperiam reprehenderit esse facilis labore qui, officiis consectetur. Ipsa obcaecati aspernatur odio assumenda veniam, ipsum alias.</p>
  </Block>
  <Block>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa ipsa debitis sed nihil eaque dolore cum iste quibusdam, accusamus doloribus, tempora quia quos voluptatibus corporis officia at quas dolorem earum!</p>
    <p>Quod soluta eos inventore magnam suscipit enim at hic in maiores temporibus pariatur tempora minima blanditiis vero autem est perspiciatis totam dolorum, itaque repellat? Nobis necessitatibus aut odit aliquam adipisci.</p>
    <p>Tenetur delectus perspiciatis ex numquam, unde corrupti velit! Quam aperiam, animi fuga veritatis consectetur, voluptatibus atque consequuntur dignissimos itaque, sint impedit cum cumque at. Adipisci sint, iusto blanditiis ullam? Vel?</p>
    <p>Dignissimos velit officia quibusdam! Eveniet beatae, aut, omnis temporibus consequatur expedita eaque aliquid quos accusamus fugiat id iusto autem obcaecati repellat fugit cupiditate suscipit natus quas doloribus? Temporibus necessitatibus, libero.</p>
    <p>Architecto quisquam ipsa fugit facere, repudiandae asperiores vitae obcaecati possimus, labore excepturi reprehenderit consectetur perferendis, ullam quidem hic, repellat fugiat eaque fuga. Consectetur in eveniet, deleniti recusandae omnis eum quas?</p>
    <p>Quos nulla consequatur quo, officia quaerat. Nulla voluptatum, assumenda quibusdam, placeat cum aut illo deleniti dolores commodi odio ipsam, recusandae est pariatur veniam repudiandae blanditiis. Voluptas unde deleniti quisquam, nobis?</p>
    <p>Atque qui quaerat quasi officia molestiae, molestias totam incidunt reprehenderit laboriosam facilis veritatis, non iusto! Dolore ipsam obcaecati voluptates minima maxime minus qui mollitia facere. Nostrum esse recusandae voluptatibus eligendi.</p>
  </Block>
</Page>
  

<script>
  import {Page, Navbar, Toolbar, Link, Fab, Icon, FabButtons, FabButton, Block} from 'framework7-svelte';
</script>

With Backdrop

<Page>
  <Navbar title="FAB Backdrop" />

  <FabBackdrop />

  <Fab position="right-bottom">
    <Icon ios="f7:plus" aurora="f7:plus" md="material:add"></Icon>
    <Icon ios="f7:xmark" aurora="f7:xmark" md="material:close"></Icon>
    <FabButtons position="top">
      <FabButton label="Action 1">1</FabButton>
      <FabButton label="Action 2">2</FabButton>
    </FabButtons>
  </Fab>

  <Block>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia, quo rem beatae, delectus eligendi est saepe molestias perferendis suscipit, commodi labore ipsa non quasi eum magnam neque ducimus! Quasi, numquam.</p>
    <p>Maiores culpa, itaque! Eaque natus ab cum ipsam numquam blanditiis a, quia, molestiae aut laudantium recusandae ipsa. Ad iste ex asperiores ipsa, mollitia perferendis consectetur quam eaque, voluptate laboriosam unde.</p>
    <p>Sed odit quis aperiam temporibus vitae necessitatibus, laboriosam, exercitationem dolores odio sapiente provident. Accusantium id, itaque aliquam libero ipsum eos fugiat distinctio laboriosam exercitationem sequi facere quas quidem magnam reprehenderit.</p>
    <p>Pariatur corporis illo, amet doloremque. Ab veritatis sunt nisi consectetur error modi, nam illo et nostrum quia aliquam ipsam vitae facere voluptates atque similique odit mollitia, rerum placeat nobis est.</p>
    <p>Et impedit soluta minus a autem adipisci cupiditate eius dignissimos nihil officia dolore voluptatibus aperiam reprehenderit esse facilis labore qui, officiis consectetur. Ipsa obcaecati aspernatur odio assumenda veniam, ipsum alias.</p>
  </Block>
  <Block>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa ipsa debitis sed nihil eaque dolore cum iste quibusdam, accusamus doloribus, tempora quia quos voluptatibus corporis officia at quas dolorem earum!</p>
    <p>Quod soluta eos inventore magnam suscipit enim at hic in maiores temporibus pariatur tempora minima blanditiis vero autem est perspiciatis totam dolorum, itaque repellat? Nobis necessitatibus aut odit aliquam adipisci.</p>
    <p>Tenetur delectus perspiciatis ex numquam, unde corrupti velit! Quam aperiam, animi fuga veritatis consectetur, voluptatibus atque consequuntur dignissimos itaque, sint impedit cum cumque at. Adipisci sint, iusto blanditiis ullam? Vel?</p>
    <p>Dignissimos velit officia quibusdam! Eveniet beatae, aut, omnis temporibus consequatur expedita eaque aliquid quos accusamus fugiat id iusto autem obcaecati repellat fugit cupiditate suscipit natus quas doloribus? Temporibus necessitatibus, libero.</p>
    <p>Architecto quisquam ipsa fugit facere, repudiandae asperiores vitae obcaecati possimus, labore excepturi reprehenderit consectetur perferendis, ullam quidem hic, repellat fugiat eaque fuga. Consectetur in eveniet, deleniti recusandae omnis eum quas?</p>
    <p>Quos nulla consequatur quo, officia quaerat. Nulla voluptatum, assumenda quibusdam, placeat cum aut illo deleniti dolores commodi odio ipsam, recusandae est pariatur veniam repudiandae blanditiis. Voluptas unde deleniti quisquam, nobis?</p>
    <p>Atque qui quaerat quasi officia molestiae, molestias totam incidunt reprehenderit laboriosam facilis veritatis, non iusto! Dolore ipsam obcaecati voluptates minima maxime minus qui mollitia facere. Nostrum esse recusandae voluptatibus eligendi.</p>
  </Block>
</Page>
  

<script>
  import {Page, Navbar, Toolbar, Link, Fab, Icon, FabBackdrop, FabButtons, FabButton, Block} from 'framework7-svelte';
</script>