@dloizides/ui-形式
(原始内容存档于2013-10-12). Themable, Brand-anoistic React Introduction (RN-web) 表单 dloizides.com 组件
组合 : Field, (中文(简体) ), FormField, (中文(简体) ), ChipSelector, (中文(简体) ), FormSwitch。它们读取共享的主题颜色
@dloizides/ui-feedback UI 语境( E)useUi) ——上一个 UiProvider 编号 : FeedbackUiProvider
在您的应用根中, 这些组件自动拾取您的主题 .
安装
npm install @dloizides/ui-forms @dloizides/ui-feedback
同伴依赖性 : @dloizides/ui-feedback >= 1.1.0, (中文(简体) ), react >= 18, (中文(简体) ), react-native >= 0.74
(使用时 react-native-web ) (中文(简体) ).
使用量
import { FormField, ChipSelector, FormSwitch } from '@dloizides/ui-forms';
<FormField label="Email" required error={errors.email} value={email} onChangeText={setEmail} />
<ChipSelector label="Plan" options={plans} value={plan} onChange={setPlan} />
<FormSwitch label="Email notifications" value={notify} onValueChange={setNotify} />
Field 标记任何控件,而不仅仅是文字输入
FormField 被硬线接入文本输入。 对于 任何其他控制 滴滴滴滴 取枣子,
芯片选择器 — 把它包入 Field 以获取相同的标签行、所需的标记、出错行和
底间距. 这也是保持下降与 FormField 旁边:没有它
倒放的框会启动高一行的标签,而行会失去它的垂直节奏.
import { Field } from '@dloizides/ui-forms';
<Field label="Currency" required error={errors.currency}>
<ModalDropdown options={currencies} value={currency} onChange={setCurrency} />
</Field>
FormField 财务报告和审定财务报表 ChipSelector 编曲 Field 内部,所以标签行永远不能漂移
由于它们之间相互一致,工具包中就有一个标签.
将出错线接入自定义控制器 aria-describedby / 无效状态, 通过 a
函数 儿童——接受 { describedById, hasError } (单位:千美元)describedById 实值 undefined
当没有错误的时候:
<Field label="Country" error={errors.country}>
{({ describedById, hasError }) => (
<CountryPicker aria-describedby={describedById} hasError={hasError} value={country} onChange={setCountry} />
)}
</Field>
| Prop | 类型 | 页:1 |
|---|---|---|
label | string | 选项 —— 空白或空标签使无标签行 |
children | ReactNode | (ctx) => ReactNode | 控件 |
required | boolean | 使装饰 * (隐藏在辅助技术) |
error | string | 制作一个 role="alert" 线条,通过孩子的链接 describedById |
containerStyle | ViewStyle | 在容器上合并 |
testID | string | 在容器上 |
注入的主题需要 colors.{surface,text,textSecondary,border}, (中文(简体) ), palette.primary['500']
财务报告和审定财务报表 semantic.error['500'] - 通过下列渠道提供: @dloizides/ui-feedback供养者. 没有供应商
中性默认主题.
ChipSelector
<ChipSelector
label="Plan"
required
error={errors.plan}
options={plans}
value={plan}
onChange={setPlan}
variant="outline"
/>
其标签、 需要的标记、 错误行和下行间隔来自 Field。 。 。 . label 可选 :
没有标签, 标签行不会被渲染, 因此它会干净地掉入工具栏或过滤栏 .
| Prop | 类型 | 页:1 |
|---|---|---|
label | string | 可选的 — 没有标签表示没有标签行 |
options | Array<{ value, label }> | value 是一个 string 或者说 number |
value | T | T[] | 数组 multiple |
onChange | (value: T) => void | 点出按下值; 父公司拥有切换逻辑 |
multiple | boolean | 选择是数组 |
disabled | boolean | 禁用每个芯片 |
variant | 'solid' | 'outline' | solid (默认) = 填充药; outline = 有锡的大纲 |
required | boolean | 调制 Field装饰性 * |
error | string | role="alert" ,通过 aria-describedby |
containerStyle | ViewStyle | 在容器上合并 |
testID | string | 在容器上 |
强化控制 - SelectControl 编号 : TypeaheadControl 编号 : DateRangeControl
晋升到1.8.0人 @dloizides/ui-tables' 私人过滤栏,他们在那里工作正确
为6个门户出口到零——这就是为什么舰队增加了6个选择区,5个日期区
和两个打字头.
他们是 设计时无标签。在内部编曲 Field 所以有一个标签
实施每个控制而不是每个控制一个:
<Field label="Status" labelVariant="control" containerStyle={{ marginBottom: 0 }}>
<SelectControl
accessibilityLabel={t('filters.statusName', 'Status', selectedLabel)}
options={options}
testID="filters-status"
value={value}
onChange={setValue}
/>
</Field>
labelVariant="control" 是来自 11/700/ oppercase 语音
FORMS.md - 声音为
标签为SCAND(过滤条、工具栏)而不是READ.
每个字符串都预先本地化
此软件包从不调用 t特别是 SelectControl是因为 accessibilityLabel 必须是
由你组成,必须携带 选择 ——"状态:活动",不是"状态". 无障碍
名称 REPLACES 触发器的可见文本用于屏幕读取器, 因此仅用字段命名
默默地隐藏所选择的内容 .
| 控制权 | 关键道具 | 测试ID |
|---|---|---|
SelectControl | options, (中文(简体) ), value, (中文(简体) ), onChange, (中文(简体) ), placeholder, (中文(简体) ), accessibilityLabel, (中文(简体) ), optionHint | <testID>-trigger, (中文(简体) ), -menu, (中文(简体) ), -option-<value> |
TypeaheadControl | options, (中文(简体) ), value, (中文(简体) ), onChange, (中文(简体) ), onSubmit, (中文(简体) ), error, (中文(简体) ), minChars, (中文(简体) ), maxSuggestions | <testID>-input, (中文(简体) ), -menu, (中文(简体) ), -error |
DateRangeControl | value (单位:千美元){from,to}, (中文(简体) ), onChange, (中文(简体) ), onSubmit, (中文(简体) ), fromLabel, (中文(简体) ), toLabel | <testID>-range, (中文(简体) ), -from, (中文(简体) ), -to |
AnchoredMenu | 浮点列表前两作曲 | <testID>-menu |
也导出 : controlStyles (调制的度量衡), suggestOptions 编号 : isUnmatched (单位:千美元)
类型头的分级符),和 ControlOption 编号 : DateRangeValue 类型.
测试ID
form-field-input, (中文(简体) ), chip-selector-chip-<value>, (中文(简体) ), form-switch (在FormSwitch上可以覆盖).
许可证
麻省理工学院