dk-plusCustom Box Model
introduce
DkShadow Is a custom box model component, you can customize the shadow, rounded corners, borders, background color, etc.
Basic usage
I'm the contents of the box
html
<Dk-Shadow>
<div style="width: 100px; height: 100px; background-color: #fff;">I'm the contents of the box</div>
</Dk-Shadow>展开
type
type is used to determine the title or content ( title| title,box custom content, default isbox)(title slots |slot-left -left slot, slot-right -right slot, slot-box - content slot)
1.Left slot(#left)
2.Right slot(#right)
html
<Dk-Shadow :type="'title'" :hoverType="false">
<template #left>
<span>1.Left slot(#left) </span>
</template>
<template #right>
<span>2.Right slot(#right)</span>
</template>
</Dk-Shadow>展开
Custom style
Use shadowClass to configure custom styles
Custom style(shadowClass)
html
<Dk-Shadow :shadowClass="'cesa'">Custom style(shadowClass)</Dk-Shadow>
<style>
.shadow {
box-shadow: 0 0 4px #10b981;
}
</style>展开
Hover effect
hoverType opens hover effect, hoverClass customizes hover style
Hover effect(hoverType)
Customize the hover effect:hoverClass
html
<Dk-Shadow :hoverType="true">Hover effect(hoverType)</Dk-Shadow>
<Dk-Shadow :hoverType="true" :hoverClass="'hoverClass'"
>Customize the hover effect:hoverClass</Dk-Shadow
>
<style>
.hoverClass {
transform: translateY(-2%);
box-shadow: 1px 4px 10px 2px #10b981;
}
</style>展开
API
| argument | Instructions | type | Optional value | Default value |
|---|---|---|---|---|
| type | Decide whether it's the title or the content(title | title,box | The default value isbox) | String |
| shadowClass | Custom style | String | — | — |
| hoverType | Turn on hover effect | Boolean | — | false |
| hoverClass | Customize the hover style | String | — | — |
Contributors
