mirror of
https://gitee.com/element-plus/element-plus.git
synced 2024-12-15 18:01:24 +08:00
55 lines
1014 B
Vue
55 lines
1014 B
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>
|