From 5f4b1fcccae96b5cff8eeda9c895405329d8b14b Mon Sep 17 00:00:00 2001 From: cagataycivici Date: Thu, 2 Jul 2020 16:42:21 +0300 Subject: [PATCH] Docs for flexbox --- src/assets/styles/app/_content.scss | 9 +- src/views/display/DisplayDemo.vue | 4 +- src/views/flexbox/FlexBoxDemo.vue | 286 +++++++++++++++++++++++++++- src/views/text/TextDemo.vue | 4 +- 4 files changed, 290 insertions(+), 13 deletions(-) diff --git a/src/assets/styles/app/_content.scss b/src/assets/styles/app/_content.scss index 9f1583feb..0f712b90f 100644 --- a/src/assets/styles/app/_content.scss +++ b/src/assets/styles/app/_content.scss @@ -50,6 +50,10 @@ background-color: var(--surface-b); color: var(--text-color); + li { + line-height: 1.5; + } + a { text-decoration: none; color: $linkColor; @@ -93,6 +97,7 @@ margin-right: 0; border: 0 none; top: 1px; + line-height: 1; a, a:visited { color: var(--text-color-secondary); @@ -153,10 +158,6 @@ text-decoration: underline; } } - - li { - line-height: 1.5; - } } } } diff --git a/src/views/display/DisplayDemo.vue b/src/views/display/DisplayDemo.vue index 3e4198f05..c2c4dd85f 100644 --- a/src/views/display/DisplayDemo.vue +++ b/src/views/display/DisplayDemo.vue @@ -31,9 +31,9 @@
Visible to Screen, Invisible for Print

Not available for printing.

- - + + diff --git a/src/views/flexbox/FlexBoxDemo.vue b/src/views/flexbox/FlexBoxDemo.vue index 97dded048..4cfcd99ee 100644 --- a/src/views/flexbox/FlexBoxDemo.vue +++ b/src/views/flexbox/FlexBoxDemo.vue @@ -2,7 +2,9 @@

FlexBox

-

Easily manage the layout of your components with the responsive FlexBox utilities.

+

Easily manage the layout of your components with the responsive FlexBox utilities. If you require a utility to manage the layout of your application, + refer to the Grid System instead. +

Flex Container

An element can configured as a flexbox container using the p-d-flex or p-d-inline-flex classes.

@@ -16,7 +18,7 @@
Inline Flex Container
Direction
-

Default is applied using the p-flex-{direction} class where direction can either of the following.

+

Default is applied using the p-flex-{direction} class where direction can be either of the following.

  • row (default)
  • row-reverse
    • @@ -94,7 +96,7 @@
Order
-

Order configures the way in which they appear in the flex container.

+

Order configures the way in which they appear in the flex container. p-order-{value} format is used where value can be a number from 0 to 6.

Customized
@@ -111,6 +113,7 @@
Responsive
+

Orders change depending on the screen size.

<div class="p-d-flex"> <div class="p-mr-2 p-order-3 p-order-md-2">Item 1</div> @@ -118,7 +121,7 @@ <div class="p-mr-2 p-order-2 p-order-md-1">Item 3</div> </div> -

Orders change depending on the screen size.

+
Item 1
Item 2
@@ -165,7 +168,14 @@
Wrap
-

Flex wrap defines the wrap behavior when there is not enough space in the container.

+

Flex wrap defines the wrap behavior when there is not enough space in the container. The format of the class is p-flex-{value} and the value field can be either of the + listed alternatives.

+ +
    +
  • nowrap (default)
    • +
  • wrap
    • +
  • wrap-reverse
    • +
No Wrap
@@ -245,6 +255,272 @@
  • p-flex-xl-wrap
  • p-flex-xl-wrap-reverse
    • + +
    Justify Content
    +

    Justify content is the alignment along the main axis and defined using the p-jc-{value} format with responsive alternatives. Value field accepts + the options below.

    +
      +
    • start
      • +
    • end
      • +
    • center
      • +
    • between
      • +
    • around
      • +
    • evenly
      • +
    + +
    Between
    + +<div class="p-d-flex p-jc-between"> + <div>Item 1</div> + <div>Item 2</div> +</div> + +
    +
    Item 1
    +
    Item 2
    +
    + +
    Center
    + +<div class="p-d-flex p-jc-center"> + <div class="p-mr-2">Item 1</div> + <div>Item 2</div> +</div> + +
    +
    Item 1
    +
    Item 2
    +
    + +
    Justify Content Classes
    +
      +
    • p-jc-start
      • +
    • p-jc-end
      • +
    • p-jc-center
      • +
    • p-jc-between
      • +
    • p-jc-around
      • +
    • p-jc-evenly
      • +
    • p-jc-sm-start
      • +
    • p-jc-sm-end
      • +
    • p-jc-sm-center
      • +
    • p-jc-sm-between
      • +
    • p-jc-sm-around
      • +
    • p-jc-sm-evenly
      • +
    • p-jc-md-start
      • +
    • p-jc-md-end
      • +
    • p-jc-md-center
      • +
    • p-jc-md-between
      • +
    • p-jc-md-around
      • +
    • p-jc-md-evenly
      • +
    • p-jc-lg-start
      • +
    • p-jc-lg-end
      • +
    • p-jc-lg-center
      • +
    • p-jc-lg-between
      • +
    • p-jc-lg-around
      • +
    • p-jc-lg-evenly
      • +
    • p-jc-xl-start
      • +
    • p-jc-xl-end
      • +
    • p-jc-xl-center
      • +
    • p-jc-xl-between
      • +
    • p-jc-xl-around
      • +
    • p-jc-xl-evenly
      • +
    + +
    Align Items
    +

    Align Items configuration is the alignment along the cross axis and defined using the p-ai-{value} format with responsive alternatives. Value field accepts + the options below.

    +
      +
    • start
      • +
    • end
      • +
    • center
      • +
    • baseline
      • +
    • stretch (default)
      • +
    + +
    Start
    + +<div class="p-d-flex p-ai-start"> + <div class="p-mr-2" style="height:100px">Item 1</div> + <div style="height:50px">Item 2</div> +</div> + +
    +
    Item 1
    +
    Item 2
    +
    + +
    Center
    + +<div class="p-d-flex p-ai-center"> + <div class="p-mr-2" style="height:100px">Item 1</div> + <div style="height:50px">Item 2</div> +</div> + +
    +
    Item 1
    +
    Item 2
    +
    + +
    Align Items Classes
    +
      +
    • p-ai-start
      • +
    • p-ai-end
      • +
    • p-ai-center
      • +
    • p-ai-baseline
      • +
    • p-ai-strech
      • +
    • p-ai-sm-start
      • +
    • p-ai-sm-end
      • +
    • p-ai-sm-center
      • +
    • p-ai-sm-baseline
      • +
    • p-ai-sm-strech
      • +
    • p-ai-md-start
      • +
    • p-ai-md-end
      • +
    • p-ai-md-center
      • +
    • p-ai-md-baseline
      • +
    • p-ai-md-strech
      • +
    • p-ai-lg-start
      • +
    • p-ai-lg-end
      • +
    • p-ai-lg-center
      • +
    • p-ai-lg-baseline
      • +
    • p-ai-lg-strech
      • +
    • p-ai-xl-start
      • +
    • p-ai-xl-end
      • +
    • p-ai-xl-center
      • +
    • p-ai-xl-baseline
      • +
    • p-ai-xl-strech
      • +
    + +
    Align Self
    +

    Align self configuration is the alignment along the cross axis for a particular element and defined using the p-as-{value} format with responsive alternatives. Value field accepts + the options below.

    +
      +
    • start
      • +
    • end
      • +
    • center
      • +
    • baseline
      • +
    • stretch (default)
      • +
    + + +<div class="p-d-flex" style="height: 150px;"> + <div class="p-mr-2 p-as-start">Start</div> + <div class="p-mr-2 p-as-center">Center</div> + <div class="p-mr-2 p-as-end">End</div> + <div class="p-mr-2 p-as-stretch">Stretch</div> +</div> + +
    +
    Start
    +
    Center
    +
    End
    +
    Stretch
    +
    + +
    Align Items Classes
    +
      +
    • p-as-start
      • +
    • p-as-end
      • +
    • p-as-center
      • +
    • p-as-baseline
      • +
    • p-as-strech
      • +
    • p-as-sm-start
      • +
    • p-as-sm-end
      • +
    • p-as-sm-center
      • +
    • p-as-sm-baseline
      • +
    • p-as-sm-strech
      • +
    • p-as-md-start
      • +
    • p-as-md-end
      • +
    • p-as-md-center
      • +
    • p-as-md-baseline
      • +
    • p-as-md-strech
      • +
    • p-as-lg-start
      • +
    • p-as-lg-end
      • +
    • p-as-lg-center
      • +
    • p-as-lg-baseline
      • +
    • p-as-lg-strech
      • +
    • p-as-xl-start
      • +
    • p-as-xl-end
      • +
    • p-as-xl-center
      • +
    • p-as-xl-baseline
      • +
    • p-as-xl-strech
      • +
    + +
    Align Content
    +

    Align content is the alignment along the cross axis and defined using the p-ac-{value} format with responsive alternatives. Value field accepts + the options below.

    +
      +
    • start
      • +
    • end
      • +
    • center
      • +
    • around
      • +
    • stretch
      • +
    • between
      • +
    + +
    Align Content Classes
    +
      +
    • p-ac-start
      • +
    • p-ac-end
      • +
    • p-ac-center
      • +
    • p-ac-around
      • +
    • p-ac-stretch
      • +
    • p-ac-between
      • +
    • p-ac-sm-start
      • +
    • p-ac-sm-end
      • +
    • p-ac-sm-center
      • +
    • p-ac-sm-around
      • +
    • p-ac-sm-stretch
      • +
    • p-ac-sm-between
      • +
    • p-ac-md-start
      • +
    • p-ac-md-end
      • +
    • p-ac-md-center
      • +
    • p-ac-md-around
      • +
    • p-ac-md-stretch
      • +
    • p-ac-md-between
      • +
    • p-ac-lg-start
      • +
    • p-ac-lg-end
      • +
    • p-ac-lg-center
      • +
    • p-ac-lg-around
      • +
    • p-ac-lg-stretch
      • +
    • p-ac-lg-between
      • +
    • p-ac-xl-start
      • +
    • p-ac-xl-end
      • +
    • p-ac-xl-center
      • +
    • p-ac-xl-around
      • +
    • p-ac-xl-stretch
      • +
    • p-ac-xl-between
      • +
    + +
    Margin with FlexBox
    +

    When combined with spacing utilities, flexbox offers endless possibilities.

    +
    Horizontal Spacing
    + + +<div class="p-d-flex p-p-3 card"> + <Button type="Button" icon="pi pi-check" class="p-mr-2" /> + <Button type="Button" icon="pi pi-pencil" class="p-mr-2 pi p-button-success" /> + <Button type="Button" icon="pi pi-trash" class="p-button-danger"/> + <Button type="Button" icon="pi pi-search" class="p-ml-auto p-button-help"/> +</div> + +
    +
    + +
    Vertical Spacing
    + +<div class="p-d-flex p-flex-column" style="height:150px"> + <div>Item 1</div> + <div class="p-mt-auto">Item 2</div> +</div> + +
    +
    Item 1
    +
    Item 2
    +
    diff --git a/src/views/text/TextDemo.vue b/src/views/text/TextDemo.vue index 49172adf8..ecf5aff42 100644 --- a/src/views/text/TextDemo.vue +++ b/src/views/text/TextDemo.vue @@ -30,9 +30,9 @@
    Light
    Italic
    - - + +