AppDoc added
Tuğçe Küçükoğlu
parent
424f548389
commit
20bf1fde46
|
|
@ -1,7 +1,5 @@
|
|||
<template>
|
||||
<div class="content-section documentation">
|
||||
<TabView>
|
||||
<TabPanel header="Documentation">
|
||||
<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>
|
||||
|
|
@ -16,23 +14,84 @@
|
|||
<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>
|
||||
|
||||
<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,7 +1,5 @@
|
|||
<template>
|
||||
<div class="content-section documentation">
|
||||
<TabView>
|
||||
<TabPanel header="Documentation">
|
||||
<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>
|
||||
|
|
@ -62,76 +60,166 @@
|
|||
|
||||
<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>
|
||||
</AppDoc>
|
||||
</template>
|
||||
</code></pre>
|
||||
</TabPanel>
|
||||
</TabView>
|
||||
|
||||
<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,7 +1,5 @@
|
|||
<template>
|
||||
<div class="content-section documentation">
|
||||
<TabView>
|
||||
<TabPanel header="Documentation">
|
||||
<AppDoc name="TextDemo" :sources="sources">
|
||||
<h5>Getting Started</h5>
|
||||
<p>The text classes use the <i>p-text-{value}</i> syntax.</p>
|
||||
|
||||
|
|
@ -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>
|
||||
|
||||
<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