🔥 了解我们的新项目 t0ggles - 您终极的项目管理工具！ 🔥

列表输入 React 组件

表单元素允许您创建灵活美观的表单布局。表单元素只是众所周知的列表视图（列表 和 列表项 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 输入一起使用时很有用）

errorReactNode

输入“错误”的内容

floatingLabel布尔值false

制作浮动标签

infoReactNode

输入“信息”的内容

inputReactNode

自定义输入元素

inputClassName字符串

额外的输入样式

inputId字符串

输入 id 属性

inputMode字符串

输入的原生“inputmode”属性的值

inputStyleCSSProperties

额外的输入类

labelReactNode

标签内容

max字符串 | 数字

输入的原生“max”属性的值

maxLength字符串 | 数字

输入的原生“maxlength”属性的值

mediaReactNode

列表项“媒体”区域的内容（例如图标）

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 事件处理程序

示例

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>
  );
}
代码许可证为 MIT.
2022 © Konsta UI 由 nolimits4web.