vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

Add bulma example

pull/4172/head
Cagatay Civici 2023-07-19 12:21:56 +03:00
parent 059074803e
commit 8ab48d2412
7 changed files with 61 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
assets/menu/menu.json
View File

@ -462,6 +462,10 @@
{ {
"name": "Bootstrap", "name": "Bootstrap",
"to": "/bootstrap" "to": "/bootstrap"
},
{
"name": "Bulma",
"to": "/bulma"
} }
] ]
} }

8
doc/bulma/ExampleDoc.vue Normal file
View File

@ -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>

5
doc/bulma/SetupDoc.vue Normal file
View File

@ -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>

1
doc/theming/BuiltInThemesDoc.vue
View File

@ -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

10
layouts/AppConfigurator.vue
View File

@ -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">

2
pages/bootstrap/index.vue
View File

@ -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>

43
pages/bulma/index.vue Normal file
View File

@ -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>