新版本1.4.2发布了。第一次升级到 1.4.x 版本请注意在1.4.0版本的重大变动,具体请阅读更新日志

开发者文档

入口class:.sui-tag。近亲label在这里

更新 @2014-06-23: 修改了布局方式,增加了 .tag-bordered,增加了默认的margin-bottom。

普通与选中的tag

默认

  • Normal
  • logo设计
  • 店铺装修达人
  • 艺术
  • 公sdf告
  • 注意afs

选中的tag的状态:li.tag-selected

  • Normal
  • logo设计
  • 店铺装修达人
  • 艺术
  • 公sdf告
  • 注意afs
  1. <h3>默认 </h3>
  2. <ul class="sui-tag">
  3. <li>Normal</li>
  4. <li>logo设计</li>
  5. <li>店铺装修达人</li>
  6. <li>艺术</li>
  7. <li>公sdf告</li>
  8. <li>注意afs</li>
  9. </ul>
  10. <h3>选中的tag的状态:li.tag-selected</h3>
  11. <ul class="sui-tag tag-selected">
  12. <li>Normal</li>
  13. <li class="tag-selected">logo设计</li>
  14. <li>店铺装修达人</li>
  15. <li class="tag-selected">艺术</li>
  16. <li>公sdf告</li>
  17. <li class="tag-selected">注意afs</li>
  18. </ul>

使用方法很简单了,最好是用ul>li的结构,或者内部是a标签也可以。

右侧带叉(用以删除)

加上 .tag-bordered,会默认加上灰色边框。

默认 .sui-tag

  • Normal
  • logo设计×
  • 店铺装修达人
  • 艺术×
  • 公sdf告
  • 注意afs×
  • 店铺装修达人
  • 艺术×
  • 公sdf告
  1. <h3>默认 .sui-tag</h3>
  2. <ul class="sui-tag tag-bordered">
  3. <li>Normal</li>
  4. <li class="tag-selected with-x">logo设计<i>×</i></li>
  5. <li>店铺装修达人</li>
  6. <li class="tag-selected with-x">艺术<i>×</i></li>
  7. <li>公sdf告</li>
  8. <li class="tag-selected with-x">注意afs<i>×</i></li>
  9. <li>店铺装修达人</li>
  10. <li class="tag-selected with-x">艺术<i>×</i></li>
  11. <li>公sdf告</li>
  12. </ul>

带叉的tag则在每个tag元素附加class="with-x",同时内部添加html:<i>&times;</i>

因为是CSS组件,相关事件需要根据业务逻辑自己添加