Empty
Prefix empty
VUE Yes用於沒有資料結果或是空白狀態時，引導或是告知使用者。使用類別名稱為 .empty 並以此做為子元件前綴詞。
Sorry, no result.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad adipisci animi aspernatur assumenda blanditiis, commodi fuga iure labore necessitatibus obcaecati praesentium quaerat qui quis quisquam similique soluta vitae voluptate, voluptates?
<div class="empty">
<div class="empty_symbol">
<i class="icon fas fa-info-circle"></i>
</div>
<h5 class="empty_title">{Title}</h5>
<p class="empty_txt">{Copywriter}</p>
</div>
<k-empty title="{標題}" content="{內文}">
<k-iconfont code="fas fa-info-circle" slot=symbol></k-iconfont>
</k-empty>
你可以隨時增加其他組件來豐富內容或是引導。
Sorry, no result.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad adipisci animi aspernatur assumenda blanditiis, commodi fuga iure labore necessitatibus obcaecati praesentium quaerat qui quis quisquam similique soluta vitae voluptate, voluptates?
<div class="empty">
<div class="empty_symbol">
<i class="icon fas fa-info-circle"></i>
</div>
<h5 class="empty_title">{Title}</h5>
<p class="empty_txt">{Copywriter}</p>
<hr>
<div class="btn-grp">
<button class="btn-text clr:primary">Again</button>
<button class="btn-text">Skip</button>
</div>
</div>
<k-empty title="Sorry, no result." content="Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad adipisci animi aspernatur assumenda blanditiis, commodi fuga iure labore necessitatibus obcaecati praesentium quaerat qui quis quisquam similique soluta vitae voluptate, voluptates?">
<k-iconfont code="fas fa-info-circle" slot=symbol></k-iconfont>
<hr>
<div class="btn-grp">
<button class="btn-text clr:primary">Again</button>
<button class="btn-text">Skip</button>
</div>
</k-empty>
Vue
組件名稱為 <k-empty>。
Empty Attributes
| 屬性名 | 資料類型 | 值 | 預設 | 範例 | 說明 |
|---|---|---|---|---|---|
| title | String | 無 | 無 | title="Hello~" | 設定標題內容 |
| content | String | 無 | 無 | content="Lorem ipsum dolor sit amet, consectetur adipisicing elit." | 設定內文 |
| htmlContent | Boolean | true, false | false | :html-content="true" | 設定內文可使用 HTML |