AisBox

AisBox is simple component used to add common variants and padding to content. AisBox does not impact text size or set a layout. Developers may customize a box using Tailwind's many utility classes. Common uses include search filters, control panels, and user messages.

Pro-tip: You can put anything in a box.

<script setup>
  import {AisBox} from '@ais-public/ais-components'
</script>

<template>
  <AisBox variant="info">
    Pro-tip: You can put anything in a box.
  </AisBox>
</template>

Props

variant

variant conveys the type of content being presented. The accepted values are: default, primary, secondary, info, success, warning, danger. The default value is default.

The quick brown fox jumps over the lazy dog.

Variant

defaultprimarysecondaryplaininfosuccesswarningdanger

<script setup>
  import {ref} from 'vue'
  import {AisBox} from '@ais-public/ais-components'
  import {AisField} from '@ais-public/ais-components'
  import {AisSelect} from '@ais-public/ais-components'
  import {variants} from '@ais-public/ais-components/util/variants-util'
  import {capitalizeFirst} from '@ais-public/ais-components/util/util'

  const selectedVariant = ref('default')
</script>

<template>
  <div class="grid gap-y-4">
    <AisBox :variant="selectedVariant" :title="capitalizeFirst(selectedVariant)">
      The quick brown fox jumps over the lazy dog.
    </AisBox>
    <AisField label="Variant">
      <AisSelect v-model="selectedVariant" :options="variants" />
    </AisField>
  </div>
</template>

outline

Setting outline to true will give the box a more prominent border. When true, the border will match the style of AisAlert.

The quick brown fox jumps over the lazy dog.

Variant

defaultprimarysecondaryplaininfosuccesswarningdanger

Outline

Outline

<script setup>
  import {ref} from 'vue'
  import {AisBox} from '@ais-public/ais-components'
  import {AisField} from '@ais-public/ais-components'
  import {AisSelect} from '@ais-public/ais-components'
  import {AisToggle} from '@ais-public/ais-components'
  import {variants} from '@ais-public/ais-components/util/variants-util'
  import {capitalizeFirst} from '@ais-public/ais-components/util/util'

  const selectedVariant = ref('default')
  const outline = ref(true)
</script>

<template>
  <div class="grid gap-y-4">
    <AisBox :variant="selectedVariant" :outline="outline" :title="capitalizeFirst(selectedVariant)">
      The quick brown fox jumps over the lazy dog.
    </AisBox>
    <AisField label="Variant">
      <AisSelect v-model="selectedVariant" :options="variants" />
    </AisField>
    <AisField label="Outline" label-mode="sr-only">
      <AisToggle v-model="outline" label="Outline" />
    </AisField>
  </div>
</template>

border-muted

border-muted is deprecated. Its behavior is now the default. Use outline to activate more visually distinct border.

padding

The padding prop controls the box's padding. It accepts the semantic values sm, md, and lg along with all Tailwind padding utilities.

The quick brown fox jumps over the lazy dog.

Padding

smmdlgp-5px-12 py-4p-12

<script setup>
  import {ref} from 'vue'
  import {AisBox} from '@ais-public/ais-components'
  import {AisField} from '@ais-public/ais-components'
  import {AisSelect} from '@ais-public/ais-components'

  const selectedPadding = ref('md')
  const paddingOptions = ref([
      'sm', 'md', 'lg',
      'p-5', 'px-12 py-4', 'p-12',
  ])
</script>

<template>
  <div class="grid gap-y-4">
    <AisBox :padding="selectedPadding">
      The quick brown fox jumps over the lazy dog.
    </AisBox>
    <AisField label="Padding">
      <AisSelect v-model="selectedPadding" :options="paddingOptions" />
    </AisField>
  </div>
</template>

rounded

The rounded prop controls the border radius of the box. The accepted values are: true, false, sm, rounded, md, lg, xl, 2xl, 3xl, and full. The default value is false.

none

rounded-sm

rounded

rounded-md

rounded-lg

rounded-xl

rounded-2xl

rounded-3xl

rounded-full

Pro-tip: You can put anything in a box.

<script setup>
  import { ref } from "vue";
  import {AisBox} from '@ais-public/ais-components'
  import {AisRadioGroup} from '@ais-public/ais-components'

  const roundedOptions = ref([
    { value: 'none', label: 'none' },
    { value: 'sm', label: 'rounded-sm' },
    { value: 'rounded', label: 'rounded' },
    { value: 'md', label: 'rounded-md' },
    { value: 'lg', label: 'rounded-lg' },
    { value: 'xl', label: 'rounded-xl' },
    { value: '2xl', label: 'rounded-2xl' },
    { value: '3xl', label: 'rounded-3xl' },
    { value: 'full', label: 'rounded-full' },
  ])
  const selectedOption = ref('rounded')
</script>

<template>
  <div class="grid gap-4">
    <AisRadioGroup
        v-model="selectedOption"
        :options="roundedOptions"
        name="radios"
        size="sm"
        buttons rounded outline
        variant="default"
    />

    <AisBox variant="info" :rounded="selectedOption">
      Pro-tip: You can put anything in a box.
    </AisBox>
  </div>
</template>

Customization

AisBox can be customized using Tailwind's utilities. Customizations may include text size, shadows, and rounded corners.

Pro-tip: Use restraint.

<script setup>
  import {AisBox} from '@ais-public/ais-components'
</script>

<template>
  <AisBox
      variant="info" padding="px-8 py-4"
      class="!border-l-8 rounded-full shadow-lg
        text-xl font-medium italic"
  >
    Pro-tip: Use restraint.
  </AisBox>
</template>