diff --git a/docs/src/pages/components/Input.vue b/docs/src/pages/components/Input.vue index afeb102..f78dd68 100644 --- a/docs/src/pages/components/Input.vue +++ b/docs/src/pages/components/Input.vue @@ -30,6 +30,22 @@ + + + + + Name + Description + + + + + + md-input-invalid + Set the error class + + + diff --git a/docs/src/pages/components/Subheader.vue b/docs/src/pages/components/Subheader.vue index 24893d2..02e0769 100644 --- a/docs/src/pages/components/Subheader.vue +++ b/docs/src/pages/components/Subheader.vue @@ -1,295 +1,318 @@ - - - - - - Navigation - - - move_to_inbox Inbox - - - - send Outbox - - - - delete Trash - - - - error Spam - - - - - Contacts - - - - - - - Abbey Christansen - - - chat_bubble - - - - - - - - - Alex Nelson - - - chat_bubble - - - - - - - - - Mary Johnson - - - chat_bubble - - - - - - - - Today - - - - - - - - Ali Connors - Brunch this weekend? - I'll be in your neighborhood doing errands... - - - - star - - - - - - - - - - - - me, Scott, Jennifer - Summer BBQ - Wish I could come, but I'm out of town ... - - - - star_border - - - - - - - - - - - - Sandra Adams - Oui oui - Do you have Paris recommendations ... - - - - star_border - - - - - - - - - - - - Trevor Hansen - Order confirmation - Thank you for your recent order from ... - - - - star_border - - - - - - - - - - - - -<md-list> - <md-subheader>Navigation</md-subheader> - - <md-list-item> - <md-icon>move_to_inbox</md-icon> <span>Inbox</span> - </md-list-item> - - <md-list-item> - <md-icon>send</md-icon> <span>Outbox</span> - </md-list-item> - - <md-list-item> - <md-icon>delete</md-icon> <span>Trash</span> - </md-list-item> - - <md-list-item> - <md-icon>error</md-icon> <span>Spam</span> - - <md-divider class="md-inset"></md-divider> - </md-list-item> - - <md-subheader>Contacts</md-subheader> - - <md-list-item> - <md-avatar> - <img src="https://placeimg.com/40/40/people/5" alt="People"> - </md-avatar> - - <span>Abbey Christansen</span> - - <md-button class="md-icon-button md-list-action"> - <md-icon class="md-primary">chat_bubble</md-icon> - </md-button> - </md-list-item> - - <md-list-item> - <md-avatar> - <img src="https://placeimg.com/40/40/people/1" alt="People"> - </md-avatar> - - <span>Alex Nelson</span> - - <md-button class="md-icon-button md-list-action"> - <md-icon class="md-primary">chat_bubble</md-icon> - </md-button> - </md-list-item> - - <md-list-item> - <md-avatar> - <img src="https://placeimg.com/40/40/people/6" alt="People"> - </md-avatar> - - <span>Mary Johnson</span> - - <md-button class="md-icon-button md-list-action"> - <md-icon>chat_bubble</md-icon> - </md-button> - </md-list-item> -</md-list> - - - -<md-list class="custom-list md-triple-line"> - <md-subheader>Today</md-subheader> - - <md-list-item> - <md-avatar> - <img src="https://placeimg.com/40/40/people/1" alt="People"> - </md-avatar> - - <div class="md-list-text-container"> - <span>Ali Connors</span> - <span>Brunch this weekend?</span> - <p>I'll be in your neighborhood doing errands...</p> - </div> - - <md-button class="md-icon-button md-list-action"> - <md-icon class="md-primary">star</md-icon> - </md-button> - - <md-divider class="md-inset"></md-divider> - </md-list-item> - - <md-list-item> - <md-avatar> - <img src="https://placeimg.com/40/40/people/6" alt="People"> - </md-avatar> - - <div class="md-list-text-container"> - <span>me, Scott, Jennifer</span> - <span>Summer BBQ</span> - <p>Wish I could come, but I'm out of town ...</p> - </div> - - <md-button class="md-icon-button md-list-action"> - <md-icon>star_border</md-icon> - </md-button> - - <md-divider class="md-inset"></md-divider> - </md-list-item> - - <md-list-item> - <md-avatar> - <img src="https://placeimg.com/40/40/people/5" alt="People"> - </md-avatar> - - <div class="md-list-text-container"> - <span>Sandra Adams</span> - <span>Oui oui</span> - <p>Do you have Paris recommendations ...</p> - </div> - - <md-button class="md-icon-button md-list-action"> - <md-icon>star_border</md-icon> - </md-button> - - <md-divider class="md-inset"></md-divider> - </md-list-item> - - <md-list-item> - <md-avatar> - <img src="https://placeimg.com/40/40/people/8" alt="People"> - </md-avatar> - - <div class="md-list-text-container"> - <span>Trevor Hansen</span> - <span>Order confirmation</span> - <p>Thank you for your recent order from ...</p> - </div> - - <md-button class="md-icon-button md-list-action"> - <md-icon>star_border</md-icon> - </md-button> - - <md-divider class="md-inset"></md-divider> - </md-list-item> -</md-list> - - - - - - - - + + + + Subheaders may be displayed inline with tiles or associated with content. They are typically related to filtering or sorting criteria. + + + + + + + + Name + Description + + + + + + md-inset + Add a padding to the left of the subheader to follow inset lists + + + + + + + + + + + Navigation + + + move_to_inbox Inbox + + + + send Outbox + + + + delete Trash + + + + error Spam + + + + + Contacts + + + + + + + Abbey Christansen + + + chat_bubble + + + + + + + + + Alex Nelson + + + chat_bubble + + + + + + + + + Mary Johnson + + + chat_bubble + + + + + + + + Today + + + + + + + + Ali Connors + Brunch this weekend? + I'll be in your neighborhood doing errands... + + + + star + + + + + + + + + + + + me, Scott, Jennifer + Summer BBQ + Wish I could come, but I'm out of town ... + + + + star_border + + + + + + + + + + + + Sandra Adams + Oui oui + Do you have Paris recommendations ... + + + + star_border + + + + + + + + + + + + Trevor Hansen + Order confirmation + Thank you for your recent order from ... + + + + star_border + + + + + + + + + + + <div class="phone-viewport"> + <md-list> + <md-subheader>Navigation</md-subheader> + + <md-list-item> + <md-icon>move_to_inbox</md-icon> <span>Inbox</span> + </md-list-item> + + <md-list-item> + <md-icon>send</md-icon> <span>Outbox</span> + </md-list-item> + + <md-list-item> + <md-icon>delete</md-icon> <span>Trash</span> + </md-list-item> + + <md-list-item> + <md-icon>error</md-icon> <span>Spam</span> + + <md-divider class="md-inset"></md-divider> + </md-list-item> + + <md-subheader>Contacts</md-subheader> + + <md-list-item> + <md-avatar> + <img src="assets/avatar-2.jpg" alt="People"> + </md-avatar> + + <span>Abbey Christansen</span> + + <md-button class="md-icon-button md-list-action"> + <md-icon class="md-primary">chat_bubble</md-icon> + </md-button> + </md-list-item> + + <md-list-item> + <md-avatar> + <img src="assets/avatar-2.jpg" alt="People"> + </md-avatar> + + <span>Alex Nelson</span> + + <md-button class="md-icon-button md-list-action"> + <md-icon class="md-primary">chat_bubble</md-icon> + </md-button> + </md-list-item> + + <md-list-item> + <md-avatar> + <img src="assets/avatar-2.jpg" alt="People"> + </md-avatar> + + <span>Mary Johnson</span> + + <md-button class="md-icon-button md-list-action"> + <md-icon>chat_bubble</md-icon> + </md-button> + </md-list-item> + </md-list> + </div> + + <div class="phone-viewport"> + <md-list class="custom-list md-triple-line"> + <md-subheader class="md-inset">Today</md-subheader> + + <md-list-item> + <md-avatar> + <img src="assets/avatar-2.jpg" alt="People"> + </md-avatar> + + <div class="md-list-text-container"> + <span>Ali Connors</span> + <span>Brunch this weekend?</span> + <p>I'll be in your neighborhood doing errands...</p> + </div> + + <md-button class="md-icon-button md-list-action"> + <md-icon class="md-primary">star</md-icon> + </md-button> + + <md-divider class="md-inset"></md-divider> + </md-list-item> + + <md-list-item> + <md-avatar> + <img src="assets/avatar-2.jpg" alt="People"> + </md-avatar> + + <div class="md-list-text-container"> + <span>me, Scott, Jennifer</span> + <span>Summer BBQ</span> + <p>Wish I could come, but I'm out of town ...</p> + </div> + + <md-button class="md-icon-button md-list-action"> + <md-icon>star_border</md-icon> + </md-button> + + <md-divider class="md-inset"></md-divider> + </md-list-item> + + <md-list-item> + <md-avatar> + <img src="assets/avatar-2.jpg" alt="People"> + </md-avatar> + + <div class="md-list-text-container"> + <span>Sandra Adams</span> + <span>Oui oui</span> + <p>Do you have Paris recommendations ...</p> + </div> + + <md-button class="md-icon-button md-list-action"> + <md-icon>star_border</md-icon> + </md-button> + + <md-divider class="md-inset"></md-divider> + </md-list-item> + + <md-list-item> + <md-avatar> + <img src="assets/avatar-2.jpg" alt="People"> + </md-avatar> + + <div class="md-list-text-container"> + <span>Trevor Hansen</span> + <span>Order confirmation</span> + <p>Thank you for your recent order from ...</p> + </div> + + <md-button class="md-icon-button md-list-action"> + <md-icon>star_border</md-icon> + </md-button> + + <md-divider class="md-inset"></md-divider> + </md-list-item> + </md-list> + </div> + + + + + +
I'll be in your neighborhood doing errands...
Wish I could come, but I'm out of town ...
Do you have Paris recommendations ...
Thank you for your recent order from ...
Subheaders may be displayed inline with tiles or associated with content. They are typically related to filtering or sorting criteria.