dk-plus

简体中文

English

简体中文

English

Appearance

目录

自定义盒子模型 ​

介绍 ​

DkShadow 是一个自定义盒子模型的组件，可以自定义阴影、圆角、边框、背景色等。

基础用法 ​

我是盒子内容
html
<Dk-Shadow>
  <div style="width: 100px; height: 100px; background-color: #fff;">我是盒子内容</div>
</Dk-Shadow>
展开

type ​

type 用来判定是标题还是内容(title|标题,box|自定义内容,默认为box)(标题插槽|slot-left -左插槽,slot-right -右插槽,slot-box -内容插槽)

1.左插槽(#left)
2.右插槽(#right)
html
<Dk-Shadow :type="'title'" :hoverType="false">
  <template #left>
    <span>1.左插槽(#left) </span>
  </template>
  <template #right>
    <span>2.右插槽(#right)</span>
  </template>
</Dk-Shadow>
展开

自定义样式 ​

使用 shadowClass 配置自定义样式

自定义样式(shadowClass)
html
<Dk-Shadow :shadowClass="'cesa'">自定义样式(shadowClass)</Dk-Shadow>
<style>
  .shadow {
    box-shadow: 0 0 4px #10b981;
  }
</style>
展开

悬停效果 ​

hoverType 开启悬停效果, hoverClass 自定义悬停样式

悬停效果(hoverType)
自定义悬停效果:hoverClass
html
<Dk-Shadow :hoverType="true">悬停效果(hoverType)</Dk-Shadow>
<Dk-Shadow :hoverType="true" :hoverClass="'hoverClass'"
  >自定义悬停效果:hoverClass</Dk-Shadow
>
<style>
  .hoverClass {
    transform: translateY(-2%);
    box-shadow: 1px 4px 10px 2px #10b981;
  }
</style>
展开

API ​

参数说明类型可选值默认值
type判定是标题还是内容(title标题,box自定义内容,默认为box)String
shadowClass自定义样式String——
hoverType开启悬停效果Boolean—false
hoverClass自定义悬停样式String——

Contributors ​