https://github.com/fat4lix/nova-element-ui
Element UI components for Laravel Nova
https://github.com/fat4lix/nova-element-ui
Last synced: 3 days ago
JSON representation
Element UI components for Laravel Nova
- Host: GitHub
- URL: https://github.com/fat4lix/nova-element-ui
- Owner: fat4lix
- Archived: true
- Created: 2018-08-24T15:04:42.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2020-04-14T23:28:20.000Z (about 5 years ago)
- Last Synced: 2024-10-29T01:12:33.125Z (9 months ago)
- Language: PHP
- Homepage:
- Size: 485 KB
- Stars: 163
- Watchers: 9
- Forks: 11
- Open Issues: 14
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 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 available component for this time.
```php
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 it's tabs component to split relation lists view between tabs
Supported relation fields: HasMany, BelongsTany, OneToMany, MorphToMany
```php
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 is just simple input element with couple of cool features
You can add it like that
```php
public function fields(Request $request)
{
return [
ID::make()->sortable(),
ElementInput::make('String')
];
}
```
To make this input with clear action just add ```clearable()```
```php
public function fields(Request $request)
{
return [
ID::make()->sortable(),
ElementInput::make('String')
->clearable()
];
}
```
You can also add prefix or suffix icon with ```prefixIcon()``` and```suffixIcon()```
```php
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()```
```php
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
```php
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
It's just simple select field with more beautiful design
```php
public function fields(Request $request)
{
return [
ID::make()->sortable(),
ElementSelect::make('String')
->options(['vue', 'laravel', 'nova'])
];
}
```
#### ElementTimezoneSelect and ElementTimezoneAutocomplete
This two fields depend on ElementSelect and ElementAutocompele to coose timezones more simple
```php
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
```php
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
```php
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
```php
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()```
```php
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
```php
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 standard 'True' 'False' labels on what want to
```php
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()```
```php
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
```php
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
```php
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
```php
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
* [Laravel Nova](http://nova.laravel.com) - The best admin panel for Laravel
* [Element UI](http://element.eleme.io/#/en-US/) - The best set of components for Vue.js
## License
This project is licensed under the MIT License - see the [LICENSE.md](LICENSE.md) file for details