v6.3.3
Support Framework7
logo_github stars forks
logo_applelogo_androiddevice_desktop
スポンサー
Support Framework7

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

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

    メニューVueコンポーネントは、メニューコンポーネントを表します。

    メニューコンポーネント

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

    • f7-menu (メニュー)
    • f7-menu-item (メニューアイテム)
    • f7-menu-dropdown (ドロップダウン)
    • f7-menu-dropdown-item (メニューのドロップダウン)

    メニューのプロパティ

    PropTypeDefaultDescription
    <f7-menu-item> properties
    textstringメニューアイテムのテキスト
    icon-onlybooleanメニューアイテムがアイコンだけの場合に有効
    dropdownbooleanメニューアイテムにメニュードロップダウンが含まれている場合に有効です。
    linkbooleanhref を指定する必要がない場合に、メニューアイテムをリンク (`) 要素として表示するかどうかを設定します。
    tooltipstringtoltipのテキストをホバー/プレス時に表示します。
    tooltipTriggerstringhoverどのようにしてツールチップを表示するかを定義します。hover, click, manual` のいずれかです。
    <f7-menu-item> icon related properties
    icon-sizestring
    number    		アイコンサイズ（px
    icon-colorstringアイコンの色 デフォルトカラーのうちの1つです。
    iconstringカスタムアイコンのクラス
    icon-f7stringF7アイコンのフォントアイコンの名前
    icon-materialstringマテリアルアイコンのフォントアイコンの名称
    icon-iosstringiOSテーマを使用している場合に使用されるアイコンです。アイコンファミリーとアイコン名をコロンで区切ったものです。
    icon-mdstringMDテーマを使用する場合のアイコンです。アイコンファミリーとアイコン名をコロンで区切ったもの、例えば、material:homeなど。
    icon-aurorastringAuroraテーマを使用する場合のアイコンです。アイコンファミリーとアイコンの名前をコロンで区切ったものです。
    <f7-menu-item> navigation/router related properties
    hrefstring
    boolean    		#ロードするページのURL。href="false"のブール値の場合は、hrefタグは追加されません。
    targetstringリンク・ターゲット属性の値、例えば、_blank、_selfなど。
    viewstringページを読み込むためのViewのCSSセレクタ。または、現在のビューで読み込むためのcurrent。
    externalbooleanFramework7のリンク・クリック・ハンドラのバイパスを有効にする
    backbooleanバックナビゲーションリンクを有効にする
    open-instringモーダルまたはパネルとしてのオープン・ページ・ルートを可能にする。popup、loginScreen、sheet、popoverまたはpanelとすることができる。
    forceboolean履歴の中の前のページを無視してページを強制的にロードする (back propと一緒に使用する)
    reload-currentboolean現在のアクティブなページの代わりに新しいページをリロードする
    reload-previousboolean履歴の前のページをルートからの新しいページで置き換える
    reload-allboolean新しいページをロードし、履歴とDOMからすべての前のページを削除する
    reload-detailbooleanマスター詳細ビューで詳細ページを再読み込みする
    animatebooleanページのアニメーションを無効にする
    transitionstringカスタムページトランジションの名前
    ignore-cachebooleanキャッシングを無視する
    route-tab-idstringRoutable Tab id
    route-propsobject対象となるルートコンポーネントに渡される追加のプロップを持つオブジェクト。
    prevent-routerbooleanfalse設定されている場合は、Framework7のルーターでは処理されません。
    <f7-menu-item> action related properties
    panel-openstring
    boolean    		クリック時に開くパネルのCSSセレクタ。または、DOM内に左または右のパネルしかない場合は、leftまたはrightになります。
    panel-closestring
    boolean    		クリックでパネルを閉じる
    panel-togglestring
    boolean    		クリックされたときにパネルを閉じるかどうかのCSSセレクタ。また、DOMに左または右のパネルしかない場合には、leftまたはrightとすることができる。
    actions-openstring
    boolean    		クリックされたときに開くアクション・シートの CSS セレクタ
    actions-closestring
    boolean    		クリックされたときに閉じるアクション・シートのCSSセレクタを指定する。または、現在開いているアクションシートを閉じるためのブール値のプロパティ
    popup-openstring
    boolean    		クリック時に開くポップアップのCSSセレクタ
    popup-closestring
    boolean    		クリックにより閉じるポップアップのCSSセレクタ。または、現在開かれているポップアップを閉じるためのboolean特性
    popover-openstring
    boolean    		クリックで開くポップオーバーのCSSセレクタ
    popover-closestring
    boolean    		クリックにより閉じるポップアップのCSSセレクタ。または、現在開かれているポップオーバーを閉じるためのboolean特性
    sheet-openstring
    boolean    		クリックで開くシートモーダルのCSSセレクタ
    sheet-closestring
    boolean    		クリックにより閉じるシート・モーダルのCSSセレクタ。または、現在開かれているシートモーダルを閉じるためのboolean特性
    login-screen-openstring
    boolean    		クリックしたときに開くログイン画面のCSSセレクタ
    login-screen-closestring
    boolean    		クリックされたときに閉じるログイン画面のCSSセレクタ あるいは、現在開かれているログイン画面を閉じるためのboolean特性
    sortable-enablestring
    boolean    		クリックした際に有効となるソート可能なリストのCSSセレクタ
    sortable-disablestring
    boolean    		クリックした際に無効となるソート可能なリストのCSSセレクタ。あるいは、現在開かれているソート可能リストを閉じるためのboolean特性
    sortable-togglestring
    boolean    		クリックした際に切り替えられるソート可能リストのCSSセレクタ。あるいは、現在開かれている／閉じられているソート可能なリストをトグルするためのboolean特性
    searchbar-enablestring
    boolean    		クリックした際に有効となる拡張検索バーのCSSセレクタ。あるいは、最初に見つかった検索バーを有効にするためのboolean特性
    searchbar-disablestring
    boolean    		クリックすると無効になる拡張可能な検索バーのCSSセレクタ。あるいは、最初に見つかった検索バーを無効にするためのboolean特性
    searchbar-togglestring
    boolean    		クリックしたときに切り替えられる拡張検索バーのCSSセレクタ。あるいは、最初に見つかった検索バーをトグルするためのboolean特性
    searchbar-clearstring
    boolean    		クリックするとクリアされる拡張検索バーのCSSセレクタ。あるいは、最初に見つかった検索バーをクリアするためのboolean特性
    card-openstring
    boolean    		クリックしたときに開く拡張カードのCSSセレクタ。あるいは、最初に見つかった拡張カードを開くためのブール値
    card-closestring
    boolean    		クリックした際に閉じる拡張カードのCSSセレクタ。または、現在開かれている拡張カードを閉じるためのboolean型プロパティ
    card-prevent-openbooleanこのプロパティを持つ要素をクリックしても、その親の拡張カードは開きません。
    menu-closebooleanクリックするとメニューのドロップダウンを閉じる
    <f7-menu-dropdown> properties
    content-heightstringドロップダウンの height プロパティのCSS値です。アイテムの数が多い場合に、ドロップダウンの高さを制限するためにのみ指定します。
    positionstringドロップダウンの位置、left, center, right のいずれかを指定します。
    leftbooleanleftと同じです。
    centerbooleancenterと同じです。
    rightbooleanrightと同じです。
    <f7-menu-dropdown-item> properties
    textstringメニューのドロップダウン項目のテキスト
    dividerbooleanこのアイテムを仕切りとしてレンダリングします（この場合、テキストは無視されます）。
    linkbooleanメニューアイテムをリンク（）要素として表示するかどうかを設定します（href`が不要な場合）。
    <f7-menu-dropdown-item> navigation/router related properties
    hrefstring
    boolean    		#ロードするページのURL。href="false"のブール値の場合は、hrefタグは追加されません。
    targetstringリンク・ターゲット属性の値、例えば、_blank、_selfなど。
    viewstringページを読み込むためのViewのCSSセレクタ。または、現在のビューで読み込むためのcurrent。
    externalbooleanFramework7のリンク・クリック・ハンドラのバイパスを有効にする
    backbooleanバックナビゲーションリンクを有効にする
    open-instringモーダルまたはパネルとしてのオープン・ページ・ルートを可能にする。popup、loginScreen、sheet、popoverまたはpanelとすることができる。
    forceboolean履歴の中の前のページを無視してページを強制的にロードする (back propと一緒に使用する)
    reload-currentboolean現在のアクティブなページの代わりに新しいページをリロードする
    reload-previousboolean履歴の前のページをルートからの新しいページで置き換える
    reload-allboolean新しいページをロードし、履歴とDOMからすべての前のページを削除する
    reload-detailbooleanマスター詳細ビューで詳細ページを再読み込みする
    animatebooleanページのアニメーションを無効にする
    transitionstringカスタムページトランジションの名前
    ignore-cachebooleanキャッシングを無視する
    route-tab-idstringRoutable Tab id
    route-propsobject対象となるルートコンポーネントに渡される追加のプロップを持つオブジェクト。
    prevent-routerbooleanfalse設定されている場合は、Framework7のルーターでは処理されません。
    <f7-menu-dropdown-item> action related properties
    panel-openstring
    boolean    		クリック時に開くパネルのCSSセレクタ。または、DOM内に左または右のパネルしかない場合は、leftまたはrightになります。
    panel-closestring
    boolean    		クリックでパネルを閉じる
    panel-togglestring
    boolean    		クリックされたときにパネルを閉じるかどうかのCSSセレクタ。また、DOMに左または右のパネルしかない場合には、leftまたはrightとすることができる。
    actions-openstring
    boolean    		クリックされたときに開くアクション・シートの CSS セレクタ
    actions-closestring
    boolean    		クリックされたときに閉じるアクション・シートのCSSセレクタを指定する。または、現在開いているアクションシートを閉じるためのブール値のプロパティ
    popup-openstring
    boolean    		クリック時に開くポップアップのCSSセレクタ
    popup-closestring
    boolean    		クリックにより閉じるポップアップのCSSセレクタ。または、現在開かれているポップアップを閉じるためのboolean特性
    popover-openstring
    boolean    		クリックで開くポップオーバーのCSSセレクタ
    popover-closestring
    boolean    		クリックにより閉じるポップアップのCSSセレクタ。または、現在開かれているポップオーバーを閉じるためのboolean特性
    sheet-openstring
    boolean    		クリックで開くシートモーダルのCSSセレクタ
    sheet-closestring
    boolean    		クリックにより閉じるシート・モーダルのCSSセレクタ。または、現在開かれているシートモーダルを閉じるためのboolean特性
    login-screen-openstring
    boolean    		クリックしたときに開くログイン画面のCSSセレクタ
    login-screen-closestring
    boolean    		クリックされたときに閉じるログイン画面のCSSセレクタ あるいは、現在開かれているログイン画面を閉じるためのboolean特性
    sortable-enablestring
    boolean    		クリックした際に有効となるソート可能なリストのCSSセレクタ
    sortable-disablestring
    boolean    		クリックした際に無効となるソート可能なリストのCSSセレクタ。あるいは、現在開かれているソート可能リストを閉じるためのboolean特性
    sortable-togglestring
    boolean    		クリックした際に切り替えられるソート可能リストのCSSセレクタ。あるいは、現在開かれている／閉じられているソート可能なリストをトグルするためのboolean特性
    searchbar-enablestring
    boolean    		クリックした際に有効となる拡張検索バーのCSSセレクタ。あるいは、最初に見つかった検索バーを有効にするためのboolean特性
    searchbar-disablestring
    boolean    		クリックすると無効になる拡張可能な検索バーのCSSセレクタ。あるいは、最初に見つかった検索バーを無効にするためのboolean特性
    searchbar-togglestring
    boolean    		クリックしたときに切り替えられる拡張検索バーのCSSセレクタ。あるいは、最初に見つかった検索バーをトグルするためのboolean特性
    searchbar-clearstring
    boolean    		クリックするとクリアされる拡張検索バーのCSSセレクタ。あるいは、最初に見つかった検索バーをクリアするためのboolean特性
    card-openstring
    boolean    		クリックしたときに開く拡張カードのCSSセレクタ。あるいは、最初に見つかった拡張カードを開くためのブール値
    card-closestring
    boolean    		クリックした際に閉じる拡張カードのCSSセレクタ。または、現在開かれている拡張カードを閉じるためのboolean型プロパティ
    card-prevent-openbooleanこのプロパティを持つ要素をクリックしても、その親の拡張カードは開きません。
    menu-closebooleanクリックするとメニューのドロップダウンを閉じる

    メニューイベント

    EventDescription
    <f7-menu-item> events
    clickメニューアイテムがクリックされるとイベントが発生します。
    menu:openedメニューのドロップダウンが開かれた直後にイベントが発生します。
    menu:closedメニュードロップダウンが閉じられた直後にイベントが発生します。
    <f7-menu-dropdown-item> events
    clickイベントはメニューのドロップダウン項目のクリックで発生します。

    Examples

    <template>
<f7-page>
  <f7-navbar title="Menu"></f7-navbar>

  <f7-block-title>Plain Links</f7-block-title>
  <f7-menu>
    <f7-menu-item href="#" text="Item 1"></f7-menu-item>
    <f7-menu-item href="#" text="Item 2"></f7-menu-item>
    <f7-menu-item href="#" icon-f7="pencil"></f7-menu-item>
    <f7-menu-item href="#" icon-f7="square_arrow_up"></f7-menu-item>
  </f7-menu>

  <f7-block-title>Dropdowns</f7-block-title>
  <f7-menu>
    <f7-menu-item text="Left" dropdown>
      <f7-menu-dropdown left>
        <f7-menu-dropdown-item href="#" text="Menu Item 1"></f7-menu-dropdown-item>
        <f7-menu-dropdown-item href="#" text="Menu Item 2"></f7-menu-dropdown-item>
        <f7-menu-dropdown-item href="#" text="Menu Item 3"></f7-menu-dropdown-item>
        <f7-menu-dropdown-item href="#" text="Menu Item 4"></f7-menu-dropdown-item>
        <f7-menu-dropdown-item divider></f7-menu-dropdown-item>
        <f7-menu-dropdown-item href="#" text="Menu Item 5"></f7-menu-dropdown-item>
        <f7-menu-dropdown-item href="#" text="Menu Item 6"></f7-menu-dropdown-item>
      </f7-menu-dropdown>
    </f7-menu-item>

    <f7-menu-item text="Center" dropdown>
      <f7-menu-dropdown center content-height="200px">
        <f7-menu-dropdown-item href="#" text="Menu Item 1"></f7-menu-dropdown-item>
        <f7-menu-dropdown-item href="#" text="Menu Item 2"></f7-menu-dropdown-item>
        <f7-menu-dropdown-item href="#" text="Menu Item 3"></f7-menu-dropdown-item>
        <f7-menu-dropdown-item href="#" text="Menu Item 4"></f7-menu-dropdown-item>
        <f7-menu-dropdown-item divider></f7-menu-dropdown-item>
        <f7-menu-dropdown-item href="#" text="Menu Item 5"></f7-menu-dropdown-item>
        <f7-menu-dropdown-item href="#" text="Menu Item 6"></f7-menu-dropdown-item>
        <f7-menu-dropdown-item href="#" text="Menu Item 7"></f7-menu-dropdown-item>
        <f7-menu-dropdown-item divider></f7-menu-dropdown-item>
        <f7-menu-dropdown-item href="#" text="Menu Item 8"></f7-menu-dropdown-item>
        <f7-menu-dropdown-item href="#" text="Menu Item 9"></f7-menu-dropdown-item>
        <f7-menu-dropdown-item href="#" text="Menu Item 10"></f7-menu-dropdown-item>
      </f7-menu-dropdown>
    </f7-menu-item>

    <f7-menu-item text="Right" dropdown>
      <f7-menu-dropdown right>
        <f7-menu-dropdown-item href="#" text="Menu Item 1"></f7-menu-dropdown-item>
        <f7-menu-dropdown-item href="#" text="Menu Item 2"></f7-menu-dropdown-item>
        <f7-menu-dropdown-item href="#" text="Menu Item 3"></f7-menu-dropdown-item>
        <f7-menu-dropdown-item href="#" text="Menu Item 4"></f7-menu-dropdown-item>
        <f7-menu-dropdown-item divider></f7-menu-dropdown-item>
        <f7-menu-dropdown-item href="#" text="Menu Item 5"></f7-menu-dropdown-item>
        <f7-menu-dropdown-item href="#" text="Menu Item 6"></f7-menu-dropdown-item>
      </f7-menu-dropdown>
    </f7-menu-item>

    <f7-menu-item style="margin-left: auto" icon-f7="square_arrow_up" dropdown>
      <f7-menu-dropdown right>
        <f7-menu-dropdown-item href="#">
          <span>Share on Facebook</span>
          <f7-icon class="margin-left" f7="logo_facebook"></f7-icon>
        </f7-menu-dropdown-item>
        <f7-menu-dropdown-item href="#">
          <span>Share on Twitter</span>
          <f7-icon class="margin-left" f7="logo_twitter"></f7-icon>
        </f7-menu-dropdown-item>
      </f7-menu-dropdown>
    </f7-menu-item>

    <f7-menu-item href="#" icon-f7="pencil"></f7-menu-item>
  </f7-menu>

</f7-page>
</template>