Vue 3 Development with the PrimeVue Framework — Offset and Text Styles

Spread the love

PrimeVue is a UI framework that’s compatible with Vue 3.

In this article, we’ll look at how to get started with developing Vue 3 apps with PrimeVue.

Offsets

We can add margins to columns.

To do this, we can write:

<template>
  <div class="p-grid">
    <div class="p-col-4">4</div>
    <div class="p-col-4 p-offset-4">4</div>
  </div>
</template>

<script>
export default {
  name: "App",
};
</script>

The p-offset-4 class lets us shift the right column to 4 columns to the right.

Nested Grid

Grids can be nested with the nested-grid class:

<template>
  <div class="p-grid nested-grid">
    <div class="p-col-8">
      <div class="p-grid">
        <div class="p-col-6">6</div>
        <div class="p-col-6">6</div>
        <div class="p-col-8">8</div>
      </div>
    </div>
    <div class="p-col-4">4</div>
  </div>
</template>

<script>
export default {
  name: "App",
};
</script>

Gutter

We can remove the margins for a grid column with the p-nogutter class:

<template>
  <div class="p-grid p-nogutter">
    <div class="p-col">1</div>
    <div class="p-col p-nogutter">2</div>
    <div class="p-col">3</div>
  </div>
</template>

<script>
export default {
  name: "App",
};
</script>

Margins and Padding

The PrimeVue’s PrimeFlex library comes with classes for adding margins and padding.

The general format for the class is p-{property}{position}-{value}

property can be one of:

m — margin
p — padding

position can be one of:

t: top
b: bottom

l: left
r: right
x: left and right

y: top and bottom
blank: all sides

value can be one of:

0: $spacer * 0
1: $spacer * .25
2: $spacer * .5

3: $spacer * 1
4: $spacer * 1.5
5: $spacer * 2

6: $spacer * 3
auto: auto margin

For example, we can write:

<template>
  <div>
    <div class="p-mb-2">Margin bottom 2</div>
  </div>
</template>

<script>
export default {
  name: "App",
};
</script>

to add bottom margins to the grid.

We can also add padding and margin according to breakpoints by writing:

<template>
  <div>
    <div class="p-m-1 p-p-1 p-m-lg-3 p-b-lg-3">padding and margin</div>
  </div>
</template>

<script>
export default {
  name: "App",
};
</script>

lg is the breakpoint. And classes with them are applied when the screen is wide enough to hit the lg breakpoint.

Text Alignment

PrimeFlex also comes with classes to align text.

The general format of the classes is p-text-{value} , where value can be one of:

left

center
right
justify

For instance, we can write:

<template>
  <div>
    <div class="p-text-left">Left</div>
    <div class="p-text-center">Center</div>
    <div class="p-text-right">Right</div>
    <div class="p-text-justify">Justify</div>
  </div>
</template>

<script>
export default {
  name: "App",
};
</script>

Text Wrap

We can add classes to change how text is wrapped with one of the following classes:

p-text-nowrap

p-text-wrap
p-text-truncate

Transform

We can change the capitalization of text with the following classes:

p-text-lowercase
p-text-uppercase
p-text-capitalize

Text Style

We can change the text style with the following classes:

p-text-bold
p-text-normal

p-text-light
p-text-italic

Conclusion

We can style text and change column options with the PrimeFlex library.