Infoitems

以前的專案中大約有半數以上都會用到 Infoitems,通常內容包含一張縮圖、標題、簡述等,為了不想再一直重複做這件事情,因此納入了 Lazy 3 當中。Infoitems 的元件將會以 .info- 為開頭。

預設樣式

最基本的結構包含一個標題與簡述。

Info Item Title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat officiis nam neque unde tenetur repellendus sunt aliquid, eos quisquam dolorem nobis a debitis illum ut in ipsum quo. Neque, nobis.

<div class="info-item">
    <div class="info-item-content">
        <h4 class="info-item-title"><a>Info Item Title</a></h4>
        <p class="info-item-text">~略~</p>
    </div>
</div>

增加一些 Meta 資訊。

Info Item Title

Posted by Kei 2013-08-04 PM 09:00

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat officiis nam neque unde tenetur repellendus sunt aliquid, eos quisquam dolorem nobis a debitis illum ut in ipsum quo. Neque, nobis.

<div class="info-item">
    <div class="info-item-content">
        <h4 class="info-item-title"><a>Info Item Title</a></h4>
        <div class="metas">
            <span class="meta">Posted by <a>Kei</a></span>
            <span class="meta">2013-08-04 PM 09:00</span>
        </div>
        <p class="info-item-text">~略~</p>
    </div>
</div>

也可以將 Meta 資訊換成評分模組。

Info Item Title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat officiis nam neque unde tenetur repellendus sunt aliquid, eos quisquam dolorem nobis a debitis illum ut in ipsum quo. Neque, nobis.

<div class="info-item">
<div class="info-item-content">
    <h4 class="info-item-title"><a>Info Item Title</a></h4>
    <div class="rating">
        <input type="radio" name="rating" value="5" class="rating-radio" />
        <span class="rating-item"></span>
        <input type="radio" name="rating" value="4" class="rating-radio" />
        <span class="rating-item"></span>
        <input type="radio" name="rating" value="3" class="rating-radio" />
        <span class="rating-item"></span>
        <input type="radio" name="rating" value="2" class="rating-radio" />
        <span class="rating-item"></span>
        <input type="radio" name="rating" value="1" class="rating-radio" />
        <span class="rating-item"></span>
    </div>
    <p class="info-item-text">~略~</p>
</div>
</div>

將 Meta 資訊置底。

Info Item Title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat officiis nam neque unde tenetur repellendus sunt aliquid, eos quisquam dolorem nobis a debitis illum ut in ipsum quo. Neque, nobis.

Posted by Kei 2013-08-04 PM 09:00
<div class="info-item">
    <div class="info-item-content">
        <h4 class="info-item-title"><a>Info Item Title</a></h4>
        <p class="info-item-text">~略~</p>
        <div class="metas">
            <span class="meta">Posted by <a>Kei</a></span>
            <span class="meta">2013-08-04 PM 09:00</span>
        </div>
    </div>
</div>

Bottom

有時需要的資訊很多,這時可以在 .info-item-content 內增加一個 .info-item-bottom 放置額外的內容。

Info Item Title

Posted by Kei 2013-08-04 PM 09:00

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem reprehenderit qui maiores non error sit numquam, ratione, quam a ex? Impedit at aliquid magnam perferendis excepturi quae, inventore autem rerum!

Label Label Label Label Label
<div class="info-item">
    <div class="info-item-content">
        <h4 class="info-item-title"><a>Info Item Title</a></h4>
        <div class="metas">
            <span class="meta">Posted by <a>Kei</a></span>
            <span class="meta">2013-08-04 PM 09:00</span>
        </div>
        <p class="info-item-text">~略~</p>
        <div class="info-item-bottom">
            <span class="label">Label</span>
            <span class="label">Label</span>
            <span class="label">Label</span>
            <span class="label">Label</span>
            <span class="label">Label</span>
        </div>
    </div>
</div>

Addon

當額外資訊想要放在最左側時,可以在 .info-item 底下新增 .info-item-addon

Info Item Title

Posted by Kei 2013-08-04 PM 09:00

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem reprehenderit qui maiores non error sit numquam, ratione, quam a ex? Impedit at aliquid magnam perferendis excepturi quae, inventore autem rerum!

Label Label Label Label Label
<div class="info-item">
    <div class="info-item-content">
        <h4 class="info-item-title"><a>Info Item Title</a></h4>
        <div class="metas">
            <span class="meta">Posted by <a>Kei</a></span>
            <span class="meta">2013-08-04 PM 09:00</span>
        </div>
        <p class="info-item-text">~略~</p>
        <div class="info-item-bottom">
            <span class="label">Label</span>
            <span class="label">Label</span>
            <span class="label">Label</span>
            <span class="label">Label</span>
            <span class="label">Label</span>
        </div>
    </div>
    <div class="info-item-addon">
        <a class="btn">Button</a>
    </div>
</div>

Cover

當需要放資訊相關的圖片時,可在 .info-item 下新增 .info-item-cover

Info Item Title

Posted by Kei 2013-08-04 PM 09:00

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem reprehenderit qui maiores non error sit numquam, ratione, quam a ex? Impedit at aliquid magnam perferendis excepturi quae, inventore autem rerum!

Label Label Label Label Label
<div class="info-item">
    <div class="info-item-cover">
        <img src="img/demo1.jpg">
    </div>
    <div class="info-item-content">
        ~略~
    </div>
</div>

Bordered

.info-item 加上 .info-item-outline 可增加外框樣式。

Info Item Title

Posted by Kei 2013-08-04 PM 09:00

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem reprehenderit qui maiores non error sit numquam, ratione, quam a ex? Impedit at aliquid magnam perferendis excepturi quae, inventore autem rerum!

Label Label Label Label Label
<div class="info-item info-item-outline">
    <div class="info-item-cover">
        <img src="img/demo1.jpg">
    </div>
    <div class="info-item-content">
        ~略~
    </div>
    <div class="info-item-content">
        ~略~
    </div>
</div>

Vertical

除了原本的水平排列之外,還可以改成垂直排列,只要在 .info-item 加上 .info-item-vertical

Info Item Title

Posted by Kei 2013-08-04 PM 09:00

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem reprehenderit qui maiores non error sit numquam, ratione, quam a ex? Impedit at aliquid magnam perferendis excepturi quae, inventore autem rerum!

Label Label Label Label Label
<div class="info-item info-item-vertical">~略~</div>

Infoitems 與 Cards

當你使用垂直樣式希望加外框時,不需要加上這兩個樣式,直接在 .info-item 加上 .card

Info Item Title

Posted by Kei 2013-08-04 PM 09:00

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem reprehenderit qui maiores non error sit numquam, ratione, quam a ex? Impedit at aliquid magnam perferendis excepturi quae, inventore autem rerum!

<div class="info-item card">~略~</div>

Footer

當 Infoitems 搭配 Card 樣式時,另外提供了 .info-item-footer 元件。

Info Item Title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae dolore, dolores iste odio voluptatum amet.

<div class="info-item card">
    <div class="info-item-cover">
        <img src="img/demo1.jpg">
    </div>
    <div class="info-item-content">
        <h4 class="info-item-title"><a>Info Item Title</a></h4>
        <div class="rating">
            <input type="radio" name="rating" value="5" class="rating-radio" />
            <span class="rating-item"></span>
            <input type="radio" name="rating" value="4" class="rating-radio" />
            <span class="rating-item"></span>
            <input type="radio" name="rating" value="3" class="rating-radio" />
            <span class="rating-item"></span>
            <input type="radio" name="rating" value="2" class="rating-radio" />
            <span class="rating-item"></span>
            <input type="radio" name="rating" value="1" class="rating-radio" />
            <span class="rating-item"></span>
        </div>
        <p class="info-item-text">~略~</p>
        <div class="info-item-bottom">
            <a class="btn">Button</a>
        </div>
    </div>
    <div class="info-item-footer">
        <div class="metas">
            <span class="meta">Posted by <a>Kei</a></span>
            <span class="meta">2013-08-04 PM 09:00</span>
        </div>
    </div>
</div>