README

这是一套 Laravel Nova 的 Element UI 组件

安装

composer require nightkit/nova-element-ui
将 NightKit\NovaElements\NovaElementsServiceProvider::class 添加到 config/app.php 文件中的 providers 部分
php artisan vendor:publish --provider="NightKit\NovaElements\NovaElementsServiceProvider" --tag="public"

组件

目前可用的组件有这些。

use NightKit\NovaElements\Fields\ElementInput\ElementInput;
use NightKit\NovaElements\Fields\ElementPassword\ElementPassword;
use NightKit\NovaElements\Fields\ElementSelect\ElementSelect;
use NightKit\NovaElements\Fields\ElementCheckbox\ElementCheckbox;
use NightKit\NovaElements\Fields\ElementRadio\ElementRadio;
use NightKit\NovaElements\Fields\ElementSwitch\ElementSwitch;
use NightKit\NovaElements\Fields\ElementAutocomplete\ElementAutocomplete;
use NightKit\NovaElements\Fields\ElementNumber\ElementNumber;
use NightKit\NovaElements\Fields\ElementTimezoneAutocomplete\ElementTimezoneAutocomplete;
use NightKit\NovaElements\Fields\ElementTimezoneSelect\ElementTimezoneSelect;
use NightKit\NovaElements\Fields\ElementTabs\ElementTabsRelations;

ElementTabsRelations

ElementTabsRelations 是一个标签组件，用于在标签之间分割关系列表视图。支持的关联字段：HasMany, BelongsTany, OneToMany, MorphToMany

  public function fields(Request $request)
  {
    ElementTabsRelations::make('Tabs')
        ->addTab('Levels', HasMany::make('Level', 'levels'))
        ->addTab('Setting', HasMany::make('Setting', 'settings'))
        ->activeTab('levels')
        ->borderCard() // border card style for tabs
  }

ElementInput

ElementInput 是一个带有一些酷炫功能的简单输入元素

您可以这样添加它

  public function fields(Request $request)
  {
      return [
          ID::make()->sortable(),
          ElementInput::make('String')
      ];
  }

为了使这个输入具有清除动作，只需添加 clearable()

  public function fields(Request $request)
  {
      return [
          ID::make()->sortable(),
          ElementInput::make('String')
              ->clearable()
      ];
  }

您还可以使用 prefixIcon() 和 suffixIcon() 添加前缀或后缀图标

  public function fields(Request $request)
  {
      return [
          ID::make()->sortable(),
          ElementInput::make('String')
              ->clearable()
              ->prefixIcon('el-icon-date') //icon css class 
      ];
  }

如果您需要文本区域，可以使用 textarea() 简单创建

   public function fields(Request $request)
    {
        return [
            ID::make()->sortable(),
            ElementInput::make('String')
                ->textarea(4, true)
        ];
    }

文本区域接受多个参数，包括行数和自动调整大小

ElementAutocomplete

ElementAutocomplete 看起来像输入框，但在需要自动完成时使用

    return [
        ID::make()->sortable(),
        ElementAutocomplete::make('String')
            ->suggestions(['vue', 'laravel', 'nova'])
    ];

此字段有几个方法

placement() @string 弹出菜单的位置（顶部 / 顶部开始 / 顶部结束 / 底部 / 底部开始 / 底部结束）默认底部开始

triggerOnFocus @bool 是否在输入焦点时显示建议（默认 true）

debounce() @int 打字时的防抖延迟，以毫秒为单位（默认 300）

ElementSelect

这是一个更美观的简单选择字段

public function fields(Request $request)
  {
      return [
          ID::make()->sortable(),
          ElementSelect::make('String')
              ->options(['vue', 'laravel', 'nova'])
      ];
  }

ElementTimezoneSelect 和 ElementTimezoneAutocomplete

这两个字段依赖于 ElementSelect 和 ElementAutocompele，以更简单地选择时区

public function fields(Request $request)
  {
      return [
          ID::make()->sortable(),
          ElementTimezoneAutocomplete::make('String'),
          ElementTimezoneSelect::make('String')
      ];
  }

ElementNumber

这是一个超级强大的数字输入字段：）

它依赖于 Nova 原生的数字字段，并支持所有其功能

public function fields(Request $request)
  {
      return [
          ID::make()->sortable(),
          ElementNumber::make('Number')
              ->min(2)
              ->max(6)
              ->step(2)
      ];
  }

此外，此字段还提供了一些方法

precision() @int 输入值的精度

showControls() @bool 是否启用控制按钮

rightControls() 将控制按钮移至右侧

ElementRadio

单选元素

public function fields(Request $request)
  {
      return [
          ID::make()->sortable(),
          ElementRadio::make('String')
              ->options([
                  ['value' => '1', 'label' => 'vue'],
                  ['value' => '2', 'label' => 'laravel'],
                  ['value' => '3', 'label' => 'nova'],
              ])
      ];
  }

如果您想使用按钮样式的单选按钮，请使用 buttons() 方法

public function fields(Request $request)
  {
      return [
          ID::make()->sortable(),
          ElementRadio::make('String')
              ->options([
                  ['value' => '1', 'label' => 'vue'],
                  ['value' => '2', 'label' => 'laravel'],
                  ['value' => '3', 'label' => 'nova'],
              ])->buttons()
      ];
  }

或者使用带有 bordered() 的边框样式

public function fields(Request $request)
  {
      return [
          ID::make()->sortable(),
          ElementRadio::make('String')
              ->options([
                  ['value' => '1', 'label' => 'vue'],
                  ['value' => '2', 'label' => 'laravel'],
                  ['value' => '3', 'label' => 'nova'],
              ])->bordered()
      ];
  }

ElementCheckbox

ElementCheckbox依赖于本地的Nova布尔字段，具有一些酷炫的功能

public function fields(Request $request)
  {
      return [
          ID::make()->sortable(),
          ElementCheckbox::make('Boolean')
      ];
  }

在详情页和索引页，它看起来很酷，使用了el-tag元素

当然，你可以更改标准的“是”和“否”标签，改为你想要的

public function fields(Request $request)
  {
      return [
          ID::make()->sortable(),
          ElementCheckbox::make('Boolean')
              ->falseLabel('Off')
              ->trueLabel('On')
      ];
  }

如果你不想显示el-tag，可以使用showTagOnIndex()和showTagOnDetail()来隐藏它

public function fields(Request $request)
  {
      return [
          ID::make()->sortable(),
          ElementCheckbox::make('Boolean')
              ->falseLabel('Off')
              ->trueLabel('On')
          ->showTagOnDetail(false)
          ->showTagOnIndex(false)
      ];
  }

当你只看到标签时

ElementSwitch

ElementSwitch依赖于ElementCheckbox

public function fields(Request $request)
  {
      return [
          ID::make()->sortable(),
          ElementSwitch::make('Boolean')
              ->falseLabel('Off')
              ->trueLabel('On')
      ];
  }

如果你想在开关上显示标签，可以使用showLabels()方法

public function fields(Request $request)
  {
      return [
          ID::make()->sortable(),
          ElementSwitch::make('Boolean')
              ->falseLabel('Off')
              ->trueLabel('On')
              ->showLabels()
      ];
  }

你还可以更改开关的激活/非激活颜色

public function fields(Request $request)
  {
      return [
          ID::make()->sortable(),
          ElementSwitch::make('Boolean')
              ->falseLabel('Off')
              ->trueLabel('On')
              ->showLabels()
          ->activeColor('#13ce66')
          ->inactiveColor('#ff4949')
      ];
  }

正在开发中的组件

输入
数字
选择
~~自动完成~~
~~复选框~~
~~单选按钮~~
开关
日期
时间
日期时间
日期时间范围
选项卡
上传
滑块
级联选择器
上传
穿梭框

构建于

Laravel Nova - 最好的Laravel后台面板
Element UI - 最好的Vue.js组件集

许可证

本项目采用MIT许可证 - 详细信息请参阅LICENSE.md文件

nightkit / nova-element-ui

维护者

详细信息