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

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

    フォーム要素を使うと、柔軟で美しいフォームのレイアウトを作ることができます。フォームエレメントは、よく知られているリストビュー（リストとリストアイテムのVueコンポーネント）と同じですが、いくつかの追加コンポーネントがあります。

    Framework7の入力/フォーム要素を見てみると、その姿が見えてきます。

    入力コンポーネント

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

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

    入力のプロパティ

    PropTypeDefaultDescription
    <f7-list-input> properties
    mediastringリストアイテムのメディアイメージのURL
    labelstring入力のラベルテキスト
    inline-labelbooleanfalseラベルのインライン化
    floating-labelbooleanfalseフローティングラベルを有効にする
    outlinebooleanfalse入力のアウトライン化
    inputbooleantrue入力要素をレンダリングするかどうか。内部でカスタム入力を使用したい場合は無効にします。
    typestring入力タイプ。すべてのデフォルトの HTML5 入力タイプと、いくつかの特別なタイプがあります。
    • textarea - textarea要素をレンダリングします。
    • select - select要素を表示します。
    • datepicker - 入力がフォーカスされたときに カレンダーを開く。
    • colorpicker - 入力にフォーカスしたときに Color Pickerを表示する。
    • texteditor - 入力にフォーカスしたときにテキストエディタを開く
    resizablebooleanfalseテキストエリアのサイズを変更する
    inputStylestring
    object    		入力の "style "属性の値（追加のスタイルを渡す必要がある場合に備えて
    clear-buttonbooleanfalseクリックすると入力値がクリアされる入力クリアボタンを追加
    validatebooleanfalseこの機能を有効にすると、入力値の変更時に、渡された「パターン」または入力タイプに基づいて検証されます。カスタムバリデーションを使用していて、エラーメッセージの表示/非表示をより細かく制御する必要がある場合には、バリデーションを無効にして、error-message と error-message-force プロップスを併用するとよいでしょう。
    validate-on-blurbooleanfalse有効にすると、入力はblurのみで検証されます。
    onValidatefunction入力検証時に実行されるコールバックは、入力が有効かどうかを示すブール値を返します。
    <f7-list-input
  type="email"
  validate
  :onValidate="(isValid) => setInputValid(isValid)"
/>
    error-messagestring入力値が無効なときに表示するカスタムエラーメッセージ
    error-message-forcebooleanfalseエラーメッセージを強制的に表示します。カスタムバリデーションを使用していて、必要に応じてエラーメッセージを表示/非表示にしたい場合に便利です。
    infostring入力に関する情報のカスタム追加テキスト
    namestring入力名
    placeholderstring入力のプレースホルダー
    idstring折り返し要素のID属性
    input-idstring入力要素のID属性
    valuestring
    number
    array
    object

    入力の値。

    type="datepicker"の場合、値は<a href="/docs/calendar.html" target="_blank">Calendar</a>が受け付けるものとして渡さなければなりません - 日付を含む配列、例えば :value="[new Date()]"`など。

    type="colorpicker"の場合、値は<a href="/docs/color-picker.html" target="_blank">Color Picker</a>が受け付けるものとして渡さなければなりません - 色を含むオブジェクト、例えば :value="{hex: '#ff0000'}"`などです。

    type="texteditor"`の場合、値はHTML文字列でなければなりません。

    inputmodestring入力のネイティブな "inputmode "属性の値
    sizestring
    number    		入力のネイティブな "size "属性の値
    patternstring入力のネイティブな "pattern "属性の値
    acceptstring
    number    		入力に固有の "accept "属性の値
    autocompletestring入力のネイティブ "autocomplete "属性の値
    autofocusbooleanfalseValue of the input's native "autofocus" attribute (日本語)
    autosavestring入力固有の "autosave "属性の値
    disabledbooleanfalse入力を無効にする
    maxstring
    number    		入力のネイティブ "max "属性の値
    minstring
    number    		入力のネイティブの "min "属性の値
    stepstring
    number    		入力のネイティブ "step "属性の値
    maxlengthstring
    number    		入力のネイティブ "maxlength "属性の値
    minlengthstring
    number    		input's native "minlength "属性の値
    multiplebooleanfalse入力固有の "multiple "属性の値
    readonlybooleanfalse入力をリードオンリーとしてマークする
    requiredbooleanfalse入力を必須としてマークする
    tabindexstring
    number    		入力のネイティブ "tabindex "属性の値
    no-store-databooleanfalseForm Storageで使用する際に、入力値を無視して保存できるようにする。
    ignore-store-databooleanfalse以前と同じ
    wrapbooleantrue有効にすると、<li> 要素で囲まれます。
    calendar-paramsobjectカレンダーのパラメータを持つオブジェクトで、type="datepicker"のときに使用されます。
    color-picker-paramsobjecttype="colorpicker"`の場合に使用されるカラーピッカーのパラメーターを持つオブジェクト。
    text-editor-paramsobjecttype="texteditor"`の場合に使用されるテキストエディタのパラメータを持つオブジェクト。
    <f7-input> properties
    outlinebooleanfalse入力をアウトライン化する
    wrapbooleantrue入力を <div class="input"> 要素でラップするかどうかを定義します。
    typestring入力タイプ。すべてのデフォルトの HTML5 入力タイプと、いくつかの特別なタイプがあります。
    • textarea - textarea要素を表示します。
    • select - select要素を表示します。
    • datepicker - 入力がフォーカスされたときに カレンダーを開く。
    • colorpicker - 入力にフォーカスしたときに Color Pickerを表示する。
    • texteditor - 入力にフォーカスしたときにテキストエディタを開く
    resizablebooleanfalseテキストエリアのサイズを変更する
    inputStylestring
    object    		入力の "style "属性の値（追加のスタイルを渡す必要がある場合に備えて
    clear-buttonbooleanfalseクリックすると入力値がクリアされる入力クリアボタンを追加
    validatebooleanfalseこの機能を有効にすると、入力値の変更時に、渡された「パターン」または入力タイプに基づいて検証されます。カスタムバリデーションを使用していて、エラーメッセージの表示/非表示をより細かく制御する必要がある場合には、バリデーションを無効にして、error-message と error-message-force プロップスを併用するとよいでしょう。
    validate-on-blurbooleanfalse有効にすると、入力はblurのみで検証されます。
    onValidatefunction入力検証時に実行されるコールバックは、入力が有効かどうかを示すブール値を返します。
    <f7-input
  type="email"
  validate
  :onValidate="(isValid) => setInputValid(isValid)"
/>
    error-messagestring入力値が無効なときに表示するカスタムエラーメッセージ
    error-message-forcebooleanfalseエラーメッセージを強制的に表示します。カスタムバリデーションを使用していて、必要に応じてエラーメッセージを表示/非表示にしたい場合に便利です。
    infostring入力に関する情報のカスタム追加テキスト
    namestring入力名
    placeholderstring入力のプレースホルダー
    idstring折り返し要素のID属性
    input-idstring入力要素のID属性
    valuestring
    number

    入力の値。

    type="datepicker"の場合、値は<a href="/docs/calendar.html" target="_blank">Calendar</a>が受け付けるものとして渡さなければなりません - 日付を含む配列、例えば :value="[new Date()]"`など。

    type="colorpicker"の場合、値は<a href="/docs/color-picker.html" target="_blank">Color Picker</a>が受け付けるものとして渡さなければなりません - 色を含むオブジェクト、例えば :value="{hex: '#ff0000'}"`などです。

    type="texteditor"`の場合、値はHTML文字列でなければなりません。

    inputmodestring入力のネイティブな "inputmode "属性の値
    sizestring
    number    		入力のネイティブな "size "属性の値
    patternstring入力のネイティブな "pattern "属性の値
    acceptstring
    number    		入力に固有の "accept "属性の値
    autocompletestring入力のネイティブ "autocomplete "属性の値
    autofocusbooleanfalseValue of the input's native "autofocus" attribute (日本語)
    autosavestring入力固有の "autosave "属性の値
    checkedbooleanfalse入力をチェック済みとしてマークする
    disabledbooleanfalse入力を無効にするマーク
    maxstring
    number    		入力のネイティブ "max "属性の値
    minstring
    number    		入力固有の "min "属性の値
    stepstring
    number    		入力固有の "step "属性の値
    maxlengthstring
    number    		入力のネイティブ "maxlength "属性の値
    minlengthstring
    number    		input's native "minlength "属性の値
    multiplebooleanfalse入力固有の "multiple "属性の値
    readonlybooleanfalse入力をリードオンリーとしてマークする
    requiredbooleanfalse入力を必須としてマークする
    tabindexstring
    number    		入力のネイティブ "tabindex "属性の値
    no-store-databooleanfalseForm Storageで使用する際に、入力値を無視して保存できるようにする。
    ignore-store-databooleanfalse従来と同じ
    calendar-paramsobjectCalendar Parametersを持つオブジェクトで、type="datepicker"の時に使用されます。
    color-picker-paramsobjecttype="colorpicker"`の場合に使用されるカラーピッカーのパラメーターを持つオブジェクト。
    text-editor-paramsobjecttype="texteditor"`の場合に使用されるテキストエディタのパラメータを持つオブジェクト。

    入力イベント

    EventArgumentsDescription
    <f7-list-input>, <f7-input> events
    focus(event)ユーザーが入力にフォーカスしたときに発生します。
    blur(event)ユーザーが入力にフォーカスしていないときに発生します。
    input(event)入力値が変更されたときに直ちに発生します。注意：入力イベントは、beforeinput、keypress、keyup、keydownイベントの後に発生します。
    change(event)値が変更された場合、blurで発生します。
    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 -
      ` 要素の先頭に挿入されます。
    • inner / inner-end - 要素は、
      ` 要素の最後に挿入されます。
    • media -
      ` 要素の内部に挿入されます。

    入力モデル

    f7-list-inputとf7-inputのVueコンポーネントは、valueのpropに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>

    Examples

    フルレイアウト／インラインラベル

    <f7-list inline-labels no-hairlines-md>
  <f7-list-input
    label="Name"
    type="text"
    placeholder="Your name"
    clear-button
  >
    <f7-icon icon="demo-list-icon" slot="media"></f7-icon>
  </f7-list-input>

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

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

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

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

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

  <f7-list-input
    label="Birthday"
    type="date"
    value="2014-04-30"
    placeholder="Please choose..."
  >
    <f7-icon icon="demo-list-icon" slot="media"></f7-icon>
  </f7-list-input>

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

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

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

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

    フルレイアウト / スタック式ラベル

    <f7-list no-hairlines-md>
  <f7-list-input
    label="Name"
    type="text"
    placeholder="Your name"
    clear-button
  >
    <f7-icon icon="demo-list-icon" slot="media"></f7-icon>
  </f7-list-input>

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

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

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

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

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

  <f7-list-input
    label="Birthday"
    type="date"
    value="2014-04-30"
    placeholder="Please choose..."
  >
    <f7-icon icon="demo-list-icon" slot="media"></f7-icon>
  </f7-list-input>

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

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

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

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

    日付ピッカー

    <f7-list no-hairlines-md>
  <f7-list-input
    label="Default setup"
    type="datepicker"
    placeholder="Your birth date"
    readonly
  ></f7-list-input>
  <f7-list-input
    label="Custom date format"
    type="datepicker"
    placeholder="Select date"
    readonly
    :calendar-params="{dateFormat: 'DD, MM dd, yyyy'}"
  ></f7-list-input>
  <f7-list-input
    label="Multiple Values"
    type="datepicker"
    placeholder="Select multiple dates"
    readonly
    :calendar-params="{ dateFormat: 'M dd yyyy', multiple: true }"
  ></f7-list-input>
  <f7-list-input
    label="Range Picker"
    type="datepicker"
    placeholder="Select date range"
    readonly
    :calendar-params="{ dateFormat: 'M dd yyyy', rangePicker: true }"
  ></f7-list-input>
  <f7-list-input
    label="Open in Modal"
    type="datepicker"
    placeholder="Select date"
    readonly
    :calendar-params="{openIn: 'customModal', header: true, footer: true, dateFormat: 'MM dd yyyy'}"
  ></f7-list-input>
</f7-list>

    カラーピッカー

    <f7-list no-hairlines-md>
  <f7-list-input
    type="colorpicker"
    label="Color Wheel"
    placeholder="Color"
    readonly
    :value="{ hex: '#00ff00' }"
  ></f7-list-input>
  <f7-list-input
    type="colorpicker"
    label="Saturation-Brightness Spectrum"
    placeholder="Color"
    readonly
    :value="{ hex: '#ff0000' }"
    :color-picker-params="{
      modules: ['sb-spectrum', 'hue-slider'],
    }"
  ></f7-list-input>

  <f7-list-input
    type="colorpicker"
    label="RGB Sliders"
    placeholder="Color"
    readonly
    :value="{ hex: '#0000ff' }"
    :color-picker-params="{
      modules: ['rgb-sliders'],
      sliderValue: true,
      sliderLabel: true,
    }"
  ></f7-list-input>

  <f7-list-input
    type="colorpicker"
    label="RGBA Sliders"
    placeholder="Color"
    readonly
    :value="{ hex: '#ff00ff' }"
    :color-picker-params="{
      modules: ['rgb-sliders', 'alpha-slider'],
      sliderValue: true,
      sliderLabel: true,
      formatValue(value) {
        return `rgba(${value.rgba.join(', ')})`;
      },
    }"
  ></f7-list-input>
  <f7-list-input
    type="colorpicker"
    label="HSB Sliders"
    placeholder="Color"
    readonly
    :value="{ hex: '#00ff00' }"
    :color-picker-params="{
      modules: ['hsb-sliders'],
      sliderValue: true,
      sliderLabel: true,
      formatValue(value) {
        return `hsb(${value.hsb[0]}, ${value.hsb[1] * 1000 / 10}%, ${value.hsb[2] * 1000 / 10}%)`
      },
    }"
  ></f7-list-input>
  <f7-list-input
    type="colorpicker"
    label="RGB Bars"
    placeholder="Color"
    readonly
    :value="{ hex: '#0000ff' }"
    :color-picker-params="{
      modules: ['rgb-bars'],
      openIn: 'auto',
      barValue: true,
      barLabel: true,
      formatValue(value) {
        return `rgb(${value.rgb.join(', ')})`;
      },
    }"
  ></f7-list-input>
  <f7-list-input
    type="colorpicker"
    label="RGB Sliders + Colors"
    placeholder="Color"
    readonly
    :value="{ hex: '#ffff00' }"
    :color-picker-params="{
      modules: ['initial-current-colors', 'rgb-sliders'],
      sliderValue: true,
      sliderLabel: true,
      formatValue(value) {
        return `rgb(${value.rgb.join(', ')})`;
      },
    }"
  ></f7-list-input>
  <f7-list-input
    type="colorpicker"
    label="Palette"
    placeholder="Color"
    readonly
    :value="{ hex: '#FFEBEE' }"
    :color-picker-params="{
      modules: ['palette'],
      openIn: 'auto',
      openInPhone: 'sheet',
      palette: [
        ['#FFEBEE', '#FFCDD2', '#EF9A9A', '#E57373', '#EF5350', '#F44336', '#E53935', '#D32F2F', '#C62828', '#B71C1C'],
        ['#F3E5F5', '#E1BEE7', '#CE93D8', '#BA68C8', '#AB47BC', '#9C27B0', '#8E24AA', '#7B1FA2', '#6A1B9A', '#4A148C'],
        ['#E8EAF6', '#C5CAE9', '#9FA8DA', '#7986CB', '#5C6BC0', '#3F51B5', '#3949AB', '#303F9F', '#283593', '#1A237E'],
        ['#E1F5FE', '#B3E5FC', '#81D4FA', '#4FC3F7', '#29B6F6', '#03A9F4', '#039BE5', '#0288D1', '#0277BD', '#01579B'],
        ['#E0F2F1', '#B2DFDB', '#80CBC4', '#4DB6AC', '#26A69A', '#009688', '#00897B', '#00796B', '#00695C', '#004D40'],
        ['#F1F8E9', '#DCEDC8', '#C5E1A5', '#AED581', '#9CCC65', '#8BC34A', '#7CB342', '#689F38', '#558B2F', '#33691E'],
        ['#FFFDE7', '#FFF9C4', '#FFF59D', '#FFF176', '#FFEE58', '#FFEB3B', '#FDD835', '#FBC02D', '#F9A825', '#F57F17'],
        ['#FFF3E0', '#FFE0B2', '#FFCC80', '#FFB74D', '#FFA726', '#FF9800', '#FB8C00', '#F57C00', '#EF6C00', '#E65100'],
      ],
      formatValue(value) {
        return value.hex;
      },
    }"
  ></f7-list-input>
  <f7-list-input
    type="colorpicker"
    label="Pro Mode"
    placeholder="Color"
    readonly
    :value="{ hex: '#00ffff' }"
    :color-picker-params="{
      modules: ['initial-current-colors', 'sb-spectrum', 'hsb-sliders', 'rgb-sliders', 'alpha-slider', 'hex', 'palette'],
      openIn: 'auto',
      sliderValue: true,
      sliderValueEditable: true,
      sliderLabel: true,
      hexLabel: true,
      hexValueEditable: true,
      groupedModules: true,
      palette: [
        ['#FFEBEE', '#FFCDD2', '#EF9A9A', '#E57373', '#EF5350', '#F44336', '#E53935', '#D32F2F', '#C62828', '#B71C1C'],
        ['#F3E5F5', '#E1BEE7', '#CE93D8', '#BA68C8', '#AB47BC', '#9C27B0', '#8E24AA', '#7B1FA2', '#6A1B9A', '#4A148C'],
        ['#E8EAF6', '#C5CAE9', '#9FA8DA', '#7986CB', '#5C6BC0', '#3F51B5', '#3949AB', '#303F9F', '#283593', '#1A237E'],
        ['#E1F5FE', '#B3E5FC', '#81D4FA', '#4FC3F7', '#29B6F6', '#03A9F4', '#039BE5', '#0288D1', '#0277BD', '#01579B'],
        ['#E0F2F1', '#B2DFDB', '#80CBC4', '#4DB6AC', '#26A69A', '#009688', '#00897B', '#00796B', '#00695C', '#004D40'],
        ['#F1F8E9', '#DCEDC8', '#C5E1A5', '#AED581', '#9CCC65', '#8BC34A', '#7CB342', '#689F38', '#558B2F', '#33691E'],
        ['#FFFDE7', '#FFF9C4', '#FFF59D', '#FFF176', '#FFEE58', '#FFEB3B', '#FDD835', '#FBC02D', '#F9A825', '#F57F17'],
        ['#FFF3E0', '#FFE0B2', '#FFCC80', '#FFB74D', '#FFA726', '#FF9800', '#FB8C00', '#F57C00', '#EF6C00', '#E65100'],
      ],
      formatValue(value) {
        return `rgba(${value.rgba.join(', ')})`;
      },
    }"
  ></f7-list-input>
</f7-list>

    フローティングラベル

    <f7-list no-hairlines-md>
  <f7-list-input
    label="Name"
    floating-label
    type="text"
    placeholder="Your name"
    clear-button
  >
    <f7-icon icon="demo-list-icon" slot="media"></f7-icon>
  </f7-list-input>

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

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

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

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

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

    フローティングラベル＋アウトライン入力

    <f7-list no-hairlines-md>
  <f7-list-input
    outline
    label="Name"
    floating-label
    type="text"
    placeholder="Your name"
    clear-button
  >
    <f7-icon icon="demo-list-icon" slot="media"></f7-icon>
  </f7-list-input>
  <f7-list-input
    outline
    label="Password"
    floating-label
    type="password"
    placeholder="Your password"
    clear-button
  >
    <f7-icon icon="demo-list-icon" slot="media"></f7-icon>
  </f7-list-input>
  <f7-list-input
    outline
    label="E-mail"
    floating-label
    type="email"
    placeholder="Your e-mail"
    clear-button
  >
    <f7-icon icon="demo-list-icon" slot="media"></f7-icon>
  </f7-list-input>
  <f7-list-input
    outline
    label="URL"
    floating-label
    type="url"
    placeholder="URL"
    clear-button
  >
    <f7-icon icon="demo-list-icon" slot="media"></f7-icon>
  </f7-list-input>
  <f7-list-input
    outline
    label="Phone"
    floating-label
    type="tel"
    placeholder="Your phone number"
    clear-button
  >
    <f7-icon icon="demo-list-icon" slot="media"></f7-icon>
  </f7-list-input>
  <f7-list-input
    outline
    label="Bio"
    floating-label
    type="textarea"
    resizable
    placeholder="Bio"
    clear-button
  >
    <f7-icon icon="demo-list-icon" slot="media"></f7-icon>
  </f7-list-input>
</f7-list>

    バリデーション＋追加情報

    <f7-list no-hairlines-md>
  <f7-list-input
    label="Name"
    type="text"
    placeholder="Your name"
    info="Default validation"
    required
    validate
    clear-button
  >
    <f7-icon icon="demo-list-icon" slot="media"></f7-icon>
  </f7-list-input>

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

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

  <f7-list-input
    label="URL"
    type="url"
    placeholder="Your URL"
    info="Default URL validation"
    required
    validate
    clear-button
  >
    <f7-icon icon="demo-list-icon" slot="media"></f7-icon>
  </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
  >
    <f7-icon icon="demo-list-icon" slot="media"></f7-icon>
  </f7-list-input>
</f7-list>

    アイコンと入力

    <f7-list no-hairlines-md>
  <f7-list-input
    type="text"
    placeholder="Your name"
    clear-button
  >
    <f7-icon icon="demo-list-icon" slot="media"></f7-icon>
  </f7-list-input>

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

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

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

</f7-list>

    ラベル＋入力

    <f7-list no-hairlines-md>
  <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-list no-hairlines-md>
  <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-list no-hairlines-md>
  <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-list inset>
  <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>