Skip to content

Commit

Permalink
fix: add camelCase ng-content selectors (#5953)
Browse files Browse the repository at this point in the history
* fix: add camelCase ng-content selectors

* change list.md
  • Loading branch information
andrewseguin authored Jul 28, 2017
1 parent 53e3fd9 commit f52c7f4
Show file tree
Hide file tree
Showing 5 changed files with 36 additions and 30 deletions.
2 changes: 1 addition & 1 deletion src/lib/card/card-header.html
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<ng-content select="[md-card-avatar], [mat-card-avatar]"></ng-content>
<ng-content select="[md-card-avatar], [mat-card-avatar], [mdCardAvatar], [matCardAvatar]"></ng-content>
<div class="mat-card-header-text">
<ng-content
select="md-card-title, mat-card-title, md-card-subtitle, mat-card-subtitle,
Expand Down
4 changes: 2 additions & 2 deletions src/lib/grid-list/grid-tile-text.html
Original file line number Diff line number Diff line change
@@ -1,3 +1,3 @@
<ng-content select="[md-grid-avatar], [mat-grid-avatar]"></ng-content>
<div class="mat-grid-list-text"><ng-content select="[md-line], [mat-line]"></ng-content></div>
<ng-content select="[md-grid-avatar], [mat-grid-avatar], [mdGridAvatar], [matGridAvatar]"></ng-content>
<div class="mat-grid-list-text"><ng-content select="[md-line], [mat-line], [mdLine], [matLine]"></ng-content></div>
<ng-content></ng-content>
10 changes: 8 additions & 2 deletions src/lib/list/list-item.html
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,13 @@
</div>

<ng-content
select="[md-list-avatar],[md-list-icon], [mat-list-avatar], [mat-list-icon]"></ng-content>
<div class="mat-list-text"><ng-content select="[md-line], [mat-line]"></ng-content></div>
select="[md-list-avatar], [md-list-icon], [mat-list-avatar], [mat-list-icon],
[mdListAvatar], [mdListIcon], [matListAvatar], [matListIcon]">
</ng-content>

<div class="mat-list-text">
<ng-content select="[md-line], [mat-line], [mdLine], [matLine]"></ng-content>
</div>

<ng-content></ng-content>
</div>
48 changes: 24 additions & 24 deletions src/lib/list/list.md
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@ element in an `<md-list-item>`.
```html
<md-nav-list>
<md-list-item *ngFor="let link of links">
<a md-line href="...">{{ link }}</a>
<a mdLine href="...">{{ link }}</a>
<button md-icon-button (click)="showInfo(link)">
<md-icon>info</md-icon>
</button>
Expand All @@ -43,16 +43,16 @@ element in an `<md-list-item>`.
```

### Multi-line lists
For lists that require multiple lines per item, annotate each line with an `md-line` attribute.
For lists that require multiple lines per item, annotate each line with an `mdLine` attribute.
Whichever heading tag is appropriate for your DOM hierarchy should be used (not necessarily `<h3>`
as shown in the example).

```html
<!-- two line list -->
<md-list>
<md-list-item *ngFor="let message of messages">
<h3 md-line> {{message.from}} </h3>
<p md-line>
<h3 mdLine> {{message.from}} </h3>
<p mdLine>
<span> {{message.subject}} </span>
<span class="demo-2"> -- {{message.content}} </span>
</p>
Expand All @@ -62,24 +62,24 @@ as shown in the example).
<!-- three line list -->
<md-list>
<md-list-item *ngFor="let message of messages">
<h3 md-line> {{message.from}} </h3>
<p md-line> {{message.subject}} </p>
<p md-line class="demo-2"> {{message.content}} </p>
<h3 mdLine> {{message.from}} </h3>
<p mdLine> {{message.subject}} </p>
<p mdLine class="demo-2"> {{message.content}} </p>
</md-list-item>
</md-list>
```

### Lists with icons

To add an icon to your list item, use the `md-list-icon` attribute.
To add an icon to your list item, use the `mdListIcon` attribute.


```html
<md-list>
<md-list-item *ngFor="let message of messages">
<md-icon md-list-icon>folder</md-icon>
<h3 md-line> {{message.from}} </h3>
<p md-line>
<md-icon mdListIcon>folder</md-icon>
<h3 mdLine> {{message.from}} </h3>
<p mdLine>
<span> {{message.subject}} </span>
<span class="demo-2"> -- {{message.content}} </span>
</p>
Expand All @@ -89,14 +89,14 @@ To add an icon to your list item, use the `md-list-icon` attribute.

### Lists with avatars

To include an avatar image, add an image tag with an `md-list-avatar` attribute.
To include an avatar image, add an image tag with an `mdListAvatar` attribute.

```html
<md-list>
<md-list-item *ngFor="let message of messages">
<img md-list-avatar src="..." alt="...">
<h3 md-line> {{message.from}} </h3>
<p md-line>
<img mdListAvatar src="..." alt="...">
<h3 mdLine> {{message.from}} </h3>
<p mdLine>
<span> {{message.subject}} </span>
<span class="demo-2"> -- {{message.content}} </span>
</p>
Expand All @@ -121,23 +121,23 @@ to the main `md-list` tag.

### Lists with multiple sections

Subheader can be added to a list by annotating a heading tag with an `md-subheader` attribute.
Subheader can be added to a list by annotating a heading tag with an `mdSubheader` attribute.
To add a divider, use `<md-divider>`.

```html
<md-list>
<h3 md-subheader>Folders</h3>
<h3 mdSubheader>Folders</h3>
<md-list-item *ngFor="let folder of folders">
<md-icon md-list-icon>folder</md-icon>
<h4 md-line>{{folder.name}}</h4>
<p md-line class="demo-2"> {{folder.updated}} </p>
<md-icon mdListIcon>folder</md-icon>
<h4 mdLine>{{folder.name}}</h4>
<p mdLine class="demo-2"> {{folder.updated}} </p>
</md-list-item>
<md-divider></md-divider>
<h3 md-subheader>Notes</h3>
<h3 mdSubheader>Notes</h3>
<md-list-item *ngFor="let note of notes">
<md-icon md-list-icon>note</md-icon>
<h4 md-line>{{note.name}}</h4>
<p md-line class="demo-2"> {{note.updated}} </p>
<md-icon mdListIcon>note</md-icon>
<h4 mdLine>{{note.name}}</h4>
<p mdLine class="demo-2"> {{note.updated}} </p>
</md-list-item>
</md-list>
```
2 changes: 1 addition & 1 deletion src/lib/list/list.ts
Original file line number Diff line number Diff line change
Expand Up @@ -108,7 +108,7 @@ export class MdListIconCssMatStyler {}
* @docs-private
*/
@Directive({
selector: '[md-subheader], [mat-subheader]',
selector: '[md-subheader], [mat-subheader], [mdSubheader], [matSubheader]',
host: {'class': 'mat-subheader'}
})
export class MdListSubheaderCssMatStyler {}
Expand Down

0 comments on commit f52c7f4

Please sign in to comment.