みなさんLivewire好きですか?
私は最近使い始めて、すごく好きです!!
1からコンポーネントを作るのは好きですか?
作る時間がたくさんあれば良いですが、ない状況だと好きになれません!
- Livewireを使っている or 使いたい
- コンポーネントを1から作る時間がない
この記事はそんなときに役立つと思います!!
いろんな説明記事があるので調べてみてください。
端的には、JSを書かずにPHPのみで画面構築ができるツールになります!
処理の記載も、Vueライクにかけることも特徴です!
Livewireと組み合わせて利用できるUIコンポーネントです!
(無料で全てのコンポーネントを利用できるのが強くて選びました)
daisyUI(デイジーUI)
をベースに作られているので、
daisyUIに存在するコンポーネントも使える のです。
すごすぎるぞ。
下記を参考にしてください!
フォームがわかりやすいので、フォームで書きます
実際のコード
use Illuminate\Http\Request;
use Livewire\Attributes\Layout;
use Livewire\Attributes\Validate;
use Livewire\Volt\Component;
new #[Layout("layouts.xxx")] class extends Component {
#[Validate('required|string|email')]
public string $email = '';
#[Validate('required|string')]
public string $password = '';
public function login(Request $request): void
{
// ログインの処理が入る
}
}; ?>
title="ログイン画面" separator />
class="flex flex-col items-center gap-4">
class="w-full max-w-lg">
wire:submit="login" no-separator>
class="flex flex-col gap-2">
label="メールアドレス"
wire:model="email"
required
placeholder="[email protected]"
icon="o-envelope"
/>
label="パスワード"
wire:model="password"
required
placeholder="************"
password-icon="o-lock-closed"
password-visible-icon="o-lock-open"
/>
class="flex flex-col items-center">
label="ログイン"
icon="o-arrow-right-end-on-rectangle"
class="btn-sm btn-secondary"
type="submit"
spinner="login"
/>
実際の画面
これでこんな感じのログインフォームができました!笑
早い!!
PC
スマホ
利用しているコンポーネント
- 一つのファイルに処理をまとめることができる
- 変数の上の行に
#[Validate('xxx')]と記載すればバリデーションできて視認性が良い - コンポーネントにデータとオプションを渡すだけで形になる!
- コンポーネントは初めからレスポンシブ対応されているので実装不要
- JS全く書いていない、PHPで書くロジックに集中できる
- 今回の処理では書いていないが、変数をリアルタイムで同期ができるのでSPAのような動きが実装できる
Formに逃しましょう。
下記を参考にしてください。
ここの色を変えたいけどできない…
この部分の動きをこうしたいけどできない…
といったケースが出てくると思います。
こういった場合はmaryUIのコンポーネントをベースにして自分で調整しましょう。
奥の手でして、ベースコンポーネントのアップデートと乖離するので乱用は避けた方が良いです。
maryUIのコンポーネントを持ってくる
app/View/Components/ 配下にあるものです。
ここにファイルを作ります。
作ったファイルに対して、
https://github.com/robsontenorio/mary/tree/main/src/View/Components
からカスタマイズしたいコンポーネントのソースを持ってきましょう。
あとは処理をいじるなり、CSSをいじるなりです。
一部をかいつまんで記載しましたが、
ほんとうに早く画面作れます…!
画面としては大体決まったUIになってしまう点がネック…かもですが速さとのバランスですね!
今回Tailwind CSSを初めて書きましたが、もうやめられませんね笑
レスポンシブ対応もサクサクっとできて嬉しいです。
Qiita上にLivewire周りでなさそうな記事があれば、
書いていこうかな〜と考えてます。
どなたかの役に立ちますように!!🙏
Views: 0
