TelemedPro/purityselect_admin
8
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
master
purityselect_admin/resources/js/views/demos/components/button/demoCodeButton.js
Inshal 2046156f90 initial commit
2024-10-25 19:58:19 +05:00

1097 lines
16 KiB
JavaScript
Raw Permalink Blame History

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="compact"
>
<VBtn icon="ri-align-left" />
<VBtn icon="ri-align-center" />
<VBtn icon="ri-align-right" />
<VBtn icon="ri-align-justify" />
</VBtnToggle>
</template>
`, js: `<script setup>
const toggleExclusive = ref(1)
</script>
<template>
<VBtnToggle
v-model="toggleExclusive"
density="compact"
>
<VBtn icon="ri-align-left" />
<VBtn icon="ri-align-center" />
<VBtn icon="ri-align-right" />
<VBtn icon="ri-align-justify" />
</VBtnToggle>
</template>
` }
export const icon = { ts: `<template>
<div class="demo-space-x">
<VBtn>
Accept
<VIcon
end
icon="ri-checkbox-circle-line"
/>
</VBtn>
<VBtn color="secondary">
<VIcon
start
icon="ri-subtract-line"
/>Cancel
</VBtn>
<VBtn color="success">
Upload
<VIcon
end
icon="ri-upload-cloud-line"
/>
</VBtn>
<VBtn color="info">
<VIcon
start
icon="ri-arrow-left-line"
/>
Back
</VBtn>
<VBtn color="warning">
<VIcon icon="ri-hammer-line" />
</VBtn>
<VBtn color="error">
<VIcon icon="ri-prohibited-line" />
</VBtn>
</div>
</template>
`, js: `<template>
<div class="demo-space-x">
<VBtn>
Accept
<VIcon
end
icon="ri-checkbox-circle-line"
/>
</VBtn>
<VBtn color="secondary">
<VIcon
start
icon="ri-subtract-line"
/>Cancel
</VBtn>
<VBtn color="success">
Upload
<VIcon
end
icon="ri-upload-cloud-line"
/>
</VBtn>
<VBtn color="info">
<VIcon
start
icon="ri-arrow-left-line"
/>
Back
</VBtn>
<VBtn color="warning">
<VIcon icon="ri-hammer-line" />
</VBtn>
<VBtn color="error">
<VIcon icon="ri-prohibited-line" />
</VBtn>
</div>
</template>
` }
export const iconOnly = { ts: `<template>
<div class="demo-space-x">
<VBtn
icon="ri-suitcase-line"
variant="text"
/>
<VBtn
variant="text"
icon="ri-user-add-line"
color="secondary"
/>
<VBtn
icon="ri-search-line"
variant="text"
color="success"
/>
<VBtn
icon="ri-thumb-up-line"
variant="text"
color="info"
/>
<VBtn
icon="ri-star-line"
variant="text"
color="warning"
/>
<VBtn
icon="ri-heart-line"
variant="text"
color="error"
/>
</div>
</template>
`, js: `<template>
<div class="demo-space-x">
<VBtn
icon="ri-suitcase-line"
variant="text"
/>
<VBtn
variant="text"
icon="ri-user-add-line"
color="secondary"
/>
<VBtn
icon="ri-search-line"
variant="text"
color="success"
/>
<VBtn
icon="ri-thumb-up-line"
variant="text"
color="info"
/>
<VBtn
icon="ri-star-line"
variant="text"
color="warning"
/>
<VBtn
icon="ri-heart-line"
variant="text"
color="error"
/>
</div>
</template>
` }
export const link = { ts: `<template>
<div class="demo-space-x">
<VBtn href="https://themeselection.com/">
String Literal
</VBtn>
<VBtn
href="https://themeselection.com/"
target="_blank"
rel="noopener noreferrer"
>
Open New Tab
</VBtn>
</div>
</template>
`, js: `<template>
<div class="demo-space-x">
<VBtn href="https://themeselection.com/">
String Literal
</VBtn>
<VBtn
href="https://themeselection.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="ri-upload-cloud-line"
/>
</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="ri-refresh-line" />
</span>
</template>
</VBtn>
<VBtn
:loading="loadings[4]"
:disabled="loadings[4]"
color="warning"
icon="ri-upload-cloud-line"
@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="ri-upload-cloud-line"
/>
</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="ri-refresh-line" />
</span>
</template>
</VBtn>
<VBtn
:loading="loadings[4]"
:disabled="loadings[4]"
color="warning"
icon="ri-upload-cloud-line"
@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="/components/alert">
String Literal
</VBtn>
<VBtn
color="warning"
:to="{ path: '/components/alert' }"
>
Object Path
</VBtn>
<VBtn
color="success"
:to="{ name: 'components-alert' }"
>
Named Router
</VBtn>
<VBtn
color="secondary"
:to="{ path: '/components/alert', query: { plan: 'private' } }"
>
With Query
</VBtn>
</div>
</template>
`, js: `<template>
<div class="demo-space-x">
<VBtn to="/components/alert">
String Literal
</VBtn>
<VBtn
color="warning"
:to="{ path: '/components/alert' }"
>
Object Path
</VBtn>
<VBtn
color="success"
:to="{ name: 'components-alert' }"
>
Named Router
</VBtn>
<VBtn
color="secondary"
:to="{ path: '/components/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>
` }
Reference in New Issue View Git Blame Copy Permalink