Persona

Appearance

On this page

Page ​

Toggle expand page for responsive purpose

Usage ​

The page component is used in combination with the sidebar component. It can be toggle expanded fit the sidebar via expand props. Page component also can expand automatically if certain breakpoint condition have been met. There are at least 4 breakpoints available, namely all, lg, md and sm.

Basic Usage ​

A wonderful serenity has taken possession

My entire soul, like these sweet mornings of spring which I enjoy with my whole heart. I am alone, and feel the charm of existence in this spot, which was created for the bliss of souls like mine. I am so happy, my dear friend, so absorbed in the exquisite sense of mere tranquil existence, that I neglect my talents. I should be incapable of drawing a single stroke at the present moment; and yet I feel that I never was a greater artist than now. When, while the lovely valley teems with vapour around me, and the meridian sun strikes the upper surface of the impenetrable foliage of my trees, and but a few stray gleams steal into the inner sanctuary, I throw myself down among the tall grass by the trickling stream; and, as I lie close to the earth, a thousand unknown plants are noticed by me: when I hear the buzz of the little world among the stalks, and grow familiar with the countless indescribable forms of the insects and flies, then I feel the presence of the Almighty, who formed us in his own image, and the breath

preview
vue
<script setup>
  import { defineMenu } from '@privyid/persona/core'
  import IconDashboard from '@privyid/persona-icon/vue/dashboard/20.vue'
  import IconDocument from '@privyid/persona-icon/vue/document-filled/20.vue'
  import IconUsers from '@privyid/persona-icon/vue/user-groups/20.vue'
  import IconMenu from '@privyid/persona-icon/vue/menu-burger/20.vue'

  const model = ref(false)

  const menu = defineMenu([
    {
      items: [
        {
          name : 'dashboard',
          label: 'Dashboard',
          url  : '/',
          icon : IconDashboard
        },
        {
          name : 'documents',
          label: 'Documents',
          url  : '/',
          icon : IconDocument
        },
        {
          name : 'contacts',
          label: 'Contacts',
          url  : '/',
          icon : IconUsers
        }
      ]
    },
  ])
</script>

<template>
  <p-sidebar-menu :menus="menu" fixed toggleable="lg" v-model="model">
    <p-sidebar-brand>
      <img src="/assets/images/logo-privy.svg" alt="" />
    </p-sidebar-brand>
  </p-sidebar-menu>
  <p-page expand="lg" v-model="model">
    <div class="visible mb-5 lg:invisible">
      <p-checkbox appearance="none" v-model="model">
        <template #default>
          <p-card
            element="div"
            class="p-2 duration-200 ease-in-out hover:shadow-md hover:border-subtle"
            sectioned>
            <span class="flex items-center space-x-2">
              <IconMenu class="text-muted" />
              <span>Menu</span>
            </span>
          </p-card>
        </template>
      </p-checkbox>
    </div>
    <p-heading element="h5" class="mb-5">
      A wonderful serenity has taken possession
    </p-heading>
    <p>
      My <em>entire</em> soul, <small>like</small> these sweet mornings
      of spring <strong>which I enjoy</strong> with my whole heart.
      I am alone...
    </p>
  </p-page>
</template>

Full Width ​

Now is very simple when need full-width page with toggle-slide sidebar menu. Just give all (to expanded in all breakpoint) in expand props of page component and toggleable props of sidebar component.

A wonderful serenity has taken possession

My entire soul, like these sweet mornings of spring which I enjoy with my whole heart. I am alone, and feel the charm of existence in this spot, which was created for the bliss of souls like mine. I am so happy, my dear friend, so absorbed in the exquisite sense of mere tranquil existence, that I neglect my talents. I should be incapable of drawing a single stroke at the present moment; and yet I feel that I never was a greater artist than now. When, while the lovely valley teems with vapour around me, and the meridian sun strikes the upper surface of the impenetrable foliage of my trees, and but a few stray gleams steal into the inner sanctuary, I throw myself down among the tall grass by the trickling stream; and, as I lie close to the earth, a thousand unknown plants are noticed by me: when I hear the buzz of the little world among the stalks, and grow familiar with the countless indescribable forms of the insects and flies, then I feel the presence of the Almighty, who formed us in his own image, and the breath

preview
vue
<template>
  <p-sidebar-menu :menus="menu" fixed toggleable="all" v-model="model">
    ...
  </p-sidebar-menu>
  <p-page expand="all" v-model="model">
    <div class="mb-5">
      ...
    </div>
    ...
  </p-page>
</template>

Type Variant ​

Page component has 2 type variant, wide and narrow. Default type is narrow. The value of page component type variant is negation with sidebar component type variant. When type variant of sidebar is wide, then type variant of page is narrow.

A wonderful serenity has taken possession

My entire soul, like these sweet mornings of spring which I enjoy with my whole heart. I am alone, and feel the charm of existence in this spot, which was created for the bliss of souls like mine. I am so happy, my dear friend, so absorbed in the exquisite sense of mere tranquil existence, that I neglect my talents. I should be incapable of drawing a single stroke at the present moment; and yet I feel that I never was a greater artist than now. When, while the lovely valley teems with vapour around me, and the meridian sun strikes the upper surface of the impenetrable foliage of my trees, and but a few stray gleams steal into the inner sanctuary, I throw myself down among the tall grass by the trickling stream; and, as I lie close to the earth, a thousand unknown plants are noticed by me: when I hear the buzz of the little world among the stalks, and grow familiar with the countless indescribable forms of the insects and flies, then I feel the presence of the Almighty, who formed us in his own image, and the breath

preview
vue
<script setup>
  import { defineMenu } from '@privyid/persona/core'
  import IconDashboard from '@privyid/persona-icon/vue/dashboard/20.vue'
  import IconDocument from '@privyid/persona-icon/vue/document-filled/20.vue'
  import IconUsers from '@privyid/persona-icon/vue/user-groups/20.vue'
  import IconSettings from '@privyid/persona-icon/vue/adjust/20.vue'
  import IconMenu from '@privyid/persona-icon/vue/menu-burger/20.vue'
  import IconEN from '../assets/images/img-flag.svg'

  const model = ref(false)

  const menu = defineMenu([
    {
      items: [
        {
          name: 'dashboard',
          url : '/',
          icon: IconDashboard
        },
        {
          name: 'document',
          url : '/',
          icon: IconDocument
        },
        {
          name: 'users',
          url : '/',
          icon: IconUsers
        }
      ]
    },
    {
      bottom: true,
      items : [
        {
          name: 'settings',
          url : '/',
          icon: IconSettings
        },
        {
          name : 'language',
          label: 'ENG',
          url  : '/',
          icon : IconEN,
        }
      ]
    }
  ])
</script>

<template>
  <p-sidebar-menu :menus="menu" type="narrow" fixed toggleable="lg"
    v-model="model">
    ...
  </p-sidebar-menu>
  <p-page expand="lg" type="wide" v-model="model">
    <div class="visible mb-5 lg:invisible">
      ...
    </div>
    ...
  </p-page>
</template>

Variables ​

Page use local CSS variables on .page for enhanced real-time customization. The values of variables below are based/depends on sidebar size variant.

sass
--p-page-type-wide: 60px; /** for sidebar type narrow */
--p-page-type-narrow: 230px; /** for sidebar type wide */

API ​

Props ​

PropsTypeDefaultDescription
expandString-Expand page with desired breakpoint lg, md, sm and all
typeStringnarrowPage type, valid value is wide and narrow

Slots ​

NameDescription
defaultContent to place in the Page

Events ​

NameArgumentsDescription
There no event here

Released under the MIT License.

Copyright © 2022 Privy Identitas Digital