README

这是一套为 Laravel Nova 定制的 Element UI 组件

安装

1. composer require nightkit/nova-element-ui
2. 将 NightKit\NovaElements\NovaElementsServiceProvider::class 添加到您的 config/app.php 文件的 providers 部分
3. 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 元素的美观外观

当然，您可以将标准的“True”和“False”标签更改为您想要的任何内容

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文件