布局工具类

使用工具类快速构建页面布局。

Flex 布局

.ui-flex          /* display: flex */
.ui-flex-col      /* flex-direction: column */
.ui-items-center  /* align-items: center */
.ui-justify-center /* justify-content: center */
.ui-justify-between /* justify-content: space-between */

间距

.ui-gap-2  /* gap: 0.5rem */
.ui-gap-3  /* gap: 0.75rem */
.ui-gap-4  /* gap: 1rem */
.ui-gap-6  /* gap: 1.5rem */

.ui-mt-4   /* margin-top: 1rem */
.ui-mb-4   /* margin-bottom: 1rem */
.ui-space-y-4  /* 子元素垂直间距 1rem */

文字

.ui-text-center  /* text-align: center */
.ui-text-sm      /* font-size: 0.875rem */
.ui-text-xs      /* font-size: 0.75rem */
.ui-text-muted   /* color: var(--ui-text-muted) */
.ui-font-bold    /* font-weight: 700 */

宽度

.ui-w-full  /* width: 100% */

显示隐藏

.ui-hidden        /* display: none */
.ui-hide-mobile   /* 移动端隐藏 */
.ui-hide-desktop  /* 桌面端隐藏 */