Wrapper

Description

A component provides a standard content wrapper for use in most cases already in the assembly (and not inside the component). So, sometimes, the implementation of a design, for example - sliders with controls for gadgets, requires - "break the wrapper".

Connection

<template>
  <section>
    <Wrapper>
      ...
    </Wrapper>
  
    <SomeSlider />
  
    <Wrapper>
      ...
    </Wrapper>
  </section>
</template>

<script>
export default {
  name: 'SomeView',
};
</script>

Render

Content

Slider

Content

Styles

~/src/stylus/utils/_variables.styl

$wrapper = {
  gutter--desktop: 40px,
  gutter--tablet: 32px,
  gutter--mobile: 24px,

  width--max: 1280px,
}

API

Slots

Name	Description
default	Content

Source code

@/src/components/Wrapper/Wrapper.vue

<template>
  <div class="wrapper">
    <slot />
  </div>
</template>

<script>
export default {
  name: 'Wrapper',
};
</script>

<style lang="stylus" scoped>
@import "~/src/stylus/_stylebase.styl";

.wrapper
  width 100%
  max-width $wrapper.width--max
  margin 0 auto

  +$desktop()
    padding 0 $wrapper.gutter--desktop

  +$tablet()
    padding 0 $wrapper.gutter--tablet

  +$mobile()
    padding 0 $wrapper.gutter--mobile
</style>