ボタンリストコンポーネント
Last updated on 11/6/2024@mrbirddev
画像とアイコン
アイコンを設定したい場合は、画像フィールドを空にしておく必要があります。
そして、画像/アイコンを右側に配置したい場合は、ボタン画像CSS に以下を適用します。
left: auto;
right: .5rem;
DOM構造
ボタンリスト コンポーネントは、HTML DOM構造ではこのように構成されています。
<div style="display: flex; width: 100%"> <!-- CSS applies here -->
<a href="" ...> <!-- ボタンCSS applies here-->
<div
style="position: absolute; top: .5rem; bottom: .5rem; overflow: hidden; left: .5rem;"
<!-- ボタン画像CSS applies here-->
>
{image || icon}
</div>
<span>
{button text}
</span>
</a>
...
</div>