Slot Recipes

Slot Recipes 可以将组件拆分为多个部分。在阅读该章节之前，建议先了解 Recipes。

Basic Usage

您可以使用 defineSlotRecipe API 定义一个 Slot Recipe。


import { defineSlotRecipe } from '@nex-ui/react'
 
export const checkboxSlotRecipe = defineSlotRecipe({
  slots: {
    root: { display: 'flex', alignItems: 'center', gap: '2' },
    control: { borderWidth: '1px', borderRadius: 'sm' },
    label: { padding: '2' },
  },
})
 
const { root, control, label } = checkboxSlotRecipe()
 
/**
 * Result:
 * root: {
 *   display: 'flex',
 *   alignItems: 'center',
 *   gap: '2'
 * }
 * control: {
 *   borderWith: '1px',
 *   borderRadius: 'sm'
 * }
 * label: {
 *   padding: '2'
 * }
 */

Slots With Variants

您可以通过使用 Variants 来更改整个组件及其插槽。


import { defineSlotRecipe } from '@nex-ui/react'
 
export const checkboxSlotRecipe = defineSlotRecipe({
  slots: {
    root: { display: 'flex', alignItems: 'center', gap: '2' },
    control: { borderWidth: '1px', borderRadius: 'sm' },
    label: { padding: '2' },
  },
  variants: {
    size: {
      sm: {
        control: { width: '8', height: '8' },
        label: { fontSize: 'sm' },
      },
      md: {
        control: { width: '10', height: '10' },
        label: { fontSize: 'md' },
      },
    },
  },
})
 
const { root, control, label } = checkboxSlotRecipe({
  size: 'sm',
})
 
/**
 * Result:
 * root: {
 *   display: 'flex',
 *   alignItems: 'center',
 *   gap: '2'
 * }
 * control: {
 *   borderWith: '1px',
 *   borderRadius: 'sm'
 *   width: '8'
 *   height: '8'
 * }
 * label: {
 *   padding: '2',
 *   fontSize: 'sm'
 * }
 */
 
const { root, control, label } = checkboxSlotRecipe({
  size: 'md',
})
 
/**
 * Result:
 * root: {
 *   display: 'flex',
 *   alignItems: 'center',
 *   gap: '2'
 * }
 * control: {
 *   borderWith: '1px',
 *   borderRadius: 'sm'
 *   width: '10'
 *   height: '10'
 * }
 * label: {
 *   padding: '2',
 *   fontSize: 'md'
 * }
 */

Slots With Compound Variants

与 variants 类似，在使用 compoundVariants 时，您也可以为每个插槽定义样式。


import { defineSlotRecipe } from '@nex-ui/react'
 
export const checkboxSlotRecipe = defineSlotRecipe({
  slots: {
    root: { display: 'flex', alignItems: 'center', gap: '2' },
    control: { borderWidth: '1px', borderRadius: 'sm' },
    label: { padding: '2' },
  },
  variants: {
    size: {
      sm: {
        control: { width: '8', height: '8' },
        label: { fontSize: 'sm' },
      },
      md: {
        control: { width: '10', height: '10' },
        label: { fontSize: 'md' },
      },
    },
    color: {
      primary: {
        label: { color: 'blue.500' },
      },
      secondary: {
        label: { color: 'blue.500' },
      },
    },
  },
  compoundVariants: [
    {
      size: ['sm', 'md'],
      primary: 'primary',
      css: {
        label: { opacity: 0.7 },
        control: { opacity: 0.5 },
      },
    },
  ],
})

Slots With Extends

defineSlotRecipe 能够继承 SlotRecipe , 包括其 slots、variants、defaultVariants、compoundVariants，它会自动合并相同键的值，并提供相应的 TypeScript 类型支持。


import { defineSlotRecipe } from '@nex-ui/react'
 
export const checkboxSlotRecipe = defineSlotRecipe({
  slots: {
    root: { display: 'flex', alignItems: 'center', gap: '2' },
    control: { borderWidth: '1px', borderRadius: 'sm' },
    label: { padding: '2' },
  },
  variants: {
    size: {
      sm: {
        control: { width: '8', height: '8' },
        label: { fontSize: 'sm' },
      },
      md: {
        control: { width: '10', height: '10' },
        label: { fontSize: 'md' },
      },
    },
    color: {
      primary: {
        label: { color: 'blue.500' },
      },
      secondary: {
        label: { color: 'blue.500' },
      },
    },
  },
  compoundVariants: [
    {
      size: ['sm', 'md'],
      primary: 'primary',
      css: {
        label: { opacity: 0.7 },
        control: { opacity: 0.5 },
      },
    },
  ],
})
 
const extendedSlotRecipe = defineSlotRecipe({
  extend: checkboxSlotRecipe,
  slots: {},
  variants: {},
  compoundVariants: {},
})