Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
3
Help us understand the problem. What is going on with this article?
@terry_6518

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だけでは実践できなかった、ちょっとした変更ができる様になります。

普段はブログの方で記事を書いているので、興味ある方はぜひ!
Blog:https://terrblog.com/

3
Help us understand the problem. What is going on with this article?
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
terry_6518
フリーランス2年目のフロントエンドエンジニアです。 現在はReact+TypeScriptの開発をメインで扱っています。 Vue.js、Angular、Reactのいずれも実務でメインで扱っていた時期があります。
engineerlife
技術力をベースに人生を謳歌する人たちのコミュニティです。

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
3
Help us understand the problem. What is going on with this article?