列表輸入 React 組件

列表輸入組件
ListInput 屬性
範例

表單元素讓您可以建立彈性且美觀的表單配置。表單元素只是廣為人知的列表視圖（列表和列表項目 React 組件），但有一些額外的組件。

列表輸入組件

包含以下組件

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 元素
defaultValue	任何		輸入值，在非受控組件的情況下
disabled	布林值		將輸入標記為已停用
dropdown	布林值	false	渲染額外的下拉式圖示（適用於 `select` 輸入）
error	ReactNode		輸入「錯誤」的內容
floatingLabel	布林值	false	製作浮動標籤
info	ReactNode		輸入「資訊」的內容
input	ReactNode		自訂輸入元素
inputClassName	字串		額外的輸入樣式
inputId	字串		輸入 id 屬性
inputMode	字串		輸入原生 "inputmode" 屬性的值
inputStyle	CSSProperties		額外的輸入類別
label	ReactNode		標籤內容
max	字串 \| 數字		輸入原生 "max" 屬性的值
maxLength	字串 \| 數字		輸入原生 "maxlength" 屬性的值
media	ReactNode		列表項目「媒體」區域的內容（例如圖示）
min	字串 \| 數字		輸入原生 "min" 屬性的值
minLength	字串 \| 數字		輸入原生 "minlength" 屬性的值
multiple	布林值		輸入原生 "multiple" 屬性的值
name	字串		輸入名稱
outline	布林值	未定義	渲染輪廓樣式輸入（帶邊框），覆寫 `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` 事件處理程式

範例

FormInputs.jsx

import React, { useState } from 'react';
import {
  Page,
  Navbar,
  NavbarBackLink,
  BlockTitle,
  List,
  ListInput,
} from 'konsta/react';

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

export default function FormInputsPage() {
  const [name, setName] = useState({ value: '', changed: false });
  const [demoValue, setDemoValue] = useState('');

  const onNameChange = (e) => {
    setName({ value: e.target.value, changed: true });
  };
  const onDemoValueChange = (e) => {
    setDemoValue(e.target.value);
  };
  const onDemoValueClear = () => {
    setDemoValue('');
  };
  return (
    <Page>
      <Navbar
        title="Form Inputs"
        />

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

        <ListInput
          outline
          label="Phone"
          floatingLabel
          type="tel"
          placeholder="Your phone number"
          media={<DemoIcon />}
        />
      </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' : ''
          }
          media={<DemoIcon />}
          onChange={onNameChange}
        />
      </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}
          media={<DemoIcon />}
          onChange={onDemoValueChange}
          onClear={onDemoValueClear}
        />
      </List>

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

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

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

        <ListInput type="url" placeholder="URL" media={<DemoIcon />} />
      </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>
  );
}