【问题标题】:teradata covalent td-menu-headerteradata 共价 td-menu-header
【发布时间】:2017-06-08 17:20:24
【问题描述】:

我一直在查看 https://teradata.github.io/covalent/ 提供的所有文档,但在 Teradata Covalent 快速入门中没有找到任何有关“td-menu-header”的文档。

这个 css 框架看起来很有趣,但是缺少文档——这将是一个很棒的“API”文档或开发者指南——让我们陷入了一个艰难的选择。

【问题讨论】:

    标签: material-design teradata-covalent


    【解决方案1】:

    我就是这样用的。代码示例位于 Teradata 快速入门项目中。

    <button md-icon-button mdTooltip="Profile" [mdMenuTriggerFor]="profileMenu"><md-icon class="md-24">person</md-icon></button>
        <md-menu #profileMenu="mdMenu">
            <td-menu>
                <div td-menu-header class="md-subhead">Profile</div>
                <div flex>
                    <md-list dense>
                        <!--<h3 md-subheader>Metadata</h3>-->
                        <md-list-item>
                            <md-icon md-list-avatar>location_on</md-icon>
                            <h2 md-line *ngIf='client.address!==""'><span class="text-wrap">{{client.address}}</span></h2>
                            <h2 md-line *ngIf='client.address===""'>--</h2>
                            <p md-line>Address</p>
                        </md-list-item>
                        <md-divider md-inset></md-divider>
                        <md-list-item>
                            <md-icon md-list-avatar>location_city</md-icon>
                            <h2 md-line>{{client.city}}, {{client.state}}-{{client.zip}}</h2>
                            <p md-line>City,State-Zip</p>
                        </md-list-item>
                        <md-divider md-inset></md-divider>
                        <md-list-item>
                            <md-icon md-list-avatar>flag</md-icon>
                            <h2 md-line>{{client.country}}</h2>
                            <p md-line>Country</p>
                        </md-list-item>
                        <md-list-item>
                            <md-icon md-list-avatar>call</md-icon>
                            <h2 md-line>{{client.phone}}</h2>
                            <p md-line>Primary Phone</p>
                        </md-list-item>
                        <md-divider md-inset></md-divider>
                        <md-list-item *ngIf='client.phone2!==""'>
                            <md-icon md-list-avatar>call</md-icon>
                            <h2 md-line>{{client.phone2}}</h2>
                            <p md-line>Secondary Phone</p>
                        </md-list-item>
                        <md-divider md-inset *ngIf='client.phone2!==""'></md-divider>
                        <md-list-item>
                            <md-icon md-list-avatar>email</md-icon>
                            <h1 md-line><span class="text-wrap">{{client.email}}</span></h1>
                            <!--<h1 md-line></h1>-->
                            <p md-line>Primary Email {{client.email2}}
                            </p>
                        </md-list-item>
                        <md-divider md-inset></md-divider>
                        <md-list-item *ngIf='client.email2!==""'>
                            <md-icon md-list-avatar>email</md-icon>
                            <h1 md-line><span class="text-wrap">{{client.email2}}</span></h1>
                            <!--<h1 md-line></h1>-->
                            <p md-line>Secondary Email
                            </p>
                        </md-list-item>
                        <md-divider md-inset *ngIf='client.email2!==""'></md-divider>
                        <md-list-item>
                            <md-icon md-list-avatar>print</md-icon>
                            <h2 md-line *ngIf='client.fax!==""'>{{client.fax}}</h2>
                            <h2 md-line *ngIf='client.fax===""'>--</h2>
                            <p md-line>Fax</p>
                        </md-list-item>
                    </md-list>
                </div>
            </td-menu>
        </md-menu>
    

    【讨论】:

    • 感谢 Ankur。我也在 Github 的 Quick Start 项目中注意到了这个标签。但是知道这个标签的所有选项和行为不是很好吗?
    • 是的。可以在 Github 上挖掘源代码以找到它们,但同样,其网络上的实际文档不完整,甚至不准确。只是一个评论。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2018-07-20
    • 2018-08-17
    • 1970-01-01
    • 2018-05-24
    • 1970-01-01
    • 2015-01-31
    • 1970-01-01
    相关资源
    最近更新 更多