readme: add instructions about using directives and the multiple attr…

…ibute
bfiessinger · Aug 27, 2021 · 443b35c · 443b35c
1 parent 524f01a
commit 443b35c
Showing 1 changed file with 47 additions and 2 deletions.
diff --git a/README.md b/README.md
@@ -6,14 +6,47 @@ 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:
 
 ```bash
 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
+</head>
+<body>
+    ...
+ 
+    @livewireSelectScripts
+</body>
+</html>
+```
+
+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
 <livewire:car-model-select
     name="car_model_id"
     placeholder="Choose a Car Model"
@@ -191,6 +224,18 @@ Your input will look something like this
 
 ![preview](https://github.com/asantibanez/livewire-select/raw/master/searchable.gif)
 
+### Multi-select inputs
+
+You can define the `multiple` attribute on the component to turn the input into a multi-select dropdown using `:multiple="true"`
+
+```blade
+<livewire:car-model-select
+    name="car_model_id"
+    placeholder="Choose a Car Model"
+    :multiple="true"
+/>
+```
+
 To filter the options in the dropdown, you can use the `$searchTerm` parameter in the 
 `options()` method.