Fomantic-UI

Laravel と Livewire をインストールして、Fomantic-UI の評価（Rating）を使う手順。 プロジェクト名（rating）を決めて以下のコマンドを実行します。 インストール時にプロジェクト名のディレクトリが作成されます。 インストールの最後に sudo でパスワードの入力を求められます。 ↓下のメッセージが表示されてインストールは終わります。 sail のエイリアスを定義します。 Laravel のインストールはここまで。 「sail up」でコンテナを起動します。 ララベルのトップディレクトリで、Livewireパッケージ をインストールします。 次のコマンドを実行して、ratingコンポーネント を生成します。 次の 2つ のファイルが生成されます。 ※因みに、renderメソッド を定義しなくても livewire.rating は呼び出されます。 生成された ratingコンポーネント のクラスとビューを次のように置き換えます。 app/Http/Livewire/Rating.php ↑上のポイントは、プロパティ更新時の updatedメソッド で、refreshイベント を発行して評価コンポーネントを再描画するようにしているところです。 resources/views/livewire/rating.blade.php ポイントは１行目の「wire:ignore」を消したところと、「@this.set()」と「Livewire.on(‘set-rating’,…)」です。 resources/views/index.blade.php ファイル を作成します。 routes/web.php に Livewireコンポーネント のルートを追加します ブラウザで確認します。 tail で onRate（ユーザーが評価を選択した後）のタイミングで通信していることを確認しましょう。 ちょっと、どうにかならないのかなと思うのが２点①Ratingクラスに updatedメソッドを作り、イベントを発行しなければならない点。②rating.blade.php でイベントを受け取り、再描画する為に ratingメソッド が２回呼ばれている点。 ①に関しては、イベントを発行する場所をデハイドレートにして解決できました。 […]

Form間で値をコピーするサンプルプログラムを作成してみます。 Laravel と Livewire をインストールして、emitSet で他コンポーネントのプロパティを更新する手順。 プロジェクト名（emitSet）を決めて以下のコマンドを実行します。 インストール時にプロジェクト名のディレクトリが作成されます。 インストールの最後に sudo でパスワードの入力を求められます。 ↓下のメッセージが表示されてインストールは終わります。 sail のエイリアスを定義します。 Laravel のインストールはここまで。 「sail up」でコンテナを起動します。 ララベルのトップディレクトリで、Livewireパッケージ をインストールします。 次のコマンドを実行して、formコンポーネント を生成します。 次の 2つ のファイルが生成されます。 ※因みに、renderメソッド を定義しなくても livewire.formは呼び出されます。 生成された formコンポーネント のクラスとビューを次のように置き換えます。 app/Http/Livewire/Form.php ↑上のポイントは、copyクラスメソッド 内で $data[$this->to] で 他のコンポーネント の値を書き換えます。過去は、書き換え後に emitSetメソッド を呼ぶ必要がありましたが、現在は emitSet する必要はありません。 resources/views/livewire/form.blade.php LiveRelationトレイト を作成します。 public/liveext.js を作成します。 resources/views/index.blade.php ファイル を作成します。 routes/web.php にルートを追加します。 ブラウザで確認します。 各Copyボタン を押すことで、Form間で値のコピーを行うことができます。

Laravel と Livewire をインストールして、Fomantic-UI のダイアログ（Modal）を使う手順。 プロジェクト名（modal）を決めて以下のコマンドを実行します。 インストール時にプロジェクト名のディレクトリが作成されます。 インストールの最後に sudo でパスワードの入力を求められます。 ↓下のメッセージが表示されてインストールは終わります。 sail のエイリアスを定義します。 Laravel のインストールはここまで。 「sail up」でコンテナを起動します。 ララベルのトップディレクトリで、Livewireパッケージ をインストールします。 次のコマンドを実行して、modalコンポーネント を生成します。 次の 2つ のファイルが生成されます。 ※因みに、renderメソッド を定義しなくても livewire.modal は呼び出されます。 生成された Modalコンポーネント のクラスとビューを次のように置き換えます。 app/Http/Livewire/Modal.php ↑ダイアログクラスには 表示状態（visible）と 承認ハンドラ（onApprove）のプロパティを持たせます。 resources/views/livewire/modal.blade.php ↑表示状態（visible）が false なら表示しません。approveボタン が押された場合、承認ハンドラ（onApprove）を実行します。ダイアログが非表示になるタイミングで、エレメントを削除して、表示状態（visible）を false に設定しています。 formsコンポーネント のクラスとビューを作成します。 app/Http/Livewire/Forms.php resources/views/livewire/forms.blade.php LiveRelationトレイト を作成します。 public/liveext.js を作成します。 resources/views/index.blade.php ファイル を作成します。 routes/web.php にルートを追加します。

Laravel と Livewire をインストールして、Fomantic-UI の評価（Rating）を使う手順。 プロジェクト名（rating2）を決めて以下のコマンドを実行します。 インストール時にプロジェクト名のディレクトリが作成されます。 インストールの最後に sudo でパスワードの入力を求められます。 ↓下のメッセージが表示されてインストールは終わります。 sail のエイリアスを定義します。 Laravel のインストールはここまで。 「sail up」でコンテナを起動します。 ララベルのトップディレクトリで、Livewireパッケージ をインストールします。 次のコマンドを実行して、ratingコンポーネント を生成します。 次の 2つ のファイルが生成されます。 ※因みに、renderメソッド を定義しなくても livewire.rating は呼び出されます。 生成された Ratingコンポーネント のクラスとビューを次のように置き換えます。 app/Http/Livewire/Rating.php resources/views/livewire/rating.blade.php ポイントは「wire:ignore」と「@this.set()」です。setの第３パラメータは defer です。「{{ $this->id }}」の部分は当初は ID属性 にしていましたが、うまくいかないパターンがあり、クラスに含めるようにしました。 LiveRelationトレイト を作成します。 public/liveext.js を作成します。 resources/views/index.blade.php ファイル を作成します。 routes/web.php に Livewireコンポーネント のルートを追加します ブラウザで確認します。 tail で onRate（ユーザーが評価を選択した後）のタイミングで通信していることを確認しましょう。

Laravel と Livewire をインストールして、Fomantic-UI の評価（Rating）を使う手順。 プロジェクト名（rating）を決めて以下のコマンドを実行します。 インストール時にプロジェクト名のディレクトリが作成されます。 インストールの最後に sudo でパスワードの入力を求められます。 ↓下のメッセージが表示されてインストールは終わります。 sail のエイリアスを定義します。 Laravel のインストールはここまで。 「sail up」でコンテナを起動します。 ララベルのトップディレクトリで、Livewireパッケージ をインストールします。 次のコマンドを実行して、ratingコンポーネント を生成します。 次の 2つ のファイルが生成されます。 ※因みに、renderメソッド を定義しなくても livewire.rating は呼び出されます。 生成された ratingコンポーネント のクラスとビューを次のように置き換えます。 app/Http/Livewire/Rating.php resources/views/livewire/rating.blade.php には↓下の２つのやり方があります。 ① @this.set() で設定する方法 ポイントは「wire:ignore」と「@this.set()」と「Livewire.on(‘set-rating’,…)」です。↓下のプロパティに設定する方法もありますが、第３パラメーターで defer が設定できるので set が良いと思います。Livewire.on ではアクションメソッドで送信された値を設定しています。 ② @this.プロパティ に設定する方法 ポイントは「wire:ignore」と「@this.プロパティ=value」と「Livewire.on(‘set-rating’,…)」です。 resources/views/index.blade.php ファイル を作成します。 routes/web.php に Livewireコンポーネント のルートを追加します ブラウザで確認します。

Laravel と Livewire をインストールして、Fomantic-UI の カレンダーを使う手順。 インストール時にプロジェクト名のディレクトリが作成されます。 ↓下のメッセージが表示されてインストールは終わります。 Laravel のインストールはここまで。 次の 2つ のファイルが生成されます。 ※因みに、renderメソッド を定義しなくても livewire.calendar は呼び出されます。 app/Http/Livewire/Calendar.php resources/views/livewire/calendar.blade.php には以下の４つのやり方があります。 ① onHide で inputイベント を上げる方法 ポイントは「wire:ignore」と「document.getElementById(‘calendar’).dispatchEvent(new Event(‘input’))」です。id を指定しなければならないので↓下の方法の方が良いです。 ② wire:focusoutで $set で設定する方法 ポイントは「wire:ignore」と「wire:focusout=”$set(‘date’,$event.target.value)”」です。 ③ onFocusout で @this.set() で設定する方法 ポイントは「wire:ignore」と「@this.set(‘date’,this.value)」です。 ④ onFocusout で @this.プロパティ で設定する方法 ポイントは「wire:ignore」と「@this.プロパティ=this.value」です。 tail でカレンダーを閉じるタイミングで通信していることを確認しましょう。