入力/フォーム要素 Vue コンポーネント

フォーム要素を使用すると、柔軟で美しいフォームレイアウトを作成できます。フォーム要素は、よく知られているリストビュー（リストおよびリストアイテム Vueコンポーネント）ですが、いくつかの追加コンポーネントが付属しています。

Framework7の入力/フォーム要素を確認して、その外観を確認してください。

入力コンポーネント

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

f7-list-input - リストアイテム入力要素
f7-input - 入力要素

入力プロパティ

プロパティ	型	デフォルト	説明
<f7-list-input> プロパティ
media	文字列		リストアイテムメディア画像のURL
label	文字列		入力のラベルテキスト
floating-label	ブール値	false	フローティングラベルを有効にします
outline	ブール値	false	入力にアウトラインを作成します
input	ブール値	true	入力要素をレンダリングするかどうかを指定します。カスタム入力を内部で使用したい場合は無効にします。
type	文字列		入力の種類。すべてのデフォルトのHTML5入力の種類と、いくつかの特別な種類があります。 textarea - テキストエリア要素をレンダリングします select - セレクト要素をレンダリングします datepicker - 入力フォーカス時にカレンダーを開きます colorpicker - 入力フォーカス時にカラーピッカーを開きます texteditor - 入力フォーカス時にテキストエディターを開きます
resizable	ブール値	false	テキストエリアをサイズ変更可能にします
inputStyle	文字列オブジェクト		追加のスタイルを渡す必要がある場合の入力の "style" 属性の値
clear-button	ブール値	false	入力クリアボタンを追加します。クリックすると入力値がクリアされます。
validate	ブール値	false	有効にすると、渡された「パターン」に基づいて、または入力の種類に基づいて、変更時に入力値が検証されます。カスタム検証を使用していて、エラーメッセージの表示/非表示をより細かく制御する必要がある場合は、検証を無効にして、`error-message`と`error-message-force`プロパティを一緒に使用することをお勧めします。
validate-on-blur	ブール値	false	有効にすると、入力はフォーカスが外れたときのみ検証されます。
onValidate	関数		入力検証時に実行されるコールバックで、入力が有効かどうかを示すブール値を返します。 `<f7-list-input type="email" validate :onValidate="(isValid) => setInputValid(isValid)" />`
error-message	文字列		入力値が無効な場合に表示するカスタムエラーメッセージ
error-message-force	ブール値	false	エラーメッセージを強制的に表示します。カスタム検証を使用していて、必要なときにエラーメッセージの表示/非表示を切り替えたい場合に役立ちます。
info	文字列		入力に関する追加情報を表示するカスタムテキスト
name	文字列		入力名
placeholder	文字列		入力プレースホルダー
id	文字列		ラッピング要素のID属性
input-id	文字列		入力要素のID属性
value	文字列数値配列オブジェクト		入力値。 `type="datepicker"`の場合、値はカレンダーが受け入れるものとして渡す必要があります。日付を含む配列、例えば`:value="[new Date()]"` `type="colorpicker"`の場合、値はカラーピッカーが受け入れるものとして渡す必要があります。色のオブジェクト、例えば`:value="{hex: '#ff0000'}"` `type="texteditor"`の場合、値はHTML文字列である必要があります。
inputmode	文字列		入力のネイティブ "inputmode" 属性の値
size	文字列数値		入力のネイティブ "size" 属性の値
pattern	文字列		入力のネイティブ "pattern" 属性の値
accept	文字列数値		入力のネイティブ "accept" 属性の値
autocomplete	文字列		入力のネイティブ "autocomplete" 属性の値
autofocus	ブール値	false	入力のネイティブ "autofocus" 属性の値
autosave	文字列		入力のネイティブ "autosave" 属性の値
disabled	ブール値	false	入力を無効としてマークします
max	文字列数値		入力のネイティブ "max" 属性の値
min	文字列数値		入力のネイティブ "min" 属性の値
step	文字列数値		入力のネイティブ "step" 属性の値
maxlength	文字列数値		入力のネイティブ "maxlength" 属性の値
minlength	文字列数値		入力のネイティブ "minlength" 属性の値
multiple	ブール値	false	入力のネイティブ "multiple" 属性の値
readonly	ブール値	false	入力を読み取り専用としてマークします
required	ブール値	false	入力を必須としてマークします
tabindex	文字列数値		入力のネイティブ "tabindex" 属性の値
no-store-data	ブール値	false	フォームストレージで使用する場合、入力値の保存を無視できます。
ignore-store-data	ブール値	false	上記と同じです
wrap	ブール値	true	有効にすると、`<li>`要素でラップされます。
calendar-params	オブジェクト		`type="datepicker"`で使用されるカレンダーパラメーターを含むオブジェクト
color-picker-params	オブジェクト		`type="colorpicker"`で使用されるカラーピッカーパラメーターを含むオブジェクト
text-editor-params	オブジェクト		`type="texteditor"`で使用されるテキストエディターパラメーターを含むオブジェクト
<f7-input> プロパティ
outline	ブール値	false	入力にアウトラインを作成します
wrap	ブール値	true	入力を`<div class="input">`要素でラップするかどうかを定義します。
type	文字列		入力の種類。すべてのデフォルトのHTML5入力の種類と、いくつかの特別な種類があります。 textarea - テキストエリア要素をレンダリングします select - セレクト要素をレンダリングします datepicker - 入力フォーカス時にカレンダーを開きます colorpicker - 入力フォーカス時にカラーピッカーを開きます texteditor - 入力フォーカス時にテキストエディターを開きます
resizable	ブール値	false	テキストエリアをサイズ変更可能にします
inputStyle	文字列オブジェクト		追加のスタイルを渡す必要がある場合の入力の "style" 属性の値
clear-button	ブール値	false	入力クリアボタンを追加します。クリックすると入力値がクリアされます。
validate	ブール値	false	有効にすると、渡された「パターン」に基づいて、または入力の種類に基づいて、変更時に入力値が検証されます。カスタム検証を使用していて、エラーメッセージの表示/非表示をより細かく制御する必要がある場合は、検証を無効にして、`error-message`と`error-message-force`プロパティを一緒に使用することをお勧めします。
validate-on-blur	ブール値	false	有効にすると、入力はフォーカスが外れたときのみ検証されます。
onValidate	関数		入力検証時に実行されるコールバックで、入力が有効かどうかを示すブール値を返します。 `<f7-input type="email" validate :onValidate="(isValid) => setInputValid(isValid)" />`
error-message	文字列		入力値が無効な場合に表示するカスタムエラーメッセージ
error-message-force	ブール値	false	エラーメッセージを強制的に表示します。カスタム検証を使用していて、必要なときにエラーメッセージの表示/非表示を切り替えたい場合に役立ちます。
info	文字列		入力に関する追加情報を表示するカスタムテキスト
name	文字列		入力名
placeholder	文字列		入力プレースホルダー
id	文字列		ラッピング要素のID属性
input-id	文字列		入力要素のID属性
value	文字列数値		入力値。 `type="datepicker"`の場合、値はカレンダーが受け入れるものとして渡す必要があります。日付を含む配列、例えば`:value="[new Date()]"` `type="colorpicker"`の場合、値はカラーピッカーが受け入れるものとして渡す必要があります。色のオブジェクト、例えば`:value="{hex: '#ff0000'}"` `type="texteditor"`の場合、値はHTML文字列である必要があります。
inputmode	文字列		入力のネイティブ "inputmode" 属性の値
size	文字列数値		入力のネイティブ "size" 属性の値
pattern	文字列		入力のネイティブ "pattern" 属性の値
accept	文字列数値		入力のネイティブ "accept" 属性の値
autocomplete	文字列		入力のネイティブ "autocomplete" 属性の値
autofocus	ブール値	false	入力のネイティブ "autofocus" 属性の値
autosave	文字列		入力のネイティブ "autosave" 属性の値
checked	ブール値	false	入力を選択済みとしてマークします
disabled	ブール値	false	入力を無効としてマークします
max	文字列数値		入力のネイティブ "max" 属性の値
min	文字列数値		入力のネイティブ "min" 属性の値
step	文字列数値		入力のネイティブ "step" 属性の値
maxlength	文字列数値		入力のネイティブ "maxlength" 属性の値
minlength	文字列数値		入力のネイティブ "minlength" 属性の値
multiple	ブール値	false	入力のネイティブ "multiple" 属性の値
readonly	ブール値	false	入力を読み取り専用としてマークします
required	ブール値	false	入力を必須としてマークします
tabindex	文字列数値		入力のネイティブ "tabindex" 属性の値
no-store-data	ブール値	false	フォームストレージで使用する場合、入力値の保存を無視できます。
ignore-store-data	ブール値	false	上記と同じです
calendar-params	オブジェクト		`type="datepicker"`で使用されるカレンダーパラメーターを含むオブジェクト
color-picker-params	オブジェクト		`type="colorpicker"`で使用されるカラーピッカーパラメーターを含むオブジェクト
text-editor-params	オブジェクト		`type="texteditor"`で使用されるテキストエディターパラメーターを含むオブジェクト

入力イベント

イベント	引数	説明
<f7-list-input>、<f7-input> イベント
focus	(event)	ユーザーが入力にフォーカスしたときに発生します。
blur	(event)	ユーザーが入力からフォーカスを外したときに発生します。
input	(event)	入力値が変更された直後に発生します。注：入力イベントは、beforeinput、keypress、keyup、keydownイベントの後でトリガーされます。
change	(event)	値が変更された場合、フォーカスが外れたときに発生します。
input:clear	(event)	入力クリアボタンをクリックしたときに発生します。
textarea:resize	(event)	サイズ変更可能なテキストエリアのサイズが変更された場合に発生します。`event.detail`には、`initialHeight`、`currentHeight`、`scrollHeight`プロパティを含むオブジェクトが含まれます。
input:empty	(event)	入力値が空になったときに発生します。
input:notempty	(event)	入力値が空ではなくなったときに発生します。
calendar:change	(value)	`type="datepicker"`カレンダーの値が変更されたときに発生します。引数として、選択された日付を含む配列を受け取ります。
colorpicker:change	(value)	`type="colorpicker"`カラーピッカーの値が変更されたときに発生します。引数として、カラーピッカーの値を含むオブジェクトを受け取ります。
texteditor:change	(value)	`type="texteditor"`テキストエディターの値が変更されたときに発生します。引数として、テキストエディターの値（HTML文字列）を受け取ります。

入力スロット

<f7-list-input>には、カスタム要素用の追加スロットがあります。

default - type="select"またはtype="textarea"の場合、要素はselectまたはtextareaタグ内に配置されます。
info - 要素は情報メッセージを含むコンテナに挿入されます。
error-message - 要素はエラーメッセージを含むコンテナに挿入されます。
label - 要素は入力ラベルを含むコンテナに挿入されます。
input - 要素は入力要素の代わりに挿入されます（inputプロパティもfalseに設定する必要があります）。
root-start - 要素は<li>要素の先頭に挿入されます。
root / root-end - 要素は<li>要素の最後に挿入されます。
content-start - 要素は<div class="item-content">要素の先頭に挿入されます。
content / content-end - 要素は<div class="item-content">要素の最後に挿入されます。
inner-start - 要素は<div class="item-inner">要素の先頭に挿入されます。
inner / inner-end - 要素は<div class="item-inner">要素の最後に挿入されます。
media - 要素は<div class="item-media">要素内に挿入されます。

入力v-model

f7-list-inputとf7-input Vueコンポーネントは、valueプロパティでv-modelをサポートしています。

<template>
  <p>Name is {{ name }}</p>
  <p>Email is {{ email }}</p>
  ...
  <f7-list-input
    label="Name"
    type="text"
    placeholder="Your name"
    clear-button
    v-model:value="name"
  />

  <f7-input
    type="text"
    placeholder="Your email"
    clear-button
    v-model:value="email"
  />
  ...
</template>
<script>
  export default {
    data() {
      name: '',
      email: '',
    },
    ...
  };
</script>

例

inputs.vue

<template>
  <f7-page>
    <f7-navbar title="Form Inputs"></f7-navbar>

    <f7-block-title>Full Layout / Stacked Labels</f7-block-title>
    <f7-list strong-ios dividers-ios inset-ios>
      <f7-list-input label="Name" type="text" placeholder="Your name" clear-button>
        <template #media>
          <f7-icon icon="demo-list-icon" />
        </template>
      </f7-list-input>

      <f7-list-input label="Password" type="password" placeholder="Your password" clear-button>
        <template #media>
          <f7-icon icon="demo-list-icon" />
        </template>
      </f7-list-input>

      <f7-list-input label="E-mail" type="email" placeholder="Your e-mail" clear-button>
        <template #media>
          <f7-icon icon="demo-list-icon" />
        </template>
      </f7-list-input>

      <f7-list-input label="URL" type="url" placeholder="URL" clear-button>
        <template #media>
          <f7-icon icon="demo-list-icon" />
        </template>
      </f7-list-input>

      <f7-list-input label="Phone" type="tel" placeholder="Your phone number" clear-button>
        <template #media>
          <f7-icon icon="demo-list-icon" />
        </template>
      </f7-list-input>

      <f7-list-input label="Gender" type="select" placeholder="Please choose...">
        <template #media>
          <f7-icon icon="demo-list-icon" />
        </template>
        <option value="Male">Male</option>
        <option value="Female">Female</option>
      </f7-list-input>

      <f7-list-input label="Birthday" type="date" placeholder="Please choose...">
        <template #media>
          <f7-icon icon="demo-list-icon" />
        </template>
      </f7-list-input>

      <f7-list-input label="Date time" type="datetime-local" placeholder="Please choose...">
        <template #media>
          <f7-icon icon="demo-list-icon" />
        </template>
      </f7-list-input>

      <f7-list-input label="Range" :input="false">
        <template #media>
          <f7-icon icon="demo-list-icon" />
        </template>
        <template #input>
          <f7-range :value="50" :min="0" :max="100" :step="1" />
        </template>
      </f7-list-input>

      <f7-list-input label="Textarea" type="textarea" placeholder="Bio">
        <template #media>
          <f7-icon icon="demo-list-icon" />
        </template>
      </f7-list-input>

      <f7-list-input label="Resizable" type="textarea" resizable placeholder="Bio">
        <template #media>
          <f7-icon icon="demo-list-icon" />
        </template>
      </f7-list-input>
    </f7-list>

    <f7-block-title>Floating Labels</f7-block-title>
    <f7-list strong-ios dividers-ios inset-ios>
      <f7-list-input label="Name" floating-label type="text" placeholder="Your name" clear-button>
        <template #media>
          <f7-icon icon="demo-list-icon" />
        </template>
      </f7-list-input>

      <f7-list-input
        label="Password"
        floating-label
        type="password"
        placeholder="Your password"
        clear-button
      >
        <template #media>
          <f7-icon icon="demo-list-icon" />
        </template>
      </f7-list-input>

      <f7-list-input
        label="E-mail"
        floating-label
        type="email"
        placeholder="Your e-mail"
        clear-button
      >
        <template #media>
          <f7-icon icon="demo-list-icon" />
        </template>
      </f7-list-input>

      <f7-list-input label="URL" floating-label type="url" placeholder="URL" clear-button>
        <template #media>
          <f7-icon icon="demo-list-icon" />
        </template>
      </f7-list-input>

      <f7-list-input
        label="Phone"
        floating-label
        type="tel"
        placeholder="Your phone number"
        clear-button
      >
        <template #media>
          <f7-icon icon="demo-list-icon" />
        </template>
      </f7-list-input>

      <f7-list-input label="Resizable" floating-label type="textarea" resizable placeholder="Bio">
        <template #media>
          <f7-icon icon="demo-list-icon" />
        </template>
      </f7-list-input>
    </f7-list>

    <f7-block-title>Floating Labels + Outline Inputs</f7-block-title>
    <f7-list strong-ios dividers-ios inset-ios>
      <f7-list-input
        outline
        label="Name"
        floating-label
        type="text"
        placeholder="Your name"
        clear-button
      >
        <template #media>
          <f7-icon icon="demo-list-icon" />
        </template>
      </f7-list-input>
      <f7-list-input
        outline
        label="Password"
        floating-label
        type="password"
        placeholder="Your password"
        clear-button
      >
        <template #media>
          <f7-icon icon="demo-list-icon" />
        </template>
      </f7-list-input>
      <f7-list-input
        outline
        label="E-mail"
        floating-label
        type="email"
        placeholder="Your e-mail"
        clear-button
      >
        <template #media>
          <f7-icon icon="demo-list-icon" />
        </template>
      </f7-list-input>
      <f7-list-input outline label="URL" floating-label type="url" placeholder="URL" clear-button>
        <template #media>
          <f7-icon icon="demo-list-icon" />
        </template>
      </f7-list-input>
      <f7-list-input
        outline
        label="Phone"
        floating-label
        type="tel"
        placeholder="Your phone number"
        clear-button
      >
        <template #media>
          <f7-icon icon="demo-list-icon" />
        </template>
      </f7-list-input>
      <f7-list-input
        outline
        label="Bio"
        floating-label
        type="textarea"
        resizable
        placeholder="Bio"
        clear-button
      >
        <template #media>
          <f7-icon icon="demo-list-icon" />
        </template>
      </f7-list-input>
    </f7-list>

    <f7-block-title>Validation + Additional Info</f7-block-title>
    <f7-list strong-ios dividers-ios inset-ios>
      <f7-list-input
        label="Name"
        type="text"
        placeholder="Your name"
        info="Default validation"
        required
        validate
        clear-button
      >
        <template #media>
          <f7-icon icon="demo-list-icon" />
        </template>
      </f7-list-input>

      <f7-list-input
        label="Fruit"
        type="text"
        placeholder="Type 'apple' or 'banana'"
        required
        validate
        pattern="apple|banana"
        clear-button
      >
        <template #media>
          <f7-icon icon="demo-list-icon" />
        </template>
        <template #info>
          <span>Pattern validation (<b>apple|banana</b>)</span>
        </template>
      </f7-list-input>

      <f7-list-input
        label="E-mail"
        type="email"
        placeholder="Your e-mail"
        info="Default e-mail validation"
        required
        validate
        clear-button
      >
        <template #media>
          <f7-icon icon="demo-list-icon" />
        </template>
      </f7-list-input>

      <f7-list-input
        label="URL"
        type="url"
        placeholder="Your URL"
        info="Default URL validation"
        required
        validate
        clear-button
      >
        <template #media>
          <f7-icon icon="demo-list-icon" />
        </template>
      </f7-list-input>

      <f7-list-input
        label="Number"
        type="text"
        placeholder="Enter number"
        info="With custom error message"
        error-message="Only numbers please!"
        required
        validate
        pattern="[0-9]*"
        clear-button
      >
        <template #media>
          <f7-icon icon="demo-list-icon" />
        </template>
      </f7-list-input>
    </f7-list>

    <f7-block-title>Icon + Input</f7-block-title>
    <f7-list strong-ios dividers-ios inset-ios>
      <f7-list-input type="text" placeholder="Your name" clear-button>
        <template #media>
          <f7-icon icon="demo-list-icon" />
        </template>
      </f7-list-input>

      <f7-list-input type="password" placeholder="Your password" clear-button>
        <template #media>
          <f7-icon icon="demo-list-icon" />
        </template>
      </f7-list-input>

      <f7-list-input type="email" placeholder="Your e-mail" clear-button>
        <template #media>
          <f7-icon icon="demo-list-icon" />
        </template>
      </f7-list-input>

      <f7-list-input type="url" placeholder="URL" clear-button>
        <template #media>
          <f7-icon icon="demo-list-icon" />
        </template>
      </f7-list-input>
    </f7-list>

    <f7-block-title>Label + Input</f7-block-title>
    <f7-list strong-ios dividers-ios inset-ios>
      <f7-list-input label="Name" type="text" placeholder="Your name" clear-button></f7-list-input>

      <f7-list-input
        label="Password"
        type="password"
        placeholder="Your password"
        clear-button
      ></f7-list-input>

      <f7-list-input
        label="E-mail"
        type="email"
        placeholder="Your e-mail"
        clear-button
      ></f7-list-input>

      <f7-list-input label="URL" type="url" placeholder="URL" clear-button></f7-list-input>
    </f7-list>

    <f7-block-title>Only Inputs</f7-block-title>
    <f7-list strong-ios dividers-ios inset-ios>
      <f7-list-input type="text" placeholder="Your name" clear-button></f7-list-input>

      <f7-list-input type="password" placeholder="Your password" clear-button></f7-list-input>

      <f7-list-input type="email" placeholder="Your e-mail" clear-button></f7-list-input>

      <f7-list-input type="url" placeholder="URL" clear-button></f7-list-input>
    </f7-list>

    <f7-block-title>Inputs + Additional Info</f7-block-title>
    <f7-list strong-ios dividers-ios inset-ios>
      <f7-list-input
        type="text"
        placeholder="Your name"
        info="Full name please"
        clear-button
      ></f7-list-input>

      <f7-list-input
        type="password"
        placeholder="Your password"
        info="8 characters minimum"
        clear-button
      ></f7-list-input>

      <f7-list-input
        type="email"
        placeholder="Your e-mail"
        info="Your work e-mail address"
        clear-button
      ></f7-list-input>

      <f7-list-input
        type="url"
        placeholder="URL"
        info="Your website URL"
        clear-button
      ></f7-list-input>
    </f7-list>
  </f7-page>
</template>
<script>
import {
  f7Navbar,
  f7Page,
  f7BlockTitle,
  f7List,
  f7Icon,
  f7ListInput,
  f7Range,
} from 'framework7-vue';

export default {
  components: {
    f7Navbar,
    f7Page,
    f7BlockTitle,
    f7List,
    f7Icon,
    f7ListInput,
    f7Range,
  },
};
</script>

このドキュメントを改善する

このページについて

入力コンポーネント
入力プロパティ
入力イベント
入力スロット
入力v-model
例