输入 / 表单元素 Svelte 组件

表单元素允许您创建灵活且美观的表单布局。表单元素只是众所周知的列表视图 (列表和列表项Svelte 组件) 但带有一些额外的组件。

查看 Framework7 的输入 / 表单元素以便了解其外观。

输入组件

包含以下组件：

输入属性

属性类型默认描述
<ListInput> 属性
media字符串列表项媒体图像 URL
label字符串输入的标签文本
floatingLabel布尔值false启用浮动标签
outline布尔值false使输入轮廓
input布尔值true是否应该渲染输入元素。如果您想在内部使用自定义输入，请禁用。
type字符串输入类型。所有默认的 HTML5 输入类型，以及一些特殊的类型：
  • textarea- 渲染 textarea 元素
  • select- 渲染 select 元素
  • datepicker- 在输入聚焦时打开日历on input focus
  • colorpicker- 在输入聚焦时打开颜色选择器on input focus
  • texteditor- 在输入聚焦时打开文本编辑器on input focus
resizable布尔值false使 textarea 可调整大小
inputStyle对象输入的 "style" 属性的值，如果您需要传递额外的样式
clearButton布尔值false添加输入清除按钮，点击时将清除输入值
validate布尔值false当启用时，输入值将根据传递的 "pattern" 或根据输入类型在更改时进行验证。如果您使用自定义验证并在显示/隐藏错误消息的位置需要更多控制，则最好禁用验证并使用error-message与error-message-forceprops.
validateOnBlur布尔值false当启用时，输入仅在失去焦点时进行验证。
onValidate函数输入验证时执行的回调，返回布尔值指示输入是否有效。
<ListInput
  type="email"
  validate
  onValidate={(isValid) => setInputValid(isValid)}
/>
errorMessage字符串当输入值无效时显示的自定义错误消息
errorMessageForce布尔值false强制错误消息为errorMessage。在您使用自定义验证并需要在需要时显示/隐藏错误消息的情况下很有用
info字符串带有关输入信息的自定义附加文本
name字符串输入名称
占位符字符串输入占位符
id字符串包装元素 ID 属性
inputId字符串输入元素 ID 属性
值字符串
数字

输入值。

如果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" 属性的值
禁用布尔值false将输入标记为禁用
max字符串
数字		输入的本地"max"属性的值
min字符串
数字		输入的本地"min"属性的值
step字符串
数字		输入的本地"step"属性的值
maxlength字符串
数字		输入的本地"maxlength"属性的值
minlength字符串
数字		输入的本地"minlength"属性的值
multiple布尔值false输入的本地"multiple"属性的值
只读布尔值false将输入标记为只读
required布尔值false将输入标记为必填
tabindex字符串
数字		输入的本地"tabindex"属性的值
noStoreData布尔值false允许在使用时忽略输入值被存储表单存储
ignoreStoreData布尔值false与上一个相同
wrap布尔值true当启用时，它将被包装在<li>元素之前插入元素
calendarParams对象带有日历参数当使用时type="datepicker"
colorPickerParams对象带有颜色选择器参数当使用时type="colorpicker"
textEditorParams对象带有文本编辑器参数当使用时type="texteditor"
<Input> 属性
outline布尔值false使输入轮廓
wrap布尔值true定义输入是否应被包装在<div class="input">元素中。
type字符串输入类型。所有默认的 HTML5 输入类型，以及一些特殊的类型：
  • textarea- 渲染 textarea 元素
  • select- 渲染 select 元素
  • datepicker- 在输入聚焦时打开日历on input focus
  • colorpicker- 在输入聚焦时打开颜色选择器on input focus
  • texteditor- 在输入聚焦时打开文本编辑器on input focus
resizable布尔值false使 textarea 可调整大小
inputStyle对象输入的 "style" 属性的值，如果您需要传递额外的样式
clearButton布尔值false添加输入清除按钮，点击时将清除输入值
validate布尔值false当启用时，输入值将根据传递的 "pattern" 或根据输入类型在更改时进行验证。如果您使用自定义验证并在显示/隐藏错误消息的位置需要更多控制，则最好禁用验证并使用error-message与error-message-forceprops.
validateOnBlur布尔值false当启用时，输入仅在失去焦点时进行验证。
onValidate函数输入验证时执行的回调，返回布尔值指示输入是否有效。
<Input
  type="email"
  validate
  onValidate={(isValid) => setInputValid(isValid)}
/>
errorMessage字符串当输入值无效时显示的自定义错误消息
errorMessageForce布尔值false强制错误消息为errorMessage。在您使用自定义验证并需要在需要时显示/隐藏错误消息的情况下很有用
info字符串带有关输入信息的自定义附加文本
name字符串输入名称
占位符字符串输入占位符
id字符串包装元素 ID 属性
inputId字符串输入元素 ID 属性
值字符串
数字

输入值。

如果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" 属性的值
已选中布尔值false将输入标记为选中
禁用布尔值false将输入标记为禁用
max字符串
数字		输入的本地"max"属性的值
min字符串
数字		输入的本地"min"属性的值
step字符串
数字		输入的本地"step"属性的值
maxlength字符串
数字		输入的本地"maxlength"属性的值
minlength字符串
数字		输入的本地"minlength"属性的值
multiple布尔值false输入的本地"multiple"属性的值
只读布尔值false将输入标记为只读
required布尔值false将输入标记为必填
tabindex字符串
数字		输入的本地"tabindex"属性的值
noStoreData布尔值false允许在使用时忽略输入值被存储表单存储
ignoreStoreData布尔值false与上一个相同
calendarParams对象带有日历参数当使用时type="datepicker"
colorPickerParams对象带有颜色选择器参数当使用时type="colorpicker"
textEditorParams对象带有文本编辑器参数当使用时type="texteditor"

输入事件

事件参数描述
<ListInput>, <Input>事件
focus(event)当用户聚焦到输入时触发。
blur(event)当用户失去输入焦点时触发。
input(event)输入值改变时立即触发。注意：输入事件在beforeinput、keypress、keyup、keydown事件之后触发。
change(event)如果值改变，则在blur时触发。
inputClear(event)当输入清除按钮被点击时触发
textareaResize(event)如果可调整大小的文本区域被调整大小，则触发。event.detail将包含对象initialHeight, currentHeight和scrollHeight属性
inputEmpty(event)当输入值变为空时触发
inputNotEmpty(event)当输入值变为非空时触发
calendarChange(值)当文本编辑器值改变时触发。作为参数，它接收文本编辑器值（HTML字符串）。type="datepicker" Calendar value changed. As an argument it receives array with selected dates.
colorPickerChange(值)当文本编辑器值改变时触发。作为参数，它接收文本编辑器值（HTML字符串）。type="colorpicker" Color Picker value changed. As an argument it receives object with Color Picker value.
textEditorChange(值)当文本编辑器值改变时触发。作为参数，它接收文本编辑器值（HTML字符串）。type="texteditor" Text Editor value changed. As an argument it receives Texteditor value (HTML string).

输入插槽

<ListInput>有额外的插槽用于自定义元素：

示例

inputs.svelte
<script>
  import { Navbar, Page, BlockTitle, List, ListInput, Range } from 'framework7-svelte';
</script>

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

  <BlockTitle>Full Layout / Stacked Labels</BlockTitle>
  <List strongIos dividersIos insetIos>
    <ListInput label="Name" type="text" placeholder="Your name" clearButton>
      <i class="icon demo-list-icon" slot="media" />
    </ListInput>

    <ListInput label="Password" type="password" placeholder="Your password" clearButton>
      <i class="icon demo-list-icon" slot="media" />
    </ListInput>

    <ListInput label="E-mail" type="email" placeholder="Your e-mail" clearButton>
      <i class="icon demo-list-icon" slot="media" />
    </ListInput>

    <ListInput label="URL" type="url" placeholder="URL" clearButton>
      <i class="icon demo-list-icon" slot="media" />
    </ListInput>

    <ListInput label="Phone" type="tel" placeholder="Your phone number" clearButton>
      <i class="icon demo-list-icon" slot="media" />
    </ListInput>

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

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

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

    <ListInput label="Range" input={false}>
      <i class="icon demo-list-icon" slot="media" />
      <span slot="input">
        <Range value={50} min={0} max={100} step={1} />
      </span>
    </ListInput>

    <ListInput label="Textarea" type="textarea" placeholder="Bio">
      <i class="icon demo-list-icon" slot="media" />
    </ListInput>

    <ListInput label="Resizable" type="textarea" resizable placeholder="Bio">
      <i class="icon demo-list-icon" slot="media" />
    </ListInput>
  </List>

  <BlockTitle>Floating Labels</BlockTitle>
  <List strongIos dividersIos insetIos>
    <ListInput label="Name" floatingLabel type="text" placeholder="Your name" clearButton>
      <i class="icon demo-list-icon" slot="media" />
    </ListInput>

    <ListInput
      label="Password"
      floatingLabel
      type="password"
      placeholder="Your password"
      clearButton
    >
      <i class="icon demo-list-icon" slot="media" />
    </ListInput>

    <ListInput label="E-mail" floatingLabel type="email" placeholder="Your e-mail" clearButton>
      <i class="icon demo-list-icon" slot="media" />
    </ListInput>

    <ListInput label="URL" floatingLabel type="url" placeholder="URL" clearButton>
      <i class="icon demo-list-icon" slot="media" />
    </ListInput>

    <ListInput label="Phone" floatingLabel type="tel" placeholder="Your phone number" clearButton>
      <i class="icon demo-list-icon" slot="media" />
    </ListInput>

    <ListInput label="Resizable" floatingLabel type="textarea" resizable placeholder="Bio">
      <i class="icon demo-list-icon" slot="media" />
    </ListInput>
  </List>

  <BlockTitle>Floating Labels + Outline Inputs</BlockTitle>
  <List strongIos dividersIos insetIos>
    <ListInput outline label="Name" floatingLabel type="text" placeholder="Your name" clearButton>
      <i class="icon demo-list-icon" slot="media" />
    </ListInput>
    <ListInput
      outline
      label="Password"
      floatingLabel
      type="password"
      placeholder="Your password"
      clearButton
    >
      <i class="icon demo-list-icon" slot="media" />
    </ListInput>
    <ListInput
      outline
      label="E-mail"
      floatingLabel
      type="email"
      placeholder="Your e-mail"
      clearButton
    >
      <i class="icon demo-list-icon" slot="media" />
    </ListInput>
    <ListInput outline label="URL" floatingLabel type="url" placeholder="URL" clearButton>
      <i class="icon demo-list-icon" slot="media" />
    </ListInput>
    <ListInput
      outline
      label="Phone"
      floatingLabel
      type="tel"
      placeholder="Your phone number"
      clearButton
    >
      <i class="icon demo-list-icon" slot="media" />
    </ListInput>
    <ListInput
      outline
      label="Bio"
      floatingLabel
      type="textarea"
      resizable
      placeholder="Bio"
      clearButton
    >
      <i class="icon demo-list-icon" slot="media" />
    </ListInput>
  </List>

  <BlockTitle>Validation + Additional Info</BlockTitle>
  <List strongIos dividersIos insetIos>
    <ListInput
      label="Name"
      type="text"
      placeholder="Your name"
      info="Default validation"
      required
      validate
      clearButton
    >
      <i class="icon demo-list-icon" slot="media" />
    </ListInput>

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

    <ListInput
      label="E-mail"
      type="email"
      placeholder="Your e-mail"
      info="Default e-mail validation"
      required
      validate
      clearButton
    >
      <i class="icon demo-list-icon" slot="media" />
    </ListInput>

    <ListInput
      label="URL"
      type="url"
      placeholder="Your URL"
      info="Default URL validation"
      required
      validate
      clearButton
    >
      <i class="icon demo-list-icon" slot="media" />
    </ListInput>

    <ListInput
      label="Number"
      type="text"
      placeholder="Enter number"
      info="With custom error message"
      errorMessage="Only numbers please!"
      required
      validate
      pattern="[0-9]*"
      clearButton
    >
      <i class="icon demo-list-icon" slot="media" />
    </ListInput>
  </List>

  <BlockTitle>Icon + Input</BlockTitle>
  <List strongIos dividersIos insetIos>
    <ListInput type="text" placeholder="Your name" clearButton>
      <i class="icon demo-list-icon" slot="media" />
    </ListInput>

    <ListInput type="password" placeholder="Your password" clearButton>
      <i class="icon demo-list-icon" slot="media" />
    </ListInput>

    <ListInput type="email" placeholder="Your e-mail" clearButton>
      <i class="icon demo-list-icon" slot="media" />
    </ListInput>

    <ListInput type="url" placeholder="URL" clearButton>
      <i class="icon demo-list-icon" slot="media" />
    </ListInput>
  </List>

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

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

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

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

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

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

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

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

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

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

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

    <ListInput type="url" placeholder="URL" info="Your website URL" clearButton />
  </List>
</Page>
改进此文档
在本页上
无噪 Logo
无噪文档
中文文档 · 复刻官网
查看所有 ↗