AisFlexBar

AisFlexBar provides a flexible and responsive container. It has no outward presentation, instead it spaces and arranges its contents. In mobile view the bar's children will stack as full-width elements. As the screen size increases, the children will spread out from the left edge and wrap to a new line as needed.

Remember initiator

<script setup>
  import { AisFlexBar } from '@ais-public/ais-components'
  import { AisButton } from '@ais-public/ais-components'
  import { AisCheckbox } from '@ais-public/ais-components'
</script>

<template>
  <AisFlexBar>
    <AisButton variant="primary" icon="save" hover press>Save</AisButton>
    <AisButton variant="secondary" icon="new" hover press>Save & Add Another</AisButton>
    <AisButton variant="secondary" outline icon="cancel" hover press>Cancel</AisButton>
    <AisCheckbox>Remember initiator</AisCheckbox>
  </AisFlexBar>
</template>

Props

gap

Use the gap prop to dictate the distance between the flex bar's children. The default value is gap-4, and you may pass any TailwindCSS gap classes to the prop.

class

Use the class attribute to pass other Tailwind classes to the flex container. Notice how the AisButtonBar example uses class to set justify-between.

AisButtonBar

AisButtonBar is a good example of how AisFlexBar can be composed to make useful components. Review its template to see what is possible.

<script setup>
  import AisFlexBar from '@c/flex-bar/AisFlexBar.vue'

  const props = defineProps({
    gap: { type: String, required: false, default: 'gap-x-12 gap-y-12' },
  })
</script>

<template>
  <AisFlexBar class="justify-between" :gap="gap">
    <AisFlexBar v-if="$slots.default">
      <slot />
    </AisFlexBar>

    <AisFlexBar v-if="$slots.secondary">
      <slot name="secondary"></slot>
    </AisFlexBar>

    <AisFlexBar v-if="$slots.tertiary">
      <slot name="tertiary"></slot>
    </AisFlexBar>
  </AisFlexBar>
</template>

Flex Example

AisFlexBar is a good example of how to use Tailwind's flex classes. Much of it may be obvious, but there are some details developers may find useful as they build their own specialized flex containers.

The most non-intuitive piece here is our use of Tailwind's arbitrary variants to adjust the width of the container's direct descendents (i.e. [&>*]:w-full [&>*]:sm:w-fit). In mobile view the descendants will be full-width, and they will switch to fit their content at the small breakpoint.

<template>
  <div class="
    flex flex-col flex-wrap items-start
    sm:flex-row sm:items-center
    [&>*]:w-full [&>*]:sm:w-fit
    "
    :class="classes"
  >
    <slot/>
  </div>
</template>

<script setup>
  import {computed} from 'vue'

  const props = defineProps({
    gap: { type: String, required: false, default: 'gap-4' },
  })

  const classes = computed(() => [props.gap])
</script>