Feed

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


Profile

在介紹 Feed 之前先說明 Profile 元件。Profile 用於簡單顯示個人資料內容,類別名稱為 .profile 並且以此作為子元件前綴詞。頭像可用 Avatar 元件。輔助訊息可使用 Meta 元件。

A
Alfred Adler added you as a friend
Just

Lorem ipsum dolor sit amet, consectetur adipisicing elit. A ad aliquid amet doloremque dolorum ea maiores maxime minima minus, molestias qui, quibusdam quod sequi temporibus tenetur ullam voluptas voluptate voluptatibus?


A
Alfred Adler added you as a friend
Just

Lorem ipsum dolor sit amet, consectetur adipisicing elit. A ad aliquid amet doloremque dolorum ea maiores maxime minima minus, molestias qui, quibusdam quod sequi temporibus tenetur ullam voluptas voluptate voluptatibus?

<div class="profile"> <div class="avatar"></div> <div class="profile_data"> <div class="profile_summary"></div> <div class="meta"></div> <p class="profile_txt"></p> </div> <div class="profile_ctrls"> <button class="btn-menu"></button> </div> </div> <div class="profile sz:sm"></div>

OpenGraph

用於顯示外部資料簡易顯示,使用類別名稱為 .og 並以此作為子元件前綴詞。縮圖或多媒體可用 Embed。有關 Open Graph 詳細資料。

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!


lazy4.kule.tw
Beethoven - Piano Concerto No 4 - Zimerman, Wiener Philharmoniker, Bernstein (1991)

Ludwig van Beethoven - Piano Concerto No. 4 in G major, Op. 58 Krystian Zimerman, piano, Vienna Philharmonic Orchestra conducted by Leonard Bernstein Recorded at the Musikverein, Große Saal, Vienna, 9/1989

<div class="og"> <div class="embed"></div> <div class="og_body"> <div class="og_content"> <div class="og_domain"></div> <h5 class="og_title"></h5> <p class="og_txt"></p> </div> </div> </div>

Simple Feed

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

A
Alfred Adler added you as a friend
Just
M
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.


Default Feed

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

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"> <div class="profile"></div> <div class="feed_ctrls"></div> </head> <main class="feed_body"> <p class="feed_para"></p> </main> <footer class="feed_foot"> <div class="function"></div> </footer> </div>

多媒體

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

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 內。

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"> <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>

搭配 Card

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

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>