라이브와이어 알리미

16959 단어 tallalpinelaravellivewire
인사말!

새로운 TALL 스택 구성 요소Livewire Notifier를 소개하겠습니다.

프런트엔드와 백엔드 모두에 최신 알림 시스템을 제공합니다. 메시지는 브라우저의 JavaScript 또는 모든 Livewire 구성 요소 또는 Laravel 컨트롤러의 PHP에 의해 생성될 수 있습니다. TALL 스택 자체 위에는 종속성이 없습니다.

시작하자.



라이브와이어 - 알리미



Livewire Notifier는 위의 종속성이 없는 간단한 알림 시스템입니다TALL-stack(Tailwind CSS, Alpine.JS, Laravel 및 Livewire).

요구 사항



Livewire 및 Alpine.JS이 제대로 설치되었는지 확인하십시오.
가장 쉬운 방법은 Livewire 스택(설치 후 명령php artisan jetstream:install livewire)으로 Laravel Jetstream을 설치하는 것입니다.

Alpine.JS는 resources/js/app.js 패키지로 가져와야 합니다.

import 'alpinejs'


Livewire 스크립트 및 스타일 태그는 레이아웃 파일에 있어야 합니다.

…
<head>
…
    <livewire:styles/>
…
</head>
<body>
…
    <livewire:scripts/>
</body>
</html>


설치



작곡가를 통해

$ composer require codespb/livewire-notifier


설치 프로세스를 진행합니다.

$ php artisan livewire-notifier:install


그 후 패키지 구성은 config/livewire-notifier.php에서, 보기는 resources/views/vendor/livewire-notifier/에서 찾을 수 있습니다.

새 제거 경로로 확장하려면 Tailwind 구성이 필요하기 때문에 필요합니다.

그렇지 않으면 적절하게 스타일이 지정된 메시지가 표시되지 않습니다.

용법



Livewire 구성 요소<livewire:notifier/>를 앱 레이아웃에 넣습니다.
절대적으로 배치될 수 있으므로 올바른 컨텍스트에 삽입해야 합니다.

이제 프런트엔드와 백엔드 모두에서 사용할 수 있습니다.

메시지 옵션



(Livewire 구성 요소에서) 백엔드에 추가된 메시지의 유형은 array 여야 합니다.
프런트엔드(JavaScript에서)에 추가된 메시지는 object 유형이어야 합니다.

$message = [
        'text' => __('Post is saved!'),
        'title' => '', // Optional
        'type' => 'success', // Optional. By default: success | optional: error (or fail), warning (or warn), info
        // you can find all types options in the config file
        'icon' => '', // Optional. It replaces the default type icon. Can be pure html or svg code

        // Attention! The following options override ones from the config file

        'duration' => 5000, // Optional. The time of message to be shown. To show infinitely set to 0
        'msgClass' =>  'bg-gradient-to-r from-green-200 to-green-300', // Optional. Tailwind class for message container
        'progressClass' =>  'bg-green-500', // Optional. Tailwind class for progress bar. If null progress bar won't be shown
        'closable' => false, // Optional. True by default. Whether message is closable by click on message or Esc key press on window
    ]




let message = {
    text: 'Post is saved!'
}


백엔드



라이브와이어 이벤트

모든 Livewire 구성 요소 푸시emit 트리거에서 새 메시지를 렌더링합니다.

public function save(){
    ...
    $this->emitTo('notifier','message',['text'=>__('The post is saved!')]);
}


세션 플래시 변수

public function save(){
    ...
    session()->flash('notifier',['text'=>__('The post is saved!')]);
    return $this->redirect(route('posts'));
}


프런트엔드



자바스크립트에서 새 메시지 추가:

Livewire.emitTo('notifier','message',{text:'The post is saved!'})





예시



다음 코드를 넣으십시오(라라벨 Jetstream w/Livewire 스택이 설치된 상태에서):

<div class="flex flex-row space-x-4">
    <x-jet-button x-data="{}" @click="Livewire.emitTo('notifier','message',{text:'Success',type:'success'})">Success</x-jet-button>
    <x-jet-button x-data="{}" @click="Livewire.emitTo('notifier','message',{text:'Error',type:'error'})">Error</x-jet-button>
    <x-jet-button x-data="{}" @click="Livewire.emitTo('notifier','message',{text:'Warning',type:'warning'})">Warning</x-jet-button>
    <x-jet-button x-data="{}" @click="Livewire.emitTo('notifier','message',{text:'Info',type:'info'})">Info</x-jet-button>
    <x-jet-button x-data="{}" @click="Livewire.emitTo('notifier','message',{text:'Default',type:'default'})">Default</x-jet-button>
</div>


구성 파일


php artisan livewire-notifier:install 명령이 실행된 후 구성 파일이 config/livewire-notifier.php에 게시됩니다. 여기에서 사용자 지정을 위한 일부 값을 변경할 수 있습니다.

<?php
return [
    // Messages container positioning
    'positionClass' => 'absolute top-0 right-0',
    // Default message Tailwind stylinh
    'defaultMsgClass' => 'w-80 rounded-xl shadow-xl',
    // Time of each message to be shown by default
    'duration' => 2200,
    // Messages types
    'types' => [
        'success' => [
            // 'msgClass'=>'bg-green-200',
            'msgClass'=>'bg-gradient-to-r from-green-200 to-green-300',
            'progressClass' => 'bg-green-500',
            // View for icon
            'icon' => 'livewire-notifier::icons.success',
        ],
        'error' => [
            // 'msgClass'=>'bg-red-200',
            'msgClass'=>'bg-gradient-to-r from-red-200 to-red-300',
            'progressClass' => 'bg-red-500',
            // View for icon
            'icon' => 'livewire-notifier::icons.error',
        ],
        'fail' => [
            // 'msgClass'=>'bg-red-200',
            'msgClass'=>'bg-gradient-to-r from-red-200 to-red-300',
            'progressClass' => 'bg-red-500',
            // View for icon
            'icon' => 'livewire-notifier::icons.error',
        ],
        'warning' => [
            // 'msgClass'=>'bg-yellow-200',
            'msgClass'=>'bg-gradient-to-r from-yellow-200 to-yellow-300',
            'progressClass' => 'bg-yellow-500',
            // View for icon
            'icon' => 'livewire-notifier::icons.error',
        ],
        'warn' => [
            // 'msgClass'=>'bg-yellow-200',
            'msgClass'=>'bg-gradient-to-r from-yellow-200 to-yellow-300',
            'progressClass' => 'bg-yellow-500',
            // View for icon
            'icon' => 'livewire-notifier::icons.error',
        ],
        'info' => [
            // 'msgClass'=>'bg-blue-200',
            'msgClass'=>'bg-gradient-to-r from-blue-200 to-blue-300',
            'progressClass' => 'bg-blue-500',
            // View for icon
            'icon' => 'livewire-notifier::icons.info',
        ],
        'default' => [
            // 'msgClass'=>'bg-gray-200',
            'msgClass'=>'bg-gradient-to-r from-gray-200 to-gray-300',
            'progressClass' => 'bg-gray-700',
            // View for icon
            'icon' => 'livewire-notifier::icons.info',
        ]
    ]
];


그게 다야!

추신 이 패키지를 지원하려면 GitHub에서 별표를 해주세요.
https://github.com/codespb/livewire-notifier
최장 상승 서브 시퀀스 (dp 클래식)
[JavaScript] classList의 사용 방법 요약 (add.remove.contains.togle)

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage