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

リストボタンSvelteコンポーネント

リストボタンSvelteコンポーネントは、Framework7のリストボタン要素を表します。これらはリストSvelteコンポーネント内で使用することを目的としています。

リストボタンコンポーネント

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

リストボタンのプロパティ

プロパティ型デフォルト説明
title文字列ボタンの内部テキスト
text文字列ボタンの内部テキスト。titleと同じです。
tabLink文字列/ブール値タブリンクを有効にし、ターゲットタブのCSSセレクタを指定します（文字列として指定した場合）。
tabLinkActiveブール値このタブリンクをアクティブにします。
target文字列リンクのtarget属性
tooltip文字列ボタンのホバー/プレス時に表示するリストボタンのツールチップテキスト。
tooltipTrigger文字列hoverツールチップのトリガー（表示）方法を定義します。hover、click、またはmanualです。
<ListButton> ナビゲーション/ルーター関連のプロパティ
href文字列
ブール値		#読み込むページのURL。ブール値href="false"の場合、hrefタグは追加されません。
target文字列リンクのtarget属性の値、例：_blank、_selfなど。
view文字列ページを読み込むビューのCSSセレクタ。または、現在のビューに読み込む場合はcurrent。
externalブール値Framework7のリンククリックハンドラをバイパスします。
backブール値戻るナビゲーションリンクを有効にします。
openIn文字列ページルートをモーダルまたはパネルとして開きます。popup、loginScreen、sheet、popover、またはpanelです。
forceブール値ページを強制的に読み込み、履歴内の前のページを無視します（backプロパティと組み合わせて使用します）。
reloadCurrentブール値現在アクティブなページではなく、新しいページを再読み込みします。
reloadPreviousブール値履歴内の前のページを、ルートからの新しいページに置き換えます。
reloadAllブール値新しいページを読み込み、履歴とDOMから前のページをすべて削除します。
reloadDetailブール値マスター詳細ビューで詳細ページを再読み込みします。
animateブール値ページアニメーションを無効にします。
transition文字列カスタムページトランジションの名前。
ignoreCacheブール値キャッシュを無視します。
routeTabId文字列ルーティング可能なタブID
routePropsオブジェクトターゲットルートコンポーネントに渡される追加のプロパティを含むオブジェクト。
preventRouterブール値false設定されている場合、Framework7ルーターによって処理されません。
<ListButton> アクション関連のプロパティ
panelOpen文字列
ブール値		クリック時に開くパネルのCSSセレクタ。DOMに左パネルまたは右パネルのみがある場合は、leftまたはrightです。
panelClose文字列
ブール値		クリック時にパネルを閉じます。
panelToggle文字列
ブール値		クリック時にトグルするパネルのCSSセレクタ。DOMに左パネルまたは右パネルのみがある場合は、leftまたはrightです。
actionsOpen文字列
ブール値		クリック時に開くアクションシートのCSSセレクタ。
actionsClose文字列
ブール値		クリック時に閉じるアクションシートのCSSセレクタ。または、現在開いているアクションシートを閉じるブール値のプロパティ。
popupOpen文字列
ブール値		クリック時に開くポップアップのCSSセレクタ。
popupClose文字列
ブール値		クリック時に閉じるポップアップのCSSセレクタ。または、現在開いているポップアップを閉じるブール値のプロパティ。
popoverOpen文字列
ブール値		クリック時に開くポップオーバーのCSSセレクタ。
popoverClose文字列
ブール値		クリック時に閉じるポップオーバーのCSSセレクタ。または、現在開いているポップオーバーを閉じるブール値のプロパティ。
sheetOpen文字列
ブール値		クリック時に開くシートモーダルのCSSセレクタ。
sheetClose文字列
ブール値		クリック時に閉じるシートモーダルのCSSセレクタ。または、現在開いているシートモーダルを閉じるブール値のプロパティ。
loginScreenOpen文字列
ブール値		クリック時に開くログイン画面のCSSセレクタ。
loginScreenClose文字列
ブール値		クリック時に閉じるログイン画面のCSSセレクタ。または、現在開いているログイン画面を閉じるブール値のプロパティ。
sortableEnable文字列
ブール値		クリック時に有効にするソート可能なリストのCSSセレクタ。
sortableDisable文字列
ブール値		クリック時に無効にするソート可能なリストのCSSセレクタ。または、現在開いているソート可能なリストを閉じるブール値のプロパティ。
sortableToggle文字列
ブール値		クリック時にトグルするソート可能なリストのCSSセレクタ。または、現在開いている/閉じているソート可能なリストをトグルするブール値のプロパティ。
searchbarEnable文字列
ブール値		クリック時に有効にする展開可能な検索バーのCSSセレクタ。または、最初に検出された検索バーを有効にするブール値のプロパティ。
searchbarDisable文字列
ブール値		クリック時に無効にする展開可能な検索バーのCSSセレクタ。または、最初に検出された検索バーを無効にするブール値のプロパティ。
searchbarToggle文字列
ブール値		クリック時にトグルする展開可能な検索バーのCSSセレクタ。または、最初に検出された検索バーをトグルするブール値のプロパティ。
searchbarClear文字列
ブール値		クリック時にクリアする展開可能な検索バーのCSSセレクタ。または、最初に検出された検索バーをクリアするブール値のプロパティ。
cardOpen文字列
ブール値		クリック時に開く展開可能なカードのCSSセレクタ。または、最初に検出された展開可能なカードを開くブール値。
cardClose文字列
ブール値		クリック時に閉じる展開可能なカードのCSSセレクタ。または、現在開いている展開可能なカードを閉じるブール値のプロパティ。
cardPreventOpenブール値このプロパティを持つ要素をクリックしても、親の展開可能なカードは開きません。

リストボタンイベント

イベント説明
<ListButton> イベント
clickボタンをクリックした後、イベントが発生します。

例

list-button.svelte
<script>
  import {
    Page,
    Navbar,
    List,
    ListButton,
  } from 'framework7-svelte';
</script>

<!-- svelte-ignore a11y-invalid-attribute -->
<Page>
  <Navbar title="List Button" />

  <List inset strong>
    <ListButton title="List Button 1" />
    <ListButton title="List Button 2" />
    <ListButton title="List Button 3" />
  </List>
  <List inset strong>
    <ListButton title="Large Red Button" color="red" />
  </List>
</Page>
このドキュメントを改善する
このページで