first commit
This commit is contained in:
Yusron alamsyah
@@ -0,0 +1,15 @@
|
||||
<script setup lang="ts">
|
||||
import UiParentCard from '@/components/shared/UiParentCard.vue';
|
||||
</script>
|
||||
<template>
|
||||
<UiParentCard title="Shadow">
|
||||
<v-row justify="center" class="mb-5 mt-1 px-8 px-3">
|
||||
<v-col v-for="(m, n) in 25" :key="n" cols="6" sm="auto">
|
||||
<v-card
|
||||
:class="['d-flex justify-center align-center bg-primary py-sm-4 py-3 px-sm-8 px-4', `elevation-${n}`]">
|
||||
<div>{{ n }}</div>
|
||||
</v-card>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</UiParentCard>
|
||||
</template>
|
||||
@@ -0,0 +1,25 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from "vue";
|
||||
const colortext = ref(
|
||||
[
|
||||
['Text Primary', 'text-primary text-h5','text-primary text-subtitle-1 mt-1'],
|
||||
['Text Secondary', 'text-secondary text-h5','text-secondary text-subtitle-1 mt-1'],
|
||||
['Text Info', 'text-info text-h5','text-info text-subtitle-1 mt-1'],
|
||||
['Text Warning', 'text-warning text-h5','text-warning text-subtitle-1 mt-1'],
|
||||
['Text Error', 'text-error text-h5','text-error text-subtitle-1 mt-1'],
|
||||
['Text Success', 'text-success text-h5','text-success text-subtitle-1 mt-1'],
|
||||
]
|
||||
)
|
||||
</script>
|
||||
<template>
|
||||
<div class="d-flex flex-column gap-1 mx-1 pa-7 pt-0 pb-0">
|
||||
<div class="mb-6" v-for="[name1, cls1,cls2] in colortext" :key="name1" >
|
||||
<v-card elevation="10" >
|
||||
<div class="py-6 px-4">
|
||||
<h5 :class="[cls1, '']">{{ name1 }} </h5>
|
||||
<div :class="[cls2, '']">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos blanditiis tenetur</div>
|
||||
</div>
|
||||
</v-card>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,49 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from "vue";
|
||||
const headings = ref([
|
||||
['h1.Heading', 'text-h1', 'font size: 30 | line-height: 45 | font weight: 500'],
|
||||
['h2.Heading', 'text-h2', 'font size: 24 | line-height: 36 | font weight: 500'],
|
||||
['h3.Heading', 'text-h3', 'font size: 21 | line-height: 31.5 | font weight: 500'],
|
||||
['h4.Heading', 'text-h4', 'font size: 18 | line-height: 27 | font weight: 500'],
|
||||
['h5.Heading', 'text-h5', 'font size: 16 | line-height: 24 | font weight: 500'],
|
||||
['h6.Heading', 'text-h6', 'font size: 14 | line-height: 21 | font weight: 500'],
|
||||
]);
|
||||
|
||||
const subtext = ref(
|
||||
[
|
||||
['Subtitle 1.', 'text-subtitle-1', ' Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos blanditiis tenetur', 'font size: 16 | line-height: 28 | font weight: 400'],
|
||||
['Subtitle 2.', 'text-subtitle-2', ' Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos blanditiis tenetur', 'font size: 14 | line-height: 21 | font weight: 400'],
|
||||
['Body 1.', 'text-body-1', ' Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos blanditiis tenetur', 'font size: 16 | line-height: 24 | font weight: 400'],
|
||||
['Body 2.', 'text-body-2', ' Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos blanditiis tenetur', 'font size: 14 | line-height: 20 | font weight: 400'],
|
||||
['Caption.', 'text-caption', ' Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos blanditiis tenetur', 'font size: 12 | line-height: 19 | font weight: 400'],
|
||||
['OVERLINE.', 'text-overline letter-spacing-0', ' Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos blanditiis tenetur', 'font size: 12 | line-height: 31 | font weight: 400']
|
||||
]
|
||||
)
|
||||
</script>
|
||||
<template>
|
||||
<div class="d-flex flex-column gap-1 mx-1 pa-7 pt-0 pb-0">
|
||||
<div class="mb-6" v-for="[name, cls, val] in headings" :key="name">
|
||||
<v-card elevation="10">
|
||||
<div class="py-6 px-4">
|
||||
<div :class="[cls, '']">{{ name }}</div>
|
||||
<div class="text-body-1">
|
||||
<div class="text-muted">{{ val }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</v-card>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="d-flex flex-column gap-1 mx-1 pt-0 pa-7 pb-0">
|
||||
<div class="mb-6" v-for="[name1, cls1, val1, prop] in subtext" :key="name1">
|
||||
<v-card elevation="10">
|
||||
<div class="py-6 px-4">
|
||||
<div :class="[cls1, '']">{{ name1 }} <span>{{ val1 }}</span></div>
|
||||
<div class="text-body-1 ">
|
||||
<div class="text-muted">{{ prop }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</v-card>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,12 @@
|
||||
<template>
|
||||
<div class="d-flex flex-column gap-1 mx-1 pt-0 pa-7 pb-0">
|
||||
<v-card elevation="10">
|
||||
<div class="py-6 px-4">
|
||||
<p class="text-high-emphasis">High-emphasis has an opacity of 87% in light skin and 100% in dark.</p>
|
||||
<p class="text-medium-emphasis">Medium-emphasis text and hint text have opacities of 60% in light skin
|
||||
and 70% in dark.</p>
|
||||
<p class="text-disabled">Disabled text has an opacity of 38% in light skin and 50% in dark.</p>
|
||||
</div>
|
||||
</v-card>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,15 @@
|
||||
<template>
|
||||
<div class="d-flex flex-column gap-1 mx-1 pt-0 pa-7 pb-0">
|
||||
<v-card elevation="10">
|
||||
<div class="py-6 px-4">
|
||||
<p class="text-left">Left aligned on all viewport sizes.</p>
|
||||
<p class="text-center">Center aligned on all viewport sizes.</p>
|
||||
<p class="text-right">Right aligned on all viewport sizes.</p>
|
||||
<p class="text-sm-left">Left aligned on viewports SM (small) or wider.</p>
|
||||
<p class="text-right text-md-left">Left aligned on viewports MD (medium) or wider.</p>
|
||||
<p class="text-right text-lg-left">Left aligned on viewports LG (large) or wider.</p>
|
||||
<p class="text-right text-xl-left">Left aligned on viewports XL (extra-large) or wider.</p>
|
||||
</div>
|
||||
</v-card>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,14 @@
|
||||
<template>
|
||||
<div class="d-flex flex-column gap-1 mx-1 pt-0 pa-7 pb-0">
|
||||
<v-card elevation="10">
|
||||
<div class="py-6 px-4">
|
||||
<div class="d-flex justify-space-between flex-row">
|
||||
<a href="#" class="text-decoration-none">Non-underlined link</a>
|
||||
<div class="text-decoration-line-through">Line-through text</div>
|
||||
<div class="text-decoration-overline">Overline text</div>
|
||||
<div class="text-decoration-underline">Underline text</div>
|
||||
</div>
|
||||
</div>
|
||||
</v-card>
|
||||
</div>
|
||||
</template>
|
||||
Reference in New Issue
Block a user