4dkankan-components/docs/examples/border/shadow.vue

<template>
    <div class="flex justify-between items-center flex-wrap">
        <div v-for="(shadow, i) in shadowGroup" :key="i" class="flex flex-col justify-center items-center" m="auto" w="46">
            <div
                class="inline-flex"
                h="30"
                w="30"
                m="2"
                :style="{
                    boxShadow: `var(${getCssVarName(shadow.type)})`,
                }"
            />
            <span p="y-4" class="demo-shadow-text" text="sm">
                {{ shadow.name }}
            </span>
            <code text="xs">
                {{ getCssVarName(shadow.type) }}
            </code>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const shadowGroup = ref([
    {
        name: 'Basic Shadow',
        type: '',
    },
    {
        name: 'Light Shadow',
        type: 'light',
    },
    {
        name: 'Lighter Shadow',
        type: 'lighter',
    },
    {
        name: 'Dark Shadow',
        type: 'dark',
    },
])

const getCssVarName = (type: string) => {
    return `--el-box-shadow${type ? '-' : ''}${type}`
}
</script>