Tag

用於呈現選擇結果或是標記關鍵字。使用類別名稱為 .tag 並以此為子元件前綴詞。

HTML
CSS
Javascript
PHP
<div class="tag"> <span class="tag_txt"></span> </div>

移除按鈕

.tag 內新增一個 <button class="tag_dele"><button>

HTML
CSS
Javascript
PHP
<div class="tag"> <span class="tag_txt"></span> <button class="tag_dele"></button> </div>

裝飾訊息

可加入文字、圖示、圖片等元素來加強訊息。可在 .tag 內加入 .tag_append 後再置入。圖片可直接加上 .tag_append 或是使用 Avatar 元件來取代 .tag_append

HTML
CSS
Javascript
PHP

G Grand Maison 東京
グランメゾン東京

米漿
<div class="tag"> <span class="tag_append"> <i class="icon {iconfont code}"></i> </span> <span class="tag_txt"></span> <button class="tag_dele"></button> </div> <div class="tag"> <img class="tag_append" src="{image path}"> <span class="tag_txt"></span> <button class="tag_dele"></button> </div> <div class="tag"> <div class="avatar"></div> <span class="tag_txt"></span> <button class="tag_dele"></button> </div>

配色

Tag 可搭配 Lazy4 四種基本色,可在 .tag 加上 .clr:{*}。同時可使用色票群。

P Primary
S Secondary
D Dark
L Light

R Red
O Orange
F Fire
Y Yellow
O Olive
S Sapphire
C Cyan
M Magenta
B Bone
S Silver
M Momo
R Rosewood
S Skin
C Chartreuse
G Green
A Aegean
B Blue
V Violet
B Brown
G Gray
B Black

Y Youtube
G Googleplus
P Pinterest
W Weibo
R Rss
S Snapchat
W Whatsapp
W Wechat
L Line
S Slack
B Behance
M Messager
S Skype
D Dropbox
V Viemo
T Twitter
L Linkedin
F Facebook
V Vk
P Paypal
T Tumble
<div class="tag clr:{*}"></div>

圓角樣式

加上 :rounded 後 Tag 會顯示圓形弧度。

Apple
<div class="tag :rounded"></div>

小號樣式

加上 sz:sm 後會顯示小型 Tag。

Apple
<div class="tag sz:sm"></div>

群組

可用一個類別名稱為 .tag-grp 的容器去放置所有 Tag。

a 項目 1
b 項目 2
c 項目 3
d 項目 4
e 項目 5
f 項目 6
g 項目 7
h 項目 8
i 項目 9
j 項目 10
<div class="tag-grp"> <div class="tag"></div> <div class="tag"></div> ... </div>