メニューSvelteコンポーネント

メニューコンポーネントは、モバイルアプリではあまり見かけません。しかし、地図や画像、テキスト/コードエディタなどの上にコントロールが必要な場合には、非常に役立つことが証明されています。

Menu Svelteコンポーネントは、メニューコンポーネントを表しています。

メニューコンポーネント

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

メニュー
MenuItem (メニューアイテム)
メニュードロップダウン
MenuDropdownItem (メニュードロップダウンアイテム)

メニューのプロパティ

Prop	Type	Default	Description
<MenuItem> properties
text	string		メニューアイテムのテキスト
iconOnly	boolean		メニューアイテムがアイコンのみの場合に有効
dropdown	boolean		メニューアイテムにメニュードロップダウンが含まれている場合に有効です。
link	boolean		メニューアイテムが `href` を必要としない場合、メニューアイテムをリンク (`<a>`) 要素として表示するかどうかを指定します。
tooltip	string		toltipのテキストをホバー/プレス時に表示します。
tooltipTrigger	string	hover	どのようにしてツールチップを表示するかを定義します。hover`,` click`,` manual` のいずれかです。
<MenuItem> icon related properties
iconSize	string number		アイコンサイズ(px)
iconColor	string		アイコンの色デフォルトカラーのうちの1つです。
icon	string		カスタムアイコンのクラス
iconF7	string		F7アイコンのフォントアイコンの名前
iconMaterial	string		マテリアルアイコンのフォントアイコンの名称
iconIos	string		iOSテーマを使用している場合に使用されるアイコンです。アイコンファミリーとアイコン名をコロンで区切ったものです。
iconMd	string		MDテーマを使用する場合のアイコンです。アイコンファミリーとアイコン名をコロンで区切ったもの、例えば、`material:home`など。
iconAurora	string		Auroraテーマを使用する場合のアイコンです。アイコンファミリーとアイコンの名前をコロンで区切ったものです。
<MenuItem> navigation/router related properties
href	string boolean	#	ロードするページのURL。`href="false"`のブール値の場合は、`href`タグは追加されません。
target	string		リンク・ターゲット属性の値、例えば、`_blank`、`_self`など。
view	string		ページを読み込むためのViewのCSSセレクタ。または、現在のビューで読み込むための`current`。
external	boolean		Framework7のリンク・クリック・ハンドラのバイパスを有効にする
back	boolean		バックナビゲーションリンクを有効にする
openIn	string		モーダルまたはパネルとしてのオープン・ページ・ルートを可能にする。`popup`、`loginScreen`、`sheet`、`popover`または`panel`とすることができる。
force	boolean		履歴の中の前のページを無視してページを強制的にロードする (`back` propと一緒に使用する)
reloadCurrent	boolean		現在のアクティブなページの代わりに新しいページをリロードする
reloadPrevious	boolean		履歴の前のページをルートからの新しいページで置き換える
reloadAll	boolean		新しいページをロードし、履歴とDOMからすべての前のページを削除する
reloadDetail	boolean		マスター詳細ビューで詳細ページを再読み込みする
animate	boolean		ページのアニメーションを無効にする
transition	string		カスタムページトランジションの名前
ignoreCache	boolean		キャッシングを無視する
routeTabId	string		Routable Tab id
routeProps	object		対象となるルートコンポーネントに渡される追加のプロップを持つオブジェクト。
preventRouter	boolean	false	設定されている場合は、Framework7のルーターでは処理されません。
<MenuItem> action related properties
panelOpen	string boolean		クリック時に開くパネルのCSSセレクタ。または、DOM内に左または右のパネルしかない場合は、`left`または`right`になります。
panelClose	string boolean		クリックでパネルを閉じる
panelToggle	string boolean		クリックされたときにパネルを閉じるかどうかのCSSセレクタ。また、DOMに左または右のパネルしかない場合には、`left`または`right`とすることができる。
actionsOpen	string boolean		クリックされたときに開くアクション・シートの CSS セレクタ
actionsClose	string boolean		クリックされたときに閉じるアクション・シートのCSSセレクタを指定する。または、現在開いているアクションシートを閉じるためのブール値のプロパティ
popupOpen	string boolean		クリック時に開くポップアップのCSSセレクタ
popupClose	string boolean		クリックにより閉じるポップアップのCSSセレクタ。または、現在開かれているポップアップを閉じるためのboolean特性
popoverOpen	string boolean		クリックで開くポップオーバーのCSSセレクタ
popoverClose	string boolean		クリックにより閉じるポップアップのCSSセレクタ。または、現在開かれているポップオーバーを閉じるためのboolean特性
sheetOpen	string boolean		クリックで開くシートモーダルのCSSセレクタ
sheetClose	string boolean		クリックにより閉じるシート・モーダルのCSSセレクタ。または、現在開かれているシートモーダルを閉じるためのboolean特性
loginScreenOpen	string boolean		クリックしたときに開くログイン画面のCSSセレクタ
loginScreenClose	string boolean		クリックされたときに閉じるログイン画面のCSSセレクタあるいは、現在開かれているログイン画面を閉じるためのboolean特性
sortableEnable	string boolean		クリックした際に有効となるソート可能なリストのCSSセレクタ
sortableDisable	string boolean		クリックした際に無効となるソート可能なリストのCSSセレクタ。あるいは、現在開かれているソート可能リストを閉じるためのboolean特性
sortableToggle	string boolean		クリックした際に切り替えられるソート可能リストのCSSセレクタ。あるいは、現在開かれている／閉じられているソート可能なリストをトグルするためのboolean特性
searchbarEnable	string boolean		クリックした際に有効となる拡張検索バーのCSSセレクタ。あるいは、最初に見つかった検索バーを有効にするためのboolean特性
searchbarDisable	string boolean		クリックすると無効になる拡張可能な検索バーのCSSセレクタ。あるいは、最初に見つかった検索バーを無効にするためのboolean特性
searchbarToggle	string boolean		クリックしたときに切り替えられる拡張検索バーのCSSセレクタ。あるいは、最初に見つかった検索バーをトグルするためのboolean特性
searchbarClear	string boolean		クリックするとクリアされる拡張検索バーのCSSセレクタ。あるいは、最初に見つかった検索バーをクリアするためのboolean特性
cardOpen	string boolean		クリックしたときに開く拡張カードのCSSセレクタ。あるいは、最初に見つかった拡張カードを開くためのブール値
cardClose	string boolean		クリックした際に閉じる拡張カードのCSSセレクタ。または、現在開かれている拡張カードを閉じるためのboolean型プロパティ
cardPreventOpen	boolean		このプロパティを持つ要素をクリックしても、その親の拡張カードは開きません。
menuClose	boolean		クリックするとメニューのドロップダウンを閉じる
<MenuDropdown> properties
contentHeight	string		ドロップダウンの `height` プロパティのCSS値です。アイテムの数が多い場合に、ドロップダウンの高さを制限するためにのみ指定します。
position	string		ドロップダウンの位置、`left`, `center`, `right` のいずれかを指定します。
left	boolean		leftと同じです。
center	boolean		centerと同じです。
right	boolean		rightと同じです。
<MenuDropdownItem> properties
text	string		メニューのドロップダウン項目のテキスト
divider	boolean		このアイテムを仕切りとしてレンダリングします（この場合、テキストは無視されます）。
link	boolean		メニューアイテムをリンク（`）要素として表示するかどうかを設定します（`href`が不要な場合）。
<MenuDropdownItem> navigation/router related properties
href	string boolean	#	ロードするページのURL。`href="false"`のブール値の場合は、`href`タグは追加されません。
target	string		リンク・ターゲット属性の値、例えば、`_blank`、`_self`など。
view	string		ページを読み込むためのViewのCSSセレクタ。または、現在のビューで読み込むための`current`。
external	boolean		Framework7のリンク・クリック・ハンドラのバイパスを有効にする
back	boolean		バックナビゲーションリンクを有効にする
openIn	string		モーダルまたはパネルとしてのオープン・ページ・ルートを可能にする。`popup`、`loginScreen`、`sheet`、`popover`または`panel`とすることができる。
force	boolean		履歴の中の前のページを無視してページを強制的にロードする (`back` propと一緒に使用する)
reloadCurrent	boolean		現在のアクティブなページの代わりに新しいページをリロードする
reloadPrevious	boolean		履歴の前のページをルートからの新しいページで置き換える
reloadAll	boolean		新しいページをロードし、履歴とDOMからすべての前のページを削除する
reloadDetail	boolean		マスター詳細ビューで詳細ページを再読み込みする
animate	boolean		ページのアニメーションを無効にする
transition	string		カスタムページトランジションの名前
ignoreCache	boolean		キャッシングを無視する
routeTabId	string		Routable Tab id
routeProps	object		対象となるルートコンポーネントに渡される追加のプロップを持つオブジェクト。
preventRouter	boolean	false	設定されている場合は、Framework7のルーターでは処理されません。
<MenuDropdownItem> action related properties
panelOpen	string boolean		クリック時に開くパネルのCSSセレクタ。または、DOM内に左または右のパネルしかない場合は、`left`または`right`になります。
panelClose	string boolean		クリックでパネルを閉じる
panelToggle	string boolean		クリックされたときにパネルを閉じるかどうかのCSSセレクタ。また、DOMに左または右のパネルしかない場合には、`left`または`right`とすることができる。
actionsOpen	string boolean		クリックされたときに開くアクション・シートの CSS セレクタ
actionsClose	string boolean		クリックされたときに閉じるアクション・シートのCSSセレクタを指定する。または、現在開いているアクションシートを閉じるためのブール値のプロパティ
popupOpen	string boolean		クリック時に開くポップアップのCSSセレクタ
popupClose	string boolean		クリックにより閉じるポップアップのCSSセレクタ。または、現在開かれているポップアップを閉じるためのboolean特性
popoverOpen	string boolean		クリックで開くポップオーバーのCSSセレクタ
popoverClose	string boolean		クリックにより閉じるポップアップのCSSセレクタ。または、現在開かれているポップオーバーを閉じるためのboolean特性
sheetOpen	string boolean		クリックで開くシートモーダルのCSSセレクタ
sheetClose	string boolean		クリックにより閉じるシート・モーダルのCSSセレクタ。または、現在開かれているシートモーダルを閉じるためのboolean特性
loginScreenOpen	string boolean		クリックしたときに開くログイン画面のCSSセレクタ
loginScreenClose	string boolean		クリックされたときに閉じるログイン画面のCSSセレクタあるいは、現在開かれているログイン画面を閉じるためのboolean特性
sortableEnable	string boolean		クリックした際に有効となるソート可能なリストのCSSセレクタ
sortableDisable	string boolean		クリックした際に無効となるソート可能なリストのCSSセレクタ。あるいは、現在開かれているソート可能リストを閉じるためのboolean特性
sortableToggle	string boolean		クリックした際に切り替えられるソート可能リストのCSSセレクタ。あるいは、現在開かれている／閉じられているソート可能なリストをトグルするためのboolean特性
searchbarEnable	string boolean		クリックした際に有効となる拡張検索バーのCSSセレクタ。あるいは、最初に見つかった検索バーを有効にするためのboolean特性
searchbarDisable	string boolean		クリックすると無効になる拡張可能な検索バーのCSSセレクタ。あるいは、最初に見つかった検索バーを無効にするためのboolean特性
searchbarToggle	string boolean		クリックしたときに切り替えられる拡張検索バーのCSSセレクタ。あるいは、最初に見つかった検索バーをトグルするためのboolean特性
searchbarClear	string boolean		クリックするとクリアされる拡張検索バーのCSSセレクタ。あるいは、最初に見つかった検索バーをクリアするためのboolean特性
cardOpen	string boolean		クリックしたときに開く拡張カードのCSSセレクタ。あるいは、最初に見つかった拡張カードを開くためのブール値
cardClose	string boolean		クリックした際に閉じる拡張カードのCSSセレクタ。または、現在開かれている拡張カードを閉じるためのboolean型プロパティ
cardPreventOpen	boolean		このプロパティを持つ要素をクリックしても、その親の拡張カードは開きません。
menuClose	boolean		クリックするとメニューのドロップダウンを閉じる

メニューイベント

Event	Description
<MenuItem> events
click	メニューアイテムがクリックされるとイベントが発生します。
menuOpened	メニューのドロップダウンが開かれた直後にイベントが発生します。
menuClosed	メニュードロップダウンが閉じられた直後にイベントが発生します。
<MenuDropdownItem> events
click	イベントはメニュースロップダウンアイテムのクリックで発生します。

Examples

<Page>
  <Navbar title="Menu" />

  <BlockTitle>Plain Links</BlockTitle>
  <Menu>
    <MenuItem href="#" text="Item 1" />
    <MenuItem href="#" text="Item 2" />
    <MenuItem href="#" iconF7="pencil" />
    <MenuItem href="#" iconF7="square_arrow_up" />
  </Menu>

  <BlockTitle>Dropdowns</BlockTitle>
  <Menu>
    <MenuItem text="Left" dropdown>
      <MenuDropdown left>
        <MenuDropdownItem href="#" text="Menu Item 1" />
        <MenuDropdownItem href="#" text="Menu Item 2" />
        <MenuDropdownItem href="#" text="Menu Item 3" />
        <MenuDropdownItem href="#" text="Menu Item 4" />
        <MenuDropdownItem divider />
        <MenuDropdownItem href="#" text="Menu Item 5" />
        <MenuDropdownItem href="#" text="Menu Item 6" />
      </MenuDropdown>
    </MenuItem>

    <MenuItem text="Center" dropdown>
      <MenuDropdown center contentHeight="200px">
        <MenuDropdownItem href="#" text="Menu Item 1" />
        <MenuDropdownItem href="#" text="Menu Item 2" />
        <MenuDropdownItem href="#" text="Menu Item 3" />
        <MenuDropdownItem href="#" text="Menu Item 4" />
        <MenuDropdownItem divider />
        <MenuDropdownItem href="#" text="Menu Item 5" />
        <MenuDropdownItem href="#" text="Menu Item 6" />
        <MenuDropdownItem href="#" text="Menu Item 7" />
        <MenuDropdownItem divider />
        <MenuDropdownItem href="#" text="Menu Item 8" />
        <MenuDropdownItem href="#" text="Menu Item 9" />
        <MenuDropdownItem href="#" text="Menu Item 10" />
      </MenuDropdown>
    </MenuItem>

    <MenuItem text="Right" dropdown>
      <MenuDropdown right>
        <MenuDropdownItem href="#" text="Menu Item 1" />
        <MenuDropdownItem href="#" text="Menu Item 2" />
        <MenuDropdownItem href="#" text="Menu Item 3" />
        <MenuDropdownItem href="#" text="Menu Item 4" />
        <MenuDropdownItem divider />
        <MenuDropdownItem href="#" text="Menu Item 5" />
        <MenuDropdownItem href="#" text="Menu Item 6" />
      </MenuDropdown>
    </MenuItem>

    <MenuItem style="margin-left: auto" iconF7="square_arrow_up" dropdown>
      <MenuDropdown right>
        <MenuDropdownItem href="#">
          <span>Share on Facebook</span>
          <Icon class="margin-left" f7="logo_facebook" />
        </MenuDropdownItem>
        <MenuDropdownItem href="#">
          <span>Share on Twitter</span>
          <Icon class="margin-left" f7="logo_twitter" />
        </MenuDropdownItem>
      </MenuDropdown>
    </MenuItem>

    <MenuItem href="#" iconF7="pencil" />
  </Menu>
</Page>
  


<script>
  import {Page, Navbar, BlockTitle, Menu, MenuItem, MenuDropdown, MenuDropdownItem, Icon} from 'framework7-svelte';
</script>