From df934fcdece1aba22a6c33fe239397dd036dd4cd Mon Sep 17 00:00:00 2001 From: cagataycivici Date: Thu, 2 Jul 2020 14:14:06 +0300 Subject: [PATCH] Add display utility demo --- src/AppMenu.vue | 9 ++-- src/router.js | 15 ++++++ src/views/display/DisplayDemo.vue | 48 ++++++++++++++++++ src/views/display/DisplayDoc.vue | 81 +++++++++++++++++++++++++++++++ src/views/flexbox/FlexBoxDemo.vue | 27 +++++++++++ src/views/flexbox/FlexBoxDoc.vue | 26 ++++++++++ src/views/spacing/SpacingDoc.vue | 20 +++++--- src/views/text/TextDemo.vue | 27 +++++++++++ src/views/text/TextDoc.vue | 26 ++++++++++ 9 files changed, 268 insertions(+), 11 deletions(-) create mode 100644 src/views/display/DisplayDemo.vue create mode 100644 src/views/display/DisplayDoc.vue create mode 100644 src/views/flexbox/FlexBoxDemo.vue create mode 100644 src/views/flexbox/FlexBoxDoc.vue create mode 100644 src/views/text/TextDemo.vue create mode 100644 src/views/text/TextDoc.vue diff --git a/src/AppMenu.vue b/src/AppMenu.vue index da3ef2904..be7861a65 100755 --- a/src/AppMenu.vue +++ b/src/AppMenu.vue @@ -12,11 +12,14 @@
Utilities
- Icons - Grid System - FormLayout + Display Elevation + FlexBox + FormLayout + Grid System + Icons Spacing + Text
Form
diff --git a/src/router.js b/src/router.js index 206b16c5b..6a8ba4f0a 100755 --- a/src/router.js +++ b/src/router.js @@ -480,6 +480,21 @@ export default new Router({ path: '/spacing', name: 'spacing', component: () => import('./views/spacing/SpacingDemo.vue') + }, + { + path: '/display', + name: 'display', + component: () => import('./views/display/DisplayDemo.vue') + }, + { + path: '/flexbox', + name: 'flexbox', + component: () => import('./views/flexbox/FlexBoxDemo.vue') + }, + { + path: '/text', + name: 'text', + component: () => import('./views/text/TextDemo.vue') }, { path: '/splitbutton', diff --git a/src/views/display/DisplayDemo.vue b/src/views/display/DisplayDemo.vue new file mode 100644 index 000000000..3e4198f05 --- /dev/null +++ b/src/views/display/DisplayDemo.vue @@ -0,0 +1,48 @@ + + + \ No newline at end of file diff --git a/src/views/display/DisplayDoc.vue b/src/views/display/DisplayDoc.vue new file mode 100644 index 000000000..895afa096 --- /dev/null +++ b/src/views/display/DisplayDoc.vue @@ -0,0 +1,81 @@ + \ No newline at end of file diff --git a/src/views/flexbox/FlexBoxDemo.vue b/src/views/flexbox/FlexBoxDemo.vue new file mode 100644 index 000000000..7f6cafe64 --- /dev/null +++ b/src/views/flexbox/FlexBoxDemo.vue @@ -0,0 +1,27 @@ + + + \ No newline at end of file diff --git a/src/views/flexbox/FlexBoxDoc.vue b/src/views/flexbox/FlexBoxDoc.vue new file mode 100644 index 000000000..0c8283657 --- /dev/null +++ b/src/views/flexbox/FlexBoxDoc.vue @@ -0,0 +1,26 @@ + \ No newline at end of file diff --git a/src/views/spacing/SpacingDoc.vue b/src/views/spacing/SpacingDoc.vue index 490d0aa73..860f0bef1 100644 --- a/src/views/spacing/SpacingDoc.vue +++ b/src/views/spacing/SpacingDoc.vue @@ -39,7 +39,8 @@
Breakpoint
-

Breakpoints define how the spacing should be depending on the screen size.

+

Breakpoints define how the spacing should be defined depending on the screen size. Design is mobile first so smaller values + can also apply to larger values e.g. md also applies to lg or xl if they are not explicitly defined.