按钮列表组件

Last updated on 11/6/2024@mrbirddev

图片和图标

如果你想设置图标,你应该将图片字段留空。

如果你想将图片/图标放在右侧,请对 按钮图片自定义样式 应用以下样式。

left: auto;
right: .5rem;

DOM 结构

一个 按钮列表 组件在 HTML DOM 结构中是这样组成的。

<div style="display: flex; width: 100%"> <!-- 自定义样式 applies here -->
  <a href="" ...> <!-- 按钮自定义样式 applies here-->
    <div
      style="position: absolute; top: .5rem; bottom: .5rem; overflow: hidden; left: .5rem;"
      <!-- 按钮图片自定义样式 applies here-->
    >
      {image || icon}
    </div>
    <span>
      {button text}
    </span>
  </a>
  ...
</div>
Loading...