Skip to content

Commit

Permalink
Update docs
Browse files Browse the repository at this point in the history
  • Loading branch information
VojislavD committed Feb 9, 2024
1 parent 3f8a711 commit be8138d
Showing 1 changed file with 8 additions and 8 deletions.
16 changes: 8 additions & 8 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -76,11 +76,11 @@ In blade file of the same Livewire component, you should add `<x-tc::modal>` and
Inside `<x-tc::modal>` tags, you can add any content you want to be present in modal.

```blade
<x-tc::modal model="openModal">
<x-tc-modal model="openModal">
<h1>This is some title</h1>
<p>This is some content</p>
</x-tc::modal>
</x-tc-modal>
```

The modal can be opened from the blade file, like this:
Expand Down Expand Up @@ -118,34 +118,34 @@ The same goes for closing the modal, only the value of `openModal` will be set t
For example, if you want to have a button to close the modal inside the modal itself, you can do it like this:

```blade
<x-tc::modal model="openModal">
<x-tc-modal model="openModal">
... Some content of modal
<button type="button" wire:click="$set('openModal', false)">
Cancel
</button>
</x-tc::modal>
</x-tc-modal>
```

It's possible to configure the width of the modal by passing a Tailwind CSS class to `width` property of the component. For example:

```blade
<x-tc::modal model="openModal" width="w-1/2">
<x-tc-modal model="openModal" width="w-1/2">
... Some content of modal
</x-tc::modal>
</x-tc-modal>
```

You can add action buttons to the bottom of the modal like this:

```blade
<x-tc::modal model="openModal">
<x-tc-modal model="openModal">
... Some content of modal
<x-slot::action>
<button>Cancel</button>
<button>Submit</button>
</x-slot::action>
</x-tc::modal>
</x-tc-modal>
```
## Testing
Run tests with:
Expand Down

0 comments on commit be8138d

Please sign in to comment.