Skip to content
This repository has been archived by the owner on Jan 13, 2025. It is now read-only.

Commit

Permalink
fix(list): Support ellipsis the single line list item
Browse files Browse the repository at this point in the history
  • Loading branch information
@williamernest
williamernest committed Aug 28, 2018
1 parent 8b80f1c commit a536d33
Show file tree
Hide file tree
Showing 13 changed files with 1,569 additions and 972 deletions.
66 changes: 55 additions & 11 deletions demos/dialog.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -149,17 +149,61 @@ <h2 id="mdc-dialog-with-list-label" class="mdc-dialog__header__title">
</header>
<section id="mdc-dialog-with-list-description" class="mdc-dialog__body mdc-dialog__body--scrollable">
<ul class="mdc-list">
<li class="mdc-list-item">None</li>
<li class="mdc-list-item">Callisto</li>
<li class="mdc-list-item">Ganymede</li>
<li class="mdc-list-item">Luna</li>
<li class="mdc-list-item">Marimba</li>
<li class="mdc-list-item">Schwifty</li>
<li class="mdc-list-item">Callisto</li>
<li class="mdc-list-item">Ganymede</li>
<li class="mdc-list-item">Luna</li>
<li class="mdc-list-item">Marimba</li>
<li class="mdc-list-item">Schwifty</li>
<li class="mdc-list-item">
<span class="mdc-list-item__text">
None
</span>
</li>
<li class="mdc-list-item">
<span class="mdc-list-item__text">
Callisto
</span>
</li>
<li class="mdc-list-item">
<span class="mdc-list-item__text">
Ganymede
</span>
</li>
<li class="mdc-list-item">
<span class="mdc-list-item__text">
Luna
</span>
</li>
<li class="mdc-list-item">
<span class="mdc-list-item__text">
Marimba
</span>
</li>
<li class="mdc-list-item">
<span class="mdc-list-item__text">
Schwifty
</span>
</li>
<li class="mdc-list-item">
<span class="mdc-list-item__text">
Callisto
</span>
</li>
<li class="mdc-list-item">
<span class="mdc-list-item__text">
Ganymede
</span>
</li>
<li class="mdc-list-item">
<span class="mdc-list-item__text">
Luna
</span>
</li>
<li class="mdc-list-item">
<span class="mdc-list-item__text">
Marimba
</span>
</li>
<li class="mdc-list-item">
<span class="mdc-list-item__text">
Schwifty
</span>
</li>
</ul>
</section>
<footer class="mdc-dialog__footer">
Expand Down
36 changes: 27 additions & 9 deletions demos/drawer/dismissible-drawer.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,44 +43,62 @@ <h6 class="mdc-drawer__subtitle">[email protected]</h6>
<nav class="mdc-list">
<a class="mdc-list-item mdc-list-item--activated" href="#" aria-selected="true" tabindex="0">
<i class="material-icons mdc-list-item__graphic" aria-hidden="true">inbox</i>
Inbox
<span class="mdc-list-item__text">
Inbox
</span>
</a>
<a class="mdc-list-item" href="#">
<i class="material-icons mdc-list-item__graphic" aria-hidden="true">star</i>
Star
<span class="mdc-list-item__text">
Star
</span>
</a>
<a class="mdc-list-item" href="#">
<i class="material-icons mdc-list-item__graphic" aria-hidden="true">send</i>
Sent Mail
<span class="mdc-list-item__text">
Sent Mail
</span>
</a>
<a class="mdc-list-item" href="#">
<i class="material-icons mdc-list-item__graphic" aria-hidden="true">drafts</i>
Drafts
<span class="mdc-list-item__text">
Drafts
</span>
</a>

<hr class="mdc-list-divider">
<h6 class="mdc-list-group__subheader">Labels</h6>
<a class="mdc-list-item" href="#">
<i class="material-icons mdc-list-item__graphic" aria-hidden="true">bookmark</i>
Family
<span class="mdc-list-item__text">
Family
</span>
</a>
<a class="mdc-list-item" href="#">
<i class="material-icons mdc-list-item__graphic" aria-hidden="true">bookmark</i>
Friends
<span class="mdc-list-item__text">
Friends
</span>
</a>
<a class="mdc-list-item" href="#">
<i class="material-icons mdc-list-item__graphic" aria-hidden="true">bookmark</i>
Work
<span class="mdc-list-item__text">
Work
</span>
</a>

<hr class="mdc-list-divider">
<a class="mdc-list-item" href="#">
<i class="material-icons mdc-list-item__graphic" aria-hidden="true">settings</i>
Settings
<span class="mdc-list-item__text">
Settings
</span>
</a>
<a class="mdc-list-item" href="#">
<i class="material-icons mdc-list-item__graphic" aria-hidden="true">announcement</i>
Help & feedback
<span class="mdc-list-item__text">
Help & feedback
</span>
</a>
</nav>
</div>
Expand Down
36 changes: 27 additions & 9 deletions demos/drawer/modal-drawer.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,44 +43,62 @@ <h6 class="mdc-drawer__subtitle">[email protected]</h6>
<nav class="mdc-list">
<a class="mdc-list-item mdc-list-item--activated" href="#" tabindex="0">
<i class="material-icons mdc-list-item__graphic" aria-hidden="true">inbox</i>
Inbox
<span class="mdc-list-item__text">
Inbox
</span>
</a>
<a class="mdc-list-item" href="#">
<i class="material-icons mdc-list-item__graphic" aria-hidden="true">star</i>
Star
<span class="mdc-list-item__text">
Star
</span>
</a>
<a class="mdc-list-item" href="#">
<i class="material-icons mdc-list-item__graphic" aria-hidden="true">send</i>
Sent Mail
<span class="mdc-list-item__text">
Sent Mail
</span>
</a>
<a class="mdc-list-item" href="#">
<i class="material-icons mdc-list-item__graphic" aria-hidden="true">drafts</i>
Drafts
<span class="mdc-list-item__text">
Drafts
</span>
</a>

<hr class="mdc-list-divider">
<h6 class="mdc-list-group__subheader">Labels</h6>
<a class="mdc-list-item" href="#">
<i class="material-icons mdc-list-item__graphic" aria-hidden="true">bookmark</i>
Family
<span class="mdc-list-item__text">
Family
</span>
</a>
<a class="mdc-list-item" href="#">
<i class="material-icons mdc-list-item__graphic" aria-hidden="true">bookmark</i>
Friends
<span class="mdc-list-item__text">
Friends
</span>
</a>
<a class="mdc-list-item" href="#">
<i class="material-icons mdc-list-item__graphic" aria-hidden="true">bookmark</i>
Work
<span class="mdc-list-item__text">
Work
</span>
</a>

<hr class="mdc-list-divider">
<a class="mdc-list-item" href="#">
<i class="material-icons mdc-list-item__graphic" aria-hidden="true">settings</i>
Settings
<span class="mdc-list-item__text">
Settings
</span>
</a>
<a class="mdc-list-item" href="#">
<i class="material-icons mdc-list-item__graphic" aria-hidden="true">announcement</i>
Help & feedback
<span class="mdc-list-item__text">
Help & feedback
</span>
</a>
</nav>
</div>
Expand Down
45 changes: 36 additions & 9 deletions demos/drawer/permanent-drawer.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,36 +42,63 @@ <h6 class="mdc-drawer__subtitle">[email protected]</h6>
<div class="mdc-drawer__content">
<nav class="mdc-list">
<a class="mdc-list-item mdc-list-item--activated" href="#" aria-selected="true" tabindex="0">
<i class="material-icons mdc-list-item__graphic" aria-hidden="true">inbox</i>Inbox
<i class="material-icons mdc-list-item__graphic" aria-hidden="true">inbox</i>
<span class="mdc-list-item__text">
Inbox
</span>
</a>
<a class="mdc-list-item" href="#">
<i class="material-icons mdc-list-item__graphic" aria-hidden="true">star</i>Star
<i class="material-icons mdc-list-item__graphic" aria-hidden="true">star</i>
<span class="mdc-list-item__text">
Star
</span>
</a>
<a class="mdc-list-item" href="#">
<i class="material-icons mdc-list-item__graphic" aria-hidden="true">send</i>Sent Mail
<i class="material-icons mdc-list-item__graphic" aria-hidden="true">send</i>
<span class="mdc-list-item__text">
Sent Mail
</span>
</a>
<a class="mdc-list-item" href="#">
<i class="material-icons mdc-list-item__graphic" aria-hidden="true">drafts</i>Drafts
<i class="material-icons mdc-list-item__graphic" aria-hidden="true">drafts</i>
<span class="mdc-list-item__text">
Drafts
</span>
</a>

<hr class="mdc-list-divider">
<h6 class="mdc-list-group__subheader">Labels</h6>
<a class="mdc-list-item" href="#">
<i class="material-icons mdc-list-item__graphic" aria-hidden="true">bookmark</i>Family
<i class="material-icons mdc-list-item__graphic" aria-hidden="true">bookmark</i>
<span class="mdc-list-item__text">
Family
</span>
</a>
<a class="mdc-list-item" href="#">
<i class="material-icons mdc-list-item__graphic" aria-hidden="true">bookmark</i>Friends
<i class="material-icons mdc-list-item__graphic" aria-hidden="true">bookmark</i>
<span class="mdc-list-item__text">
Friends
</span>
</a>
<a class="mdc-list-item" href="#">
<i class="material-icons mdc-list-item__graphic" aria-hidden="true">bookmark</i>Work
<i class="material-icons mdc-list-item__graphic" aria-hidden="true">bookmark</i>
<span class="mdc-list-item__text">
Work
</span>
</a>

<hr class="mdc-list-divider">
<a class="mdc-list-item" href="#">
<i class="material-icons mdc-list-item__graphic" aria-hidden="true">settings</i>Settings
<i class="material-icons mdc-list-item__graphic" aria-hidden="true">settings</i>
<span class="mdc-list-item__text">
Settings
</span>
</a>
<a class="mdc-list-item" href="#">
<i class="material-icons mdc-list-item__graphic" aria-hidden="true">announcement</i>Help & feedback
<i class="material-icons mdc-list-item__graphic" aria-hidden="true">announcement</i>
<span class="mdc-list-item__text">
Help & feedback
</span>
</a>
</nav>
</div>
Expand Down
Loading

0 comments on commit a536d33

Please sign in to comment.