-
-
Notifications
You must be signed in to change notification settings - Fork 1.2k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(MdDrawer): create all kinds of drawers
- Loading branch information
1 parent
fb1c253
commit 53a9d98
Showing
9 changed files
with
504 additions
and
62 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
57 changes: 57 additions & 0 deletions
57
docs/app/pages/Components/Drawer/examples/PermanentCard.vue
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,57 @@ | ||
| <template> | ||
| <div class="page-container"> | ||
| <md-toolbar class="md-primary"> | ||
| <span class="md-title">My Title</span> | ||
| </md-toolbar> | ||
|
|
||
| <main class="page-wrapper md-layout-row"> | ||
| <md-drawer md-permanent="card"> | ||
| <md-list> | ||
| <md-list-item> | ||
| <md-icon>move_to_inbox</md-icon> | ||
| <span class="md-list-item-text">Inbox</span> | ||
| </md-list-item> | ||
|
|
||
| <md-list-item> | ||
| <md-icon>send</md-icon> | ||
| <span class="md-list-item-text">Sent Mail</span> | ||
| </md-list-item> | ||
|
|
||
| <md-list-item> | ||
| <md-icon>delete</md-icon> | ||
| <span class="md-list-item-text">Trash</span> | ||
| </md-list-item> | ||
|
|
||
| <md-list-item> | ||
| <md-icon>error</md-icon> | ||
| <span class="md-list-item-text">Spam</span> | ||
| </md-list-item> | ||
| </md-list> | ||
| </md-drawer> | ||
|
|
||
| <div class="page-content md-flex">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error quibusdam, non molestias et! Earum magnam, similique, quo recusandae placeat dicta asperiores modi sint ea repudiandae maxime? Quae non explicabo, neque.</div> | ||
| </main> | ||
| </div> | ||
| </template> | ||
|
|
||
| <style lang="scss" scoped> | ||
| .page-container { | ||
| border: 1px solid rgba(#000, .12); | ||
| } | ||
| // Demo purposes only | ||
| .md-drawer { | ||
| width: 230px; | ||
| max-width: calc(100vw - 125px); | ||
| } | ||
| .page-content { | ||
| padding: 16px 0; | ||
| } | ||
| </style> | ||
|
|
||
| <script> | ||
| export default { | ||
| name: 'PermanentCard' | ||
| } | ||
| </script> |
58 changes: 58 additions & 0 deletions
58
docs/app/pages/Components/Drawer/examples/PermanentClipped.vue
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,58 @@ | ||
| <template> | ||
| <div class="page-container"> | ||
| <md-toolbar class="md-primary"> | ||
| <span class="md-title">My Title</span> | ||
| </md-toolbar> | ||
|
|
||
| <main class="page-wrapper md-layout-row"> | ||
| <md-drawer md-permanent="clipped"> | ||
| <md-list> | ||
| <md-list-item> | ||
| <md-icon>move_to_inbox</md-icon> | ||
| <span class="md-list-item-text">Inbox</span> | ||
| </md-list-item> | ||
|
|
||
| <md-list-item> | ||
| <md-icon>send</md-icon> | ||
| <span class="md-list-item-text">Sent Mail</span> | ||
| </md-list-item> | ||
|
|
||
| <md-list-item> | ||
| <md-icon>delete</md-icon> | ||
| <span class="md-list-item-text">Trash</span> | ||
| </md-list-item> | ||
|
|
||
| <md-list-item> | ||
| <md-icon>error</md-icon> | ||
| <span class="md-list-item-text">Spam</span> | ||
| </md-list-item> | ||
| </md-list> | ||
| </md-drawer> | ||
|
|
||
| <div class="page-content md-flex">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error quibusdam, non molestias et! Earum magnam, similique, quo recusandae placeat dicta asperiores modi sint ea repudiandae maxime? Quae non explicabo, neque.</div> | ||
| </main> | ||
| </div> | ||
| </template> | ||
|
|
||
| <style lang="scss" scoped> | ||
| .page-container { | ||
| border: 1px solid rgba(#000, .12); | ||
| } | ||
| // Demo purposes only | ||
| .md-drawer { | ||
| width: 230px; | ||
| max-width: calc(100vw - 125px); | ||
| } | ||
| .page-content { | ||
| padding: 16px; | ||
| border-left: 1px solid rgba(#000, .12); | ||
| } | ||
| </style> | ||
|
|
||
| <script> | ||
| export default { | ||
| name: 'PermanentClipped' | ||
| } | ||
| </script> |
62 changes: 62 additions & 0 deletions
62
docs/app/pages/Components/Drawer/examples/PermanentFull.vue
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,62 @@ | ||
| <template> | ||
| <div class="page-container md-layout-row"> | ||
| <md-drawer md-permanent="full"> | ||
| <md-toolbar class="md-transparent" md-elevation="0"> | ||
| Navigation | ||
| </md-toolbar> | ||
|
|
||
| <md-list> | ||
| <md-list-item> | ||
| <md-icon>move_to_inbox</md-icon> | ||
| <span class="md-list-item-text">Inbox</span> | ||
| </md-list-item> | ||
|
|
||
| <md-list-item> | ||
| <md-icon>send</md-icon> | ||
| <span class="md-list-item-text">Sent Mail</span> | ||
| </md-list-item> | ||
|
|
||
| <md-list-item> | ||
| <md-icon>delete</md-icon> | ||
| <span class="md-list-item-text">Trash</span> | ||
| </md-list-item> | ||
|
|
||
| <md-list-item> | ||
| <md-icon>error</md-icon> | ||
| <span class="md-list-item-text">Spam</span> | ||
| </md-list-item> | ||
| </md-list> | ||
| </md-drawer> | ||
|
|
||
| <main class="page-wrapper md-flex md-layout-column"> | ||
| <md-toolbar class="md-primary"> | ||
| <span class="md-title">My Title</span> | ||
| </md-toolbar> | ||
|
|
||
| <div class="page-content md-flex">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error quibusdam, non molestias et! Earum magnam, similique, quo recusandae placeat dicta asperiores modi sint ea repudiandae maxime? Quae non explicabo, neque.</div> | ||
| </main> | ||
| </div> | ||
| </template> | ||
|
|
||
| <style lang="scss" scoped> | ||
| .page-container { | ||
| border: 1px solid rgba(#000, .12); | ||
| } | ||
| // Demo purposes only | ||
| .md-drawer { | ||
| width: 230px; | ||
| max-width: calc(100vw - 125px); | ||
| } | ||
| .page-content { | ||
| padding: 16px; | ||
| border-left: 1px solid rgba(#000, .12); | ||
| } | ||
| </style> | ||
|
|
||
| <script> | ||
| export default { | ||
| name: 'PermanentFull' | ||
| } | ||
| </script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,80 @@ | ||
| <template> | ||
| <div class="page-container md-layout-row"> | ||
| <md-drawer :md-visible.sync="menuVisible" md-persistent> | ||
| <md-toolbar class="md-transparent" md-elevation="0"> | ||
| <span>Navigation</span> | ||
|
|
||
| <div class="md-toolbar-section-end"> | ||
| <md-button class="md-icon-button md-dense" @click="toggleMenu"> | ||
| <md-icon>keyboard_arrow_left</md-icon> | ||
| </md-button> | ||
| </div> | ||
| </md-toolbar> | ||
|
|
||
| <md-list> | ||
| <md-list-item> | ||
| <md-icon>move_to_inbox</md-icon> | ||
| <span class="md-list-item-text">Inbox</span> | ||
| </md-list-item> | ||
|
|
||
| <md-list-item> | ||
| <md-icon>send</md-icon> | ||
| <span class="md-list-item-text">Sent Mail</span> | ||
| </md-list-item> | ||
|
|
||
| <md-list-item> | ||
| <md-icon>delete</md-icon> | ||
| <span class="md-list-item-text">Trash</span> | ||
| </md-list-item> | ||
|
|
||
| <md-list-item> | ||
| <md-icon>error</md-icon> | ||
| <span class="md-list-item-text">Spam</span> | ||
| </md-list-item> | ||
| </md-list> | ||
| </md-drawer> | ||
|
|
||
| <main class="page-wrapper md-flex md-layout-column"> | ||
| <md-toolbar class="md-primary"> | ||
| <md-button class="md-icon-button" @click="toggleMenu" v-if="!menuVisible"> | ||
| <md-icon>menu</md-icon> | ||
| </md-button> | ||
| <span class="md-title">My Title</span> | ||
| </md-toolbar> | ||
|
|
||
| <div class="page-content md-flex">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error quibusdam, non molestias et! Earum magnam, similique, quo recusandae placeat dicta asperiores modi sint ea repudiandae maxime? Quae non explicabo, neque.</div> | ||
| </main> | ||
| </div> | ||
| </template> | ||
|
|
||
| <style lang="scss" scoped> | ||
| .page-container { | ||
| overflow: hidden; | ||
| border: 1px solid rgba(#000, .12); | ||
| } | ||
| // Demo purposes only | ||
| .md-drawer { | ||
| width: 230px; | ||
| max-width: calc(100vw - 125px); | ||
| } | ||
| .page-content { | ||
| padding: 16px; | ||
| border-left: 1px solid rgba(#000, .12); | ||
| } | ||
| </style> | ||
|
|
||
| <script> | ||
| export default { | ||
| name: 'Persistent', | ||
| data: () => ({ | ||
| menuVisible: false | ||
| }), | ||
| methods: { | ||
| toggleMenu () { | ||
| this.menuVisible = !this.menuVisible | ||
| } | ||
| } | ||
| } | ||
| </script> |
This file was deleted.
Oops, something went wrong.
Oops, something went wrong.