ngcp-csc-ui/doc/COMPONENTS.md

Reusable Vue.js Components

Layout

Page

<csc-page />

Sticky Page

The CscStickyPage provides a sticky header.

<csc-page-sticky>
  <template v-slot:header>
  </template>
  <template v-slot:toolbar>
  </template>
  <template v-slot:default>
  </template>
</csc-page-sticky>

Sticky Tabs

This page consists of a sticky header, which contains QTabs. It is used e.g. src/pages/CscPageConversations

<csc-page-sticky-tabs>
  <template v-slot:tabs>
    <q-tab />
    <q-tab />
    <q-tab />
  </template>
  <template v-slot:toolbar>
  </template>
  <template v-slot:default>
  </template>
</csc-page-sticky-tabs>

Forms

Text Input

The very basic text input field is the CscInput. It is a direct extension of QInput and is supposed to be the standard text input component.

• QInput

<csc-input
    v-model="text"
/>

Password Input

The CscInputPassword inherits from CscInput.

<csc-input-password
    v-model="password"
/>

Password Retype

<csc-input-password-retype
    v-model="password"
/>