列表输入 Svelte 组件

列表输入组件
ListInput 属性
ListInput 插槽
示例

表单元素允许您创建灵活且美观的表单布局。表单元素只是众所周知的列表视图（列表和列表项 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" 属性的值
inputStyle	CSSProperties		额外的输入类
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	任意		输入值
onBlur	function(e)		`blur` 事件处理程序
onChange	function(e)		`change` 事件处理程序
onClear	function(e)		`clear` 事件处理程序
onFocus	function(e)		`focus` 事件处理程序
onInput	function(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>