mirror of
https://github.com/coollabsio/coolify-examples.git
synced 2026-03-03 19:58:58 +00:00
laravel pure
This commit is contained in:
33
laravel-pure/resources/js/components/PlaceholderPattern.vue
Normal file
33
laravel-pure/resources/js/components/PlaceholderPattern.vue
Normal file
@@ -0,0 +1,33 @@
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue';
|
||||
|
||||
const patternId = computed(
|
||||
() => `pattern-${Math.random().toString(36).substring(2, 9)}`,
|
||||
);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<svg
|
||||
class="absolute inset-0 size-full stroke-neutral-900/20 dark:stroke-neutral-100/20"
|
||||
fill="none"
|
||||
>
|
||||
<defs>
|
||||
<pattern
|
||||
:id="patternId"
|
||||
x="0"
|
||||
y="0"
|
||||
width="8"
|
||||
height="8"
|
||||
patternUnits="userSpaceOnUse"
|
||||
>
|
||||
<path d="M-1 5L5 -1M3 9L8.5 3.5" stroke-width="0.5"></path>
|
||||
</pattern>
|
||||
</defs>
|
||||
<rect
|
||||
stroke="none"
|
||||
:fill="`url(#${patternId})`"
|
||||
width="100%"
|
||||
height="100%"
|
||||
></rect>
|
||||
</svg>
|
||||
</template>
|
||||
Reference in New Issue
Block a user