vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

Docs for flexbox

pull/358/head
cagataycivici 2020-07-02 16:42:21 +03:00
parent 97571110b1
commit 5f4b1fccca
4 changed files with 290 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
src/assets/styles/app/_content.scss
View File

@ -50,6 +50,10 @@
background-color: var(--surface-b); background-color: var(--surface-b);
color: var(--text-color); color: var(--text-color);
li {
line-height: 1.5;
}
a { a {
text-decoration: none; text-decoration: none;
color: $linkColor; color: $linkColor;
@ -93,6 +97,7 @@
margin-right: 0; margin-right: 0;
border: 0 none; border: 0 none;
top: 1px; top: 1px;
line-height: 1;
a, a:visited { a, a:visited {
color: var(--text-color-secondary); color: var(--text-color-secondary);
@ -153,10 +158,6 @@
text-decoration: underline; text-decoration: underline;
} }
} }
li {
line-height: 1.5;
}
} }
} }
} }

2
src/views/display/DisplayDemo.vue
View File

@ -31,10 +31,10 @@
<h5>Visible to Screen, Invisible for Print</h5> <h5>Visible to Screen, Invisible for Print</h5>
<p class="p-d-block p-print-none">Not available for printing.</p> <p class="p-d-block p-print-none">Not available for printing.</p>
</div> </div>
</div>
<DisplayDoc /> <DisplayDoc />
</div> </div>
</div>
</template> </template>
<script> <script>

286
src/views/flexbox/FlexBoxDemo.vue
View File

@ -2,7 +2,9 @@
<div> <div>
<div class="content-section documentation"> <div class="content-section documentation">
<h1>FlexBox</h1> <h1>FlexBox</h1>
<p>Easily manage the layout of your components with the responsive FlexBox utilities.</p> <p>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 <router-link to="/grid">Grid System</router-link> instead.
</p>
<h5>Flex Container</h5> <h5>Flex Container</h5>
<p>An element can configured as a flexbox container using the <i>p-d-flex</i> or <i>p-d-inline-flex</i> classes.</p> <p>An element can configured as a flexbox container using the <i>p-d-flex</i> or <i>p-d-inline-flex</i> classes.</p>
@ -16,7 +18,7 @@
<div class="box p-d-inline-flex">Inline Flex Container</div> <div class="box p-d-inline-flex">Inline Flex Container</div>
<h5>Direction</h5> <h5>Direction</h5>
<p>Default is applied using the <i>p-flex-{direction}</i> class where direction can either of the following.</p> <p>Default is applied using the <i>p-flex-{direction}</i> class where direction can be either of the following.</p>
<ul> <ul>
<li>row (default)</li> <li>row (default)</li>
<li>row-reverse</li> <li>row-reverse</li>
@ -94,7 +96,7 @@
</ul> </ul>
<h5>Order</h5> <h5>Order</h5>
<p>Order configures the way in which they appear in the flex container.</p> <p>Order configures the way in which they appear in the flex container. <i>p-order-{value}</i> format is used where value can be a number from 0 to 6.</p>
<h6>Customized</h6> <h6>Customized</h6>
<CodeHighlight> <CodeHighlight>
@ -111,6 +113,7 @@
</div> </div>
<h6>Responsive</h6> <h6>Responsive</h6>
<p>Orders change depending on the screen size.</p>
<CodeHighlight> <CodeHighlight>
&lt;div class="p-d-flex"&gt; &lt;div class="p-d-flex"&gt;
&lt;div class="p-mr-2 p-order-3 p-order-md-2"&gt;Item 1&lt;/div&gt; &lt;div class="p-mr-2 p-order-3 p-order-md-2"&gt;Item 1&lt;/div&gt;
@ -118,7 +121,7 @@
&lt;div class="p-mr-2 p-order-2 p-order-md-1"&gt;Item 3&lt;/div&gt; &lt;div class="p-mr-2 p-order-2 p-order-md-1"&gt;Item 3&lt;/div&gt;
&lt;/div&gt; &lt;/div&gt;
</CodeHighlight> </CodeHighlight>
<p>Orders change depending on the screen size.</p>
<div class="p-d-flex"> <div class="p-d-flex">
<div class="p-mr-2 p-order-3 p-order-md-2">Item 1</div> <div class="p-mr-2 p-order-3 p-order-md-2">Item 1</div>
<div class="p-mr-2 p-order-1 p-order-md-3">Item 2</div> <div class="p-mr-2 p-order-1 p-order-md-3">Item 2</div>
@ -165,7 +168,14 @@
</ul> </ul>
<h5>Wrap</h5> <h5>Wrap</h5>
<p>Flex wrap defines the wrap behavior when there is not enough space in the container.</p> <p>Flex wrap defines the wrap behavior when there is not enough space in the container. The format of the class is <i>p-flex-{value}</i> and the value field can be either of the
listed alternatives.</p>
<ul>
<li>nowrap (default)</li>
<li>wrap</li>
<li>wrap-reverse</li>
</ul>
<h6>No Wrap</h6> <h6>No Wrap</h6>
<CodeHighlight> <CodeHighlight>
@ -245,6 +255,272 @@
<li>p-flex-xl-wrap</li> <li>p-flex-xl-wrap</li>
<li>p-flex-xl-wrap-reverse</li> <li>p-flex-xl-wrap-reverse</li>
</ul> </ul>
<h5>Justify Content</h5>
<p>Justify content is the alignment along the main axis and defined using the <i>p-jc-{value}</i> format with responsive alternatives. Value field accepts
the options below.</p>
<ul>
<li>start</li>
<li>end</li>
<li>center</li>
<li>between</li>
<li>around</li>
<li>evenly</li>
</ul>
<h6>Between</h6>
<CodeHighlight>
&lt;div class="p-d-flex p-jc-between"&gt;
&lt;div&gt;Item 1&lt;/div&gt;
&lt;div&gt;Item 2&lt;/div&gt;
&lt;/div&gt;
</CodeHighlight>
<div class="p-d-flex p-jc-between">
<div>Item 1</div>
<div>Item 2</div>
</div>
<h6>Center</h6>
<CodeHighlight>
&lt;div class="p-d-flex p-jc-center"&gt;
&lt;div class="p-mr-2"&gt;Item 1&lt;/div&gt;
&lt;div&gt;Item 2&lt;/div&gt;
&lt;/div&gt;
</CodeHighlight>
<div class="p-d-flex p-jc-center">
<div class="p-mr-2">Item 1</div>
<div>Item 2</div>
</div>
<h6>Justify Content Classes</h6>
<ul>
<li>p-jc-start</li>
<li>p-jc-end</li>
<li>p-jc-center</li>
<li>p-jc-between</li>
<li>p-jc-around</li>
<li>p-jc-evenly</li>
<li>p-jc-sm-start</li>
<li>p-jc-sm-end</li>
<li>p-jc-sm-center</li>
<li>p-jc-sm-between</li>
<li>p-jc-sm-around</li>
<li>p-jc-sm-evenly</li>
<li>p-jc-md-start</li>
<li>p-jc-md-end</li>
<li>p-jc-md-center</li>
<li>p-jc-md-between</li>
<li>p-jc-md-around</li>
<li>p-jc-md-evenly</li>
<li>p-jc-lg-start</li>
<li>p-jc-lg-end</li>
<li>p-jc-lg-center</li>
<li>p-jc-lg-between</li>
<li>p-jc-lg-around</li>
<li>p-jc-lg-evenly</li>
<li>p-jc-xl-start</li>
<li>p-jc-xl-end</li>
<li>p-jc-xl-center</li>
<li>p-jc-xl-between</li>
<li>p-jc-xl-around</li>
<li>p-jc-xl-evenly</li>
</ul>
<h5>Align Items</h5>
<p>Align Items configuration is the alignment along the cross axis and defined using the <i>p-ai-{value}</i> format with responsive alternatives. Value field accepts
the options below.</p>
<ul>
<li>start</li>
<li>end</li>
<li>center</li>
<li>baseline</li>
<li>stretch (default)</li>
</ul>
<h6>Start</h6>
<CodeHighlight>
&lt;div class="p-d-flex p-ai-start"&gt;
&lt;div class="p-mr-2" style="height:100px"&gt;Item 1&lt;/div&gt;
&lt;div style="height:50px"&gt;Item 2&lt;/div&gt;
&lt;/div&gt;
</CodeHighlight>
<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>
<h6>Center</h6>
<CodeHighlight>
&lt;div class="p-d-flex p-ai-center"&gt;
&lt;div class="p-mr-2" style="height:100px"&gt;Item 1&lt;/div&gt;
&lt;div style="height:50px"&gt;Item 2&lt;/div&gt;
&lt;/div&gt;
</CodeHighlight>
<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>
<h6>Align Items Classes</h6>
<ul>
<li>p-ai-start</li>
<li>p-ai-end</li>
<li>p-ai-center</li>
<li>p-ai-baseline</li>
<li>p-ai-strech</li>
<li>p-ai-sm-start</li>
<li>p-ai-sm-end</li>
<li>p-ai-sm-center</li>
<li>p-ai-sm-baseline</li>
<li>p-ai-sm-strech</li>
<li>p-ai-md-start</li>
<li>p-ai-md-end</li>
<li>p-ai-md-center</li>
<li>p-ai-md-baseline</li>
<li>p-ai-md-strech</li>
<li>p-ai-lg-start</li>
<li>p-ai-lg-end</li>
<li>p-ai-lg-center</li>
<li>p-ai-lg-baseline</li>
<li>p-ai-lg-strech</li>
<li>p-ai-xl-start</li>
<li>p-ai-xl-end</li>
<li>p-ai-xl-center</li>
<li>p-ai-xl-baseline</li>
<li>p-ai-xl-strech</li>
</ul>
<h5>Align Self</h5>
<p>Align self configuration is the alignment along the cross axis for a particular element and defined using the <i>p-as-{value}</i> format with responsive alternatives. Value field accepts
the options below.</p>
<ul>
<li>start</li>
<li>end</li>
<li>center</li>
<li>baseline</li>
<li>stretch (default)</li>
</ul>
<CodeHighlight>
&lt;div class="p-d-flex" style="height: 150px;"&gt;
&lt;div class="p-mr-2 p-as-start"&gt;Start&lt;/div&gt;
&lt;div class="p-mr-2 p-as-center"&gt;Center&lt;/div&gt;
&lt;div class="p-mr-2 p-as-end"&gt;End&lt;/div&gt;
&lt;div class="p-mr-2 p-as-stretch"&gt;Stretch&lt;/div&gt;
&lt;/div&gt;
</CodeHighlight>
<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>
<h6>Align Items Classes</h6>
<ul>
<li>p-as-start</li>
<li>p-as-end</li>
<li>p-as-center</li>
<li>p-as-baseline</li>
<li>p-as-strech</li>
<li>p-as-sm-start</li>
<li>p-as-sm-end</li>
<li>p-as-sm-center</li>
<li>p-as-sm-baseline</li>
<li>p-as-sm-strech</li>
<li>p-as-md-start</li>
<li>p-as-md-end</li>
<li>p-as-md-center</li>
<li>p-as-md-baseline</li>
<li>p-as-md-strech</li>
<li>p-as-lg-start</li>
<li>p-as-lg-end</li>
<li>p-as-lg-center</li>
<li>p-as-lg-baseline</li>
<li>p-as-lg-strech</li>
<li>p-as-xl-start</li>
<li>p-as-xl-end</li>
<li>p-as-xl-center</li>
<li>p-as-xl-baseline</li>
<li>p-as-xl-strech</li>
</ul>
<h5>Align Content</h5>
<p>Align content is the alignment along the cross axis and defined using the <i>p-ac-{value}</i> format with responsive alternatives. Value field accepts
the options below.</p>
<ul>
<li>start</li>
<li>end</li>
<li>center</li>
<li>around</li>
<li>stretch</li>
<li>between</li>
</ul>
<h6>Align Content Classes</h6>
<ul>
<li>p-ac-start</li>
<li>p-ac-end</li>
<li>p-ac-center</li>
<li>p-ac-around</li>
<li>p-ac-stretch</li>
<li>p-ac-between</li>
<li>p-ac-sm-start</li>
<li>p-ac-sm-end</li>
<li>p-ac-sm-center</li>
<li>p-ac-sm-around</li>
<li>p-ac-sm-stretch</li>
<li>p-ac-sm-between</li>
<li>p-ac-md-start</li>
<li>p-ac-md-end</li>
<li>p-ac-md-center</li>
<li>p-ac-md-around</li>
<li>p-ac-md-stretch</li>
<li>p-ac-md-between</li>
<li>p-ac-lg-start</li>
<li>p-ac-lg-end</li>
<li>p-ac-lg-center</li>
<li>p-ac-lg-around</li>
<li>p-ac-lg-stretch</li>
<li>p-ac-lg-between</li>
<li>p-ac-xl-start</li>
<li>p-ac-xl-end</li>
<li>p-ac-xl-center</li>
<li>p-ac-xl-around</li>
<li>p-ac-xl-stretch</li>
<li>p-ac-xl-between</li>
</ul>
<h5>Margin with FlexBox</h5>
<p>When combined with <router-link to="/setup">spacing utilities</router-link>, flexbox offers endless possibilities.</p>
<h6>Horizontal Spacing</h6>
<CodeHighlight>
&lt;div class="p-d-flex p-p-3 card"&gt;
&lt;Button type="Button" icon="pi pi-check" class="p-mr-2" /&gt;
&lt;Button type="Button" icon="pi pi-pencil" class="p-mr-2 pi p-button-success" /&gt;
&lt;Button type="Button" icon="pi pi-trash" class="p-button-danger"/&gt;
&lt;Button type="Button" icon="pi pi-search" class="p-ml-auto p-button-help"/&gt;
&lt;/div&gt;
</CodeHighlight>
<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>
<h6>Vertical Spacing</h6>
<CodeHighlight>
&lt;div class="p-d-flex p-flex-column" style="height:150px"&gt;
&lt;div&gt;Item 1&lt;/div&gt;
&lt;div class="p-mt-auto"&gt;Item 2&lt;/div&gt;
&lt;/div&gt;
</CodeHighlight>
<div class="p-d-flex p-flex-column" style="height:150px">
<div>Item 1</div>
<div class="p-mt-auto">Item 2</div>
</div>
</div> </div>
</div> </div>
</template> </template>

2
src/views/text/TextDemo.vue
View File

@ -30,10 +30,10 @@
<div class="p-mb-3 p-text-light">Light</div> <div class="p-mb-3 p-text-light">Light</div>
<div class="p-mb-3 p-text-italic">Italic</div> <div class="p-mb-3 p-text-italic">Italic</div>
</div> </div>
</div>
<TextDoc /> <TextDoc />
</div> </div>
</div>
</template> </template>
<script> <script>