Livewire를 사용한 UI 개선
Breeze 또는 Jetstream 패키지를 사용하는 경우 아래와 같이 사용할 수 있는 버튼 구성 요소가 제공됩니다.
<x-button wire:click="verify">
Verify
</x-button>
위의 출력이 사용자에게 표시됩니다. 버튼을 클릭하면 구성 요소의
verify
메서드가 실행됩니다. 그러나 버튼을 클릭하면 사용자에게 피드백이 없습니다.wire:loading.attr
를 사용하여 버튼을 클릭할 때 비활성화된 속성을 포함하도록 Livewire에 지시할 수 있습니다. <x-button wire:click="verify" wire:loading.attr="disabled">
Verify
</x-button>
이
disabled
속성은 버튼을 클릭하는 즉시 추가되고 AJAX 호출이 완료되면 자동으로 제거됩니다. Breeze나 Jetstream에서 제공하는 button
컴포넌트를 사용하고 있기 때문에 아래와 같이 불투명도를 변경하는 CSS Property가 자동으로 추가됩니다.버튼이 비활성화되어 있는 한 버튼의 텍스트를 변경할 수도 있습니다. 이를 위해
wire:loading
라는 Livewire 속성을 사용합니다. 이 속성 내에서 모든 요소를 래핑할 수 있으며 AJAX 호출이 진행 중일 때만 표시됩니다. <x-button wire:click="verify" wire:loading.attr="disabled">
Verify
<span wire:loading>
Verifying...
</span>
</x-button>
따라서
Verifying...
AJAX 호출이 진행되는 동안 텍스트가 표시됩니다. 또한 AJAX 호출이 진행 중일 때 텍스트 확인을 숨기고 싶습니다. AJAX 호출이 진행 중일 때 요소를 제거하는 wire:loading.remove
를 사용하여 그렇게 할 수 있습니다. <x-button wire:click="verify" wire:loading.attr="disabled">
<span wire:loading.remove>
Verify
</span>
<span wire:loading>
Verifying...
</span>
</x-button>
이제 버튼을 클릭하면 다음과 같은 결과가 출력됩니다.
이렇게 하면 사용자가 AJAX 호출이 진행되는 동안 불투명도 및 텍스트가 변경됨에 따라 버튼을 클릭할 때 좋은 피드백을 얻을 수 있습니다. 또한 버튼도 비활성화되어 사용자가 실수로 두 번 클릭할 수 없습니다.
그러나 페이지에 아래와 같은 버튼이 2개 있다고 가정해 보겠습니다.
<x-button wire:click="verify" wire:loading.attr="disabled">
<span wire:loading.remove>
Verify
</span>
<span wire:loading>
Verifying...
</span>
</x-button>
<x-button wire:click="deleteProject" wire:loading.attr="disabled">
<span wire:loading.remove>
Remove
</span>
<span wire:loading>
Removing...
</span>
</x-button>
이제
Verify
버튼을 클릭하면 버튼이 비활성화되고 텍스트도 변경되는 문제가 발생합니다. 그러나 다른 버튼의 텍스트도 Remove
에서 Removing
로 변경됩니다. 두 번째 버튼을 클릭해도 같은 문제가 발생합니다.다행히 Livewire는
wire:target
를 사용하여 이 문제를 쉽게 해결할 수 있는 방법을 제공합니다. 이 속성을 사용하면 Livewire에 언제 wire:loading
및 wire:loading.remove
를 구현할지 명시적으로 알릴 수 있습니다. 따라서 Verify
버튼의 경우 verify
메서드가 호출될 때만 로드 표시기가 변경되기를 원합니다. 아래를 사용하여 그렇게 할 수 있습니다.wire:target="verify"
마찬가지로
Remove
버튼에 대해 아래와 같이 wire:target
를 지정할 수 있습니다.wire:target="deleteProject"
최종 HTML은 이제 아래와 같이 됩니다.
<x-button wire:click="verify" wire:loading.attr="disabled">
<span wire:loading.remove wire:target="verify">
Verify
</span>
<span wire:loading wire:target="verify">
Verifying...
</span>
</x-button>
<x-button wire:click="deleteProject" wire:loading.attr="disabled">
<span wire:loading.remove wire:target="deleteProject">
Remove
</span>
<span wire:loading wire:target="deleteProject">
Removing...
</span>
</x-button>
양식이 제출될 때
wire:loading
및 wire:loading.remove
를 구현할 수도 있습니다. 양식 제출과 동일한 작업으로 wire:target
를 지정하기만 하면 됩니다. 따라서 아래 HTML에서 양식이 제출될 때 메서드 formSubmit
를 호출하고 wire:target
와 동일하게 지정합니다. <form wire:submit.prevent="formSubmit">
.
.
.
<x-button wire:loading.attr="disabled" wire:target="formSubmit">
<span wire:loading.remove wire:target="formSubmit">
Submit
</span>
<span wire:loading wire:target="formSubmit">
Submitting...
</span>
</x-button>
</form>
이렇게 하면 자습서 시작 시 이미지와 동일한 출력이 제공됩니다.
이 튜토리얼을 즐기셨기를 바랍니다. 비슷한 기사를 보려면 나를 따라갈 수 있습니다.
Reference
이 문제에 관하여(Livewire를 사용한 UI 개선), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/100r0bh/ui-improvements-using-livewire-1cmk텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)