first commit
This commit is contained in:
Yusron alamsyah
@@ -0,0 +1,65 @@
|
||||
<template>
|
||||
<v-expansion-panels>
|
||||
<v-expansion-panel elevation="10">
|
||||
<v-expansion-panel-title>
|
||||
<v-row no-gutters>
|
||||
<v-col cols="12" md="5" class="d-flex justify-start">
|
||||
<h6 class="text-h6">General settings</h6>
|
||||
</v-col>
|
||||
<v-col cols="12" md="6" class="d-flex justify-start mt-md-0 mt-3">
|
||||
<h6 class="text-subtitle-1">i am an accordion</h6>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-expansion-panel-title>
|
||||
<v-expansion-panel-text>
|
||||
Nulla facilisi. Phasellus sollicitudin nulla et quam mattis feugiat. Aliquam eget maximus est, id dignissim quam.
|
||||
</v-expansion-panel-text>
|
||||
<v-divider></v-divider>
|
||||
</v-expansion-panel>
|
||||
<v-expansion-panel elevation="10">
|
||||
<v-expansion-panel-title>
|
||||
<v-row no-gutters>
|
||||
<v-col cols="12" md="5" class="d-flex justify-start">
|
||||
<h6 class="text-h6">Users</h6>
|
||||
</v-col>
|
||||
<v-col cols="12" md="6" class="d-flex justify-start mt-md-0 mt-3">
|
||||
<h6 class="text-subtitle-1">You are currently not an owner</h6>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-expansion-panel-title>
|
||||
<v-expansion-panel-text>
|
||||
Nulla facilisi. Phasellus sollicitudin nulla et quam mattis feugiat. Aliquam eget maximus est, id dignissim quam.
|
||||
</v-expansion-panel-text>
|
||||
<v-divider></v-divider>
|
||||
</v-expansion-panel>
|
||||
<v-expansion-panel elevation="10">
|
||||
<v-expansion-panel-title>
|
||||
<v-row no-gutters>
|
||||
<v-col cols="12" md="5" class="d-flex justify-start">
|
||||
<h6 class="text-h6">Advance Settings</h6>
|
||||
</v-col>
|
||||
<v-col cols="12" md="6" class="d-flex justify-start mt-md-0 mt-3">
|
||||
<h6 class="text-subtitle-1">Filtering has been entirely disabled for whole web server</h6>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-expansion-panel-title>
|
||||
<v-expansion-panel-text>
|
||||
Nulla facilisi. Phasellus sollicitudin nulla et quam mattis feugiat. Aliquam eget maximus est, id dignissim quam.
|
||||
</v-expansion-panel-text>
|
||||
<v-divider></v-divider>
|
||||
</v-expansion-panel>
|
||||
<v-expansion-panel elevation="10">
|
||||
<v-expansion-panel-title>
|
||||
<v-row no-gutters>
|
||||
<v-col cols="10" class="d-flex justify-start mt-md-0 mt-3">
|
||||
<h6 class="text-h6">Personal data</h6>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-expansion-panel-title>
|
||||
<v-expansion-panel-text>
|
||||
Nulla facilisi. Phasellus sollicitudin nulla et quam mattis feugiat. Aliquam eget maximus est, id dignissim quam.
|
||||
</v-expansion-panel-text>
|
||||
<v-divider></v-divider>
|
||||
</v-expansion-panel>
|
||||
</v-expansion-panels>
|
||||
</template>
|
||||
@@ -0,0 +1,19 @@
|
||||
<template>
|
||||
<v-expansion-panels>
|
||||
<v-expansion-panel elevation="10">
|
||||
<v-expansion-panel-title class="text-h6">Accordion 1</v-expansion-panel-title>
|
||||
<v-expansion-panel-text> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.</v-expansion-panel-text>
|
||||
</v-expansion-panel>
|
||||
<v-divider></v-divider>
|
||||
<v-expansion-panel elevation="10">
|
||||
<v-expansion-panel-title class="text-h6">Accordion 2</v-expansion-panel-title>
|
||||
<v-expansion-panel-text> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.</v-expansion-panel-text>
|
||||
</v-expansion-panel>
|
||||
<v-divider></v-divider>
|
||||
<v-expansion-panel elevation="10" >
|
||||
<v-expansion-panel-title class="text-h6">Accordion 3</v-expansion-panel-title>
|
||||
<v-expansion-panel-text> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.</v-expansion-panel-text>
|
||||
</v-expansion-panel>
|
||||
<v-divider></v-divider>
|
||||
</v-expansion-panels>
|
||||
</template>
|
||||
@@ -0,0 +1,43 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue';
|
||||
</script>
|
||||
<template>
|
||||
<v-expansion-panels>
|
||||
<v-expansion-panel elevation="10">
|
||||
<v-expansion-panel-title expand-icon="mdi-plus" collapse-icon="mdi-minus" class="text-h6">
|
||||
Accordion 1
|
||||
</v-expansion-panel-title>
|
||||
<v-expansion-panel-text>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
|
||||
</v-expansion-panel-text>
|
||||
<v-divider></v-divider>
|
||||
</v-expansion-panel>
|
||||
|
||||
<v-expansion-panel elevation="10">
|
||||
<v-expansion-panel-title class="text-h6">
|
||||
Accordion 2
|
||||
<template v-slot:actions="{ expanded }">
|
||||
<v-icon :color="!expanded ? 'teal' : ''" :icon="expanded ? 'mdi-pencil' : 'mdi-check'"></v-icon>
|
||||
</template>
|
||||
</v-expansion-panel-title>
|
||||
<v-expansion-panel-text>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
|
||||
</v-expansion-panel-text>
|
||||
<v-divider></v-divider>
|
||||
</v-expansion-panel>
|
||||
|
||||
<v-expansion-panel elevation="10">
|
||||
<v-expansion-panel-title disable-icon-rotate class="text-h6">
|
||||
Accordion 3
|
||||
<template v-slot:actions>
|
||||
<v-icon color="primary" icon="mdi-alert-circle">
|
||||
</v-icon>
|
||||
</template>
|
||||
</v-expansion-panel-title>
|
||||
<v-expansion-panel-text>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
|
||||
</v-expansion-panel-text>
|
||||
<v-divider></v-divider>
|
||||
</v-expansion-panel>
|
||||
</v-expansion-panels>
|
||||
</template>
|
||||
@@ -0,0 +1,23 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue';
|
||||
const panel = ref([0]);
|
||||
</script>
|
||||
<template>
|
||||
<v-expansion-panels v-model="panel">
|
||||
<v-expansion-panel elevation="10" >
|
||||
<v-expansion-panel-title class="text-h6">Accordion 1</v-expansion-panel-title>
|
||||
<v-expansion-panel-text> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.</v-expansion-panel-text>
|
||||
</v-expansion-panel>
|
||||
<v-divider></v-divider>
|
||||
<v-expansion-panel elevation="10">
|
||||
<v-expansion-panel-title class="text-h6">Accordion 2</v-expansion-panel-title>
|
||||
<v-expansion-panel-text> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.</v-expansion-panel-text>
|
||||
</v-expansion-panel>
|
||||
<v-divider></v-divider>
|
||||
<v-expansion-panel elevation="10">
|
||||
<v-expansion-panel-title class="text-h6">Accordion 3</v-expansion-panel-title>
|
||||
<v-expansion-panel-text> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.</v-expansion-panel-text>
|
||||
</v-expansion-panel>
|
||||
|
||||
</v-expansion-panels>
|
||||
</template>
|
||||
@@ -0,0 +1,19 @@
|
||||
<template>
|
||||
<v-expansion-panels variant="inset">
|
||||
<v-expansion-panel elevation="10">
|
||||
<v-expansion-panel-title class="text-h6">Accordion 1</v-expansion-panel-title>
|
||||
<v-expansion-panel-text> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.</v-expansion-panel-text>
|
||||
<v-divider></v-divider>
|
||||
</v-expansion-panel>
|
||||
<v-expansion-panel elevation="10">
|
||||
<v-expansion-panel-title class="text-h6">Accordion 2</v-expansion-panel-title>
|
||||
<v-expansion-panel-text> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.</v-expansion-panel-text>
|
||||
<v-divider></v-divider>
|
||||
</v-expansion-panel>
|
||||
<v-expansion-panel elevation="10" >
|
||||
<v-expansion-panel-title class="text-h6">Accordion 3</v-expansion-panel-title>
|
||||
<v-expansion-panel-text> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.</v-expansion-panel-text>
|
||||
<v-divider></v-divider>
|
||||
</v-expansion-panel>
|
||||
</v-expansion-panels>
|
||||
</template>
|
||||
@@ -0,0 +1,19 @@
|
||||
<template>
|
||||
<v-expansion-panels variant="popout">
|
||||
<v-expansion-panel elevation="10">
|
||||
<v-expansion-panel-title class="text-h6">Accordion 1</v-expansion-panel-title>
|
||||
<v-expansion-panel-text> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.</v-expansion-panel-text>
|
||||
<v-divider></v-divider>
|
||||
</v-expansion-panel>
|
||||
<v-expansion-panel elevation="10">
|
||||
<v-expansion-panel-title class="text-h6">Accordion 2</v-expansion-panel-title>
|
||||
<v-expansion-panel-text> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.</v-expansion-panel-text>
|
||||
<v-divider></v-divider>
|
||||
</v-expansion-panel>
|
||||
<v-expansion-panel elevation="10" >
|
||||
<v-expansion-panel-title class="text-h6">Accordion 3</v-expansion-panel-title>
|
||||
<v-expansion-panel-text> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.</v-expansion-panel-text>
|
||||
<v-divider></v-divider>
|
||||
</v-expansion-panel>
|
||||
</v-expansion-panels>
|
||||
</template>
|
||||
Reference in New Issue
Block a user