按鈕列表元件
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>