@paperbits/core/workshops/blog/ko/blogs.html

Paperbits core components.

<div class="flex flex-column fit">
    <div class="flex-item form">
        <div class="form-group">
            <input class="form-control" type="search" data-bind="textInput: searchPattern, focus: true" placeholder="Search blog posts..." aria-label="Search blog posts" />
        </div>
    </div>

    <!-- ko if: !working() && blogPosts().length === 0 -->

    <!-- ko if: searchPattern() === "" -->
    <p class="flex-item flex-item-grow text-center">It seems that you don't have blog posts yet. Would you like to
        <a href="#" class="btn-link" data-bind="click: addBlogPost">create one</a>?
    </p>
    <!-- /ko -->

    <!-- ko if: searchPattern() !== ""  -->
    <p class="flex-item flex-item-grow text-center">Could not find anything. Try to change search criteria.</p>
    <!-- /ko -->

    <!-- /ko -->

    <!--ko if: $component.working()-->
    <spinner></spinner>
    <!--/ko-->

    <div class="flex-item flex-item-grow list" data-bind="foreach: blogPosts, scrollable: true">
        <div tabindex="0" class="list-item" data-bind="css: { selected: hasFocus }, click: $parent.selectBlogPost, hasFocus: hasFocus">
            <i aria-hidden="true" class="paperbits-icon paperbits-chat-45-2"></i>
            <span data-bind="text: title"></span>
        </div>
    </div>

    <div class="flex-item btn-group">
        <button class="btn btn-default" data-bind="click: addBlogPost">
            <i aria-hidden="true" class="paperbits-icon paperbits-simple-add"></i>
            Add blog post
        </button>
    </div>
</div>