From 443b35c99017d073a8bb04cdbe29b7226f5ec263 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bastian=20Fie=C3=9Finger?= <41627893+bfiessinger@users.noreply.github.com> Date: Fri, 27 Aug 2021 18:54:34 +0200 Subject: [PATCH] readme: add instructions about using directives and the multiple attribute --- README.md | 49 +++++++++++++++++++++++++++++++++++++++++++++++-- 1 file changed, 47 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index edcb0cc..b8726bb 100755 --- a/README.md +++ b/README.md @@ -6,7 +6,9 @@ Livewire component for dependant and/or searchable select inputs ![preview](https://github.com/asantibanez/livewire-select/raw/master/preview.gif) -### Installation +### Installation & Basic Usage + +#### Installing Livewire Select You can install the package via composer: @@ -14,6 +16,37 @@ You can install the package via composer: composer require asantibanez/livewire-select ``` +#### Including assets + +Add the following Blade directives in the head tag, and before the end body tag in your template + +```blade +... + @livewireSelectStyles + + + ... + + @livewireSelectScripts + + +``` + +Livewire Select includes a set up using different parts of the TALL stack assets like the [Laravel livewire](https://laravel-livewire.com/), [Alpine.js](https://alpinejs.dev/) and [Tailwindcss](https://tailwindcss.com/) styles and scripts. +After adding these directives you may need to clear the view cache. + +```bash +php artisan view:clear +``` + +These directives are fine for a dev environment, however, if you want to use your own livewire, Tailwindcss or Alpine.js setup, you can disable these assets from being loaded with the Laravel views directive. + +You can define which assets are included by setting the option parameter in the directive: + +```blade +@livewireSelectScripts(livewire-select, livewire-select-multiple) +``` + ### Requirements This package uses `livewire/livewire` (https://laravel-livewire.com/) under the hood. @@ -179,7 +212,7 @@ You can define the `searchable` attribute on the component to change the behavio inputs. With `:searchable="true"` your component will change its behavior to allow searching the options returned in the `options()` method. - ```blade +```blade +``` + To filter the options in the dropdown, you can use the `$searchTerm` parameter in the `options()` method.