You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
77 lines
1.1 KiB
77 lines
1.1 KiB
# Reusable Vue.js Components
|
|
|
|
## Layout
|
|
|
|
### Page
|
|
|
|
```vue
|
|
<csc-page />
|
|
```
|
|
|
|
### Sticky Page
|
|
|
|
The `CscStickyPage` provides a sticky header.
|
|
|
|
```vue
|
|
<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`
|
|
|
|
```vue
|
|
<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](https://quasar.dev/vue-components/input#QInput-API)
|
|
|
|
```vue
|
|
<csc-input
|
|
v-model="text"
|
|
/>
|
|
```
|
|
|
|
### Password Input
|
|
|
|
The `CscInputPassword` inherits from `CscInput`.
|
|
|
|
```vue
|
|
<csc-input-password
|
|
v-model="password"
|
|
/>
|
|
```
|
|
|
|
### Password Retype
|
|
|
|
```vue
|
|
<csc-input-password-retype
|
|
v-model="password"
|
|
/>
|
|
```
|