🔥 新しいプロジェクトのご紹介 t0ggles - あなたの究極のプロジェクト管理ツール！ 🔥

リスト入力 Vue コンポーネント

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

リスト入力コンポーネント

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

  • ListInput - リストアイテム入力要素

ListInput プロパティ

名前型デフォルト説明
accept文字列 | 数値

入力のネイティブな "accept" 属性の値

autocapitalize文字列

入力のネイティブな "autocapitalize" 属性の値

autocomplete文字列

入力のネイティブな "autoComplete" 属性の値

autocorrect文字列

入力のネイティブな "autocorrect" 属性の値

autofocusブール値

入力のネイティブな "autofocus" 属性の値

autosave文字列

入力のネイティブな "autosave" 属性の値

clearButtonブール値false

入力クリアボタンを追加します

colorsオブジェクト

Tailwind CSS カラークラスを含むオブジェクト

colors.bgIos文字列''
colors.bgMaterial文字列'bg-md-light-surface-variant dark:bg-md-dark-surface-variant'
colors.errorBorder文字列'border-red-500'
colors.errorText文字列'text-red-500'
colors.labelTextFocusIos文字列''
colors.labelTextFocusMaterial文字列'text-md-light-primary dark:text-md-dark-primary'
colors.labelTextIos文字列''
colors.labelTextMaterial文字列'text-md-light-on-surface-variant dark:text-md-dark-on-surface-variant'
colors.outlineBorderFocusIos文字列'border-primary'
colors.outlineBorderFocusMaterial文字列'border-md-light-primary dark:border-md-dark-primary'
colors.outlineBorderIos文字列'border-black border-opacity-30 dark:border-white dark:border-opacity-30'
colors.outlineBorderMaterial文字列'border-md-light-on-surface dark:border-md-dark-on-surface'
colors.outlineLabelBgIos文字列'bg-ios-light-surface-1 dark:bg-ios-dark-surface-1'
colors.outlineLabelBgMaterial文字列'bg-md-light-surface dark:bg-md-dark-surface'
component文字列'li'

コンポーネントのHTML要素

disabledブール値

入力を無効としてマークします

dropdownブール値false

追加のドロップダウンアイコンを表示します（`select` 入力と併用すると便利です）

error文字列

入力の「エラー」の内容

floatingLabelブール値false

フローティングラベルを作成します

info文字列

入力の「情報」の内容

inputClass文字列

追加の入力スタイル

inputId文字列

入力のid属性

inputmode文字列

入力のネイティブな "inputmode" 属性の値

inputStyleCSSProperties

追加の入力クラス

label文字列

ラベルの内容

max文字列 | 数値

入力のネイティブな "max" 属性の値

maxlength文字列 | 数値

入力のネイティブな "maxlength" 属性の値

min文字列 | 数値

入力のネイティブな "min" 属性の値

minlength文字列 | 数値

入力のネイティブな "minlength" 属性の値

multipleブール値

入力のネイティブな "multiple" 属性の値

name文字列

入力名

outlineブール値undefined

アウトラインスタイルの入力（周囲にボーダー付き）を表示します。`outlineIos` と `outlineMaterial` を上書きします。

outlineIosブール値false

iOSテーマでアウトラインスタイルの入力（周囲にボーダー付き）を表示します。

outlineMaterialブール値false

Materialテーマでアウトラインスタイルの入力（周囲にボーダー付き）を表示します。

pattern文字列

入力のネイティブな "pattern" 属性の値

placeholder文字列 | 数値

入力プレースホルダー

readonlyブール値

入力を読み取り専用としてマークします

requiredブール値

入力を必須としてマークします

size文字列 | 数値

入力のネイティブな "size" 属性の値

spellcheck文字列

入力のネイティブな "spellcheck" 属性の値

step文字列 | 数値

入力のネイティブな "step" 属性の値

tabindex文字列 | 数値

入力のネイティブな "tabindex" 属性の値

type文字列'text'

入力の種類

value任意

入力値

ListInput イベント

名前型説明
blurfunction(e)

blur イベントハンドラ

changefunction(e)

change イベントハンドラ

clearfunction(e)

clear イベントハンドラ

focusfunction(e)

focus イベントハンドラ

inputfunction(e)

input イベントハンドラ

ListInput スロット

名前説明
error

入力の「エラー」の内容

info

入力の「情報」の内容

input

カスタム入力要素

label

ラベルの内容

media

リストアイテムの「メディア」領域の内容（例：アイコン）

例

FormInputs.vue
<template>
  <k-page>
    <k-navbar title="Form Inputs" />


    <k-block-title>Default</k-block-title>
    <k-list inset-ios strong-ios>
      <k-list-input label="Name" type="text" placeholder="Your name">
        <template #media>
          <demo-icon />
        </template>
      </k-list-input>


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


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


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


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


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


      <k-list-input
        label="Birthday"
        type="date"
        default-value="2014-04-30"
        placeholder="Please choose..."
      >
        <template #media>
          <demo-icon />
        </template>
      </k-list-input>


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


      <k-list-input
        label="Textarea"
        type="textarea"
        placeholder="Bio"
        input-class="!h-20 resize-none"
      >
        <template #media>
          <demo-icon />
        </template>
      </k-list-input>
    </k-list>


    <k-block-title>Outline</k-block-title>
    <k-list inset-ios strong-ios>
      <k-list-input outline label="Name" type="text" placeholder="Your name">
        <template #media>
          <demo-icon />
        </template>
      </k-list-input>


      <k-list-input
        outline
        label="Password"
        type="password"
        placeholder="Your password"
      >
        <template #media>
          <demo-icon />
        </template>
      </k-list-input>


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


      <k-list-input outline label="URL" type="url" placeholder="URL">
        <template #media>
          <demo-icon />
        </template>
      </k-list-input>


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


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


      <k-list-input
        outline
        label="Birthday"
        type="date"
        default-value="2014-04-30"
        placeholder="Please choose..."
      >
        <template #media>
          <demo-icon />
        </template>
      </k-list-input>


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


      <k-list-input
        outline
        label="Textarea"
        type="textarea"
        placeholder="Bio"
        input-class="!h-20 resize-none"
      >
        <template #media>
          <demo-icon />
        </template>
      </k-list-input>
    </k-list>


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


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


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


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


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


    <k-block-title>Outline + Floating Labels</k-block-title>
    <k-list inset-ios strong-ios>
      <k-list-input
        outline
        label="Name"
        floating-label
        type="text"
        placeholder="Your name"
      >
        <template #media>
          <demo-icon />
        </template>
      </k-list-input>


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


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


      <k-list-input
        outline
        label="URL"
        floating-label
        type="url"
        placeholder="URL"
      >
        <template #media>
          <demo-icon />
        </template>
      </k-list-input>


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


    <k-block-title>Validation + Additional Info</k-block-title>
    <k-list inset-ios strong-ios>
      <k-list-input
        label="Name"
        type="text"
        placeholder="Your name"
        info="Basic string checking"
        :value="name.value"
        :error="
          name.changed && !name.value.trim() ? 'Please specify your name' : ''
        "
        @input="onNameChange"
      >
        <template #media>
          <demo-icon />
        </template>
      </k-list-input>
    </k-list>


    <k-block-title>Clear Button</k-block-title>
    <k-list inset-ios strong-ios>
      <k-list-input
        label="TV Show"
        type="text"
        placeholder="Your favorite TV show"
        info="Type something to see clear button"
        :value="demoValue"
        :clear-button="demoValue.length > 0"
        @input="onDemoValueChange"
        @clear="onDemoValueClear"
      >
        <template #media>
          <demo-icon />
        </template>
      </k-list-input>
    </k-list>


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


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


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


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


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


      <k-list-input
        label="Password"
        type="password"
        placeholder="Your password"
      />


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


      <k-list-input label="URL" type="url" placeholder="URL" />
    </k-list>


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


      <k-list-input type="password" placeholder="Your password" />


      <k-list-input type="email" placeholder="Your e-mail" />


      <k-list-input type="url" placeholder="URL" />
    </k-list>


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


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


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


      <k-list-input type="url" placeholder="URL" info="Your website URL" />
    </k-list>
  </k-page>
</template>
<script>
  import { ref } from 'vue';
  import {
    kPage,
    kNavbar,
    kNavbarBackLink,
    kBlockTitle,
    kList,
    kListInput,
  } from 'konsta/vue';
  import DemoIcon from '../components/DemoIcon.vue';


  export default {
    components: {
      kPage,
      kNavbar,
      kNavbarBackLink,
      kBlockTitle,
      kList,
      kListInput,
      DemoIcon,
    },
    setup() {
      const name = ref({ value: '', changed: false });
      const demoValue = ref('');


      const onNameChange = (e) => {
        name.value = { value: e.target.value, changed: true };
      };
      const onDemoValueChange = (e) => {
        demoValue.value = e.target.value;
      };
      const onDemoValueClear = () => {
        demoValue.value = '';
      };


      return {
        name,
        demoValue,
        onNameChange,
        onDemoValueChange,
        onDemoValueClear,
      };
    },
  };
</script>
ライセンス MIT.
2022 © Konsta UI by nolimits4web.