Medical UI Docs

# Pin卡贴

# 顶部卡贴

使用 med-s-sticker 标签来定义基本的卡贴





 

<template>
  <div>
      <med-s-sticker  layout="top" title="卡贴标题" unit="℃" num="100" snum="200" twoNumFlag/>
  </div>
</template>
显示代码

# 侧边卡贴

卡贴内容

使用 med-s-sticker 标签来定义基本的卡贴





 



<template>
  <div>
      <med-s-sticker  layout="left" title="卡贴标题">
        卡贴内容
      </med-s-sticker>
  </div>
</template>
显示代码

# 底部卡贴

卡贴内容

使用 med-s-sticker 标签来定义基本的卡贴





 



<template>
  <div>
      <med-s-sticker  layout="bottom" title="卡贴标题">
        卡贴内容
      </med-s-sticker>
  </div>
</template>
显示代码

# 边框配色

卡贴内容

titleBg 和 titleColor 仅在 checked 为 true 生效





 



<template>
  <div>
      <med-s-sticker  layout="bottom" title="卡贴标题" checked titleBg="red" titleColor="white">
        卡贴内容
      </med-s-sticker>
  </div>
</template>
显示代码

# 字体大小





 





<template>
  <div>
    <div >
      <med-s-sticker  layout="bottom" title="卡贴标题" bodyFontSize="50px" bodyColor="red">
        卡贴内容
      </med-s-sticker>
    </div>
  </div>
</template>
显示代码

# 参数列表

参数 方式 示例 解释
twoNumFlag Prop twoNumFlag="true " 设置是否是两个数字，仅在layout="top"生效，第二位用snum
size Prop size="small " 设置卡片大小，可选值为 small default 或者不设
layout Prop layout="top" 设置卡贴布局，可选值为 top left bottom blank 或者不设
hoverable Prop hoverable="true" 鼠标移过时可浮起
width Prop width="100px" 卡贴宽度，例如 300px
bordered Prop bordered="true" 卡贴边框
loading Prop loading="false" 当卡贴内容还在加载中时，可以用 loading 展示一个占位

Modal弹层