工具类速查
Tabler（基于 Bootstrap 5）提供了一套全面的原子 CSS 工具类。在使用 @gulcc/tabler-vue 时，你可以在模板中直接使用这些类名来精细控制样式。
边框 (Borders)
边框方向
html
<div class="border">全边框</div>
<div class="border-top">上边框</div>
<div class="border-end">右边框</div>
<div class="border-bottom">下边框</div>
<div class="border-start">左边框</div>
<div class="border-x">左右边框</div>
<div class="border-y">上下边框</div>边框粗细
| 类名 | 说明 |
|---|---|
border-0 | 无边框 |
border | 标准边框 (1px) |
border-wide | 粗边框 (2px) |
移除边框
html
<div class="border border-top-0">移除上边框</div>
<div class="border border-end-0">移除右边框</div>
<div class="border border-bottom-0">移除下边框</div>
<div class="border border-start-0">移除左边框</div>边框颜色
html
<div class="border border-primary">primary</div>
<div class="border border-secondary">secondary</div>
<div class="border border-success">success</div>
<div class="border border-danger">danger</div>
<div class="border border-warning">warning</div>
<div class="border border-info">info</div>圆角
| 类名 | 说明 |
|---|---|
rounded-0 | 无圆角 |
rounded | 标准圆角 |
rounded-1 | 小圆角 |
rounded-2 | 中等圆角 |
rounded-3 | 大圆角 |
rounded-circle | 圆形 |
rounded-pill | 胶囊形 |
rounded-top / rounded-end / rounded-bottom / rounded-start | 单侧圆角 |
光标 (Cursors)
| 类名 | 效果 |
|---|---|
cursor-pointer | cursor: pointer |
cursor-default | cursor: default |
cursor-grab | cursor: grab |
cursor-grabbing | cursor: grabbing |
cursor-wait | cursor: wait |
cursor-text | cursor: text |
cursor-move | cursor: move |
cursor-not-allowed | cursor: not-allowed |
cursor-help | cursor: help |
cursor-crosshair | cursor: crosshair |
cursor-zoom-in | cursor: zoom-in |
cursor-zoom-out | cursor: zoom-out |
交互 (Interactions)
用户选择
| 类名 | 说明 |
|---|---|
user-select-all | 点击自动全选内容 |
user-select-auto | 默认选择行为 |
user-select-none | 禁止选中文本 |
指针事件
| 类名 | 说明 |
|---|---|
pe-none | pointer-events: none，元素不响应鼠标事件 |
pe-auto | pointer-events: auto，默认行为 |
溢出
| 类名 | 说明 |
|---|---|
overflow-auto | 自动滚动 |
overflow-hidden | 隐藏溢出 |
overflow-visible | 可见溢出 |
overflow-scroll | 强制滚动条 |
边距 (Margins)
Tabler 的边距系统使用 {property}{side}-{size} 格式：
- property:
m— margin,p— padding - side:
t(top),b(bottom),s(start/left),e(end/right),x(左右),y(上下), 空 (四边) - size:
0~8
尺寸对照
| 尺寸 | 值 |
|---|---|
0 | 0 |
1 | 0.25rem |
2 | 0.5rem |
3 | 1rem |
4 | 1.5rem |
5 | 2rem |
6 | 3rem |
7 | 5rem |
8 | 8rem |
示例
html
<!-- 外边距 -->
<div class="m-4">四边外边距</div>
<div class="mt-3">上边距</div>
<div class="mb-2">下边距</div>
<div class="ms-4">左边距</div>
<div class="me-2">右边距</div>
<div class="mx-auto">水平居中</div>
<!-- 内边距 -->
<div class="p-4">四边内边距</div>
<div class="pt-3">上内边距</div>
<div class="pb-2">下内边距</div>
<div class="ps-4">左内边距</div>
<div class="pe-2">右内边距</div>垂直对齐 (Vertical Align)
| 类名 | 说明 |
|---|---|
align-baseline | vertical-align: baseline |
align-top | vertical-align: top |
align-middle | vertical-align: middle |
align-bottom | vertical-align: bottom |
align-text-top | vertical-align: text-top |
align-text-bottom | vertical-align: text-bottom |
适合与 d-inline 或 d-inline-block 配合使用：
html
<span class="d-inline-block align-middle">居中文本</span>💡 提示：以上所有工具类都来自 Tabler / Bootstrap 5，你可以在 Tabler 官方文档 中了解更多。