TelemedPro/hgh_admin
8
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

first commit

Browse Source
This commit is contained in:
Inshal
2024-05-29 22:34:28 +05:00
commit e63fc41a20
1470 changed files with 174828 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
resources/js/views/demos/components/progress-circular/DemoProgressCircularColor.vue Normal file
View File

@@ -0,0 +1,33 @@
<template>
<div class="demo-space-x">
<VProgressCircular
model-value="50"
color="primary"
/>
<VProgressCircular
model-value="50"
color="secondary"
/>
<VProgressCircular
model-value="50"
color="success"
/>
<VProgressCircular
model-value="50"
color="info"
/>
<VProgressCircular
model-value="50"
color="warning"
/>
<VProgressCircular
model-value="50"
color="error"
/>
</div>
</template>

33
resources/js/views/demos/components/progress-circular/DemoProgressCircularIndeterminate.vue Normal file
View File

@@ -0,0 +1,33 @@
<template>
<div class="demo-space-x">
<VProgressCircular
indeterminate
color="primary"
/>
<VProgressCircular
indeterminate
color="secondary"
/>
<VProgressCircular
indeterminate
color="success"
/>
<VProgressCircular
indeterminate
color="info"
/>
<VProgressCircular
indeterminate
color="warning"
/>
<VProgressCircular
indeterminate
color="error"
/>
</div>
</template>

59
resources/js/views/demos/components/progress-circular/DemoProgressCircularRotate.vue Normal file
View File

@@ -0,0 +1,59 @@
<script setup>
const interval = ref()
const progressValue = ref(0)
onMounted(() => {
interval.value = setInterval(() => {
if (progressValue.value === 100)
return progressValue.value = 0
progressValue.value += 10
}, 1000)
})
onBeforeUnmount(() => {
clearInterval(interval.value)
})
</script>
<template>
<div class="demo-space-x">
<VProgressCircular
:rotate="360"
:size="70"
:width="6"
:model-value="progressValue"
color="primary"
>
{{ progressValue }}
</VProgressCircular>
<VProgressCircular
:rotate="90"
:size="70"
:width="6"
:model-value="progressValue"
color="primary"
>
{{ progressValue }}
</VProgressCircular>
<VProgressCircular
:rotate="170"
:size="70"
:width="6"
:model-value="progressValue"
color="primary"
>
{{ progressValue }}
</VProgressCircular>
<VProgressCircular
:rotate="-90"
:size="70"
:width="6"
:model-value="progressValue"
color="primary"
>
{{ progressValue }}
</VProgressCircular>
</div>
</template>

28
resources/js/views/demos/components/progress-circular/DemoProgressCircularSize.vue Normal file
View File

@@ -0,0 +1,28 @@
<template>
<div class="demo-space-x">
<VProgressCircular
:size="30"
width="3"
color="primary"
indeterminate
/>
<VProgressCircular
:size="40"
color="primary"
indeterminate
/>
<VProgressCircular
:size="50"
color="primary"
indeterminate
/>
<VProgressCircular
:size="60"
color="primary"
indeterminate
/>
</div>
</template>

315
resources/js/views/demos/components/progress-circular/demoCodeProgressCircular.js Normal file
View File

@@ -0,0 +1,315 @@
export const color = { ts: `<template>
<div class="demo-space-x">
<VProgressCircular
model-value="50"
color="primary"
/>
<VProgressCircular
model-value="50"
color="secondary"
/>
<VProgressCircular
model-value="50"
color="success"
/>
<VProgressCircular
model-value="50"
color="info"
/>
<VProgressCircular
model-value="50"
color="warning"
/>
<VProgressCircular
model-value="50"
color="error"
/>
</div>
</template>
`, js: `<template>
<div class="demo-space-x">
<VProgressCircular
model-value="50"
color="primary"
/>
<VProgressCircular
model-value="50"
color="secondary"
/>
<VProgressCircular
model-value="50"
color="success"
/>
<VProgressCircular
model-value="50"
color="info"
/>
<VProgressCircular
model-value="50"
color="warning"
/>
<VProgressCircular
model-value="50"
color="error"
/>
</div>
</template>
` }
export const indeterminate = { ts: `<template>
<div class="demo-space-x">
<VProgressCircular
indeterminate
color="primary"
/>
<VProgressCircular
indeterminate
color="secondary"
/>
<VProgressCircular
indeterminate
color="success"
/>
<VProgressCircular
indeterminate
color="info"
/>
<VProgressCircular
indeterminate
color="warning"
/>
<VProgressCircular
indeterminate
color="error"
/>
</div>
</template>
`, js: `<template>
<div class="demo-space-x">
<VProgressCircular
indeterminate
color="primary"
/>
<VProgressCircular
indeterminate
color="secondary"
/>
<VProgressCircular
indeterminate
color="success"
/>
<VProgressCircular
indeterminate
color="info"
/>
<VProgressCircular
indeterminate
color="warning"
/>
<VProgressCircular
indeterminate
color="error"
/>
</div>
</template>
` }
export const rotate = { ts: `<script setup lang="ts">
const interval = ref()
const progressValue = ref(0)
onMounted(() => {
interval.value = setInterval(() => {
if (progressValue.value === 100)
return progressValue.value = 0
progressValue.value += 10
}, 1000)
})
onBeforeUnmount(() => {
clearInterval(interval.value)
})
</script>
<template>
<div class="demo-space-x">
<VProgressCircular
:rotate="360"
:size="70"
:width="6"
:model-value="progressValue"
color="primary"
>
{{ progressValue }}
</VProgressCircular>
<VProgressCircular
:rotate="90"
:size="70"
:width="6"
:model-value="progressValue"
color="primary"
>
{{ progressValue }}
</VProgressCircular>
<VProgressCircular
:rotate="170"
:size="70"
:width="6"
:model-value="progressValue"
color="primary"
>
{{ progressValue }}
</VProgressCircular>
<VProgressCircular
:rotate="-90"
:size="70"
:width="6"
:model-value="progressValue"
color="primary"
>
{{ progressValue }}
</VProgressCircular>
</div>
</template>
`, js: `<script setup>
const interval = ref()
const progressValue = ref(0)
onMounted(() => {
interval.value = setInterval(() => {
if (progressValue.value === 100)
return progressValue.value = 0
progressValue.value += 10
}, 1000)
})
onBeforeUnmount(() => {
clearInterval(interval.value)
})
</script>
<template>
<div class="demo-space-x">
<VProgressCircular
:rotate="360"
:size="70"
:width="6"
:model-value="progressValue"
color="primary"
>
{{ progressValue }}
</VProgressCircular>
<VProgressCircular
:rotate="90"
:size="70"
:width="6"
:model-value="progressValue"
color="primary"
>
{{ progressValue }}
</VProgressCircular>
<VProgressCircular
:rotate="170"
:size="70"
:width="6"
:model-value="progressValue"
color="primary"
>
{{ progressValue }}
</VProgressCircular>
<VProgressCircular
:rotate="-90"
:size="70"
:width="6"
:model-value="progressValue"
color="primary"
>
{{ progressValue }}
</VProgressCircular>
</div>
</template>
` }
export const size = { ts: `<template>
<div class="demo-space-x">
<VProgressCircular
:size="30"
width="3"
color="primary"
indeterminate
/>
<VProgressCircular
:size="40"
color="primary"
indeterminate
/>
<VProgressCircular
:size="50"
color="primary"
indeterminate
/>
<VProgressCircular
:size="60"
color="primary"
indeterminate
/>
</div>
</template>
`, js: `<template>
<div class="demo-space-x">
<VProgressCircular
:size="30"
width="3"
color="primary"
indeterminate
/>
<VProgressCircular
:size="40"
color="primary"
indeterminate
/>
<VProgressCircular
:size="50"
color="primary"
indeterminate
/>
<VProgressCircular
:size="60"
color="primary"
indeterminate
/>
</div>
</template>
` }