Docs for flexbox
cagataycivici
parent
97571110b1
commit
5f4b1fccca
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -31,10 +31,10 @@
|
|||
<h5>Visible to Screen, Invisible for Print</h5>
|
||||
<p class="p-d-block p-print-none">Not available for printing.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<DisplayDoc />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
|
|||
|
|
@ -2,7 +2,9 @@
|
|||
<div>
|
||||
<div class="content-section documentation">
|
||||
<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>
|
||||
<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>
|
||||
|
||||
<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>
|
||||
<li>row (default)</li>
|
||||
<li>row-reverse</li>
|
||||
|
|
@ -94,7 +96,7 @@
|
|||
</ul>
|
||||
|
||||
<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>
|
||||
<CodeHighlight>
|
||||
|
|
@ -111,6 +113,7 @@
|
|||
</div>
|
||||
|
||||
<h6>Responsive</h6>
|
||||
<p>Orders change depending on the screen size.</p>
|
||||
<CodeHighlight>
|
||||
<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>
|
||||
</CodeHighlight>
|
||||
<p>Orders change depending on the screen size.</p>
|
||||
|
||||
<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-1 p-order-md-3">Item 2</div>
|
||||
|
|
@ -165,7 +168,14 @@
|
|||
</ul>
|
||||
|
||||
<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>
|
||||
<CodeHighlight>
|
||||
|
|
@ -245,6 +255,272 @@
|
|||
<li>p-flex-xl-wrap</li>
|
||||
<li>p-flex-xl-wrap-reverse</li>
|
||||
</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>
|
||||
<div class="p-d-flex p-jc-between">
|
||||
<div>Item 1</div>
|
||||
<div>Item 2</div>
|
||||
</div>
|
||||
</CodeHighlight>
|
||||
<div class="p-d-flex p-jc-between">
|
||||
<div>Item 1</div>
|
||||
<div>Item 2</div>
|
||||
</div>
|
||||
|
||||
<h6>Center</h6>
|
||||
<CodeHighlight>
|
||||
<div class="p-d-flex p-jc-center">
|
||||
<div class="p-mr-2">Item 1</div>
|
||||
<div>Item 2</div>
|
||||
</div>
|
||||
</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>
|
||||
<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>
|
||||
</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>
|
||||
<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>
|
||||
</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>
|
||||
<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>
|
||||
</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>
|
||||
<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>
|
||||
</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>
|
||||
<div class="p-d-flex p-flex-column" style="height:150px">
|
||||
<div>Item 1</div>
|
||||
<div class="p-mt-auto">Item 2</div>
|
||||
</div>
|
||||
</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>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -30,10 +30,10 @@
|
|||
<div class="p-mb-3 p-text-light">Light</div>
|
||||
<div class="p-mb-3 p-text-italic">Italic</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<TextDoc />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
|
|||
Loading…
Reference in New Issue