1097 lines
16 KiB
JavaScript
1097 lines
16 KiB
JavaScript
export const block = { ts: `<template>
|
|
<VRow>
|
|
<VCol
|
|
cols="12"
|
|
sm="6"
|
|
>
|
|
<VBtn block>
|
|
Block Button
|
|
</VBtn>
|
|
</VCol>
|
|
|
|
<VCol
|
|
cols="12"
|
|
sm="6"
|
|
>
|
|
<VBtn
|
|
variant="outlined"
|
|
block
|
|
>
|
|
Block Button
|
|
</VBtn>
|
|
</VCol>
|
|
</VRow>
|
|
</template>
|
|
`, js: `<template>
|
|
<VRow>
|
|
<VCol
|
|
cols="12"
|
|
sm="6"
|
|
>
|
|
<VBtn block>
|
|
Block Button
|
|
</VBtn>
|
|
</VCol>
|
|
|
|
<VCol
|
|
cols="12"
|
|
sm="6"
|
|
>
|
|
<VBtn
|
|
variant="outlined"
|
|
block
|
|
>
|
|
Block Button
|
|
</VBtn>
|
|
</VCol>
|
|
</VRow>
|
|
</template>
|
|
` }
|
|
|
|
export const colors = { ts: `<template>
|
|
<div class="demo-space-x">
|
|
<VBtn color="primary">
|
|
Primary
|
|
</VBtn>
|
|
<VBtn color="secondary">
|
|
Secondary
|
|
</VBtn>
|
|
<VBtn color="success">
|
|
Success
|
|
</VBtn>
|
|
<VBtn color="info">
|
|
Info
|
|
</VBtn>
|
|
<VBtn color="warning">
|
|
Warning
|
|
</VBtn>
|
|
<VBtn color="error">
|
|
Error
|
|
</VBtn>
|
|
</div>
|
|
</template>
|
|
`, js: `<template>
|
|
<div class="demo-space-x">
|
|
<VBtn color="primary">
|
|
Primary
|
|
</VBtn>
|
|
<VBtn color="secondary">
|
|
Secondary
|
|
</VBtn>
|
|
<VBtn color="success">
|
|
Success
|
|
</VBtn>
|
|
<VBtn color="info">
|
|
Info
|
|
</VBtn>
|
|
<VBtn color="warning">
|
|
Warning
|
|
</VBtn>
|
|
<VBtn color="error">
|
|
Error
|
|
</VBtn>
|
|
</div>
|
|
</template>
|
|
` }
|
|
|
|
export const flat = { ts: `<template>
|
|
<div class="demo-space-x">
|
|
<VBtn variant="flat">
|
|
Primary
|
|
</VBtn>
|
|
|
|
<VBtn
|
|
variant="flat"
|
|
color="secondary"
|
|
>
|
|
Secondary
|
|
</VBtn>
|
|
|
|
<VBtn
|
|
variant="flat"
|
|
color="success"
|
|
>
|
|
Success
|
|
</VBtn>
|
|
|
|
<VBtn
|
|
variant="flat"
|
|
color="info"
|
|
>
|
|
Info
|
|
</VBtn>
|
|
|
|
<VBtn
|
|
variant="flat"
|
|
color="warning"
|
|
>
|
|
Warning
|
|
</VBtn>
|
|
|
|
<VBtn
|
|
variant="flat"
|
|
color="error"
|
|
>
|
|
Error
|
|
</VBtn>
|
|
</div>
|
|
</template>
|
|
`, js: `<template>
|
|
<div class="demo-space-x">
|
|
<VBtn variant="flat">
|
|
Primary
|
|
</VBtn>
|
|
|
|
<VBtn
|
|
variant="flat"
|
|
color="secondary"
|
|
>
|
|
Secondary
|
|
</VBtn>
|
|
|
|
<VBtn
|
|
variant="flat"
|
|
color="success"
|
|
>
|
|
Success
|
|
</VBtn>
|
|
|
|
<VBtn
|
|
variant="flat"
|
|
color="info"
|
|
>
|
|
Info
|
|
</VBtn>
|
|
|
|
<VBtn
|
|
variant="flat"
|
|
color="warning"
|
|
>
|
|
Warning
|
|
</VBtn>
|
|
|
|
<VBtn
|
|
variant="flat"
|
|
color="error"
|
|
>
|
|
Error
|
|
</VBtn>
|
|
</div>
|
|
</template>
|
|
` }
|
|
|
|
export const group = { ts: `<script lang="ts" setup>
|
|
const toggleExclusive = ref(1)
|
|
</script>
|
|
|
|
<template>
|
|
<VBtnToggle
|
|
v-model="toggleExclusive"
|
|
density="comfortable"
|
|
>
|
|
<VBtn icon="tabler-align-left" />
|
|
<VBtn icon="tabler-align-center" />
|
|
<VBtn icon="tabler-align-right" />
|
|
<VBtn icon="tabler-align-justified" />
|
|
</VBtnToggle>
|
|
</template>
|
|
`, js: `<script setup>
|
|
const toggleExclusive = ref(1)
|
|
</script>
|
|
|
|
<template>
|
|
<VBtnToggle
|
|
v-model="toggleExclusive"
|
|
density="comfortable"
|
|
>
|
|
<VBtn icon="tabler-align-left" />
|
|
<VBtn icon="tabler-align-center" />
|
|
<VBtn icon="tabler-align-right" />
|
|
<VBtn icon="tabler-align-justified" />
|
|
</VBtnToggle>
|
|
</template>
|
|
` }
|
|
|
|
export const icon = { ts: `<template>
|
|
<div class="demo-space-x">
|
|
<VBtn>
|
|
Accept
|
|
<VIcon
|
|
end
|
|
icon="tabler-checkbox"
|
|
/>
|
|
</VBtn>
|
|
|
|
<VBtn color="secondary">
|
|
<VIcon
|
|
start
|
|
icon="tabler-circle-minus"
|
|
/>Cancel
|
|
</VBtn>
|
|
|
|
<VBtn color="success">
|
|
Upload
|
|
<VIcon
|
|
end
|
|
icon="tabler-cloud-upload"
|
|
/>
|
|
</VBtn>
|
|
|
|
<VBtn color="info">
|
|
<VIcon
|
|
start
|
|
icon="tabler-arrow-left"
|
|
/>
|
|
Back
|
|
</VBtn>
|
|
|
|
<VBtn color="warning">
|
|
<VIcon icon="tabler-settings" />
|
|
</VBtn>
|
|
|
|
<VBtn color="error">
|
|
<VIcon icon="tabler-circle-off" />
|
|
</VBtn>
|
|
</div>
|
|
</template>
|
|
`, js: `<template>
|
|
<div class="demo-space-x">
|
|
<VBtn>
|
|
Accept
|
|
<VIcon
|
|
end
|
|
icon="tabler-checkbox"
|
|
/>
|
|
</VBtn>
|
|
|
|
<VBtn color="secondary">
|
|
<VIcon
|
|
start
|
|
icon="tabler-circle-minus"
|
|
/>Cancel
|
|
</VBtn>
|
|
|
|
<VBtn color="success">
|
|
Upload
|
|
<VIcon
|
|
end
|
|
icon="tabler-cloud-upload"
|
|
/>
|
|
</VBtn>
|
|
|
|
<VBtn color="info">
|
|
<VIcon
|
|
start
|
|
icon="tabler-arrow-left"
|
|
/>
|
|
Back
|
|
</VBtn>
|
|
|
|
<VBtn color="warning">
|
|
<VIcon icon="tabler-settings" />
|
|
</VBtn>
|
|
|
|
<VBtn color="error">
|
|
<VIcon icon="tabler-circle-off" />
|
|
</VBtn>
|
|
</div>
|
|
</template>
|
|
` }
|
|
|
|
export const iconOnly = { ts: `<template>
|
|
<div class="demo-space-x">
|
|
<VBtn
|
|
icon="tabler-briefcase"
|
|
rounded
|
|
/>
|
|
|
|
<VBtn
|
|
variant="tonal"
|
|
icon="tabler-user-plus"
|
|
/>
|
|
|
|
<VBtn
|
|
icon="tabler-search"
|
|
variant="outlined"
|
|
color="success"
|
|
/>
|
|
|
|
<VBtn
|
|
icon="tabler-thumb-up"
|
|
variant="text"
|
|
color="info"
|
|
/>
|
|
|
|
<VBtn
|
|
icon="tabler-star"
|
|
variant="tonal"
|
|
color="success"
|
|
rounded
|
|
/>
|
|
|
|
<VBtn
|
|
icon="tabler-heart"
|
|
variant="text"
|
|
color="error"
|
|
/>
|
|
</div>
|
|
</template>
|
|
`, js: `<template>
|
|
<div class="demo-space-x">
|
|
<VBtn
|
|
icon="tabler-briefcase"
|
|
rounded
|
|
/>
|
|
|
|
<VBtn
|
|
variant="tonal"
|
|
icon="tabler-user-plus"
|
|
/>
|
|
|
|
<VBtn
|
|
icon="tabler-search"
|
|
variant="outlined"
|
|
color="success"
|
|
/>
|
|
|
|
<VBtn
|
|
icon="tabler-thumb-up"
|
|
variant="text"
|
|
color="info"
|
|
/>
|
|
|
|
<VBtn
|
|
icon="tabler-star"
|
|
variant="tonal"
|
|
color="success"
|
|
rounded
|
|
/>
|
|
|
|
<VBtn
|
|
icon="tabler-heart"
|
|
variant="text"
|
|
color="error"
|
|
/>
|
|
</div>
|
|
</template>
|
|
` }
|
|
|
|
export const link = { ts: `<template>
|
|
<div class="demo-space-x">
|
|
<VBtn href="https://pixinvent.com/">
|
|
String Literal
|
|
</VBtn>
|
|
|
|
<VBtn
|
|
href="https://pixinvent.com/"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
>
|
|
Open New Tab
|
|
</VBtn>
|
|
</div>
|
|
</template>
|
|
`, js: `<template>
|
|
<div class="demo-space-x">
|
|
<VBtn href="https://pixinvent.com/">
|
|
String Literal
|
|
</VBtn>
|
|
|
|
<VBtn
|
|
href="https://pixinvent.com/"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
>
|
|
Open New Tab
|
|
</VBtn>
|
|
</div>
|
|
</template>
|
|
` }
|
|
|
|
export const loaders = { ts: `<script lang="ts" setup>
|
|
const loadings = ref<boolean[]>([])
|
|
|
|
const load = (i: number) => {
|
|
loadings.value[i] = true
|
|
setTimeout(() => {
|
|
loadings.value[i] = false
|
|
}, 3000)
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div class="demo-space-x">
|
|
<VBtn
|
|
:loading="loadings[0]"
|
|
:disabled="loadings[0]"
|
|
color="primary"
|
|
@click="load(0)"
|
|
>
|
|
Accept Terms
|
|
</VBtn>
|
|
|
|
<VBtn
|
|
:loading="loadings[1]"
|
|
:disabled="loadings[1]"
|
|
color="secondary"
|
|
@click="load(1)"
|
|
>
|
|
Upload
|
|
<VIcon
|
|
end
|
|
icon="tabler-cloud-upload"
|
|
/>
|
|
</VBtn>
|
|
|
|
<VBtn
|
|
:loading="loadings[2]"
|
|
:disabled="loadings[2]"
|
|
color="success"
|
|
@click="load(2)"
|
|
>
|
|
Loader slot
|
|
<template #loader>
|
|
<span>Loading...</span>
|
|
</template>
|
|
</VBtn>
|
|
|
|
<VBtn
|
|
:loading="loadings[3]"
|
|
:disabled="loadings[3]"
|
|
color="info"
|
|
@click="load(3)"
|
|
>
|
|
Icon Loader
|
|
<template #loader>
|
|
<span class="custom-loader">
|
|
<VIcon icon="tabler-refresh" />
|
|
</span>
|
|
</template>
|
|
</VBtn>
|
|
|
|
<VBtn
|
|
:loading="loadings[4]"
|
|
:disabled="loadings[4]"
|
|
color="warning"
|
|
icon="tabler-cloud-upload"
|
|
@click="load(4)"
|
|
/>
|
|
</div>
|
|
</template>
|
|
|
|
<style lang="scss" scoped>
|
|
.custom-loader {
|
|
display: flex;
|
|
animation: loader 1s infinite;
|
|
}
|
|
|
|
@keyframes loader {
|
|
from {
|
|
transform: rotate(0);
|
|
}
|
|
|
|
to {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
</style>
|
|
`, js: `<script setup>
|
|
const loadings = ref([])
|
|
|
|
const load = i => {
|
|
loadings.value[i] = true
|
|
setTimeout(() => {
|
|
loadings.value[i] = false
|
|
}, 3000)
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div class="demo-space-x">
|
|
<VBtn
|
|
:loading="loadings[0]"
|
|
:disabled="loadings[0]"
|
|
color="primary"
|
|
@click="load(0)"
|
|
>
|
|
Accept Terms
|
|
</VBtn>
|
|
|
|
<VBtn
|
|
:loading="loadings[1]"
|
|
:disabled="loadings[1]"
|
|
color="secondary"
|
|
@click="load(1)"
|
|
>
|
|
Upload
|
|
<VIcon
|
|
end
|
|
icon="tabler-cloud-upload"
|
|
/>
|
|
</VBtn>
|
|
|
|
<VBtn
|
|
:loading="loadings[2]"
|
|
:disabled="loadings[2]"
|
|
color="success"
|
|
@click="load(2)"
|
|
>
|
|
Loader slot
|
|
<template #loader>
|
|
<span>Loading...</span>
|
|
</template>
|
|
</VBtn>
|
|
|
|
<VBtn
|
|
:loading="loadings[3]"
|
|
:disabled="loadings[3]"
|
|
color="info"
|
|
@click="load(3)"
|
|
>
|
|
Icon Loader
|
|
<template #loader>
|
|
<span class="custom-loader">
|
|
<VIcon icon="tabler-refresh" />
|
|
</span>
|
|
</template>
|
|
</VBtn>
|
|
|
|
<VBtn
|
|
:loading="loadings[4]"
|
|
:disabled="loadings[4]"
|
|
color="warning"
|
|
icon="tabler-cloud-upload"
|
|
@click="load(4)"
|
|
/>
|
|
</div>
|
|
</template>
|
|
|
|
<style lang="scss" scoped>
|
|
.custom-loader {
|
|
display: flex;
|
|
animation: loader 1s infinite;
|
|
}
|
|
|
|
@keyframes loader {
|
|
from {
|
|
transform: rotate(0);
|
|
}
|
|
|
|
to {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
</style>
|
|
` }
|
|
|
|
export const outlined = { ts: `<template>
|
|
<div class="demo-space-x">
|
|
<VBtn variant="outlined">
|
|
Primary
|
|
</VBtn>
|
|
<VBtn
|
|
variant="outlined"
|
|
color="secondary"
|
|
>
|
|
Secondary
|
|
</VBtn>
|
|
<VBtn
|
|
variant="outlined"
|
|
color="success"
|
|
>
|
|
Success
|
|
</VBtn>
|
|
<VBtn
|
|
variant="outlined"
|
|
color="info"
|
|
>
|
|
Info
|
|
</VBtn>
|
|
<VBtn
|
|
variant="outlined"
|
|
color="warning"
|
|
>
|
|
Warning
|
|
</VBtn>
|
|
<VBtn
|
|
variant="outlined"
|
|
color="error"
|
|
>
|
|
Error
|
|
</VBtn>
|
|
</div>
|
|
</template>
|
|
`, js: `<template>
|
|
<div class="demo-space-x">
|
|
<VBtn variant="outlined">
|
|
Primary
|
|
</VBtn>
|
|
<VBtn
|
|
variant="outlined"
|
|
color="secondary"
|
|
>
|
|
Secondary
|
|
</VBtn>
|
|
<VBtn
|
|
variant="outlined"
|
|
color="success"
|
|
>
|
|
Success
|
|
</VBtn>
|
|
<VBtn
|
|
variant="outlined"
|
|
color="info"
|
|
>
|
|
Info
|
|
</VBtn>
|
|
<VBtn
|
|
variant="outlined"
|
|
color="warning"
|
|
>
|
|
Warning
|
|
</VBtn>
|
|
<VBtn
|
|
variant="outlined"
|
|
color="error"
|
|
>
|
|
Error
|
|
</VBtn>
|
|
</div>
|
|
</template>
|
|
` }
|
|
|
|
export const plain = { ts: `<template>
|
|
<div class="demo-space-x">
|
|
<VBtn variant="plain">
|
|
Primary
|
|
</VBtn>
|
|
|
|
<VBtn
|
|
color="secondary"
|
|
variant="plain"
|
|
>
|
|
Secondary
|
|
</VBtn>
|
|
|
|
<VBtn
|
|
color="success"
|
|
variant="plain"
|
|
>
|
|
Success
|
|
</VBtn>
|
|
|
|
<VBtn
|
|
color="info"
|
|
variant="plain"
|
|
>
|
|
Info
|
|
</VBtn>
|
|
|
|
<VBtn
|
|
color="warning"
|
|
variant="plain"
|
|
>
|
|
Warning
|
|
</VBtn>
|
|
|
|
<VBtn
|
|
color="error"
|
|
variant="plain"
|
|
>
|
|
Error
|
|
</VBtn>
|
|
</div>
|
|
</template>
|
|
`, js: `<template>
|
|
<div class="demo-space-x">
|
|
<VBtn variant="plain">
|
|
Primary
|
|
</VBtn>
|
|
|
|
<VBtn
|
|
color="secondary"
|
|
variant="plain"
|
|
>
|
|
Secondary
|
|
</VBtn>
|
|
|
|
<VBtn
|
|
color="success"
|
|
variant="plain"
|
|
>
|
|
Success
|
|
</VBtn>
|
|
|
|
<VBtn
|
|
color="info"
|
|
variant="plain"
|
|
>
|
|
Info
|
|
</VBtn>
|
|
|
|
<VBtn
|
|
color="warning"
|
|
variant="plain"
|
|
>
|
|
Warning
|
|
</VBtn>
|
|
|
|
<VBtn
|
|
color="error"
|
|
variant="plain"
|
|
>
|
|
Error
|
|
</VBtn>
|
|
</div>
|
|
</template>
|
|
` }
|
|
|
|
export const rounded = { ts: `<template>
|
|
<div class="demo-space-x">
|
|
<VBtn>
|
|
Normal Button
|
|
</VBtn>
|
|
<VBtn
|
|
rounded="lg"
|
|
color="secondary"
|
|
>
|
|
Rounded Button
|
|
</VBtn>
|
|
<VBtn
|
|
:rounded="0"
|
|
color="success"
|
|
>
|
|
Tile Button
|
|
</VBtn>
|
|
<VBtn
|
|
rounded="pill"
|
|
color="info"
|
|
>
|
|
Pill Button
|
|
</VBtn>
|
|
</div>
|
|
</template>
|
|
`, js: `<template>
|
|
<div class="demo-space-x">
|
|
<VBtn>
|
|
Normal Button
|
|
</VBtn>
|
|
<VBtn
|
|
rounded="lg"
|
|
color="secondary"
|
|
>
|
|
Rounded Button
|
|
</VBtn>
|
|
<VBtn
|
|
:rounded="0"
|
|
color="success"
|
|
>
|
|
Tile Button
|
|
</VBtn>
|
|
<VBtn
|
|
rounded="pill"
|
|
color="info"
|
|
>
|
|
Pill Button
|
|
</VBtn>
|
|
</div>
|
|
</template>
|
|
` }
|
|
|
|
export const router = { ts: `<template>
|
|
<div class="demo-space-x">
|
|
<VBtn to="alert">
|
|
String Literal
|
|
</VBtn>
|
|
|
|
<VBtn
|
|
color="warning"
|
|
:to="{ path: 'alert' }"
|
|
>
|
|
Object Path
|
|
</VBtn>
|
|
|
|
<VBtn
|
|
color="success"
|
|
:to="{ name: 'components-alert' }"
|
|
>
|
|
Named Router
|
|
</VBtn>
|
|
|
|
<VBtn
|
|
color="secondary"
|
|
:to="{ path: 'alert', query: { plan: 'private' } }"
|
|
>
|
|
With Query
|
|
</VBtn>
|
|
</div>
|
|
</template>
|
|
`, js: `<template>
|
|
<div class="demo-space-x">
|
|
<VBtn to="alert">
|
|
String Literal
|
|
</VBtn>
|
|
|
|
<VBtn
|
|
color="warning"
|
|
:to="{ path: 'alert' }"
|
|
>
|
|
Object Path
|
|
</VBtn>
|
|
|
|
<VBtn
|
|
color="success"
|
|
:to="{ name: 'components-alert' }"
|
|
>
|
|
Named Router
|
|
</VBtn>
|
|
|
|
<VBtn
|
|
color="secondary"
|
|
:to="{ path: 'alert', query: { plan: 'private' } }"
|
|
>
|
|
With Query
|
|
</VBtn>
|
|
</div>
|
|
</template>
|
|
` }
|
|
|
|
export const sizing = { ts: `<template>
|
|
<div class="demo-space-x">
|
|
<VBtn size="x-large">
|
|
Extra large Button
|
|
</VBtn>
|
|
|
|
<VBtn
|
|
color="success"
|
|
size="large"
|
|
>
|
|
Large Button
|
|
</VBtn>
|
|
|
|
<VBtn color="info">
|
|
Normal Button
|
|
</VBtn>
|
|
|
|
<VBtn
|
|
size="small"
|
|
color="warning"
|
|
>
|
|
Small Button
|
|
</VBtn>
|
|
|
|
<VBtn
|
|
size="x-small"
|
|
color="error"
|
|
>
|
|
Extra small Button
|
|
</VBtn>
|
|
</div>
|
|
</template>
|
|
`, js: `<template>
|
|
<div class="demo-space-x">
|
|
<VBtn size="x-large">
|
|
Extra large Button
|
|
</VBtn>
|
|
|
|
<VBtn
|
|
color="success"
|
|
size="large"
|
|
>
|
|
Large Button
|
|
</VBtn>
|
|
|
|
<VBtn color="info">
|
|
Normal Button
|
|
</VBtn>
|
|
|
|
<VBtn
|
|
size="small"
|
|
color="warning"
|
|
>
|
|
Small Button
|
|
</VBtn>
|
|
|
|
<VBtn
|
|
size="x-small"
|
|
color="error"
|
|
>
|
|
Extra small Button
|
|
</VBtn>
|
|
</div>
|
|
</template>
|
|
` }
|
|
|
|
export const text = { ts: `<template>
|
|
<div class="demo-space-x">
|
|
<VBtn variant="text">
|
|
Primary
|
|
</VBtn>
|
|
|
|
<VBtn
|
|
variant="text"
|
|
color="secondary"
|
|
>
|
|
Secondary
|
|
</VBtn>
|
|
|
|
<VBtn
|
|
variant="text"
|
|
color="success"
|
|
>
|
|
Success
|
|
</VBtn>
|
|
|
|
<VBtn
|
|
variant="text"
|
|
color="info"
|
|
>
|
|
Info
|
|
</VBtn>
|
|
|
|
<VBtn
|
|
variant="text"
|
|
color="warning"
|
|
>
|
|
Warning
|
|
</VBtn>
|
|
|
|
<VBtn
|
|
variant="text"
|
|
color="error"
|
|
>
|
|
Error
|
|
</VBtn>
|
|
</div>
|
|
</template>
|
|
`, js: `<template>
|
|
<div class="demo-space-x">
|
|
<VBtn variant="text">
|
|
Primary
|
|
</VBtn>
|
|
|
|
<VBtn
|
|
variant="text"
|
|
color="secondary"
|
|
>
|
|
Secondary
|
|
</VBtn>
|
|
|
|
<VBtn
|
|
variant="text"
|
|
color="success"
|
|
>
|
|
Success
|
|
</VBtn>
|
|
|
|
<VBtn
|
|
variant="text"
|
|
color="info"
|
|
>
|
|
Info
|
|
</VBtn>
|
|
|
|
<VBtn
|
|
variant="text"
|
|
color="warning"
|
|
>
|
|
Warning
|
|
</VBtn>
|
|
|
|
<VBtn
|
|
variant="text"
|
|
color="error"
|
|
>
|
|
Error
|
|
</VBtn>
|
|
</div>
|
|
</template>
|
|
` }
|
|
|
|
export const tonal = { ts: `<template>
|
|
<div class="demo-space-x">
|
|
<VBtn variant="tonal">
|
|
Primary
|
|
</VBtn>
|
|
|
|
<VBtn
|
|
color="secondary"
|
|
variant="tonal"
|
|
>
|
|
Secondary
|
|
</VBtn>
|
|
|
|
<VBtn
|
|
color="success"
|
|
variant="tonal"
|
|
>
|
|
Success
|
|
</VBtn>
|
|
|
|
<VBtn
|
|
color="info"
|
|
variant="tonal"
|
|
>
|
|
Info
|
|
</VBtn>
|
|
|
|
<VBtn
|
|
color="warning"
|
|
variant="tonal"
|
|
>
|
|
Warning
|
|
</VBtn>
|
|
|
|
<VBtn
|
|
color="error"
|
|
variant="tonal"
|
|
>
|
|
Error
|
|
</VBtn>
|
|
</div>
|
|
</template>
|
|
`, js: `<template>
|
|
<div class="demo-space-x">
|
|
<VBtn variant="tonal">
|
|
Primary
|
|
</VBtn>
|
|
|
|
<VBtn
|
|
color="secondary"
|
|
variant="tonal"
|
|
>
|
|
Secondary
|
|
</VBtn>
|
|
|
|
<VBtn
|
|
color="success"
|
|
variant="tonal"
|
|
>
|
|
Success
|
|
</VBtn>
|
|
|
|
<VBtn
|
|
color="info"
|
|
variant="tonal"
|
|
>
|
|
Info
|
|
</VBtn>
|
|
|
|
<VBtn
|
|
color="warning"
|
|
variant="tonal"
|
|
>
|
|
Warning
|
|
</VBtn>
|
|
|
|
<VBtn
|
|
color="error"
|
|
variant="tonal"
|
|
>
|
|
Error
|
|
</VBtn>
|
|
</div>
|
|
</template>
|
|
` }
|
|
|