表单配置

设置表单配置

$config = Elm::config();
$config->resetBtn(true);
//或者
//$config = ['resetBtn'=>true];

$form->setConfig($config);

开启事件注入

$config->injectEvent(true);

表单整体显示规则配置

$formStyle = Elm::formStyle();
//开启行内表单模式
$formStyle->inline(true);
$config->formStyle($formStyle);

方法:

 * @method $this inline(bool $inline) 行内表单模式, 默认值: false
 * @method $this labelPosition(string $labelPosition) 表单域标签的位置，如果值为 left 或者 right 时，则需要设置 label-width, 可选值: right/left/top, 默认值: right
 * @method $this labelWidth(string $labelWidth) 表单域标签的宽度，例如 '50px'。作为 Form 直接子元素的 form-item 会继承该值。支持 auto。
 * @method $this labelSuffix(string $labelSuffix) 表单域标签的后缀
 * @method $this hideRequiredAsterisk(bool $hideRequiredAsterisk) 是否显示必填字段的标签旁边的红色星号, 默认值: false
 * @method $this showMessage(bool $showMessage) 是否显示校验错误信息, 默认值: true
 * @method $this inlineMessage(bool $inlineMessage) 是否以行内形式展示校验信息, 默认值: false
 * @method $this statusIcon(bool $statusIcon) 是否在输入框中显示校验结果反馈图标, 默认值: false
 * @method $this validateOnRuleChange(bool $validateOnRuleChange) 是否在 rules 属性改变后立即触发一次验证, 默认值: true
 * @method $this size(string $size) 用于控制该表单内组件的尺寸, 可选值: medium / small / mini
 * @method $this disabled(bool $disabled) 是否禁用该表单内的所有组件。若设置为 true，则表单内组件上的 disabled 属性不再生效, 默认值: false

表单组件布局配置

$row = Elm::row();
$row->gutter(5);
$config->row($row);

方法:

@method $this gutter($gutter) 栅格间距，单位 px，左右平分
@method $this type($type) 布局模式，可选值为flex或不选，在现代浏览器下有效
@method $this align($align) flex 布局下的垂直对齐方式，可选值为top、middle、bottom
@method $this justify($justify) flex 布局下的水平排列方式，可选值为start、end、center、space-around、space-between
@method $this tag($tag) 自定义元素标签

设置表单按钮

修改提交按钮样式

//创建一个按钮组件
$button = Elm::button();
$button->plain(true);
$config->submitBtn($button);

显示并修改重置按钮样式,重置按钮默认是隐藏的

$resetBtn = Elm::button();
$resetBtn->plain(true)->show(true)->innerText('立即重置');
$config->resetBtn($resetBtn);

设置提交按钮布局规则

$button = Elm::button();
$button->col(['span'=>6]);
//$button->col(Elm::col()->span(6));
$config->submitBtn($button);

方法:

 *
 * @method $this size(string $size) 尺寸, 可选值: medium / small / mini
 * @method $this type(string $type) 类型, 可选值: primary / success / warning / danger / info / text
 * @method $this plain(bool $plain) 是否朴素按钮, 默认值: false
 * @method $this round(bool $round) 是否圆角按钮, 默认值: false
 * @method $this circle(bool $circle) 是否圆形按钮, 默认值: false
 * @method $this loading(bool $loading) 是否加载中状态, 默认值: false
 * @method $this disabled(bool $disabled) 是否禁用状态, 默认值: false
 * @method $this icon(string $icon) 图标类名
 * @method $this autofocus(bool $autofocus) 是否默认聚焦, 默认值: false
 * @method $this nativeType(string $nativeType) 原生 type 属性, 可选值: button / submit / reset, 默认值: button
 *
 * 以下方法在全局配置时使用有效
 * @method $this show(bool $show) 是否显示, 默认显示
 * @method $this innerText(string $innerText) 按钮文字提示

组件提示信息样式

popover类型,默认

$popover = Elm::popover();
$popover->trigger('click');
$config->info($popover);

方法:

 * @method $this trigger(string $trigger) 触发方式, 可选值: click/focus/hover/manual, 默认值: click
 * @method $this popoverTitle(string $title) 标题
 * @method $this content(string $content) 显示的内容，也可以通过 slot 传入 DOM
 * @method $this width(string $width) 宽度, 默认值: 最小宽度 150px
 * @method $this placement(string $placement) 出现位置, 可选值: top/top-start/top-end/bottom/bottom-start/bottom-end/left/left-start/left-end/right/right-start/right-end, 默认值: bottom
 * @method $this disabled(boolean $disabled) Popover 是否可用, 默认值: false
 * @method $this offset(number $offset) 出现位置的偏移量
 * @method $this transition(string $transition) 定义渐变动画, 默认值: fade-in-linear
 * @method $this visibleArrow(boolean $visibleArrow) 是否显示 Tooltip 箭头，更多参数可见Vue-popper, 默认值: true
 * @method $this popperOptions(object $popperOptions) popper.js 的参数, 可选值: 参考 popper.js 文档, 默认值: {boundariesElement: 'body', gpuAcceleration: false}
 * @method $this popperClass(string $popperClass) 为 popper 添加类名
 * @method $this openDelay(number $openDelay) 触发方式为 hover 时的显示延迟，单位为毫秒
 * @method $this closeDelay(float $closeDelay) 触发方式为 hover 时的隐藏延迟，单位为毫秒, 默认值: 200
 * @method $this tabindex(float $tabindex) Popover 组件的 tabindex

tooltip类型

$tooltip = Elm::tooltip();
$tooltip->placement('top');
$config->info($tooltip);

方法:

 * @method $this effect(string $effect) 默认提供的主题, 可选值: dark/light, 默认值: dark
 * @method $this placement(string $placement) Tooltip 的出现位置, 可选值: top/top-start/top-end/bottom/bottom-start/bottom-end/left/left-start/left-end/right/right-start/right-end, 默认值: bottom
 * @method $this disabled(bool $disabled) Tooltip 是否可用, 默认值: false
 * @method $this offset(float $offset) 出现位置的偏移量
 * @method $this transition(string $transition) 定义渐变动画, 默认值: el-fade-in-linear
 * @method $this visibleArrow(bool $visibleArrow) 是否显示 Tooltip 箭头，更多参数可见Vue-popper, 默认值: true
 * @method $this popperOptions(array $popperOptions) popper.js 的参数, 可选值: 参考 popper.js 文档, 默认值: {boundariesElement: 'body', gpuAcceleration: false}
 * @method $this openDelay(float $openDelay) 延迟出现，单位毫秒
 * @method $this manual(bool $manual) 手动控制模式，设置为 true 后，mouseenter 和 mouseleave 事件将不会生效, 默认值: false
 * @method $this popperClass(string $popperClass) 为 Tooltip 的 popper 添加类名
 * @method $this enterable(bool $enterable) 鼠标是否可进入到 tooltip 中, 默认值: true
 * @method $this hideAfter(float $hideAfter) Tooltip 出现后自动隐藏延时，单位毫秒，为 0 则不会自动隐藏
 * @method $this tabindex(float $tabindex) Tooltip 组件的 tabindex
Powered by