🔥 看看我們的新專案 t0ggles - 你終極的專案管理工具！ 🔥

列表輸入 Svelte 組件

表單元素可讓您建立彈性且美觀的表單佈局。表單元素只是眾所周知的列表視圖（列表和 列表項目 Svelte 組件），但有一些額外的組件。

列表輸入組件

包含以下組件

  • ListInput - 列表項目輸入元素

ListInput Props

名稱類型預設值描述
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任何

輸入值

onBlurfunction(e)

blur 事件處理程式

onChangefunction(e)

change 事件處理程式

onClearfunction(e)

clear 事件處理程式

onFocusfunction(e)

focus 事件處理程式

onInputfunction(e)

input 事件處理程式

ListInput Slots

名稱描述
error

輸入的 "錯誤" 內容

info

輸入的 "資訊" 內容

input

自訂輸入元素

label

標籤內容

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 由 nolimits4web.