Kule Lazy 4

Feed

用於即時動態資料顯示，類別名稱為 .feed 並以此為子元件前綴詞。Feed 本身主要做為容器，裡頭置入其它元件而建立一個完整的 Feed 訊息。

Simple Feed

簡易的 Feed 只要用 .feed 置入一個 .profile 就可以了。

A
Alfred Adler added you as a friend
Just
M
Michael added 2 new illustrations
1 hour ago
J
Jackson posted on his page
2 hour ago

Ours is a life of constant reruns. We're always circling back to where we'd we started, then starting all over again. Even if we don't run extra laps that day, we surely will come back for more of the same another day soon.

<div class="feed"> <div class="profile sz:sm"> <div class="avatar"> <span class="avatar_obj">M</span> </div> <div class="profile_data"> <div class="profile_summary"> <a>Michael</a> added <a>2 new illustrations</a> </div> <div class="meta"> <span class="meta_item">1 hour ago</span> </div> </div> <button class="btn-menu"></button> </div> </div>

Default Feed

Feed 主要是由眾多元件組合而成。包含 Avatar, Meta, 與 Function 等等。一個完整的 Feed 主要由 .feed_head、.feed_body、.feed_foot 組成。

K
Kule
Nov 2, AM 10:31 @Wai'ao Beach
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores commodi distinctio dolor, ducimus, eaque esse et harum illum ipsa iste laudantium molestiae necessitatibus nostrum odit praesentium quidem reiciendis ut voluptatum.
<div class="feed"> <header class="feed_head"> <div class="profile"></div> <div class="feed_ctrls"></div> </header> <main class="feed_body"> <p class="feed_para"></p> </main> <footer class="feed_foot"> <div class="function"></div> </footer> </div>

多媒體

如果要配置多媒體資料，可以直接將 Embed 置於 .feed_body 內。

K
Kule
Nov 2, AM 10:31 @Wai'ao Beach
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores commodi distinctio dolor, ducimus, eaque esse et harum illum ipsa iste laudantium molestiae necessitatibus nostrum odit praesentium quidem reiciendis ut voluptatum.
<div class="feed"> <head class="feed_head"></head> <main class="feed_body"> <p class="feed_para"></p> <div class="embed"></div> </main> <footer class="feed_foot"></footer> </div>

搭配 Open Graph

將擷取回來的網站資訊透過 Open Graph 組件顯示於 Feed 內，直接將 Open Graph 置於 .feed_body 內。

K
Kule
Nov 2, AM 10:31 @Wai'ao Beach
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores commodi distinctio dolor, ducimus, eaque esse et harum illum ipsa iste laudantium molestiae necessitatibus nostrum odit praesentium quidem reiciendis ut voluptatum. https://lazy4.kule.tw/components/feed
lazy4.kule.tw
Hello 米漿！

Lorem ipsum dolor sit amet, consectetur adipisicing elit. At excepturi facere facilis fugiat fugit iusto non nulla provident qui quidem quis quos, sit voluptate. Fuga inventore natus numquam provident similique!

<div class="feed"> <header class="feed_head"></header> <main class="feed_body"> <p class="feed_para"></p> <div class="og"></div> </main> <footer class="feed_foot"></footer> </div>

搭配 Card

只要將 Feed 置於 .card 內就可以了。

K
Kule
Nov 2, AM 10:31 @Wai'ao Beach
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores commodi distinctio dolor, ducimus, eaque esse et harum illum ipsa iste laudantium molestiae necessitatibus nostrum odit praesentium quidem reiciendis ut voluptatum. https://lazy4.kule.tw/components/feed
lazy4.kule.tw
Hello 米漿！

Lorem ipsum dolor sit amet, consectetur adipisicing elit. At excepturi facere facilis fugiat fugit iusto non nulla provident qui quidem quis quos, sit voluptate. Fuga inventore natus numquam provident similique!

<div class="card"> <div class="feed"></div> </div>