Merge branch 'prod'
commit
6578e42e19
|
@ -462,6 +462,10 @@
|
||||||
{
|
{
|
||||||
"name": "Bootstrap",
|
"name": "Bootstrap",
|
||||||
"to": "/bootstrap"
|
"to": "/bootstrap"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "Bulma",
|
||||||
|
"to": "/bulma"
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
|
|
|
@ -0,0 +1,8 @@
|
||||||
|
<template>
|
||||||
|
<DocSectionText v-bind="$attrs">
|
||||||
|
<p>Demonstration of various PrimeVue components like input field, button, table and panel styled with Bulma utilities.</p>
|
||||||
|
</DocSectionText>
|
||||||
|
<div class="flex justify-content-center">
|
||||||
|
<iframe class="w-full h-full" style="border: 1px solid rgba(0, 0, 0, 0.1); border-radius: 2px; min-height: 800px" allowfullscreen src="https://stackblitz.com/edit/vitejs-vite-9snkbq?file=src%2FApp.vue&embed=1"></iframe>
|
||||||
|
</div>
|
||||||
|
</template>
|
|
@ -0,0 +1,5 @@
|
||||||
|
<template>
|
||||||
|
<DocSectionText v-bind="$attrs">
|
||||||
|
<p>Bulma can either be used with a CDN or via NPM. Visit the official documentation for installation steps. PrimeVue does require an extra configuration other than using components as <i>unstyled</i>.</p>
|
||||||
|
</DocSectionText>
|
||||||
|
</template>
|
|
@ -27,7 +27,6 @@ primevue/resources/themes/mdc-light-indigo/theme.css
|
||||||
primevue/resources/themes/mdc-light-deeppurple/theme.css
|
primevue/resources/themes/mdc-light-deeppurple/theme.css
|
||||||
primevue/resources/themes/mdc-dark-indigo/theme.css
|
primevue/resources/themes/mdc-dark-indigo/theme.css
|
||||||
primevue/resources/themes/mdc-dark-deeppurple/theme.css
|
primevue/resources/themes/mdc-dark-deeppurple/theme.css
|
||||||
primevue/resources/themes/tailwind-light/theme.css
|
|
||||||
primevue/resources/themes/fluent-light/theme.css
|
primevue/resources/themes/fluent-light/theme.css
|
||||||
primevue/resources/themes/lara-light-blue/theme.css
|
primevue/resources/themes/lara-light-blue/theme.css
|
||||||
primevue/resources/themes/lara-light-indigo/theme.css
|
primevue/resources/themes/lara-light-indigo/theme.css
|
||||||
|
|
|
@ -116,16 +116,6 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<h4>Tailwind</h4>
|
|
||||||
<div class="grid free-themes">
|
|
||||||
<div class="col-3 flex flex-column align-items-center gap-2">
|
|
||||||
<button class="px-link h-3rem" @click="changeTheme('tailwind-light')">
|
|
||||||
<img src="https://primefaces.org/cdn/primevue/images/themes/tailwind-light.png" alt="Tailwind Light" class="w-3rem border-round" />
|
|
||||||
</button>
|
|
||||||
<span class="white-space-nowrap">Tailwind Light</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<h4>Fluent UI</h4>
|
<h4>Fluent UI</h4>
|
||||||
<div class="grid free-themes">
|
<div class="grid free-themes">
|
||||||
<div class="col-3 flex flex-column align-items-center gap-2">
|
<div class="col-3 flex flex-column align-items-center gap-2">
|
||||||
|
|
|
@ -9,7 +9,7 @@
|
||||||
<div class="doc-main">
|
<div class="doc-main">
|
||||||
<div class="doc-intro">
|
<div class="doc-intro">
|
||||||
<h1>Bootstrap</h1>
|
<h1>Bootstrap</h1>
|
||||||
<p>Boostrap is a well-known CSS library to build responsive and mobile first web projects.</p>
|
<p><a href="https://getbootstrap.com" class="font-semibold hover:underline text-primary">Bootstrap</a> is a well-known CSS library to build responsive and mobile first web projects.</p>
|
||||||
</div>
|
</div>
|
||||||
<DocSections :docs="docs" />
|
<DocSections :docs="docs" />
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -0,0 +1,43 @@
|
||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<Head>
|
||||||
|
<Title>Bulma - PrimeVue</Title>
|
||||||
|
<Meta name="description" content="Bulma is a free, open source framework that provides ready-to-use frontend copmponents and utilities.." />
|
||||||
|
</Head>
|
||||||
|
|
||||||
|
<div class="doc">
|
||||||
|
<div class="doc-main">
|
||||||
|
<div class="doc-intro">
|
||||||
|
<h1>Bulma</h1>
|
||||||
|
<p><a href="https://bulma.io/" class="font-semibold hover:underline text-primary">Bulma</a> is a free, open source framework that provides ready-to-use frontend copmponents and utilities.</p>
|
||||||
|
</div>
|
||||||
|
<DocSections :docs="docs" />
|
||||||
|
</div>
|
||||||
|
<DocSectionNav :docs="docs" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import ExampleDoc from '@/doc/bulma/ExampleDoc';
|
||||||
|
import SetupDoc from '@/doc/bulma/SetupDoc';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
docs: [
|
||||||
|
{
|
||||||
|
id: 'setup',
|
||||||
|
label: 'Setup',
|
||||||
|
component: SetupDoc
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'example',
|
||||||
|
label: 'Example',
|
||||||
|
component: ExampleDoc
|
||||||
|
}
|
||||||
|
]
|
||||||
|
};
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
Loading…
Reference in New Issue