Vue FieldGroup Component

Usage

Wrap multiple Button within a FieldGroup to group them together.

<template>
  <B24FieldGroup>
    <B24Button color="air-primary-copilot" label="Button" />
    <B24Button color="air-primary-copilot" label="Button" />
  </B24FieldGroup>
</template>

No split

If you use elements with different colors, use the no-split property to disable the display of the separator.

<template>
  <B24FieldGroup no-split>
    <B24Button color="air-primary-copilot" label="Button" />
    <B24Button color="air-primary-success" label="Button" />
    <B24Button color="air-primary-alert" label="Button" />
  </B24FieldGroup>
</template>

Size

Use the size prop to change the size of all the buttons.

size

<template>
  <B24FieldGroup size="xl">
    <B24Button color="air-primary-copilot" label="Button" />
    <B24Button color="air-primary-copilot" label="Button" />
  </B24FieldGroup>
</template>

Orientation

Use the orientation prop to change the orientation of the buttons. Defaults to horizontal.

orientation

<template>
  <B24FieldGroup orientation="vertical">
    <B24Button color="air-primary-copilot" label="Button" />
    <B24Button color="air-primary-copilot" label="Button" />
  </B24FieldGroup>
</template>

Examples

With input

You can use components like Input, InputMenu, Select SelectMenu, etc. within a field group.

<template>
  <B24FieldGroup>
    <B24Input placeholder="Enter token" />

    <B24Button label="Button" />
  </B24FieldGroup>
</template>

You can use a Tooltip within a field group.

<script setup lang="ts">
import MoreMIcon from '@bitrix24/b24icons-vue/outline/MoreMIcon'
</script>

<template>
  <B24FieldGroup>
    <B24Input placeholder="Enter token" />

    <B24Tooltip text="Copy to clipboard">
      <B24Button
        :icon="MoreMIcon"
      />
    </B24Tooltip>
  </B24FieldGroup>
</template>

You can use a DropdownMenu within a field group.

<script setup lang="ts">
import type { DropdownMenuItem } from '@bitrix24/b24ui-nuxt'
import PersonIcon from '@bitrix24/b24icons-vue/main/PersonIcon'
import CreditDebitCardIcon from '@bitrix24/b24icons-vue/main/CreditDebitCardIcon'
import Settings2Icon from '@bitrix24/b24icons-vue/actions/Settings2Icon'
import CirclePlusIcon from '@bitrix24/b24icons-vue/main/CirclePlusIcon'
import MoreMIcon from '@bitrix24/b24icons-vue/outline/MoreMIcon'

const items: DropdownMenuItem[] = [
  {
    label: 'My account',
    avatar: { src: '/b24ui/avatar/employee.png' }
  },
  {
    label: 'Profile',
    icon: PersonIcon,
    children: [
      {
        label: 'Billing',
        icon: CreditDebitCardIcon
      },
      {
        label: 'Settings',
        icon: Settings2Icon
      }
    ]
  },
  {
    label: 'New team',
    icon: CirclePlusIcon
  }
]
</script>

<template>
  <B24FieldGroup>
    <B24Button label="Settings" />

    <B24DropdownMenu :items="items" :content="{ align: 'end' }">
      <B24Button
        :icon="MoreMIcon"
      />
    </B24DropdownMenu>
  </B24FieldGroup>
</template>

With badge

You can use a Badge within a field group.

https://

<template>
  <B24FieldGroup>
    <B24Badge size="lg" label="https://" color="air-tertiary" />

    <B24Input placeholder="www.example.com" />
  </B24FieldGroup>
</template>

API

Props

Prop	Default	Type
`as`	`'div'`	`any` The element or component this component should render as.
`size`	`'md'`	`"md" \| "xs" \| "sm" \| "lg" \| "xl" \| "xss"`
`orientation`	`'horizontal'`	`"horizontal" \| "vertical"` The orientation the buttons are laid out.
`noSplit`	`false`	`boolean` Disable show split
`b24ui`		`{ base?: any; }`

Slots

Slot	Type
`default`	`{}`

Theme

app.config.ts

export default defineAppConfig({
  b24ui: {
    fieldGroup: {
      base: 'relative',
      variants: {
        size: {
          xss: '',
          xs: '',
          sm: '',
          md: '',
          lg: '',
          xl: ''
        },
        orientation: {
          horizontal: 'flex flex-row -space-x-px',
          vertical: 'flex flex-col -space-y-px'
        }
      }
    }
  }
})

vite.config.ts

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import bitrix24UIPluginVite from '@bitrix24/b24ui-nuxt/vite'

export default defineConfig({
  plugins: [
    vue(),
    bitrix24UIPluginVite({
      b24ui: {
        fieldGroup: {
          base: 'relative',
          variants: {
            size: {
              xss: '',
              xs: '',
              sm: '',
              md: '',
              lg: '',
              xl: ''
            },
            orientation: {
              horizontal: 'flex flex-row -space-x-px',
              vertical: 'flex flex-col -space-y-px'
            }
          }
        }
      }
    })
  ]
})

Countdown

Countdown with options control.

Kbd

A kbd element for indicating a keyboard input.