Group 组合

将多个组件组合在一起的组件。

行内 Tailwind/UnoCSS 用法

任意元素放在当前外层div下，即可实现组合效果

查看代码

<!-- 基础按钮组 -->
<div class="inline-flex -space-x-px [&>*:first-child]:rounded-l-[6px] [&>*:hover]:z-[2] [&>*:last-child]:rounded-r-[6px] [&>*]:rounded-none">
  <button class="cursor-pointer rounded-[6px] border border-solid border-gray-300 bg-transparent px-4 py-2 text-[14px] leading-[14px] text-gray-600 transition disabled:!cursor-not-allowed
 disabled:opacity-60 dark:text-white hover:[&:not(:disabled)]:border-primary hover:[&:not(:disabled)]:text-primary active:[&:not(:disabled)]:scale-95">
    默认按钮
  </button>
  <button class="cursor-pointer rounded-[6px] border border-solid border-gray-300 bg-transparent px-4 py-2 text-[14px] leading-[14px] text-gray-600 transition disabled:!cursor-not-allowed
 disabled:opacity-60 dark:text-white hover:[&:not(:disabled)]:border-primary hover:[&:not(:disabled)]:text-primary active:[&:not(:disabled)]:scale-95">
    默认按钮
  </button>
  <button class="cursor-pointer rounded-[6px] border border-solid border-gray-300 bg-transparent px-4 py-2 text-[14px] leading-[14px] text-gray-600 transition disabled:!cursor-not-allowed
 disabled:opacity-60 dark:text-white hover:[&:not(:disabled)]:border-primary hover:[&:not(:disabled)]:text-primary active:[&:not(:disabled)]:scale-95">
    默认按钮
  </button>
</div>

<!-- 主要按钮组 -->
<div class="inline-flex -space-x-px [&>*:first-child]:rounded-l-[6px] [&>*:hover]:z-[2] [&>*:last-child]:rounded-r-[6px] [&>*]:rounded-none">
  <button class="cursor-pointer rounded-[6px] border border-solid border-transparent bg-gray-200 px-4 py-2 text-[14px] leading-[14px] transition disabled:!cursor-not-allowed disabled:opacity-60
dark:border-transparent dark:bg-[#ffffff0d] hover:[&:not(:disabled)]:border-primary hover:[&:not(:disabled)]:bg-primary hover:[&:not(:disabled)]:text-white active:[&:not(:disabled)]:scale-95">
    默认按钮
  </button>
  <button class="cursor-pointer rounded-[6px] border border-solid border-transparent bg-gray-200 px-4 py-2 text-[14px] leading-[14px] transition disabled:!cursor-not-allowed disabled:opacity-60
dark:border-transparent dark:bg-[#ffffff0d] hover:[&:not(:disabled)]:border-primary hover:[&:not(:disabled)]:bg-primary hover:[&:not(:disabled)]:text-white active:[&:not(:disabled)]:scale-95">
    默认按钮
  </button>
  <button class="cursor-pointer rounded-[6px] border border-solid border-transparent bg-gray-200 px-4 py-2 text-[14px] leading-[14px] transition disabled:!cursor-not-allowed disabled:opacity-60
dark:border-transparent dark:bg-[#ffffff0d] hover:[&:not(:disabled)]:border-primary hover:[&:not(:disabled)]:bg-primary hover:[&:not(:disabled)]:text-white active:[&:not(:disabled)]:scale-95">
    默认按钮
  </button>
</div>

CSS 类用法

使用预定义的CSS类。复制index.css的样式即可使用

使用group-join包裹任意元素，即可实现组合效果

查看代码

html

<!-- 基础按钮组 -->
<div class="group-join">
  <button class="btn">
    左按钮
  </button>
  <button class="btn">
    中按钮
  </button>
  <button class="btn">
    右按钮
  </button>
</div>

<!-- 主要按钮组 -->
<div class="group-join">
  <button class="btn btn-primary">
    左按钮
  </button>
  <button class="btn btn-primary">
    中按钮
  </button>
  <button class="btn btn-primary">
    右按钮
  </button>
</div>

index.css

.group-join {
  @apply inline-flex;

  > * {
    margin: 0 !important;
    border-radius: 0 !important;

    &:first-child {
      @apply !rounded-l-[6px];
    }

    &:last-child {
      @apply !rounded-r-[6px];
    }

    &:not(:first-child) {
      margin-left: -1px !important;
    }

    &:not(:disabled):hover {
      z-index: 2;
    }
  }
}