Skip to content

Commit

Permalink
Remove images from package
Browse files Browse the repository at this point in the history
  • Loading branch information
VojislavD committed Feb 29, 2024
1 parent a3c3d32 commit 99090ab
Show file tree
Hide file tree
Showing 6 changed files with 5 additions and 5 deletions.
10 changes: 5 additions & 5 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -54,7 +54,7 @@ To change colors, just find `primary`, `primary-dark`, `secondary` or `secondary

### Modal

<img src="docs/img/modal-demo.gif">
<img src="https://private-user-images.githubusercontent.com/23532087/308881249-288208fd-732f-4828-abd4-1d9a0a3e46d5.gif?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MDkyMDEzOTQsIm5iZiI6MTcwOTIwMTA5NCwicGF0aCI6Ii8yMzUzMjA4Ny8zMDg4ODEyNDktMjg4MjA4ZmQtNzMyZi00ODI4LWFiZDQtMWQ5YTBhM2U0NmQ1LmdpZj9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDAyMjklMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwMjI5VDEwMDQ1NFomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTdmNTA2MTNkMzM5NmNmY2NiOTUzNWU4ZjM0ZmZjYzlmYjUwZmNlZmYwMWQxMWRiMDI4YjExODdiMGNhOTM0Y2EmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.kDqXYY6O2roS-V_0UDpFZKYHjs9GuWCgtA-lAwufa3I">

To use modal, you need have boolean variable inside your Livewire component. Modal will be opened or closed based on the value of that variable.

Expand Down Expand Up @@ -150,7 +150,7 @@ You can add action buttons to the bottom of the modal like this:

### Confirmation modal

<img src="docs/img/confirmation-modal-demo.gif">
<img src="https://private-user-images.githubusercontent.com/23532087/308881253-9255a8d6-672e-450b-86df-4bafb47e87bb.gif?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MDkyMDEzOTQsIm5iZiI6MTcwOTIwMTA5NCwicGF0aCI6Ii8yMzUzMjA4Ny8zMDg4ODEyNTMtOTI1NWE4ZDYtNjcyZS00NTBiLTg2ZGYtNGJhZmI0N2U4N2JiLmdpZj9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDAyMjklMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwMjI5VDEwMDQ1NFomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTQ1YTkyNjBmNDA4YTQ1ODlmZmUwY2EzNWU2M2Y3OGFkMmRhMzkyY2NiZGJkZTY2OWJlOGRjNzk2Mjc1NWUwNjUmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.fI9dUoXd8awJWUjMEwavvKJu7eIZlyjpR3a_pgvWsjE">

To use the confirmation modal, you need to add the `x-tc-confirmation-modal` component and the `WithTcConfirmation` trait to the Livewire component where you want to use it.

Expand Down Expand Up @@ -194,7 +194,7 @@ If you want to use the confirmation modal with multiple actions on the same Live

### Notification

<img src="docs/img/notification-demo.gif">
<img src="https://private-user-images.githubusercontent.com/23532087/308881252-8d9b77cd-8c5d-452a-a641-14c5cd950938.gif?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MDkyMDEzOTQsIm5iZiI6MTcwOTIwMTA5NCwicGF0aCI6Ii8yMzUzMjA4Ny8zMDg4ODEyNTItOGQ5Yjc3Y2QtOGM1ZC00NTJhLWE2NDEtMTRjNWNkOTUwOTM4LmdpZj9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDAyMjklMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwMjI5VDEwMDQ1NFomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTdmZTk5MDlhZjE4Y2FjZDA5MTMwZmI0MDk1NDE1MDRhZGU4MTMzZjI2ZjRhNWJhMzRjMGVmY2ZhMGJkZjA1MWUmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.83YOsLDwqIKsHDHup44epEjP9chbivo7IF7Qml_nWtg">

You can display notifications on the same page without reloading, or you can redirect to some other page and display notifications on that page.

Expand Down Expand Up @@ -265,7 +265,7 @@ For example, to change the notification to disappear after 3 seconds, you can do

### Table

<img src="docs/img/table-demo.gif">
<img src="https://private-user-images.githubusercontent.com/23532087/308881251-e8b5a309-d7f0-414c-989a-8726eda5db22.gif?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MDkyMDEzOTQsIm5iZiI6MTcwOTIwMTA5NCwicGF0aCI6Ii8yMzUzMjA4Ny8zMDg4ODEyNTEtZThiNWEzMDktZDdmMC00MTRjLTk4OWEtODcyNmVkYTVkYjIyLmdpZj9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDAyMjklMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwMjI5VDEwMDQ1NFomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPWNlNDg1NmI4OWRjOGI5NzFjNGE0YjJlY2NjMDJkZTk1ZWM4MzIyMGFkNGU1N2E1OTAzNzc1ZDNhMWQyYzYzNTcmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.4cKTSq05mHt7BXKla0Ka_9nKuQz_ZpXsioRDG_tremE">

You can use a table in the blade file of your Livewire component like this:

Expand Down Expand Up @@ -425,7 +425,7 @@ Pagination is optional; if you don't need it, you can leave out `<x-slot:paginat

### Loading spinner

<img src="docs/img/loading-spinner-demo.gif">
<img src="https://private-user-images.githubusercontent.com/23532087/308881250-1fcda036-325a-4eb7-88d2-388814b72fec.gif?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MDkyMDEzOTQsIm5iZiI6MTcwOTIwMTA5NCwicGF0aCI6Ii8yMzUzMjA4Ny8zMDg4ODEyNTAtMWZjZGEwMzYtMzI1YS00ZWI3LTg4ZDItMzg4ODE0YjcyZmVjLmdpZj9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDAyMjklMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwMjI5VDEwMDQ1NFomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTA5ZTllYjJkOWQ5YjNmOTcxMGUwODcyOGYzYmEwZWM2OTI5NDg5NDQ4MzI2NDA2YTUyZTk0NGM5ODBkZDQ0MjkmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.ceObB3mecs1wIaoghodafNQpFgoG07h_J4abUFhLzCY">

Add `<x-tc-loading-spinner />` to your blade and add a `target` attribute that should match the Livewire action you want to use the spinner for.

Expand Down
Binary file removed docs/img/confirmation-modal-demo.gif
Binary file not shown.
Binary file removed docs/img/loading-spinner-demo.gif
Binary file not shown.
Binary file removed docs/img/modal-demo.gif
Binary file not shown.
Binary file removed docs/img/notification-demo.gif
Binary file not shown.
Binary file removed docs/img/table-demo.gif
Binary file not shown.

0 comments on commit 99090ab

Please sign in to comment.