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

Add input style switcher

pull/358/head
cagataycivici 2020-06-20 12:40:01 +03:00
parent d423d2ffcc
commit 119250025c
56 changed files with 7947 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
public/themes/arya-blue/theme.css
View File

@ -676,6 +676,9 @@
font-size: 1.25rem;
padding: 0.625rem 0.625rem;
}
.p-inputtext.p-input-filled {
background: #121212;
}
.p-float-label label {
left: 0.5rem;
@ -717,6 +720,10 @@
color: rgba(255, 255, 255, 0.6);
}
.p-input-filled .p-inputtext {
background: #121212;
}
.p-listbox {
background: #1e1e1e;
color: rgba(255, 255, 255, 0.87);

7
public/themes/arya-green/theme.css
View File

@ -676,6 +676,9 @@
font-size: 1.25rem;
padding: 0.625rem 0.625rem;
}
.p-inputtext.p-input-filled {
background: #121212;
}
.p-float-label label {
left: 0.5rem;
@ -717,6 +720,10 @@
color: rgba(255, 255, 255, 0.6);
}
.p-input-filled .p-inputtext {
background: #121212;
}
.p-listbox {
background: #1e1e1e;
color: rgba(255, 255, 255, 0.87);

7
public/themes/arya-orange/theme.css
View File

@ -676,6 +676,9 @@
font-size: 1.25rem;
padding: 0.625rem 0.625rem;
}
.p-inputtext.p-input-filled {
background: #121212;
}
.p-float-label label {
left: 0.5rem;
@ -717,6 +720,10 @@
color: rgba(255, 255, 255, 0.6);
}
.p-input-filled .p-inputtext {
background: #121212;
}
.p-listbox {
background: #1e1e1e;
color: rgba(255, 255, 255, 0.87);

7
public/themes/arya-purple/theme.css
View File

@ -676,6 +676,9 @@
font-size: 1.25rem;
padding: 0.625rem 0.625rem;
}
.p-inputtext.p-input-filled {
background: #121212;
}
.p-float-label label {
left: 0.5rem;
@ -717,6 +720,10 @@
color: rgba(255, 255, 255, 0.6);
}
.p-input-filled .p-inputtext {
background: #121212;
}
.p-listbox {
background: #1e1e1e;
color: rgba(255, 255, 255, 0.87);

7
public/themes/bootstrap4-dark/theme.css
View File

@ -676,6 +676,9 @@
font-size: 1.25rem;
padding: 0.625rem 0.9375rem;
}
.p-inputtext.p-input-filled {
background: #20262e;
}
.p-float-label label {
left: 0.75rem;
@ -717,6 +720,10 @@
color: rgba(255, 255, 255, 0.6);
}
.p-input-filled .p-inputtext {
background: #20262e;
}
.p-listbox {
background: #2a323d;
color: rgba(255, 255, 255, 0.87);

7
public/themes/bootstrap4-light/theme.css
View File

@ -676,6 +676,9 @@
font-size: 1.25rem;
padding: 0.625rem 0.9375rem;
}
.p-inputtext.p-input-filled {
background: rgba(0, 0, 0, 0.03);
}
.p-float-label label {
left: 0.75rem;
@ -717,6 +720,10 @@
color: #6c757d;
}
.p-input-filled .p-inputtext {
background: rgba(0, 0, 0, 0.03);
}
.p-listbox {
background: #ffffff;
color: #212529;

7
public/themes/luna-amber/theme.css
View File

@ -676,6 +676,9 @@
font-size: 1.25rem;
padding: 0.53625rem 0.53625rem;
}
.p-inputtext.p-input-filled {
background: #191919;
}
.p-float-label label {
left: 0.429rem;
@ -717,6 +720,10 @@
color: #9b9b9b;
}
.p-input-filled .p-inputtext {
background: #191919;
}
.p-listbox {
background: #323232;
color: #dedede;

7
public/themes/luna-blue/theme.css
View File

@ -676,6 +676,9 @@
font-size: 1.25rem;
padding: 0.53625rem 0.53625rem;
}
.p-inputtext.p-input-filled {
background: #191919;
}
.p-float-label label {
left: 0.429rem;
@ -717,6 +720,10 @@
color: #9b9b9b;
}
.p-input-filled .p-inputtext {
background: #191919;
}
.p-listbox {
background: #323232;
color: #dedede;

7
public/themes/luna-green/theme.css
View File

@ -676,6 +676,9 @@
font-size: 1.25rem;
padding: 0.53625rem 0.53625rem;
}
.p-inputtext.p-input-filled {
background: #191919;
}
.p-float-label label {
left: 0.429rem;
@ -717,6 +720,10 @@
color: #9b9b9b;
}
.p-input-filled .p-inputtext {
background: #191919;
}
.p-listbox {
background: #323232;
color: #dedede;

7
public/themes/luna-pink/theme.css
View File

@ -676,6 +676,9 @@
font-size: 1.25rem;
padding: 0.53625rem 0.53625rem;
}
.p-inputtext.p-input-filled {
background: #191919;
}
.p-float-label label {
left: 0.429rem;
@ -717,6 +720,10 @@
color: #9b9b9b;
}
.p-input-filled .p-inputtext {
background: #191919;
}
.p-listbox {
background: #323232;
color: #dedede;

3830
public/themes/material-dark/theme.css Normal file
View File

File diff suppressed because it is too large Load Diff

3855
public/themes/material-light/theme.css Normal file
View File

File diff suppressed because it is too large Load Diff

7
public/themes/nova-accent/theme.css
View File

@ -676,6 +676,9 @@
font-size: 1.25rem;
padding: 0.53625rem 0.53625rem;
}
.p-inputtext.p-input-filled {
background: #f4f4f4;
}
.p-float-label label {
left: 0.429rem;
@ -717,6 +720,10 @@
color: #666666;
}
.p-input-filled .p-inputtext {
background: #f4f4f4;
}
.p-listbox {
background: #ffffff;
color: #333333;

7
public/themes/nova-alt/theme.css
View File

@ -676,6 +676,9 @@
font-size: 1.25rem;
padding: 0.53625rem 0.53625rem;
}
.p-inputtext.p-input-filled {
background: #f4f4f4;
}
.p-float-label label {
left: 0.429rem;
@ -717,6 +720,10 @@
color: #666666;
}
.p-input-filled .p-inputtext {
background: #f4f4f4;
}
.p-listbox {
background: #ffffff;
color: #333333;

7
public/themes/nova-vue/theme.css
View File

@ -676,6 +676,9 @@
font-size: 1.25rem;
padding: 0.53625rem 0.53625rem;
}
.p-inputtext.p-input-filled {
background: #f4f4f4;
}
.p-float-label label {
left: 0.429rem;
@ -717,6 +720,10 @@
color: #666666;
}
.p-input-filled .p-inputtext {
background: #f4f4f4;
}
.p-listbox {
background: #ffffff;
color: #333333;

7
public/themes/nova/theme.css
View File

@ -676,6 +676,9 @@
font-size: 1.25rem;
padding: 0.53625rem 0.53625rem;
}
.p-inputtext.p-input-filled {
background: #f4f4f4;
}
.p-float-label label {
left: 0.429rem;
@ -717,6 +720,10 @@
color: #666666;
}
.p-input-filled .p-inputtext {
background: #f4f4f4;
}
.p-listbox {
background: #ffffff;
color: #333333;

25
public/themes/rhea/theme.css
View File

@ -311,7 +311,7 @@
}
.p-checkbox .p-checkbox-box {
border: 1px solid #dadada;
background: #f4f4f4;
background: #ffffff;
width: 1.5rem;
height: 1.5rem;
color: #666666;
@ -404,7 +404,7 @@
}
.p-dropdown {
background: #f4f4f4;
background: #ffffff;
border: 1px solid #dadada;
transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
border-radius: 2px;
@ -430,7 +430,7 @@
box-shadow: none;
}
.p-dropdown .p-dropdown-trigger {
background: #f4f4f4;
background: #ffffff;
color: #666666;
width: 2.357rem;
border-top-right-radius: 2px;
@ -501,7 +501,7 @@
border-bottom-left-radius: 2px;
}
.p-editor-container .p-editor-content .ql-editor {
background: #f4f4f4;
background: #ffffff;
color: #666666;
border-bottom-right-radius: 2px;
border-bottom-left-radius: 2px;
@ -606,7 +606,7 @@
height: 1.75rem;
}
.p-inputswitch .p-inputswitch-slider {
background: #f4f4f4;
background: #ffffff;
transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
border-radius: 30px;
}
@ -647,7 +647,7 @@
.p-inputtext {
font-size: 1rem;
color: #666666;
background: #f4f4f4;
background: #ffffff;
padding: 0.429rem 0.429rem;
border: 1px solid #dadada;
border-width: 1px;
@ -676,6 +676,9 @@
font-size: 1.25rem;
padding: 0.53625rem 0.53625rem;
}
.p-inputtext.p-input-filled {
background: #f4f4f4;
}
.p-float-label label {
left: 0.429rem;
@ -717,6 +720,10 @@
color: #a6a6a6;
}
.p-input-filled .p-inputtext {
background: #f4f4f4;
}
.p-listbox {
background: #ffffff;
color: #666666;
@ -769,7 +776,7 @@
}
.p-multiselect {
background: #f4f4f4;
background: #ffffff;
border: 1px solid #dadada;
transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
border-radius: 2px;
@ -790,7 +797,7 @@
color: #a6a6a6;
}
.p-multiselect .p-multiselect-trigger {
background: #f4f4f4;
background: #ffffff;
color: #666666;
width: 2.357rem;
border-top-right-radius: 2px;
@ -889,7 +896,7 @@
}
.p-radiobutton .p-radiobutton-box {
border: 1px solid #dadada;
background: #f4f4f4;
background: #ffffff;
width: 20px;
height: 20px;
color: #666666;

7
public/themes/saga-blue/theme.css
View File

@ -676,6 +676,9 @@
font-size: 1.25rem;
padding: 0.625rem 0.625rem;
}
.p-inputtext.p-input-filled {
background: #f8f9fa;
}
.p-float-label label {
left: 0.5rem;
@ -717,6 +720,10 @@
color: #6c757d;
}
.p-input-filled .p-inputtext {
background: #f8f9fa;
}
.p-listbox {
background: #ffffff;
color: #495057;

7
public/themes/saga-green/theme.css
View File

@ -676,6 +676,9 @@
font-size: 1.25rem;
padding: 0.625rem 0.625rem;
}
.p-inputtext.p-input-filled {
background: #f8f9fa;
}
.p-float-label label {
left: 0.5rem;
@ -717,6 +720,10 @@
color: #6c757d;
}
.p-input-filled .p-inputtext {
background: #f8f9fa;
}
.p-listbox {
background: #ffffff;
color: #495057;

7
public/themes/saga-orange/theme.css
View File

@ -676,6 +676,9 @@
font-size: 1.25rem;
padding: 0.625rem 0.625rem;
}
.p-inputtext.p-input-filled {
background: #f8f9fa;
}
.p-float-label label {
left: 0.5rem;
@ -717,6 +720,10 @@
color: #6c757d;
}
.p-input-filled .p-inputtext {
background: #f8f9fa;
}
.p-listbox {
background: #ffffff;
color: #495057;

7
public/themes/vela-blue/theme.css
View File

@ -676,6 +676,9 @@
font-size: 1.25rem;
padding: 0.625rem 0.625rem;
}
.p-inputtext.p-input-filled {
background: #17212f;
}
.p-float-label label {
left: 0.5rem;
@ -717,6 +720,10 @@
color: rgba(255, 255, 255, 0.6);
}
.p-input-filled .p-inputtext {
background: #17212f;
}
.p-listbox {
background: #1f2d40;
color: rgba(255, 255, 255, 0.87);

7
public/themes/vela-green/theme.css
View File

@ -676,6 +676,9 @@
font-size: 1.25rem;
padding: 0.625rem 0.625rem;
}
.p-inputtext.p-input-filled {
background: #17212f;
}
.p-float-label label {
left: 0.5rem;
@ -717,6 +720,10 @@
color: rgba(255, 255, 255, 0.6);
}
.p-input-filled .p-inputtext {
background: #17212f;
}
.p-listbox {
background: #1f2d40;
color: rgba(255, 255, 255, 0.87);

7
public/themes/vela-orange/theme.css
View File

@ -676,6 +676,9 @@
font-size: 1.25rem;
padding: 0.625rem 0.625rem;
}
.p-inputtext.p-input-filled {
background: #17212f;
}
.p-float-label label {
left: 0.5rem;
@ -717,6 +720,10 @@
color: rgba(255, 255, 255, 0.6);
}
.p-input-filled .p-inputtext {
background: #17212f;
}
.p-listbox {
background: #1f2d40;
color: rgba(255, 255, 255, 0.87);

7
public/themes/vela-purple/theme.css
View File

@ -676,6 +676,9 @@
font-size: 1.25rem;
padding: 0.625rem 0.625rem;
}
.p-inputtext.p-input-filled {
background: #17212f;
}
.p-float-label label {
left: 0.5rem;
@ -717,6 +720,10 @@
color: rgba(255, 255, 255, 0.6);
}
.p-input-filled .p-inputtext {
background: #17212f;
}
.p-listbox {
background: #1f2d40;
color: rgba(255, 255, 255, 0.87);

15
src/App.vue
View File

@ -1,5 +1,5 @@
<template>
<div class="layout-wrapper" :class="[{'layout-news-active':newsActive}]">
<div class="layout-wrapper" :class="containerClass">
<a class="layout-news" href="https://www.primefaces.org/store" target="_blank" tabindex="-1" v-if="newsActive">
<div class="layout-news-container">
<img class="layouts-news-text-image" alt="easter" src="./assets/images/topbar-easter-2020-text.png">
@ -79,11 +79,7 @@ export default {
this.activeMenuIndex = null;
EventBus.$emit('change-theme', event);
if (event.dark)
document.body.setAttribute('data-darktheme', 'true');
else
document.body.removeAttribute('data-darktheme')
this.$appState.darkTheme = event.dark;
},
addClass(element, className) {
@ -115,12 +111,17 @@ export default {
return false;
}
},
computed: {
containerClass() {
return [{'layout-news-active': this.newsActive, 'p-input-filled': this.$appState.inputStyle === 'filled'}];
}
},
components: {
'app-topbar': AppTopBar,
'app-menu': AppMenu,
'app-footer': AppFooter,
'app-configurator': AppConfigurator
},
}
}
</script>

9
src/AppConfigurator.vue
View File

@ -17,6 +17,8 @@
<Button icon="pi pi-plus" @click="incrementScale()" class="p-button-secondary" :disabled="scale === scales[scales.length - 1]" />
</div>
<AppInputStyleSwitch />
<h4>Free Themes</h4>
<p>Built-in component themes created by the <a href="https://www.primefaces.org/designer/primevue">PrimeVue Theme Designer</a>.</p>
@ -30,7 +32,7 @@
</div>
<div class="p-col-3">
<button class="p-link">
<img src="./assets/images/themes/bootstrap-dark.png" alt="Bootstrap Dark" @click="changeTheme($event, 'bootstrap4-dark')"/>
<img src="./assets/images/themes/bootstrap-dark.png" alt="Bootstrap Dark" @click="changeTheme($event, 'bootstrap4-dark', true)"/>
</button>
<span>Dark</span>
</div>
@ -46,7 +48,7 @@
</div>
<div class="p-col-3">
<button class="p-link">
<img src="./assets/images/themes/material-dark.png" alt="Material Dark" @click="changeTheme($event, 'material-dark')"/>
<img src="./assets/images/themes/material-dark.png" alt="Material Dark" @click="changeTheme($event, 'material-dark', true)"/>
</button>
<span>Dark</span>
</div>
@ -234,7 +236,8 @@
<script>
export default {
props: {
theme: String
theme: String,
inputStyle: String
},
data() {
return {

31
src/AppInputStyleSwitch.vue Normal file
View File

@ -0,0 +1,31 @@
<template>
<div class="app-inputstyleswitch">
<h4>Input Style</h4>
<div class="p-formgroup-inline">
<div class="p-field-radiobutton">
<RadioButton id="input_outlined" name="inputstyle" value="outlined" :modelValue="value" @input="onChange" />
<label for="input_outlined">Outlined</label>
</div>
<div class="p-field-radiobutton">
<RadioButton id="input_filled" name="inputstyle" value="filled" :modelValue="value" @input="onChange" />
<label for="input_filled">Filled</label>
</div>
</div>
</div>
</template>
<script>
export default {
methods: {
onChange(value) {
this.$appState.inputStyle = value;
}
},
computed: {
value() {
return this.$appState.inputStyle;
}
}
};
</script>

12
src/assets/styles/app/_config.scss
View File

@ -26,7 +26,6 @@
.layout-config-content-wrapper {
position: relative;
height: 100%;
padding: 2rem;
box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.24);
color: var(--text-color);
background-color: var(--surface-e);
@ -74,6 +73,7 @@
.layout-config-content {
overflow: auto;
height: 100%;
padding: 2rem;
}
.config-scale {
@ -146,6 +146,11 @@
img {
width: 50px;
border-radius: 4px;
transition: transform .2s;
&:hover {
transform: scale(1.1);
}
}
span {
@ -157,6 +162,11 @@
.premium-themes {
img {
width: 100%;
transition: transform .2s;
&:hover {
transform: scale(1.1);
}
}
}
}

3
src/assets/styles/app/_content.scss
View File

@ -9,6 +9,9 @@
background-color: var(--surface-b);
color: var(--text-color);
padding-bottom: 0;
display: flex;
align-items: top;
justify-content: space-between;
.feature-intro {
h1 {

8
src/assets/styles/app/_responsive.scss
View File

@ -87,6 +87,14 @@
&.submenu ul li {
width: 50%;
}
&.introduction {
flex-direction: column;
.app-inputstyleswitch {
margin-top: 1.5rem;
}
}
}
}

4
src/main.js
View File

@ -75,6 +75,7 @@ import TriStateCheckbox from './components/tristatecheckbox/TriStateCheckbox';
import Galleria from './components/galleria/Galleria';
import CodeHighlight from './views/codehighlight/CodeHighlight';
import AppInputStyleSwitch from './AppInputStyleSwitch';
import './assets/styles/primevue.css';
import 'primeflex/primeflex.css';
@ -89,6 +90,8 @@ Vue.use(Vuelidate);
Vue.use(ToastService);
Vue.directive('tooltip', Tooltip);
Vue.prototype.$appState = Vue.observable({ inputStyle: 'outlined', darkTheme: false })
Vue.config.productionTip = false;
Vue.component('Accordion', Accordion);
@ -163,6 +166,7 @@ Vue.component('TriStateCheckbox', TriStateCheckbox);
Vue.component('Galleria', Galleria);
Vue.component('CodeHighlight', CodeHighlight);
Vue.component('AppInputStyleSwitch', AppInputStyleSwitch);
router.beforeEach(function (to, from, next) {
window.scrollTo(0, 0);

1
src/views/autocomplete/AutoCompleteDemo.vue
View File

@ -5,6 +5,7 @@
<h1>AutoComplete</h1>
<p>AutoComplete is an input component that provides real-time suggestions when being typed.</p>
</div>
<AppInputStyleSwitch />
</div>
<div class="content-section implementation">

1
src/views/calendar/CalendarDemo.vue
View File

@ -5,6 +5,7 @@
<h1>Calendar</h1>
<p>Calendar is an input component to select a date.</p>
</div>
<AppInputStyleSwitch />
</div>
<div class="content-section implementation">

2
src/views/chart/BarChartDemo.vue
View File

@ -184,7 +184,7 @@ export default {
},
methods: {
isDarkTheme() {
return document.body.getAttribute('data-darktheme') !== null;
return this.$appState.darkTheme === true;
},
applyLightTheme() {
this.basicOptions = {

2
src/views/chart/ComboChartDemo.vue
View File

@ -98,7 +98,7 @@ export default {
},
methods: {
isDarkTheme() {
return document.body.getAttribute('data-darktheme') !== null;
return this.$appState.darkTheme === true;
},
applyLightTheme() {
this.chartOptions = {

2
src/views/chart/DoughnutChartDemo.vue
View File

@ -55,7 +55,7 @@ export default {
},
methods: {
isDarkTheme() {
return document.body.getAttribute('data-darktheme') !== null;
return this.$appState.darkTheme === true;
},
getLightTheme() {
return {

2
src/views/chart/LineChartDemo.vue
View File

@ -131,7 +131,7 @@ export default {
},
methods: {
isDarkTheme() {
return document.body.getAttribute('data-darktheme') !== null;
return this.$appState.darkTheme === true;
},
applyLightTheme() {
this.basicOptions = {

2
src/views/chart/PieChartDemo.vue
View File

@ -55,7 +55,7 @@ export default {
},
methods: {
isDarkTheme() {
return document.body.getAttribute('data-darktheme') !== null;
return this.$appState.darkTheme === true;
},
getLightTheme() {
return {

2
src/views/chart/PolarAreaChartDemo.vue
View File

@ -63,7 +63,7 @@ export default {
},
methods: {
isDarkTheme() {
return document.body.getAttribute('data-darktheme') !== null;
return this.$appState.darkTheme === true;
},
getLightTheme() {
return {

2
src/views/chart/RadarChartDemo.vue
View File

@ -62,7 +62,7 @@ export default {
},
methods: {
isDarkTheme() {
return document.body.getAttribute('data-darktheme') !== null;
return this.$appState.darkTheme === true;
},
getLightTheme() {
return {

1
src/views/checkbox/CheckboxDemo.vue
View File

@ -5,6 +5,7 @@
<h1>Checkbox</h1>
<p>Checkbox is an extension to standard checkbox element with theming.</p>
</div>
<AppInputStyleSwitch />
</div>
<div class="content-section implementation">

1
src/views/chips/ChipsDemo.vue
View File

@ -5,6 +5,7 @@
<h1>Chips</h1>
<p>Chips is used to enter multiple values on an input field.</p>
</div>
<AppInputStyleSwitch />
</div>
<div class="content-section implementation p-fluid">

1
src/views/dropdown/DropdownDemo.vue
View File

@ -5,6 +5,7 @@
<h1>Dropdown</h1>
<p>Dropdown is used to select an item from a list of options.</p>
</div>
<AppInputStyleSwitch />
</div>
<div class="content-section implementation">

4
src/views/formlayout/FormLayoutDemo.vue
View File

@ -123,11 +123,11 @@
<h5>Horizontal RadioButton</h5>
<div class="p-formgroup-inline">
<div class="p-field-checkbox">
<div class="p-field-radiobutton">
<RadioButton id="city7" name="city2" value="Chicago" v-model="city2" />
<label for="city7">Chicago</label>
</div>
<div class="p-field-checkbox">
<div class="p-field-radiobutton">
<RadioButton id="city8" name="city2" value="Los Angeles" v-model="city2" />
<label for="city8">Los Angeles</label>
</div>

4
src/views/formlayout/FormLayoutDoc.vue
View File

@ -333,11 +333,11 @@ import 'primeflex/primeflex.css';
&lt;h3&gt;Horizontal RadioButton&lt;/h3&gt;
&lt;div class="p-formgroup-inline"&gt;
&lt;div class="p-field-checkbox"&gt;
&lt;div class="p-field-radiobutton"&gt;
&lt;RadioButton id="city7" name="city2" value="Chicago" v-model="city2" /&gt;
&lt;label for="city7"&gt;Chicago&lt;/label&gt;
&lt;/div&gt;
&lt;div class="p-field-checkbox"&gt;
&lt;div class="p-field-radiobutton"&gt;
&lt;RadioButton id="city8" name="city2" value="Los Angeles" v-model="city2" /&gt;
&lt;label for="city8"&gt;Los Angeles&lt;/label&gt;
&lt;/div&gt;

1
src/views/inputgroup/InputGroupDemo.vue
View File

@ -5,6 +5,7 @@
<h1>InputGroup</h1>
<p>Text, icon, buttons and other content can be grouped next to an input.</p>
</div>
<AppInputStyleSwitch />
</div>
<div class="content-section implementation">

1
src/views/inputmask/InputMaskDemo.vue
View File

@ -5,6 +5,7 @@
<h1>InputMask</h1>
<p>InputMask component is used to enter input in a certain format such as numeric, date, currency, email and phone.</p>
</div>
<AppInputStyleSwitch />
</div>
<div class="content-section implementation">

1
src/views/inputnumber/InputNumberDemo.vue
View File

@ -5,6 +5,7 @@
<h1>InputNumber</h1>
<p>InputNumber is an input component to provide numerical input.</p>
</div>
<AppInputStyleSwitch />
</div>
<div class="content-section implementation">

3
src/views/inputtext/InputTextDemo.vue
View File

@ -3,8 +3,9 @@
<div class="content-section introduction">
<div class="feature-intro">
<h1>InputText</h1>
<p>InputText renders and input field where the user can enter data.</p>
<p>InputText renders a text field to enter data.</p>
</div>
<AppInputStyleSwitch />
</div>
<div class="content-section implementation">

1
src/views/listbox/ListboxDemo.vue
View File

@ -5,6 +5,7 @@
<h1>Listbox</h1>
<p>Listbox is used to select one or more values from a list of items.</p>
</div>
<AppInputStyleSwitch />
</div>
<div class="content-section implementation">

1
src/views/multiselect/MultiSelectDemo.vue
View File

@ -5,6 +5,7 @@
<h1>MultiSelect</h1>
<p>MultiSelect is used to multiple values from a list of options.</p>
</div>
<AppInputStyleSwitch />
</div>
<div class="content-section implementation">

1
src/views/password/PasswordDemo.vue
View File

@ -5,6 +5,7 @@
<h1>Password</h1>
<p>Password displays strength indicator for password fields.</p>
</div>
<AppInputStyleSwitch />
</div>
<div class="content-section implementation">

1
src/views/radiobutton/RadioButtonDemo.vue
View File

@ -5,6 +5,7 @@
<h1>RadioButton</h1>
<p>RadioButton is an extension to standard radio button element with theming.</p>
</div>
<AppInputStyleSwitch />
</div>
<div class="content-section implementation">

1
src/views/slider/SliderDemo.vue
View File

@ -5,6 +5,7 @@
<h1>Slider</h1>
<p>Slider is an input component to provide a numerical input.</p>
</div>
<AppInputStyleSwitch />
</div>
<div class="content-section implementation">

1
src/views/textarea/TextareaDemo.vue
View File

@ -5,6 +5,7 @@
<h1>Textarea</h1>
<p>Textarea is a multi-line text input element.</p>
</div>
<AppInputStyleSwitch />
</div>
<div class="content-section implementation">

1
src/views/tristatecheckbox/TriStateCheckboxDemo.vue
View File

@ -5,6 +5,7 @@
<h1>TriStateCheckbox</h1>
<p>TriStateCheckbox is used to select either "true", "false" or "null" as the value.</p>
</div>
<AppInputStyleSwitch />
</div>
<div class="content-section implementation">