アルパインでトースト通知をつくる方法.js

7340 ワード

今日私はどのように非常に頻繁に我々はユーザーにアクションの結果を通信したいときに来るUIの作品を作成する方法を示します:トースト通知!知らない人にとっては、これは小さなメッセージのバブル/ダイアログでは、いくつかの瞬間を示し、離れて行くと、それは一般的にユーザーのAJAXのリクエストのようなアクションの結果を表示するために使用されることになっています.他の高山のように.JSチュートリアルでは、TruwindCSSをスタイルに使用します.

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Alpine Toast Notification</title>
    <link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css” rel=“stylesheet">
    <script src="https://cdn.jsdelivr.net/gh/alpinejs/[email protected]/dist/alpine.min.js" defer></script>
</head>
<body>
    <div x-data="toastNotification()"></div>
    <script>
        function toastNotification() {
            return {}
        }
  </script>
<body>

おそらく、今回はアルパインを管理することに気づいた.以前のようにインラインではなくスクリプトタグからJS.これは、私たちがもう少し機能を加えて、インラインでそれをすることが混乱になるからです.
だから、アイデアは、画面の右下隅からスライドし、数秒後にスライドダウンする小さなダイアログを持つことです.タイトル、メッセージと色はカスタマイズ可能です、そして、我々はそれを引き起こす何かを必要とします.私は今のボタンを作成しますが、あなたはそれを改善し、簡単にAJAXのリクエストでそれを使用することがわかります.ボタンのマークアップです.

<button x-on:click=“openToast()” class=“bg-purple-200 hover:bg-purple-300 text-purple-500 rounded px-6 py-4 m-4”>Open Toast</button>

これで、我々は我々が必要とするということを知っていますopenToast インサイドtoastNotification ボタンをクリックするときに呼び出されるオブジェクトx-on:click ). Ajaxを使用している場合は、リクエストが終了した後にこの関数を呼び出します.
トースト通知自体には、このマークアップがあります.

<div
    x-show="open"
    class="w-96 p-4 rounded h-32 fixed bottom-4 right-4 transform-gpu transition-transform duration-400 ease"
    x-class="success ? 'bg-green-500' : 'bg-red-500'"
    x-transition:enter-start="translate-y-full"
    x-transition:enter-end="translate-y-0"
    x-transition:leave-start="translate-y-0"
    x-transition:leave-end="translate-y-full"
    >
    <p class="text-white"><strong x-text="title"></strong></p>
    <p class="mt-2 text-sm text-white" x-text="message"></p>
</div>

通知とボタンのマークアップはdiv それは宣言するx-data="toastNotification()" それ以外の場合は動作しません.
一歩一歩行きましょうx-show="open" : つまり、変数と呼ばれる変数が必要になりますopen これはbooleanであり、true , 通知はオープンであり、それがfalse 通知は終了します.
クラスについてあまりおもしろいことはありませんfixed divはビューポートに関連して固定されます.それから私たちはbottom-4 and right-4 それは少しマージンで画面の右下に固執する.また、動的クラスを定義するx-class : を返します.success そうでなければ、それは赤になります.
次に、私たちはx-transition 閉じるときにトーストが開くときにスライドしてスライドさせると宣言します.
最後に、私たちはp 通知のタイトルとメッセージを表すタグ.これらの属性を定義するために両方の変数を使用し、タグをx-text .
今我々は戻って行くことができますtoastNotification 関数とこれらの変数と関数のすべてを定義します.

function toastNotification() {
    return {
        open: false,
        title: "Toast Title",
        message: "Toast message",
        success: false,
        openToast() {
            this.open = true
            setTimeout(() => {
                this.open = false
            }, 5000)
        }
    }
}

Notificaationがあるときに制御するBooleanプロパティから始めますopen . それから、我々はtitle and message 通知によって表示されるデータを保持する文字列.次に、booleansuccess 緑色の通知を切り替えるプロパティtrue ) と赤false ). 最後にopenToast 関数を設定するopen プロパティtrue , 通知を開くと、5秒後にそれをfalseに、有効に通知を閉じるに設定します.
そしてこれです.つは、成功した更新後または失敗したAjaxリクエストの後に、要求に応じてタイトル、メッセージ、および成功のプロパティを変更する可能性を追加することで、この小さな断片を改善することができます.次のポストまで👋

Reference

この問題について(アルパインでトースト通知をつくる方法.js), 我々は、より多くの情報をここで見つけました https://dev.to/dberri/how-to-create-a-toast-notification-with-alpine-js-1kcm

テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。

Collection and Share based on the CC Protocol

Vue—JSX詳細

[猫と一緒に本を読む]2022.02.15 TIL