bulmaのpanelのヘッダーにボタンを付ける

bulmaというcssフレームワークでpanelというものがあります。

このpanelではpanel-headingというのがあるのですが、このヘッダーに編集ボタンは用意されていません。

この記事ではbulmaのpanelのヘッダーに編集ボタンを付ける方法を紹介します。

panelについてのドキュメントはこちらです。

https://bulma.io/documentation/components/panel/

最終的にこのようなものができます。

html

panelのテンプレートに編集を追加しています。

<nav class="panel">
    <p class="panel-heading is-size-6 sp-panel-heading">
        管理
        <a class="button is-small sp-right" href="edit">
            <span>編集</span>
            <span class="icon is-small">
                <i class="fas fa-cog"></i>
            </span>
        </a>
    </p>
    <a class="panel-block" href="">
        <span class="panel-icon">
            <i class="fas fa-flag" aria-hidden="true"></i>
        </span>
        <span class="is-size-7">お気に入り</span>
    </a>
</nav>

追加している部分はこの部分です。

<a class="button is-small sp-right" href="edit">
    <span>編集</span>
    <span class="icon is-small">
        <i class="fas fa-cog"></i>
    </span>
</a>

css

cssは殆どをbulmaで補っているので、2つ追加するだけです。

.sp-panel-heading {
    display: flex;
    align-items: center;
}

.sp-panel-heading .sp-right {
    margin-left: auto;
}

bulmaのbutton is-smallでも、高さが合わずに管理という文字がずれます。

そのため、flexの指定とalign-items: centerで調整しています。

ボタンを右寄せするためにmargin-left: auto;をいれています。

注意

margin-left: auto;を入れていますが、ヘッダーに入れる文字によってはレイアウトが崩れる恐れがあります。

その場合はflex: 1;などで調整するのが良いでしょう。