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

Link Svelte Component

    Linkは、ナビゲーション、カスタムアクション、タブの切り替え、パネルの開閉などのリンクを作成するメインコンポーネントです。

    リンクコンポーネント

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

    • Link (リンク)

    リンクのプロパティ

    PropTypeDefaultDescription
    <Link> properties
    noLinkClassbooleanlink "クラスを削除します。
    tabLinkstring
    boolean    		タブリンクを有効にし、対象となるタブの CSS セレクタを指定します（文字列で指定した場合）。
    tabLinkActivebooleanこのタブリンクをアクティブにします。
    textstringリンクテキスト
    badgestring
    number    		バッジの数
    badgeColorstringバッジの色を指定します。デフォルトの色のいずれかを指定します。
    iconOnlybooleanナビバー/ツールバーの中でアイコンのみで使用する場合に有効にする
    tooltipstringリンク tooltip リンクのホバー/プレス時に表示するテキスト。
    tooltipTriggerstringhoverどのようにしてツールチップを開くかを定義します。hover、click、manual`のいずれかです。
    <Link> Smart Select related properties
    smartSelectbooleanfalseスマートセレクトの動作を有効にする
    smartSelectParamsobjectスマートセレクトのパラメータを持つオブジェクト。
    <Link> icon related properties
    iconSizestring
    number    		アイコンサイズ(px)
    iconColorstringアイコンの色 デフォルトカラーのうちの1つです。
    iconstringカスタムアイコンのクラス
    iconF7stringF7アイコンのフォントアイコンの名前
    iconMaterialstringマテリアルアイコンのフォントアイコンの名称
    iconIosstringiOSテーマを使用している場合に使用されるアイコンです。アイコンファミリーとアイコン名をコロンで区切ったものです。
    iconMdstringMDテーマを使用する場合のアイコンです。アイコンファミリーとアイコン名をコロンで区切ったもの、例えば、material:homeなど。
    iconAurorastringAuroraテーマを使用する場合のアイコンです。アイコンファミリーとアイコンの名前をコロンで区切ったものです。
    iconBadgestring
    number    		アイコンにバッジを追加（Tabbarのアイコンで使用することを想定しています
    <Link> navigation/router related properties
    hrefstring
    boolean    		#ロードするページのURL。href="false"のブール値の場合は、hrefタグは追加されません。
    targetstringリンク・ターゲット属性の値、例えば、_blank、_selfなど。
    viewstringページを読み込むためのViewのCSSセレクタ。または、現在のビューで読み込むためのcurrent。
    externalbooleanFramework7のリンク・クリック・ハンドラのバイパスを有効にする
    backbooleanバックナビゲーションリンクを有効にする
    openInstringモーダルまたはパネルとしてのオープン・ページ・ルートを可能にする。popup、loginScreen、sheet、popoverまたはpanelとすることができる。
    forceboolean履歴の中の前のページを無視してページを強制的にロードする (back propと一緒に使用する)
    reloadCurrentboolean現在のアクティブなページの代わりに新しいページをリロードする
    reloadPreviousboolean履歴の前のページをルートからの新しいページで置き換える
    reloadAllboolean新しいページをロードし、履歴とDOMからすべての前のページを削除する
    reloadDetailbooleanマスター詳細ビューで詳細ページを再読み込みする
    animatebooleanページのアニメーションを無効にする
    transitionstringカスタムページトランジションの名前
    ignoreCachebooleanキャッシングを無視する
    routeTabIdstringRoutable Tab id
    routePropsobject対象となるルートコンポーネントに渡される追加のプロップを持つオブジェクト。
    preventRouterbooleanfalse設定されている場合は、Framework7のルーターでは処理されません。
    <Link> action related properties
    panelOpenstring
    boolean    		クリック時に開くパネルのCSSセレクタ。または、DOM内に左または右のパネルしかない場合は、leftまたはrightになります。
    panelClosestring
    boolean    		クリックでパネルを閉じる
    panelTogglestring
    boolean    		クリックされたときにパネルを閉じるかどうかのCSSセレクタ。また、DOMに左または右のパネルしかない場合には、leftまたはrightとすることができる。
    actionsOpenstring
    boolean    		クリックされたときに開くアクション・シートの CSS セレクタ
    actionsClosestring
    boolean    		クリックされたときに閉じるアクション・シートのCSSセレクタを指定する。または、現在開いているアクションシートを閉じるためのブール値のプロパティ
    popupOpenstring
    boolean    		クリック時に開くポップアップのCSSセレクタ
    popupClosestring
    boolean    		クリックにより閉じるポップアップのCSSセレクタ。または、現在開かれているポップアップを閉じるためのboolean特性
    popoverOpenstring
    boolean    		クリックで開くポップオーバーのCSSセレクタ
    popoverClosestring
    boolean    		クリックにより閉じるポップアップのCSSセレクタ。または、現在開かれているポップオーバーを閉じるためのboolean特性
    sheetOpenstring
    boolean    		クリックで開くシートモーダルのCSSセレクタ
    sheetClosestring
    boolean    		クリックにより閉じるシート・モーダルのCSSセレクタ。または、現在開かれているシートモーダルを閉じるためのboolean特性
    loginScreenOpenstring
    boolean    		クリックしたときに開くログイン画面のCSSセレクタ
    loginScreenClosestring
    boolean    		クリックされたときに閉じるログイン画面のCSSセレクタ あるいは、現在開かれているログイン画面を閉じるためのboolean特性
    sortableEnablestring
    boolean    		クリックした際に有効となるソート可能なリストのCSSセレクタ
    sortableDisablestring
    boolean    		クリックした際に無効となるソート可能なリストのCSSセレクタ。あるいは、現在開かれているソート可能リストを閉じるためのboolean特性
    sortableTogglestring
    boolean    		クリックした際に切り替えられるソート可能リストのCSSセレクタ。あるいは、現在開かれている／閉じられているソート可能なリストをトグルするためのboolean特性
    searchbarEnablestring
    boolean    		クリックした際に有効となる拡張検索バーのCSSセレクタ。あるいは、最初に見つかった検索バーを有効にするためのboolean特性
    searchbarDisablestring
    boolean    		クリックすると無効になる拡張可能な検索バーのCSSセレクタ。あるいは、最初に見つかった検索バーを無効にするためのboolean特性
    searchbarTogglestring
    boolean    		クリックしたときに切り替えられる拡張検索バーのCSSセレクタ。あるいは、最初に見つかった検索バーをトグルするためのboolean特性
    searchbarClearstring
    boolean    		クリックするとクリアされる拡張検索バーのCSSセレクタ。あるいは、最初に見つかった検索バーをクリアするためのboolean特性
    cardOpenstring
    boolean    		クリックしたときに開く拡張カードのCSSセレクタ。あるいは、最初に見つかった拡張カードを開くためのブール値
    cardClosestring
    boolean    		クリックした際に閉じる拡張カードのCSSセレクタ。または、現在開かれている拡張カードを閉じるためのboolean型プロパティ
    cardPreventOpenbooleanこのプロパティを持つ要素をクリックしても、その親の拡張カードは開きません。
    menuClosebooleanクリックするとメニューのドロップダウンを閉じる

    リンクイベント

    EventDescription
    <Link> events
    clickEvent will be triggered after click on a link

    例

    ナビゲーションリンク

    <Link href="/about/">About</Link>

    戻るナビゲーションリンク

    <Link back>Back</Link>

    ルーターのパラメータで

    <Link href="/about/" animate={false} ignoreCache={true}>About</Link>

    外部へのリンク

    <Link href="http://google.com" external>Google</Link>

    タブリンク

    <!-- タブ -->
<Tabs>
  <Tab id="tab-1" tabActive>Tab 1</Tab>
  <Tab id="tab-2">Tab 2</Tab>
</Tabs>
<!-- タブの切り替え -->
<Link tabLink="#tab-1" tabLinkActive>Show Tab 1</Link>
<Link tabLink="#tab-2">Show Tab 2</Link>

    ルーティング可能なタブ

    <!-- タブ -->
<Tabs>
  <Tab id="tab-1"></Tab>
  <Tab id="tab-2"></Tab>
</Tabs>
<!-- タブの切り替え -->
<Link tabLink routeTabId="tab-1" href="/tabs/">Show Tab 1</Link>
<Link tabLink routeTabId="tab-2" href="/tabs/tab-2/">Show Tab 2</Link>

    オープン＆クローズパネル

    <Link panelOpen="left">Open Left Panel</Link>
<Link panelClose>Close Panel</Link>

    ポップアップを開く・閉じる

    <Link popupOpen="#my-popup">Open Popup</Link>
<Link popupClose="#my-popup">Close Popup</Link>

    アイコンとカラーで

    <Link iconF7="house" text="Home" color="red"></Link>