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

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

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

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

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

  • 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文字列

入力の "error" の内容

floatingLabelブール値false

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

info文字列

入力の "info" の内容

inputClass文字列

追加の入力スタイル

inputId文字列

入力ID属性

inputmode文字列

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

inputStyleCSSProperties

追加の入力クラス

label文字列

ラベルの内容

max文字列 | 数値

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

maxlength文字列 | 数値

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

min文字列 | 数値

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

minlength文字列 | 数値

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

multipleブール値

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

name文字列

入力名

outlineブール値未定義

アウトラインスタイルの入力（周囲に枠線がある）をレンダリングし、outlineIos と outlineMaterial を上書きします

outlineIosブール値false

iOSテーマでアウトラインスタイルの入力（周囲に枠線がある）をレンダリングします

outlineMaterialブール値false

マテリアルテーマでアウトラインスタイルの入力（周囲に枠線がある）をレンダリングします

pattern文字列

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

placeholder文字列 | 数値

入力プレースホルダー

readonlyブール値

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

requiredブール値

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

size文字列 | 数値

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

spellcheck文字列

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

step文字列 | 数値

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

tabindex文字列 | 数値

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

type文字列'text'

入力タイプ

value任意

入力値

onBlurfunction(e)

blur イベントハンドラ

onChangefunction(e)

change イベントハンドラ

onClearfunction(e)

clear イベントハンドラ

onFocusfunction(e)

focus イベントハンドラ

onInputfunction(e)

input イベントハンドラ

ListInput スロット

名前説明
error

入力の "error" の内容

info

入力の "info" の内容

input

カスタム入力要素

label

ラベルの内容

media

リストアイテムの "media" エリアの内容（例：アイコン）

例

FormInputs.svelte
<script>
  import {
    Page,
    Navbar,
    NavbarBackLink,
    BlockTitle,
    List,
    ListInput,
  } from 'konsta/svelte';


  import DemoIcon from '../components/DemoIcon.svelte';


  let name = { value: '', changed: false };
  let demoValue = '';


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


<Page>
  <Navbar title="Form Inputs" />


  <BlockTitle>Default</BlockTitle>
  <List strongIos insetIos>
    <ListInput label="Name" type="text" placeholder="Your name">
      <DemoIcon slot="media" />
    </ListInput>


    <ListInput label="Password" type="password" placeholder="Your password">
      <DemoIcon slot="media" />
    </ListInput>


    <ListInput label="E-mail" type="email" placeholder="Your e-mail">
      <DemoIcon slot="media" />
    </ListInput>


    <ListInput label="URL" type="url" placeholder="URL">
      <DemoIcon slot="media" />
    </ListInput>


    <ListInput label="Phone" type="tel" placeholder="Your phone number">
      <DemoIcon slot="media" />
    </ListInput>


    <ListInput
      label="Gender"
      type="select"
      dropdown
      defaultValue="Male"
      placeholder="Please choose..."
    >
      <DemoIcon slot="media" />
      <option value="Male">Male</option>
      <option value="Female">Female</option>
    </ListInput>


    <ListInput
      label="Birthday"
      type="date"
      defaultValue="2014-04-30"
      placeholder="Please choose..."
    >
      <DemoIcon slot="media" />
    </ListInput>


    <ListInput
      label="Date time"
      type="datetime-local"
      placeholder="Please choose..."
    >
      <DemoIcon slot="media" />
    </ListInput>


    <ListInput
      label="Textarea"
      type="textarea"
      placeholder="Bio"
      inputClass="!h-20 resize-none"
    >
      <DemoIcon slot="media" />
    </ListInput>
  </List>


  <BlockTitle>Outline</BlockTitle>
  <List strongIos insetIos>
    <ListInput outline label="Name" type="text" placeholder="Your name">
      <DemoIcon slot="media" />
    </ListInput>


    <ListInput
      outline
      label="Password"
      type="password"
      placeholder="Your password"
    >
      <DemoIcon slot="media" />
    </ListInput>


    <ListInput outline label="E-mail" type="email" placeholder="Your e-mail">
      <DemoIcon slot="media" />
    </ListInput>


    <ListInput outline label="URL" type="url" placeholder="URL">
      <DemoIcon slot="media" />
    </ListInput>


    <ListInput outline label="Phone" type="tel" placeholder="Your phone number">
      <DemoIcon slot="media" />
    </ListInput>


    <ListInput
      outline
      label="Gender"
      type="select"
      dropdown
      defaultValue="Male"
      placeholder="Please choose..."
    >
      <DemoIcon slot="media" />
      <option value="Male">Male</option>
      <option value="Female">Female</option>
    </ListInput>


    <ListInput
      outline
      label="Birthday"
      type="date"
      defaultValue="2014-04-30"
      placeholder="Please choose..."
    >
      <DemoIcon slot="media" />
    </ListInput>


    <ListInput
      outline
      label="Date time"
      type="datetime-local"
      placeholder="Please choose..."
    >
      <DemoIcon slot="media" />
    </ListInput>


    <ListInput
      outline
      label="Textarea"
      type="textarea"
      placeholder="Bio"
      inputClass="!h-20 resize-none"
    >
      <DemoIcon slot="media" />
    </ListInput>
  </List>


  <BlockTitle>Floating Labels</BlockTitle>
  <List strongIos insetIos>
    <ListInput label="Name" floatingLabel type="text" placeholder="Your name">
      <DemoIcon slot="media" />
    </ListInput>


    <ListInput
      label="Password"
      floatingLabel
      type="password"
      placeholder="Your password"
    >
      <DemoIcon slot="media" />
    </ListInput>


    <ListInput
      label="E-mail"
      floatingLabel
      type="email"
      placeholder="Your e-mail"
    >
      <DemoIcon slot="media" />
    </ListInput>


    <ListInput label="URL" floatingLabel type="url" placeholder="URL">
      <DemoIcon slot="media" />
    </ListInput>


    <ListInput
      label="Phone"
      floatingLabel
      type="tel"
      placeholder="Your phone number"
    >
      <DemoIcon slot="media" />
    </ListInput>
  </List>


  <BlockTitle>Outline + Floating Labels</BlockTitle>
  <List strongIos insetIos>
    <ListInput
      outline
      label="Name"
      floatingLabel
      type="text"
      placeholder="Your name"
    >
      <DemoIcon slot="media" />
    </ListInput>


    <ListInput
      outline
      label="Password"
      floatingLabel
      type="password"
      placeholder="Your password"
    >
      <DemoIcon slot="media" />
    </ListInput>


    <ListInput
      outline
      label="E-mail"
      floatingLabel
      type="email"
      placeholder="Your e-mail"
    >
      <DemoIcon slot="media" />
    </ListInput>


    <ListInput outline label="URL" floatingLabel type="url" placeholder="URL">
      <DemoIcon slot="media" />
    </ListInput>


    <ListInput
      outline
      label="Phone"
      floatingLabel
      type="tel"
      placeholder="Your phone number"
    >
      <DemoIcon slot="media" />
    </ListInput>
  </List>


  <BlockTitle>Validation + Additional Info</BlockTitle>
  <List strongIos insetIos>
    <ListInput
      label="Name"
      type="text"
      placeholder="Your name"
      info="Basic string checking"
      value={name.value}
      error={name.changed && !name.value.trim()
        ? 'Please specify your name'
        : ''}
      onInput={onNameChange}
    >
      <DemoIcon slot="media" />
    </ListInput>
  </List>


  <BlockTitle>Clear Button</BlockTitle>
  <List strongIos insetIos>
    <ListInput
      label="TV Show"
      type="text"
      placeholder="Your favorite TV show"
      info="Type something to see clear button"
      value={demoValue}
      clearButton={demoValue.length > 0}
      onInput={onDemoValueChange}
      onClear={onDemoValueClear}
    >
      <DemoIcon slot="media" />
    </ListInput>
  </List>


  <BlockTitle>Icon + Input</BlockTitle>
  <List strongIos insetIos>
    <ListInput type="text" placeholder="Your name">
      <DemoIcon slot="media" />
    </ListInput>


    <ListInput type="password" placeholder="Your password">
      <DemoIcon slot="media" />
    </ListInput>


    <ListInput type="email" placeholder="Your e-mail">
      <DemoIcon slot="media" />
    </ListInput>


    <ListInput type="url" placeholder="URL">
      <DemoIcon slot="media" />
    </ListInput>
  </List>


  <BlockTitle>Label + Input</BlockTitle>
  <List strongIos insetIos>
    <ListInput label="Name" type="text" placeholder="Your name" />


    <ListInput label="Password" type="password" placeholder="Your password" />


    <ListInput label="E-mail" type="email" placeholder="Your e-mail" />


    <ListInput label="URL" type="url" placeholder="URL" />
  </List>


  <BlockTitle>Only Inputs</BlockTitle>
  <List strongIos insetIos>
    <ListInput type="text" placeholder="Your name" />


    <ListInput type="password" placeholder="Your password" />


    <ListInput type="email" placeholder="Your e-mail" />


    <ListInput type="url" placeholder="URL" />
  </List>


  <BlockTitle>Inputs + Additional Info</BlockTitle>
  <List strongIos insetIos>
    <ListInput type="text" placeholder="Your name" info="Full name please" />


    <ListInput
      type="password"
      placeholder="Your password"
      info="8 characters minimum"
    />


    <ListInput
      type="email"
      placeholder="Your e-mail"
      info="Your work e-mail address"
    />


    <ListInput type="url" placeholder="URL" info="Your website URL" />
  </List>
</Page>
コードライセンス MIT.
2022 © Konsta UI by nolimits4web.