v2.4.1

ContentSearchButton

A pre-styled button that opens the content search modal.
GitHub
Button
Nuxt UI
This component is only available when the @nuxt/content module is installed.

Usage

The ContentSearchButton component is used to open the ContentSearch modal.

<template>
  <B24ContentSearchButton />
</template>

It extends the Button component, so you can pass any property such as color, size, etc.

<template>
  <B24ContentSearchButton color="air-primary" />
</template>
The button defaults to color="air-secondary-no-accent" when not collapsed, color="air-tertiary-no-accent" when collapsed.

Collapsed

Use the collapsed prop to show the button's label and kbds. Defaults to true.

<template>
  <B24ContentSearchButton :collapsed="false" />
</template>

Kbds

Use the kbds prop to display keyboard keys in the button. Defaults to ['meta', 'K'] to match the default shortcut of the ContentSearch component.

<template>
  <B24ContentSearchButton
    :collapsed="false"
    :kbds="{
      '0': 'alt',
      '1': 'O'
    }"
  />
</template>

API

Props

Prop Default Type
as'button'any

The element or component this component should render as when not a link.

iconicons.searchIconComponent

The icon displayed in the button.

labelt('contentSearchButton.label') string

The label displayed in the button.

color'air-tertiary-no-accent'"air-primary" | "air-primary-success" | "air-primary-alert" | "air-primary-copilot" | "air-secondary" | "air-secondary-alert" | "air-secondary-accent" | "air-secondary-accent-1" | "air-secondary-accent-2" | "air-secondary-no-accent" | "air-tertiary" | "air-tertiary-accent" | "air-tertiary-no-accent" | "air-selection" | "air-boost" | "link"

The color of the button.

collapsedtrueboolean

Whether the button is collapsed.

tooltipfalseboolean | TooltipProps

Display a tooltip on the button when is collapsed with the button label. This has priority over the global tooltip prop.

kbds["meta", "k"] (string | undefined)[] | KbdProps[]

The keyboard keys to display in the button. { accent: 'default' }

avatar AvatarProps

Display an avatar on the left side.

loadingboolean

When true, the loading icon will be displayed.

autofocus false | true | "true" | "false"
disabledboolean
name string
type'button' "reset" | "submit" | "button"

The type of the button when not a link.

isActionboolean

When true, uses special underlined styling.

activeColor"air-primary" | "air-primary-success" | "air-primary-alert" | "air-primary-copilot" | "air-secondary" | "air-secondary-alert" | "air-secondary-accent" | "air-secondary-accent-1" | "air-secondary-accent-2" | "air-secondary-no-accent" | "air-tertiary" | "air-tertiary-accent" | "air-tertiary-no-accent" | "air-selection" | "air-boost" | "link"
size'md' "xs" | "md" | "xss" | "sm" | "lg" | "xl"
roundedfalseboolean

Rounds the corners of the button

blockfalseboolean

Render the button full width

loadingAutofalseboolean

Set loading state automatically based on the @click promise state

normalCasetrueboolean

Disable uppercase label

useWaitfalseboolean

Shows LoaderWaitIcon in loading mode

useClockfalseboolean

Shows LoaderClockIcon icon in loading mode

useDropdownfalseboolean

Shows icons.ChevronDownSIcon on the right side

b24ui { base?: ClassNameValue; baseLine?: ClassNameValue; label?: ClassNameValue; trailing?: ClassNameValue; } & { base?: ClassNameValue; baseLoading?: ClassNameValue; baseLoadingWaitIcon?: ClassNameValue; baseLoadingClockIcon?: ClassNameValue; baseLoadingSpinnerIcon?: ClassNameValue; baseLine?: ClassNameValue; label?: ClassNameValue; labelInner?: ClassNameValue; leadingIcon?: ClassNameValue; leadingAvatar?: ClassNameValue; leadingAvatarSize?: ClassNameValue; trailingIcon?: ClassNameValue; safeList?: ClassNameValue; }

Slots

Slot Type
leading{ b24ui: { base: (props?: Record<string, any> | undefined) => string; baseLoading: (props?: Record<string, any> | undefined) => string; baseLoadingWaitIcon: (props?: Record<string, any> | undefined) => string; baseLoadingClockIcon: (props?: Record<string, any> | undefined) => string; baseLoadingSpinnerIcon: (props?: Record<string, any> | undefined) => string; baseLine: (props?: Record<string, any> | undefined) => string; label: (props?: Record<string, any> | undefined) => string; labelInner: (props?: Record<string, any> | undefined) => string; leadingIcon: (props?: Record<string, any> | undefined) => string; leadingAvatar: (props?: Record<string, any> | undefined) => string; leadingAvatarSize: (props?: Record<string, any> | undefined) => string; trailingIcon: (props?: Record<string, any> | undefined) => string; safeList: (props?: Record<string, any> | undefined) => string; }; }
default{ b24ui: { base: (props?: Record<string, any> | undefined) => string; baseLoading: (props?: Record<string, any> | undefined) => string; baseLoadingWaitIcon: (props?: Record<string, any> | undefined) => string; baseLoadingClockIcon: (props?: Record<string, any> | undefined) => string; baseLoadingSpinnerIcon: (props?: Record<string, any> | undefined) => string; baseLine: (props?: Record<string, any> | undefined) => string; label: (props?: Record<string, any> | undefined) => string; labelInner: (props?: Record<string, any> | undefined) => string; leadingIcon: (props?: Record<string, any> | undefined) => string; leadingAvatar: (props?: Record<string, any> | undefined) => string; leadingAvatarSize: (props?: Record<string, any> | undefined) => string; trailingIcon: (props?: Record<string, any> | undefined) => string; safeList: (props?: Record<string, any> | undefined) => string; }; }
trailing{ b24ui: { base: (props?: Record<string, any> | undefined) => string; baseLoading: (props?: Record<string, any> | undefined) => string; baseLoadingWaitIcon: (props?: Record<string, any> | undefined) => string; baseLoadingClockIcon: (props?: Record<string, any> | undefined) => string; baseLoadingSpinnerIcon: (props?: Record<string, any> | undefined) => string; baseLine: (props?: Record<string, any> | undefined) => string; label: (props?: Record<string, any> | undefined) => string; labelInner: (props?: Record<string, any> | undefined) => string; leadingIcon: (props?: Record<string, any> | undefined) => string; leadingAvatar: (props?: Record<string, any> | undefined) => string; leadingAvatarSize: (props?: Record<string, any> | undefined) => string; trailingIcon: (props?: Record<string, any> | undefined) => string; safeList: (props?: Record<string, any> | undefined) => string; }; }

Theme

app.config.ts
export default defineAppConfig({
  b24ui: {
    contentSearchButton: {
      slots: {
        base: '',
        baseLine: '',
        label: '',
        trailing: 'hidden lg:flex items-center gap-0.5 ms-auto'
      },
      variants: {
        collapsed: {
          true: {
            baseLine: 'ps-[5px] pe-[5px]',
            label: 'hidden',
            trailing: 'lg:hidden'
          }
        }
      }
    }
  }
})
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: {
        contentSearchButton: {
          slots: {
            base: '',
            baseLine: '',
            label: '',
            trailing: 'hidden lg:flex items-center gap-0.5 ms-auto'
          },
          variants: {
            collapsed: {
              true: {
                baseLine: 'ps-[5px] pe-[5px]',
                label: 'hidden',
                trailing: 'lg:hidden'
              }
            }
          }
        }
      }
    })
  ]
})

ContentSearch

A ready-to-use Command Palette component for your documentation.

ContentSurround

A pair of "Previous" and "Next" buttons for sequential page navigation.

Releases
 Published under MIT License.

Copyright © 2024-present Bitrix24