Horizontal separators with QSeparator

Create separators using content inside.

quasar

by

PDan

November 24, 2023

Problem description

You need to show a horizontal separator with some content inside it.

Solution

Use a div with class="row no-wrap items-center" and inside it place two QSeparator width the content between them.

MySeparators.vue

<template>
  <div class="q-pa-md col column no-wrap q-gutter-y-md" style="max-width: 400px">
    <div>
      <div class="q-pa-sm bg-yellow-1 text-dark text-center">Above</div>

      <div class="row no-wrap items-center">
        <q-separator class="col" />
        <div class="col-auto q-px-md">Label</div>
        <q-separator class="col" />
      </div>

      <div class="q-pa-sm bg-yellow-1 text-dark text-center">Below</div>
    </div>

    <q-card>
    	<q-card-section>
        <div class="text-h5">Card title on top</div>
      </q-card-section>

      <div class="row no-wrap items-center">
        <q-separator class="col bg-warning" />
        <div class="col-auto q-px-md text-h5 text-accent">&#9753; &#9753; &#9753;</div>
        <q-separator class="col bg-warning" />
      </div>

      <q-card-section>
      	<div>Some content here</div>
      </q-card-section>

      <div class="row no-wrap items-center q-px-md q-py-md">
        <q-separator class="col bg-info" style="max-width: 2ch" />
        <div class="col-auto q-px-md text-h5" style="max-width: 12ch">Spaced and asymetric</div>
        <q-separator class="col bg-info" />
      </div>

      <q-card-section>
      	<div>Some content here</div>
      </q-card-section>

      <div class="row no-wrap items-center">
        <q-separator class="col" />
        <div class="col-auto q-px-md text-h4 rotate-90">&#10149;</div>
        <q-separator class="col" style="max-width: 1ch" />
      </div>

      <q-card-actions align="right">
      	<q-btn flat color="primary" label="Action" />
      </q-card-actions>
    </q-card>
  </div>
</template>

Demo