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。
文字縮寫
G Grand Maison 東京
グ グランメゾン東京
<div class="tag">
<span class="tag_append">{文字}</span>
<span class="tag_txt"></span>
<button class="tag_dele"></button>
</div>
Iconfont
HTML
CSS
Javascript
PHP
<div class="tag">
<span class="tag_append">
<i class="icon {iconfont}"></i>
</span>
<span class="tag_txt"></span>
<button class="tag_dele"></button>
</div>
Avatar
米漿
<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 Google
P Pinterest
W Weibo
R Rss
S Snapchat
W Whatsapp
W Wechat
L Line
S Slack
T Tumblr
B Behance
S Skype
D Dropbox
V Viemo
T Twitter
L Linkedin
F Facebook
V Vk
P Paypal
Y Yahoo
V Vue
R React
A Angular
<div class="tag clr:{color}">
圓角樣式
加上 :rounded 後 Tag 會顯示圓形弧度。
Apple
<div class="tag :rounded"></div>
小號樣式
加上 sz:sm 後會顯示小型 Tag。
Apple
<div class="tag sz:sm">
<span class="tag_txt"></span>
<button class="tag_dele"></button>
</div>
群組
可用一個類別名稱為 .tag-grp 的容器去放置所有 Tag。
b Item 2
c Item 3
d Item 4
e Item 5
f Item 6
g Item 7
h Item 8
i Item 9
j Item 10
k Item 11
<div class="tag-grp">
<div class="tag"></div>
<div class="tag"></div>
...
</div>