# Bar

Bar component for mobile components.

# Most common usage scenario

<template>
  <SfBar :title="title" :back="back" :close="close" />
</template>
<script>
import { SfBar } from "@storefront-ui/vue";
export default {
  components: {
    SfBar,
  },
  data() {
    return {
      title: "Dresses",
      back: true,
      close: true,
    };
  },
};
</script>

# Props

  • title

    • type: string
    • defaultValue: ""
  • back

    • type: boolean
    • defaultValue: false
  • close

    • type: boolean
    • defaultValue: false

# Slots

  • back

  • title

    • bindings: title
  • close

# Events

None.

# CSS modifiers

None.

# CSS custom properties (variables)

  • --bar-height
  • --bar-padding
  • --bar-background
  • --bar-font
  • --bar-font-weight
  • --bar-font-size
  • --bar-font-line-height
  • --bar-font-family

# Overridden other components CSS variables

  • --icon-width

You can override CSS variables values bound to this component.

# Play with this component

See all available configurations and play with this component on Storybook.