diff --git a/README.md b/README.md new file mode 100644 index 0000000..41a8a75 --- /dev/null +++ b/README.md @@ -0,0 +1,355 @@ +# 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 ``` + +### Components + +This is awailable component for this time. + +#### ElementInput + +ElementInput just simple unput 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') + ]; + } +``` +![](https://monosnap.com/image/al5xWRSlA5c4SrMjwS86oFQhrWKr5x.png) + +To make this input with clear action just add ```clearable()``` + +```php + public function fields(Request $request) + { + return [ + ID::make()->sortable(), + ElementInput::make('String') + ->clearable() + ]; + } +``` +![](https://monosnap.com/image/MmzHgs3lz9BgAX36cH8a2blanheilv.png) + +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 + ]; + } +``` +![](https://monosnap.com/image/1nZ6gp80L3rbcRmLwBu8eRwPuvDWWa.png) + +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) + ]; + } +``` +![](https://monosnap.com/image/pRZNWMTAZsdKDsibDLtGoQwBzvz2VW.png) + +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']) + ]; +``` +![](https://monosnap.com/image/ome1YEsDkQCKoN28Jgd8ymavvccA2u.png) + +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 + +```php +public function fields(Request $request) + { + return [ + ID::make()->sortable(), + ElementSelect::make('String') + ->options(['vue', 'laravel', 'nova']) + ]; + } +``` +![](https://monosnap.com/image/IyMTHL59vtmdHDF8k8n1TzeXL7hRfx.png) + + +#### ElementTimezoneSelect and ElementTimezoneAutocomplete + +This two fields depends on ElementSelect and ElementAutocompele to choice timezone more comfortable + +```php +public function fields(Request $request) + { + return [ + ID::make()->sortable(), + ElementTimezoneAutocomplete::make('String'), + ElementTimezoneSelect::make('String') + ]; + } +``` +![](https://monosnap.com/image/FSEK0ug9mj6pjIwMHTPpqcLuf4LqNc.png) + +#### 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) + ]; + } +``` +![](https://monosnap.com/image/2QlWiG1ymMfJkL9mr2xvB7CYefvg33.png) + +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'], + ]) + ]; + } +``` +![](https://monosnap.com/image/SHR9Ae2SXmXQ8fezBwhx7mw24m9kox.png) + +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() + ]; + } + ``` +![](https://monosnap.com/image/UXfvA05m2WxZa7bUvHnEivoRCWuuKq.png) + +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() + ]; + } + ``` +![](https://monosnap.com/image/B3KDCNl8sOYb04P6KFI2xHOUAifhpO.png) + + +#### 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') + ]; + } +``` +![](https://monosnap.com/image/wixlJiNHNGLE3fnbp6pH7hvzQcOMb0.png) + +On detail page and index it's cool looks with el-tag element + +![](https://monosnap.com/image/byme5QgvZ5nCAIqg6lsbbB1pbkXiTy.png) + +Of course you can change standart 'True' 'False' labels on what want to + +```php +public function fields(Request $request) + { + return [ + ID::make()->sortable(), + ElementCheckbox::make('Boolean') + ->falseLabel('Off') + ->trueLabel('On') + ]; + } +``` +![](https://monosnap.com/image/MzKADrRMR4XBQ04mYBwJ275LOi02gG.png) + +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') + ]; + } +``` + +![](https://monosnap.com/image/uc3G1XdWqV1Hr9GL2VYEwDnLWVHCJb.png) + +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() + ]; + } +``` +![](https://monosnap.com/image/6QqnKDRd2jEGjt2zVZmXDLqeDpiXJx.png) + +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') + ]; + } +``` + +![](https://monosnap.com/image/VErv5TqmJKCnqOHtDnXOLKYgvwzCCS.png) + + +## 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 \ No newline at end of file