Skip to content
Merged
Changes from 3 commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
24 changes: 12 additions & 12 deletions docs/03. advanced-examples/17. completely-custom-styles.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,22 +2,22 @@

[[Global vs local component namespace]]

While Livewire autocomplete component comes with some default styles, to make getting up and running easier, it is also flexible and allows you to add your own styling to match your app.
While Livewire Autocomplete comes with some default styles, to make getting up and running easier, it is also flexible and allows you to add your own styling to match your app.

All components have an `unstyled` prop that can be passed into to remove all default styling.
- All components have an `unstyled` prop that can be passed in to remove all default styling.

`x-autocomplete-item` has a couple of extra styles that need to be added `active`, `inactive`, `disabled`.
- `x-autocomplete-item` has a couple of extra styles that need to be added `active`, `inactive`, `disabled` to give contrast to your dropdown items.

All components accept a `class` prop to add any custom styling.
- All components accept a `class` prop to add any custom styling.

`x-autocomplete-input` and `x-autocomplete-list` both also have a `containerClass` prop to allow you to style the container elements directly.
- `x-autocomplete-input` and `x-autocomplete-list` both also have a `containerClass` prop to allow you to style the container elements directly.

## Using custom components for styling
Instead of having to repeat custom styles, every time you implement the autcomplete component, we recommend creating custom blade components that wrap up the components from this packaged.
Instead of having to repeat custom styles every time you implement the autcomplete component, we recommend creating custom blade components that wrap up the components from this package.

To do this we recommend disabling the global namespace in the autocomplete config by setting `use_global_namespace` to `false`. See [[#Namespaced components]].
To do this, we recommend disabling the global namespace in the [autocomplete config](https://dev.livewire-autocomplete.com/docs/installation#publishing-the-config) by setting `use_global_namespace` to `false`. See [[#Namespaced components]].

By disabling the global namespace, it allows you to create your own component with the same names. So in your `resources/view/components` directory, create a new directory called `autocomplete`.
By disabling the global namespace, it allows you to create your own component with the same names. Now in your `resources/view/components` directory, create a new directory called `autocomplete`.

Inside that directory create the following files:
- index.blade.php
Expand All @@ -32,9 +32,9 @@ Inside that directory create the following files:
- autocomplete-new-item.blade.php
- autocomplete-prompt.blade.php

Let's look at the `autocomplete-input.blade.php` to see how to implement them.
Let's look at the `autocomplete-input.blade.php` as an example of how to implement them.

If we open `autocomplete-input.blade.php`, inside it we can now reference the Livewire autocomplete namespaced input component:
If we open `autocomplete-input.blade.php`, inside it we can now reference the Livewire Autocomplete namespaced input component:

```html
<x-lwa::autocomplete-input :attributes="$attributes" />
Expand All @@ -54,7 +54,7 @@ Finally we can add any custom classes by passing them into the attributes bag.

Now when we go to use our component, we can just reference `<x-autocomplete-input />` as per usual but our custom styles will be applied.

Finally all the remaining components that we created earlier need to be implemented.
We can follow this same process for all of the remaining components created earlier--a few of which have [additional styles](#custom-styles).

Or if you'd still prefer to use some of the inbuilt components and not override them, you can always just reference the namespaced autocomplete components directly in your Livewire components.

Expand All @@ -64,4 +64,4 @@ Instead of manually creating all of the above components, you can automatically

```bash
php artisan lwautocomplete:custom-components
```
```