pip-webui/pip-webui-controls/samples/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>

    <pre class="color-window-bg p16">
<h3 class="text-subhead2 m0">{{:: 'CODE' | translate}}</h3>
<code class="language-markup">&lt;pip-markdown pip-text="data.text" pip-rebind="true"&gt;
&lt;/pip-markdown&gt;</code>
    </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 class="flex layout-row">
        <div class="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 class="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 class="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>
    <pre class="text-body1 color-window-bg p16">
<h3 class="text-subhead2 m0">{{:: 'CODE' | translate}}</h3>
<code class="language-markup">&lt;div class="flex layout-row"&gt;
    &lt;div class="flex"&gt;
        &lt;h3 class="text-subhead2"&gt;5 {{:: 'LINES' | translate }}:&lt;/h3&gt;
        &lt;pip-markdown pip-text="data.text2" pip-rebind="true" pip-line-count="5"&gt;
        &lt;/pip-markdown&gt;
    &lt;/div&gt;
    &lt;div flex&gt;
        &lt;h3 class="text-subhead2"&gt;2 {{:: 'LINES' | translate }}:&lt;/h3&gt;
        &lt;pip-markdown pip-text="data.text2" pip-rebind="true" pip-line-count="2"&gt;
        &lt;/pip-markdown&gt;
    &lt;/div&gt;
    &lt;div flex&gt;
        &lt;h3 class="text-subhead2"&gt;1 {{:: 'LINE' | translate }}:&lt;/h3&gt;
        &lt;pip-markdown pip-text="data.text2" pip-rebind="true" pip-line-count="1"&gt;
        &lt;/pip-markdown&gt;
    &lt;/div&gt;
&lt;/div&gt;</code>
    </pre>
    <md-divider class="tm8 pip-list-divider"></md-divider>

    <h3 class="text-subhead2">{{:: 'SAMPLE_CAPITAL' | 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 layout-row layout-align-start-start" md-ink-ripple>

            <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 class="layout-row layout-align-space-between-start">
                    <div class="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 layout-row layout-align-start-start" md-ink-ripple>

            <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 class="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 layout-row layout-align-start-start"
                      md-ink-ripple>

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

    <pre class="text-body1 color-window-bg p16">
<h3 class="text-subhead2 m0">{{:: 'CODE' | translate}}</h3>
<code class="language-markup">&lt;md-list&gt;
    &lt;md-list-item class="pip-ref-list-item lp16 layout-row layout-align-start-start" md-ink-ripple&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;pip-markdown pip-text="item2.text" pip-list="true" pip-line-count="2"&gt;
            &lt;/pip-markdown&gt;
        &lt;/div&gt;
    &lt;/md-list-item&gt;
&lt;/md-list&gt;</code>
    </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 layout-row layout-align-start-start" md-ink-ripple>

            <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 layout-row layout-align-start-start" md-ink-ripple>

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