# 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.

# SCSS variables

$bar-height: 3.125rem !default;
$bar-padding: 0 $spacer-big !default;
$bar-background-color: $c-light !default;
$bar-font-family: $body-font-family-secondary !default;
$bar-font-size: $font-size-big-mobile !default;
$bar-font-weight: 500 !default;
$bar__icon-width: 0.875rem;

You can override SCSS variable values bound to this component in sfui.scss in the root of your project.

# Partials

If you want to customize this component even more you can use its partials for limitless customization.

<template lang="html" src="@storefront-ui/vue/src/components/molecules/SfBar/SfBar.html"></template>
<script src="@storefront-ui/vue/src/components/molecules/SfBar/SfBar.js"></script>
<style lang="scss">
@import "~@storefront-ui/shared/styles/components/SfBar.scss";
</style>

You can read about using component partials here

# Play with this component

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