Note 便签

INFO

仿便利贴样式的内容展示。

基本语法

<c-note color="颜色" rotate>
  便签内容
</c-note>

参数说明

参数	类型	默认值	说明
color	string	yellow	便签颜色：yellow / green / blue / pink / purple
rotate	boolean	false	添加此属性使便签向右倾斜（默认向左）

颜色效果

颜色值	背景色	适用场景
yellow	淡黄色	一般提醒
green	淡绿色	成功/完成
blue	淡蓝色	信息/提示
pink	淡粉色	重要/关注
purple	淡紫色	特别/高级

使用示例

示例 1：默认黄色便签

<c-note>
  记得每天写博客！📝
</c-note>

示例 2：绿色便签

<c-note color="green">
  ✅ 任务完成！主题已成功上线。
</c-note>

示例 3：蓝色便签（向右倾斜）

<c-note color="blue" rotate>
  💡 小技巧：按 Ctrl+K 快速搜索
</c-note>

示例 4：粉色便签

<c-note color="pink">
  ⚠️ 重要提醒：<br>
  记得备份数据库！
</c-note>

示例 5：紫色便签

<c-note color="purple">
  🎉 恭喜你完成了所有教程的学习！
</c-note>

示例 6：多个便签组合

<c-split cols="3">
  <c-note color="yellow">待办事项 1</c-note>
  <c-note color="green" rotate>待办事项 2</c-note>
  <c-note color="blue">待办事项 3</c-note>
</c-split>

使用效果