Add text utilities
cagataycivici
parent
df934fcdec
commit
8855a7d74c
|
|
@ -10,7 +10,7 @@
|
|||
<router-link to="/accessibility">Accessibility</router-link>
|
||||
</div>
|
||||
|
||||
<div class="menu-category">Utilities</div>
|
||||
<div class="menu-category">PrimeFlex Utilities</div>
|
||||
<div class="menu-items">
|
||||
<router-link to="/display">Display</router-link>
|
||||
<router-link to="/elevation">Elevation</router-link>
|
||||
|
|
|
|||
|
|
@ -3,13 +3,33 @@
|
|||
<div class="content-section introduction">
|
||||
<div class="feature-intro">
|
||||
<h1>Text</h1>
|
||||
<p><a href="https://github.com/primefaces/primeflex">PrimeFlex</a> provides various spacing utilities to modify an element's layout.</p>
|
||||
<p>Manage the alignment and the styling of a text with <a href="https://github.com/primefaces/primeflex">PrimeFlex</a> text utilities.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content-section implementation">
|
||||
|
||||
|
||||
<div class="card">
|
||||
<h5>Alignment</h5>
|
||||
<div class="p-mb-3 p-text-left">Left</div>
|
||||
<div class="p-mb-3 p-text-center">Center</div>
|
||||
<div class="p-text-right">Right</div>
|
||||
|
||||
<h5>Wrap</h5>
|
||||
<div class="p-mb-3 demo-container" style="width: 10rem">Long text wraps and does not overlow.</div>
|
||||
<div class="p-mb-3 demo-container p-text-nowrap" style="width: 10rem">Long text does not wrap and overflows the parent.</div>
|
||||
<div class="p-mb-3 demo-container p-text-nowrap p-text-truncate" style="width: 10rem">Long text does not wrap and overflows the parent.</div>
|
||||
|
||||
<h5>Transform</h5>
|
||||
<div class="p-mb-3 p-text-lowercase">LOWERCASE</div>
|
||||
<div class="p-mb-3 p-text-uppercase">uppercase</div>
|
||||
<div class="p-text-capitalize">capitalize</div>
|
||||
|
||||
<h5>Style</h5>
|
||||
<div class="p-mb-3 p-text-bold">Bold</div>
|
||||
<div class="p-mb-3 p-text-normal">Normal</div>
|
||||
<div class="p-mb-3 p-text-light">Light</div>
|
||||
<div class="p-mb-3 p-text-italic">Italic</div>
|
||||
</div>
|
||||
|
||||
<TextDoc />
|
||||
</div>
|
||||
|
|
@ -24,4 +44,10 @@ export default {
|
|||
'TextDoc': TextDoc
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.demo-container {
|
||||
border: 2px solid var(--surface-d);
|
||||
}
|
||||
</style>
|
||||
|
|
@ -3,8 +3,73 @@
|
|||
<TabView>
|
||||
<TabPanel header="Documentation">
|
||||
<h5>Getting Started</h5>
|
||||
<p>The spacing classes use the <i>p-{property}{position}-{value}</i> syntax whereas for responsive
|
||||
values <i>p-{property}{position}-{breakpoint}-{value}</i> format is used.</p>
|
||||
<p>The text classes use the <i>p-text-{value}</i> syntax.</p>
|
||||
|
||||
<h5>Alignment</h5>
|
||||
<p>Four options are available for alignment.</p>
|
||||
<ul>
|
||||
<li>left</li>
|
||||
<li>center</li>
|
||||
<li>right</li>
|
||||
<li>justify</li>
|
||||
</ul>
|
||||
<CodeHighlight>
|
||||
<template v-pre>
|
||||
<div class="p-text-left">Left</div>
|
||||
<div class="p-text-center">Center</div>
|
||||
<div class="p-text-right">Right</div>
|
||||
<div class="p-text-justify">Justify</div>
|
||||
</template>
|
||||
</CodeHighlight>
|
||||
|
||||
<h5>Wrap</h5>
|
||||
<p>Text wrapping defines how the text would be displayed when it exceeds the size of its container.</p>
|
||||
<ul>
|
||||
<li>nowrap</li>
|
||||
<li>wrap</li>
|
||||
<li>truncate</li>
|
||||
</ul>
|
||||
<CodeHighlight>
|
||||
<template v-pre>
|
||||
<div style="width: 10rem">Long text wraps and does not overlow.</div>
|
||||
<div class="p-text-nowrap" style="width: 10rem">Long text does not wrap and overflows the parent.</div>
|
||||
<div class="p-text-nowrap p-text-truncate" style="width: 10rem">Long text does not wrap and overflows the parent.</div>
|
||||
</template>
|
||||
</CodeHighlight>
|
||||
|
||||
<h5>Transform</h5>
|
||||
<p>Transform property changes the case of the text.</p>
|
||||
<ul>
|
||||
<li>lowercase</li>
|
||||
<li>uppercase</li>
|
||||
<li>capitalize</li>
|
||||
</ul>
|
||||
<CodeHighlight>
|
||||
<template v-pre>
|
||||
<div class="p-text-lowercase">LOWERCASE</div>
|
||||
<div class="p-text-uppercase">uppercase</div>
|
||||
<div class="p-text-capitalize">capitalize</div>
|
||||
</template>
|
||||
</CodeHighlight>
|
||||
|
||||
<h5>Style</h5>
|
||||
<p>Text styling applies to font weight and style.</p>
|
||||
<ul>
|
||||
<li>bold</li>
|
||||
<li>normal</li>
|
||||
<li>light</li>
|
||||
<li>italic</li>
|
||||
</ul>
|
||||
<CodeHighlight>
|
||||
<template v-pre>
|
||||
<div class="p-text-bold">Bold</div>
|
||||
<div class="p-text-normal">Normal</div>
|
||||
<div class="p-text-light">Light</div>
|
||||
<div class="p-text-italic">Italic</div>
|
||||
</template>
|
||||
</CodeHighlight>
|
||||
|
||||
|
||||
|
||||
|
||||
<h5>Dependencies</h5>
|
||||
|
|
@ -17,7 +82,28 @@
|
|||
</a>
|
||||
<CodeHighlight>
|
||||
<template v-pre>
|
||||
<div class="card">
|
||||
<h5>Alignment</h5>
|
||||
<div class="p-mb-3 p-text-left">Left</div>
|
||||
<div class="p-mb-3 p-text-center">Center</div>
|
||||
<div class="p-text-right">Right</div>
|
||||
|
||||
<h5>Wrap</h5>
|
||||
<div class="p-mb-3 demo-container" style="width: 10rem">Long text wraps and does not overlow.</div>
|
||||
<div class="p-mb-3 demo-container p-text-nowrap" style="width: 10rem">Long text does not wrap and overflows the parent.</div>
|
||||
<div class="p-mb-3 demo-container p-text-nowrap p-text-truncate" style="width: 10rem">Long text does not wrap and overflows the parent.</div>
|
||||
|
||||
<h5>Transform</h5>
|
||||
<div class="p-mb-3 p-text-lowercase">LOWERCASE</div>
|
||||
<div class="p-mb-3 p-text-uppercase">uppercase</div>
|
||||
<div class="p-text-capitalize">capitalize</div>
|
||||
|
||||
<h5>Style</h5>
|
||||
<div class="p-mb-3 p-text-bold">Bold</div>
|
||||
<div class="p-mb-3 p-text-normal">Normal</div>
|
||||
<div class="p-mb-3 p-text-light">Light</div>
|
||||
<div class="p-mb-3 p-text-italic">Italic</div>
|
||||
</div>
|
||||
</template>
|
||||
</CodeHighlight>
|
||||
</TabPanel>
|
||||
|
|
|
|||
Loading…
Reference in New Issue