Help us understand the problem. What is going on with this article?

Laravelのslot機能を使ってボタンの文言を変えて使い回す!

はじめに

Laravelのbladeでhtmlのコーディングを行っていると、「Vueのコンポーネントの様に中身だけ変えて使い回したい!って場面が多々出てくると思います。

そんな時にLaravelに元々あったsectionとは別にslotという機能がめちゃくちゃ感覚的に使えて良かったので説明していきます。

slot機能とは

まず、プロダクトの中で使い回すパーツをコンポーネントと呼びます。
例えば、こんな感じのボタンですかね。

スクリーンショット 2020-02-23 16.09.43.png

これをslot機能を使う事で、中の文言だけ変えて色々なところで使い回していきます。

slotの使い方

コンポーネント作成

まずコンポーネントを作っていきます。

変えていきたい部分を {{$slot}} としておきます。

views/button.blade.php
<button class="Button -fill -blue" type="button">
    <span class="Button__inner">
        <span class="Button__text">
            {{$slot}}
        </span>
    </span>
</button>

ちなみにボタンのscssはこんな感じですでに定義しています。

views/button.scss
.Button {
    @at-root {
        & {
            display: inline-flex;
            border: 0;
            border-radius: 3px;
            background-color:#ffffff;
            color: black;
            font-size: 14px;
            text-decoration: none;
            vertical-align: middle;

            &:hover {
                opacity: 0.8;
            }

            &.-fill {
                background: linear-gradient(to bottom, #fefefe 0%, #f3f5f7 100%);

                &.-blue {
                    background: linear-gradient(180deg, #1E4A91 0%, #193E79 100%);
                    color: $white;
                }

                &.-red {
                    background: linear-gradient(180deg, #F85359 0%, #DC151D 100%);
                    color: $white;
                }
            }

        .Button__inner {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100%;
            min-height: 32px;
            padding: 4px 15px;
            border: 1px solid $border-color;
            border-radius: 3px;
        }

        .Button__text {
            flex: 0 1 auto;
        }
    }
}

これにてボタンのコンポーネントはできました。

コンポーネントを呼び出す

先ほど作ったコンポーネントを呼び出していきます。

top.blade.php
@component('button')
    確認画面
@endcomponent

この様に('button')の部分にコンポーネント名。
@component@endconponentの間に{{$slot}}に入れたい文言を書きます。

ボタンを使い回す!

今後ボタンを使うときは、先ほどやった様に文言を指定して呼び出してあげるだけで簡単にできます。
top.blade.phpのみをいじる事で様々な文言のボタンを出してみましょう。

スクリーンショット 2020-02-23 16.51.34.png

top.blade.php
<div class="Button_group">
  @component('button')
    下書きを削除
  @endcomponent
  @component('button')
    下書きの保存して一覧の戻る
  @endcomponent
  @component('button')
    確認画面
  @endcomponent
</div>

<style>
.Button_group{
display:flex;
}
</style>

こんな感じで簡単に文言違いのボタンを複製できますね。
slotを使う事で、@includeだけでは実践できなかった、ちょっとした変更ができる様になります。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした