スポンサースポンサーになる

リンク Svelte コンポーネント

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

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

プロパティタイプデフォルト説明
<Link> プロパティ
noLinkClassboolean"link" クラスを削除します
tabLinkstring
boolean		タブリンクを有効にし、ターゲットタブのCSSセレクターを指定します（文字列として指定した場合）
tabLinkActivebooleanこのタブリンクをアクティブにします
textstringリンクテキスト
badgestring
number		バッジカウント
badgeColorstringバッジの色。デフォルトカラーのいずれか
iconOnlybooleanナビゲーションバー/ツールバー内でアイコンのみを使用する場合に有効にします
tooltipstringリンクホバー/プレス時に表示されるリンクのツールチップテキスト
tooltipTriggerstringhoverツールチップをトリガー（開く）方法を定義します。 hover、click、またはmanualを指定できます
<Link> スマートセレクト関連プロパティ
smartSelectbooleanfalseスマートセレクトの動作を有効にします
smartSelectParamsobjectスマートセレクトパラメータを含むオブジェクト
<Link> アイコン関連プロパティ
iconSizestring
number		アイコンサイズ（px）
iconColorstringアイコンの色。デフォルトカラーのいずれか
iconstringカスタムアイコンクラス
iconF7stringF7アイコンフォントアイコンの名前
iconMaterialstringマテリアルアイコンフォントアイコンの名前
iconIosstringiOSテーマが使用されている場合に使用されるアイコン。コロンで区切られたアイコンファミリとアイコン名で構成されます。例：f7:house
iconMdstringMDテーマが使用されている場合に使用されるアイコン。コロンで区切られたアイコンファミリとアイコン名で構成されます。例：material:home
iconBadgestring
number		アイコンにバッジを追加します（タブバーのアイコンで使用することを意図しています）
<Link> ナビゲーション/ルーター関連プロパティ
hrefstring
boolean		#読み込むページのURL。ブール値href="false"の場合、hrefタグは追加されません
targetstringリンクターゲット属性の値。例：_blank、_selfなど
viewstringページを読み込むビューのCSSセレクター。または、現在のビューに読み込む場合はcurrentを指定します。
externalbooleanFramework7のリンククリックハンドラをバイパスできるようにします
backboolean戻るナビゲーションリンクを有効にします
openInstringページルートをモーダルまたはパネルとして開くことができます。 popup、loginScreen、sheet、popover、またはpanelを指定できます
forceboolean履歴の前のページを無視してページを強制的に読み込みます（backプロパティと組み合わせて使用​​します）
reloadCurrentboolean現在アクティブなページの代わりに新しいページをリロードします
reloadPreviousboolean履歴の前のページをルートからの新しいページに置き換えます
reloadAllboolean新しいページを読み込み、履歴とDOMから以前のすべてのページを削除します
reloadDetailbooleanマスター詳細ビューの詳細ページをリロードします
animatebooleanページアニメーションを無効にします
transitionstringカスタムページトランジションの名前
ignoreCachebooleanキャッシュを無視します
routeTabIdstringルーティング可能なタブID
routePropsobjectターゲットルートコンポーネントに渡される追加のプロパティを含むオブジェクト
preventRouterbooleanfalse設定されている場合、Framework7ルーターによって処理されません
<Link> アクション関連プロパティ
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セレクター。または、現在開いているポップアップを閉じるブール値プロパティ
popoverOpenstring
boolean		クリック時に開くポップオーバーのCSSセレクター
popoverClosestring
boolean		クリック時に閉じるポップオーバーのCSSセレクター。または、現在開いているポップオーバーを閉じるブール値プロパティ
sheetOpenstring
boolean		クリック時に開くシートモーダルのCSSセレクター
sheetClosestring
boolean		クリック時に閉じるシートモーダルのCSSセレクター。または、現在開いているシートモーダルを閉じるブール値プロパティ
loginScreenOpenstring
boolean		クリック時に開くログイン画面のCSSセレクター
loginScreenClosestring
boolean		クリック時に閉じるログイン画面のCSSセレクター。または、現在開いているログイン画面を閉じるブール値プロパティ
sortableEnablestring
boolean		クリック時に有効にするソート可能リストのCSSセレクター
sortableDisablestring
boolean		クリック時に無効にするソート可能リストのCSSセレクター。または、現在開いているソート可能リストを閉じるブール値プロパティ
sortableTogglestring
boolean		クリック時に切り替えるソート可能リストのCSSセレクター。または、現在開いている/閉じているソート可能リストを切り替えるブール値プロパティ
searchbarEnablestring
boolean		クリック時に有効にする拡張可能検索バーのCSSセレクター。または、最初に見つかった検索バーを有効にするブール値プロパティ
searchbarDisablestring
boolean		クリック時に無効にする拡張可能検索バーのCSSセレクター。または、最初に見つかった検索バーを無効にするブール値プロパティ
searchbarTogglestring
boolean		クリック時に切り替える拡張可能検索バーのCSSセレクター。または、最初に見つかった検索バーを切り替えるブール値プロパティ
searchbarClearstring
boolean		クリック時にクリアする拡張可能検索バーのCSSセレクター。または、最初に見つかった検索バーをクリアするブール値プロパティ
cardOpenstring
boolean		クリック時に開く拡張可能カードのCSSセレクター。または、最初に見つかった拡張可能カードを開くブール値
cardClosestring
boolean		クリック時に閉じる拡張可能カードのCSSセレクター。または、現在開いている拡張可能カードを閉じるブール値プロパティ
cardPreventOpenbooleanこのプロパティを持つ要素をクリックしても、その親の拡張可能カードは開きません
イベント説明
<Link> イベント
clickリンクをクリックした後にイベントがトリガーされます

例

ナビゲーションリンク

<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 -->
<Tabs>
  <Tab id="tab-1" tabActive>Tab 1</Tab>
  <Tab id="tab-2">Tab 2</Tab>
</Tabs>
<!-- Switch Between Tabs -->
<Link tabLink="#tab-1" tabLinkActive>Show Tab 1</Link>
<Link tabLink="#tab-2">Show Tab 2</Link>

ルーティング可能なタブ

<!-- Tabs -->
<Tabs>
  <Tab id="tab-1"></Tab>
  <Tab id="tab-2"></Tab>
</Tabs>
<!-- Switch Between 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>
このドキュメントを改善する
このページの内容