pip-webui/pip-webui-controls/cordova/www/markdown_sample/markdown.html

HTML5 UI for LOB applications

<div>
    <h2 class="text-title tm0 bm24">Markdown {{:: 'SAMPLE' | translate }}:</h2>
    <h3 class="text-subhead2">{{ 'COMMON' | translate }} {{ 'SAMPLE' | translate }}:</h3>

    <textarea class="w-stretch bm24" placeholder="Enter text..." ng-model="data.text" rows="22">
    </textarea>

    <pip-markdown pip-text="data.text" pip-rebind="true">
    </pip-markdown>

    <h3 class="text-subhead2">{{:: 'CODE' | translate}}</h3>
    <pre class="text-body1 color-window-bg p16">
                &lt;<strong>pip-markdown</strong> pip-text="data.text" pip-rebind="true"&gt;
                &lt;/<strong>pip-markdown</strong>&gt;
    </pre>

    <md-divider class="tm8 pip-list-divider"></md-divider>

    <h3 class="text-subhead2">{{ 'EXAMPLES_LIMITED_LINES' | translate }}:</h3>

    <textarea class="w-stretch bm24" placeholder="Enter text..." ng-model="data.text2" rows="8">
    </textarea>
    <div flex layout="row">
        <div flex>
            <h3 class="text-subhead2">5 {{ 'LINES' | translate }}:</h3>
            <pip-markdown pip-text="data.text2" pip-rebind="true" pip-line-count="5">
            </pip-markdown>
        </div>
        <div flex>
            <h3 class="text-subhead2">2 {{ 'LINES' | translate }}:</h3>
            <pip-markdown pip-text="data.text2" pip-rebind="true" pip-line-count="2">
            </pip-markdown>
        </div>
        <div flex>
            <h3 class="text-subhead2">1 {{ 'LINE' | translate }}:</h3>
            <pip-markdown pip-text="data.text2" pip-rebind="true" pip-line-count="1">
            </pip-markdown>
        </div>
    </div>
    <h3 class="text-subhead2">{{:: 'CODE' | translate}}</h3>
    <pre class="text-body1 color-window-bg p16">
        &lt;div flex layout="row"&gt;
            &lt;div flex&gt;
                &lt;h3 class="text-subhead2"&gt;5 {{ 'LINES' | translate }}:&lt;/h3&gt;
                &lt;<strong>pip-markdown pip-text="data.text2" pip-rebind="true" pip-line-count="5"</strong>&gt;
                &lt;/<strong>pip-markdown</strong>&gt;
            &lt;/div&gt;
            &lt;div flex&gt;
                &lt;h3 class="text-subhead2"&gt;2 {{ 'LINES' | translate }}:&lt;/h3&gt;
                &lt;<strong>pip-markdown pip-text="data.text2" pip-rebind="true" pip-line-count="2"</strong>&gt;
                &lt;/<strong>pip-markdown</strong>&gt;
            &lt;/div&gt;
            &lt;div flex&gt;
                &lt;h3 class="text-subhead2"&gt;1 {{ 'LINE' | translate }}:&lt;/h3&gt;
                &lt;<strong>pip-markdown pip-text="data.text2" pip-rebind="true" pip-line-count="1"</strong>&gt;
                &lt;/<strong>pip-markdown</strong>&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    </pre>
    <md-divider class="tm8 pip-list-divider"></md-divider>

    <h3 class="text-subhead2">{{ 'SAMPLE' | translate }} {{ 'IN' | translate }} md-list:</h3>

    <md-list class="pip-menu markdown-sample-list pip-ref-list">

        <md-list-item class="pip-ref-list-item lp16" md-ink-ripple
                      layout="row" layout-align="start start">

            <img src="http://thumbs.dreamstime.com/z/profile-icon-male-avatar-portrait-casual-person-silhouette-face-flat-design-vector-46846325.jpg"
                 class="pip-pic">

            <div class="pip-content">
                <div layout="row" layout-align="space-between start">
                    <div flex>
                        <p class="pip-title">{{item.title}} </p>

                    <span class="pip-subtitle">
                        {{item.time}}
                    </span>
                    </div>

                    <md-chip class="pip-type-chip pip-type-chip-right md-chip">
                        <div class="pip-text">INFO</div>
                    </md-chip>
                </div>

                <p class="pip-text-bold" ng-if="item.parent">{{item.parent}}</p>

                <pip-markdown pip-text="item.text" pip-list="true" pip-line-count="1"></pip-markdown>

            </div>
        </md-list-item>

        <md-list-item class="pip-ref-list-item lp16" md-ink-ripple
                      layout="row" layout-align="start start">

            <img src="http://thumbs.dreamstime.com/z/businesswoman-profile-icon-female-portrait-flat-design-vector-illustration-47075248.jpg"
                 class="pip-pic">

            <div class="pip-content">
                <div layout="row" layout-align="space-between start">
                    <div class="rm8 line-height-string" flex>
                        <p class="pip-title">{{item.title}} </p>

                    <span class="pip-subtitle">
                        {{item.time}}
                    </span>
                    </div>


                </div>

                <p class="pip-text-bold" ng-if="item.parent">{{item.parent}}</p>

                <pip-markdown pip-text="item.text" pip-list="true" pip-line-count="1"></pip-markdown>

            </div>
        </md-list-item>

        <md-list-item class="pip-ref-list-item lp16" md-ink-ripple
                      layout="row" layout-align="start start">

            <img src="http://thumbs.dreamstime.com/z/profile-icon-male-avatar-portrait-casual-person-silhouette-face-flat-design-vector-47075239.jpg"
                 class="pip-pic">

            <div class="pip-content">
                <p class="pip-title">{{item2.title}} </p>

                <span class="pip-subtitle">{{item2.time}}</span>

                <pip-markdown pip-text="item2.text" pip-list="true" pip-line-count="2"></pip-markdown>

            </div>
        </md-list-item>

    </md-list>

    <h3 class="text-subhead2">{{:: 'CODE' | translate}}</h3>
    <pre class="text-body1 color-window-bg p16">
        &lt;md-list&gt;
            &lt;md-list-item class="pip-ref-list-item lp16" md-ink-ripple
                layout="row" layout-align="start start"&gt;
                &lt;img src="http://any_source.jpg"
                     class="pip-pic"&gt;
                &lt;div class="pip-content"&gt;
                    &lt;p class="pip-title"&gt;{{item2.title}} &lt;/p&gt;
                    &lt;span class="pip-subtitle"&gt;{{item2.time}}&lt;/span&gt;
                    &lt;<strong>pip-markdown pip-text="item2.text" pip-list="true" pip-line-count="2"</strong>&gt;
                    &lt;/<strong>pip-markdown</strong>&gt;
                &lt;/div&gt;
            &lt;/md-list-item&gt;
        &lt;/md-list&gt;
    </pre>

    <md-divider class="tm8 pip-list-divider"></md-divider>

    <h3 class="text-subhead2">{{ 'INTERACTIVE' | translate }} {{ 'SAMPLE' | translate }} {{ 'IN' | translate }} md-list:</h3>
    <p>{{ 'CHANGE_TEXT' | translate }}: </p>
    <textarea class="w-stretch bm24" placeholder="Enter text..." ng-model="item3.text" rows="6">
    </textarea>
    <md-list class="pip-menu markdown-sample-list pip-ref-list">
        <md-list-item class="pip-ref-list-item lp16" md-ink-ripple
                      layout="row" layout-align="start start">

            <img src="http://thumbs.dreamstime.com/z/profile-icon-male-avatar-portrait-casual-person-silhouette-face-flat-design-vector-47075239.jpg"
                 class="pip-pic">

            <div class="pip-content">
                <p class="pip-title">{{item3.title}} </p>

                <span class="pip-subtitle">{{item3.time}}</span>

                <pip-markdown pip-text="item3.text" pip-rebind="true" pip-list="true" pip-line-count="1"></pip-markdown>

            </div>
        </md-list-item>
    </md-list>

    <md-divider class="tm8 pip-list-divider"></md-divider>

    <h3 class="text-subhead2">{{ 'SAMPLE_WITH_ATTACHMENTS' | translate }}</h3>
    <md-list class="pip-menu markdown-sample-list pip-ref-list">
        <md-list-item class="pip-ref-list-item lp16" md-ink-ripple
                      layout="row" layout-align="start start">

            <div class="pip-content">
                <p class="pip-title"></p>

                <span class="pip-subtitle">{{item3.time}}</span>

                <pip-markdown pip-text="data2.content" pip-rebind="true" pip-list="true"
                              pip-line-count="2"></pip-markdown>

            </div>
        </md-list-item>
    </md-list>
</div>