AppDoc added
Tuğçe Küçükoğlu
parent
424f548389
commit
20bf1fde46
|
|
@ -1,38 +1,97 @@
|
|||
<template>
|
||||
<div class="content-section documentation">
|
||||
<TabView>
|
||||
<TabPanel header="Documentation">
|
||||
<h5>Getting Started</h5>
|
||||
<p>Elevation is added to an element using the <i>.p-shadow-{level}</i> class.</p>
|
||||
<AppDoc name="ElevationDemo" :sources="sources">
|
||||
<h5>Getting Started</h5>
|
||||
<p>Elevation is added to an element using the <i>.p-shadow-{level}</i> class.</p>
|
||||
<pre v-code><code>
|
||||
<div class="p-shadow-1" />
|
||||
|
||||
</code></pre>
|
||||
|
||||
<h5>Levels</h5>
|
||||
<p>There are 24 depths available varying from 1 to 24.</p>
|
||||
<h5>Levels</h5>
|
||||
<p>There are 24 depths available varying from 1 to 24.</p>
|
||||
<pre v-code><code>
|
||||
<div class="p-shadow-1" />
|
||||
<div class="p-shadow-24" />
|
||||
|
||||
</code></pre>
|
||||
</TabPanel>
|
||||
|
||||
<TabPanel header="Source">
|
||||
<a href="https://github.com/primefaces/primevue/tree/master/src/views/elevation" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
|
||||
<span>View on GitHub</span>
|
||||
</a>
|
||||
<pre v-code><code><template v-pre>
|
||||
<div class="p-grid">
|
||||
<div class="p-col" v-for="index in 24" :key="index">
|
||||
<div :class="['box', 'p-shadow-' + index]">
|
||||
p-shadow-{{index}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</AppDoc>
|
||||
</template>
|
||||
</code></pre>
|
||||
</TabPanel>
|
||||
</TabView>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
sources: {
|
||||
'options-api': {
|
||||
tabName: 'Source',
|
||||
content: `
|
||||
<template>
|
||||
<div>
|
||||
<div class="p-grid">
|
||||
<div class="p-col" v-for="index in 24" :key="index">
|
||||
<div :class="['box', 'p-shadow-' + index]">
|
||||
p-shadow-{{index}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
}
|
||||
<\\/script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.box {
|
||||
min-height: 100px;
|
||||
min-width: 150px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-weight: 600;
|
||||
margin: 2rem;
|
||||
border-radius: 4px;
|
||||
}
|
||||
</style>
|
||||
`
|
||||
},
|
||||
'composition-api': {
|
||||
tabName: 'Composition API',
|
||||
content: `
|
||||
<template>
|
||||
<div>
|
||||
<div class="p-grid">
|
||||
<div class="p-col" v-for="index in 24" :key="index">
|
||||
<div :class="['box', 'p-shadow-' + index]">
|
||||
p-shadow-{{index}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
}
|
||||
<\\/script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.box {
|
||||
min-height: 100px;
|
||||
min-width: 150px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-weight: 600;
|
||||
margin: 2rem;
|
||||
border-radius: 4px;
|
||||
}
|
||||
</style>
|
||||
`
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
File diff suppressed because it is too large
Load Diff
|
|
@ -1,54 +1,52 @@
|
|||
<template>
|
||||
<div class="content-section documentation">
|
||||
<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>
|
||||
<AppDoc name="SpacingDemo" :sources="sources">
|
||||
<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>
|
||||
|
||||
<h5>Property</h5>
|
||||
<p>Property can either be a margin or a padding.</p>
|
||||
<ul>
|
||||
<li><b>m</b>: margin</li>
|
||||
<li><b>p</b>: padding</li>
|
||||
</ul>
|
||||
<h5>Property</h5>
|
||||
<p>Property can either be a margin or a padding.</p>
|
||||
<ul>
|
||||
<li><b>m</b>: margin</li>
|
||||
<li><b>p</b>: padding</li>
|
||||
</ul>
|
||||
|
||||
<h5>Position</h5>
|
||||
<p>Position are available for the individual sides, the x-y axis or blank for the shortand of all sides.</p>
|
||||
<ul>
|
||||
<li><b>t</b>: top</li>
|
||||
<li><b>b</b>: bottom</li>
|
||||
<li><b>l</b>: left</li>
|
||||
<li><b>r</b>: right</li>
|
||||
<li><b>x</b>: left and right</li>
|
||||
<li><b>y</b>: top and bottom</li>
|
||||
<li><b>blank</b>: all sides</li>
|
||||
</ul>
|
||||
<h5>Position</h5>
|
||||
<p>Position are available for the individual sides, the x-y axis or blank for the shortand of all sides.</p>
|
||||
<ul>
|
||||
<li><b>t</b>: top</li>
|
||||
<li><b>b</b>: bottom</li>
|
||||
<li><b>l</b>: left</li>
|
||||
<li><b>r</b>: right</li>
|
||||
<li><b>x</b>: left and right</li>
|
||||
<li><b>y</b>: top and bottom</li>
|
||||
<li><b>blank</b>: all sides</li>
|
||||
</ul>
|
||||
|
||||
<h5>Value</h5>
|
||||
<p>Value field varies from 0 to 6 where default value of the <i>$spacer</i> is 1rem. The special <i>auto</i> value is available to margins only and used to center elements.</p>
|
||||
<ul>
|
||||
<li><b>0</b>: $spacer * 0</li>
|
||||
<li><b>1</b>: $spacer * .25</li>
|
||||
<li><b>2</b>: $spacer * .5</li>
|
||||
<li><b>3</b>: $spacer * 1</li>
|
||||
<li><b>4</b>: $spacer * 1.5</li>
|
||||
<li><b>5</b>: $spacer * 2</li>
|
||||
<li><b>6</b>: $spacer * 3</li>
|
||||
<li><b>auto</b>: auto margin</li>
|
||||
</ul>
|
||||
<h5>Value</h5>
|
||||
<p>Value field varies from 0 to 6 where default value of the <i>$spacer</i> is 1rem. The special <i>auto</i> value is available to margins only and used to center elements.</p>
|
||||
<ul>
|
||||
<li><b>0</b>: $spacer * 0</li>
|
||||
<li><b>1</b>: $spacer * .25</li>
|
||||
<li><b>2</b>: $spacer * .5</li>
|
||||
<li><b>3</b>: $spacer * 1</li>
|
||||
<li><b>4</b>: $spacer * 1.5</li>
|
||||
<li><b>5</b>: $spacer * 2</li>
|
||||
<li><b>6</b>: $spacer * 3</li>
|
||||
<li><b>auto</b>: auto margin</li>
|
||||
</ul>
|
||||
|
||||
<h5>Breakpoint</h5>
|
||||
<p>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.</p>
|
||||
<ul>
|
||||
<li><b>sm</b>: small screens e.g. phones</li>
|
||||
<li><b>md</b>: medium screens e.g. tablets</li>
|
||||
<li><b>lg</b>: large screens e.g. notebooks</li>
|
||||
<li><b>xl</b>: larger screens .e.g monitors</li>
|
||||
</ul>
|
||||
<h5>Breakpoint</h5>
|
||||
<p>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.</p>
|
||||
<ul>
|
||||
<li><b>sm</b>: small screens e.g. phones</li>
|
||||
<li><b>md</b>: medium screens e.g. tablets</li>
|
||||
<li><b>lg</b>: large screens e.g. notebooks</li>
|
||||
<li><b>xl</b>: larger screens .e.g monitors</li>
|
||||
</ul>
|
||||
|
||||
<h5>Examples</h5>
|
||||
<h5>Examples</h5>
|
||||
<pre v-code><code>
|
||||
<div class="p-mb-2">Margin bottom with level 2</div>
|
||||
<div class="p-mt-4">Margin top with level 2</div>
|
||||
|
|
@ -60,78 +58,168 @@
|
|||
|
||||
</code></pre>
|
||||
|
||||
<h5>Customization</h5>
|
||||
<p>A custom build with different values can be obtained from <a href="https://github.com/primefaces/primeflex">PrimeFlex</a> using the _variables.scss file.</p>
|
||||
</TabPanel>
|
||||
|
||||
<TabPanel header="Source">
|
||||
<a href="https://github.com/primefaces/primevue/tree/master/src/views/spacing" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
|
||||
<span>View on GitHub</span>
|
||||
</a>
|
||||
<pre v-code><code><template v-pre>
|
||||
<div class="card">
|
||||
<h5>Margin</h5>
|
||||
<h6>Without Spacing</h6>
|
||||
<Button type="button" label="Button 1" style="width:20rem" />
|
||||
<Button type="button" label="Button 2" style="width:20rem" />
|
||||
|
||||
<h6>With Spacing</h6>
|
||||
<Button type="button" label="Button 1" style="width:20rem" class="p-mr-2 p-mb-2" />
|
||||
<Button type="button" label="Button 2" style="width:20rem" class="p-mb-2"/>
|
||||
|
||||
<h5>Responsive Margin</h5>
|
||||
<h6>Without Spacing</h6>
|
||||
<div class="p-grid p-formgrid p-fluid">
|
||||
<div class="p-col-12 p-lg-4">
|
||||
<InputText />
|
||||
</div>
|
||||
<div class="p-col-12 p-lg-4">
|
||||
<InputText />
|
||||
</div>
|
||||
<div class="p-col-12 p-lg-4">
|
||||
<InputText />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h6>With Spacing</h6>
|
||||
<div class="p-grid p-formgrid p-fluid">
|
||||
<div class="p-col-12 p-mb-2 p-lg-4 p-mb-lg-0">
|
||||
<InputText />
|
||||
</div>
|
||||
<div class="p-col-12 p-mb-2 p-lg-4 p-mb-lg-0">
|
||||
<InputText />
|
||||
</div>
|
||||
<div class="p-col-12 p-mb-2 p-lg-4 p-mb-lg-0">
|
||||
<InputText />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h6>Center</h6>
|
||||
<div class="demo-container p-p-4">
|
||||
<Button type="button" label="Button" class="p-d-block p-mx-auto" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<h5>Padding</h5>
|
||||
<h6>Without Spacing</h6>
|
||||
<div class="demo-container">
|
||||
<Button type="button" label="Button" />
|
||||
</div>
|
||||
|
||||
<h6>With Spacing</h6>
|
||||
<div class="demo-container p-p-3">
|
||||
<Button type="button" label="Button" />
|
||||
</div>
|
||||
|
||||
<h6>Responsive Spacing</h6>
|
||||
<div class="demo-container p-p-0 p-p-sm-1 p-p-md-2 p-p-lg-3">
|
||||
<Button type="button" label="Button" />
|
||||
</div>
|
||||
</div>
|
||||
<h5>Customization</h5>
|
||||
<p>A custom build with different values can be obtained from <a href="https://github.com/primefaces/primeflex">PrimeFlex</a> using the _variables.scss file.</p>
|
||||
</AppDoc>
|
||||
</template>
|
||||
</code></pre>
|
||||
</TabPanel>
|
||||
</TabView>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
sources: {
|
||||
'options-api': {
|
||||
tabName: 'Source',
|
||||
content: `
|
||||
<template>
|
||||
<div>
|
||||
<div class="card">
|
||||
<h5>Margin</h5>
|
||||
<h6>Without Spacing</h6>
|
||||
<Button type="button" label="Button 1" style="width:20rem" />
|
||||
<Button type="button" label="Button 2" style="width:20rem" />
|
||||
|
||||
<h6>With Spacing</h6>
|
||||
<Button type="button" label="Button 1" style="width:20rem" class="p-mr-2 p-mb-2" />
|
||||
<Button type="button" label="Button 2" style="width:20rem" class="p-mb-2"/>
|
||||
|
||||
<h5>Responsive Margin</h5>
|
||||
<h6>Without Spacing</h6>
|
||||
<div class="p-grid p-formgrid p-fluid">
|
||||
<div class="p-col-12 p-lg-4">
|
||||
<InputText />
|
||||
</div>
|
||||
<div class="p-col-12 p-lg-4">
|
||||
<InputText />
|
||||
</div>
|
||||
<div class="p-col-12 p-lg-4">
|
||||
<InputText />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h6>With Spacing</h6>
|
||||
<div class="p-grid p-formgrid p-fluid">
|
||||
<div class="p-col-12 p-mb-2 p-lg-4 p-mb-lg-0">
|
||||
<InputText />
|
||||
</div>
|
||||
<div class="p-col-12 p-mb-2 p-lg-4 p-mb-lg-0">
|
||||
<InputText />
|
||||
</div>
|
||||
<div class="p-col-12 p-mb-2 p-lg-4 p-mb-lg-0">
|
||||
<InputText />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h6>Center</h6>
|
||||
<div class="demo-container p-p-4">
|
||||
<Button type="button" label="Button" class="p-d-block p-mx-auto" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<h5>Padding</h5>
|
||||
<h6>Without Spacing</h6>
|
||||
<div class="demo-container">
|
||||
<Button type="button" label="Button" />
|
||||
</div>
|
||||
|
||||
<h6>With Spacing</h6>
|
||||
<div class="demo-container p-p-3">
|
||||
<Button type="button" label="Button" />
|
||||
</div>
|
||||
|
||||
<h6>Responsive Spacing</h6>
|
||||
<div class="demo-container p-p-0 p-p-sm-1 p-p-md-2 p-p-lg-3">
|
||||
<Button type="button" label="Button" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
|
||||
}
|
||||
<\\/script>
|
||||
`
|
||||
},
|
||||
'composition-api': {
|
||||
tabName: 'Composition API',
|
||||
content: `
|
||||
<template>
|
||||
<div>
|
||||
<div class="card">
|
||||
<h5>Margin</h5>
|
||||
<h6>Without Spacing</h6>
|
||||
<Button type="button" label="Button 1" style="width:20rem" />
|
||||
<Button type="button" label="Button 2" style="width:20rem" />
|
||||
|
||||
<h6>With Spacing</h6>
|
||||
<Button type="button" label="Button 1" style="width:20rem" class="p-mr-2 p-mb-2" />
|
||||
<Button type="button" label="Button 2" style="width:20rem" class="p-mb-2"/>
|
||||
|
||||
<h5>Responsive Margin</h5>
|
||||
<h6>Without Spacing</h6>
|
||||
<div class="p-grid p-formgrid p-fluid">
|
||||
<div class="p-col-12 p-lg-4">
|
||||
<InputText />
|
||||
</div>
|
||||
<div class="p-col-12 p-lg-4">
|
||||
<InputText />
|
||||
</div>
|
||||
<div class="p-col-12 p-lg-4">
|
||||
<InputText />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h6>With Spacing</h6>
|
||||
<div class="p-grid p-formgrid p-fluid">
|
||||
<div class="p-col-12 p-mb-2 p-lg-4 p-mb-lg-0">
|
||||
<InputText />
|
||||
</div>
|
||||
<div class="p-col-12 p-mb-2 p-lg-4 p-mb-lg-0">
|
||||
<InputText />
|
||||
</div>
|
||||
<div class="p-col-12 p-mb-2 p-lg-4 p-mb-lg-0">
|
||||
<InputText />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h6>Center</h6>
|
||||
<div class="demo-container p-p-4">
|
||||
<Button type="button" label="Button" class="p-d-block p-mx-auto" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<h5>Padding</h5>
|
||||
<h6>Without Spacing</h6>
|
||||
<div class="demo-container">
|
||||
<Button type="button" label="Button" />
|
||||
</div>
|
||||
|
||||
<h6>With Spacing</h6>
|
||||
<div class="demo-container p-p-3">
|
||||
<Button type="button" label="Button" />
|
||||
</div>
|
||||
|
||||
<h6>Responsive Spacing</h6>
|
||||
<div class="demo-container p-p-0 p-p-sm-1 p-p-md-2 p-p-lg-3">
|
||||
<Button type="button" label="Button" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
|
||||
}
|
||||
<\\/script>
|
||||
`
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,18 +1,16 @@
|
|||
<template>
|
||||
<div class="content-section documentation">
|
||||
<TabView>
|
||||
<TabPanel header="Documentation">
|
||||
<h5>Getting Started</h5>
|
||||
<p>The text classes use the <i>p-text-{value}</i> syntax.</p>
|
||||
<AppDoc name="TextDemo" :sources="sources">
|
||||
<h5>Getting Started</h5>
|
||||
<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>
|
||||
<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>
|
||||
<pre v-code><code><template v-pre>
|
||||
<div class="p-text-left">Left</div>
|
||||
<div class="p-text-center">Center</div>
|
||||
|
|
@ -21,13 +19,13 @@
|
|||
</template>
|
||||
</code></pre>
|
||||
|
||||
<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>
|
||||
<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>
|
||||
<pre v-code><code><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>
|
||||
|
|
@ -35,13 +33,13 @@
|
|||
</template>
|
||||
</code></pre>
|
||||
|
||||
<h5>Transform</h5>
|
||||
<p>Transform property changes the case of the text.</p>
|
||||
<ul>
|
||||
<li>lowercase</li>
|
||||
<li>uppercase</li>
|
||||
<li>capitalize</li>
|
||||
</ul>
|
||||
<h5>Transform</h5>
|
||||
<p>Transform property changes the case of the text.</p>
|
||||
<ul>
|
||||
<li>lowercase</li>
|
||||
<li>uppercase</li>
|
||||
<li>capitalize</li>
|
||||
</ul>
|
||||
<pre v-code><code><template v-pre>
|
||||
<div class="p-text-lowercase">LOWERCASE</div>
|
||||
<div class="p-text-uppercase">uppercase</div>
|
||||
|
|
@ -49,14 +47,14 @@
|
|||
</template>
|
||||
</code></pre>
|
||||
|
||||
<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>
|
||||
<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>
|
||||
<pre v-code><code><template v-pre>
|
||||
<div class="p-text-bold">Bold</div>
|
||||
<div class="p-text-normal">Normal</div>
|
||||
|
|
@ -64,38 +62,96 @@
|
|||
<div class="p-text-italic">Italic</div>
|
||||
</template>
|
||||
</code></pre>
|
||||
</TabPanel>
|
||||
|
||||
<TabPanel header="Source">
|
||||
<a href="https://github.com/primefaces/primevue/tree/master/src/views/text" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
|
||||
<span>View on GitHub</span>
|
||||
</a>
|
||||
<pre v-code><code><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>
|
||||
</AppDoc>
|
||||
</template>
|
||||
</code></pre>
|
||||
</TabPanel>
|
||||
</TabView>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
sources: {
|
||||
'options-api': {
|
||||
tabName: 'Source',
|
||||
content: `
|
||||
<template>
|
||||
<div>
|
||||
<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>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
}
|
||||
<\\/script>
|
||||
|
||||
<style scoped>
|
||||
.demo-container {
|
||||
border: 2px solid var(--surface-d);
|
||||
}
|
||||
</style>
|
||||
`
|
||||
},
|
||||
'composition-api': {
|
||||
tabName: 'Composition API',
|
||||
content: `
|
||||
<template>
|
||||
<div>
|
||||
<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>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
}
|
||||
<\\/script>
|
||||
|
||||
<style scoped>
|
||||
.demo-container {
|
||||
border: 2px solid var(--surface-d);
|
||||
}
|
||||
</style>
|
||||
`
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
Loading…
Reference in New Issue