67

GitHub - fat4lix/nova-element-ui: Element UI components for Laravel Nova

 5 years ago
source link: https://github.com/fat4lix/nova-element-ui
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

README.md

Nova + Element UI

This is a set of component Element UI for Laravel Nova

Installation

  1. composer require nightkit/nova-element-ui
  2. Add NightKit\NovaElements\NovaElementsServiceProvider::class to your config/app.php in providers section
  3. php artisan vendor:publish --provider="NightKit\NovaElements\NovaElementsServiceProvider" --tag="public"

Components

This is awailable component for this time.

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;

ElementInput

ElementInput just simple input element with couple of cool features

You can add it like that

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

To make this input with clear action just add clearable()

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

You can also add prefix or suffix icon with prefixIcon() andsuffixIcon()

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

If you need a textarea you can simple make it by textarea()

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

Textarea accepts several parameters, number of rows and autosize

ElementAutocomplete

ElementAutocomplete looks like a input but is used if you need autocomplete

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

This field has a few method

placement() @string Placement of the popup menu (top / top-start / top-end / bottom / bottom-start / bottom-end) default bottom-start

triggerOnFocus @bool Whether show suggestions when input focus (default true)

debounce() @int Debounce delay when typing, in milliseconds (default 300)

ELementSelect

Just simple select field with more beautiful design

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

ElementTimezoneSelect and ElementTimezoneAutocomplete

This two fields depends on ElementSelect and ElementAutocompele to choice timezone more comfortable

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

ElementNumber

The number input field on steroids:)

It's depend on Nova native Number field and support all its functions

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

Also this field provide several methods

precision() @int Precision of input value

showControls() @bool whether to enable the control buttons

rightControls() Move the control buttons to the right

ElementRadio

Radio element

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'],
              ])
      ];
  }

If you want button style radio just use buttons() method

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()
      ];
  }

Or bordered style with 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 depends on native Nova Boolean field with couple cool features

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

On detail page and index it's cool looks with el-tag element

Of course you can change standart 'True' 'False' labels on what want to

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

If you d'not want to be displayed el-tag you can hide it with showTagOnIndex() showTagOnDetail()

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

When you just see only label

ElementSwitch

ElementSwitch is depends on ElementCheckbox

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

If you want to show your labels on switch use showLabels() method

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

Also you can change active/inactive colors on switch

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

Components in progress

  • Input
  • Number
  • Select
  • Autocomplete
  • Checkbox
  • Radio
  • Switch
  • Date
  • Time
  • DateTime
  • DataTimeRange
  • Tabs
  • Upload
  • Slider
  • Cascader
  • Upload
  • Transfer

Built With

License

This project is licensed under the MIT License - see the LICENSE.md file for details


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK