117 lines
3.5 KiB
Vue
117 lines
3.5 KiB
Vue
<template>
|
|
<BaseContainer>
|
|
<ContentContainer title="Content Container" buttons="true">
|
|
<template #buttons>
|
|
<button>Button Bar</button>
|
|
<button class="action">Button Bar</button>
|
|
</template>
|
|
<template #content>
|
|
<h1>Buttons</h1>
|
|
<div>
|
|
<button>Default</button>
|
|
<button disabled>Default</button>
|
|
|
|
<button class="generic">Generic</button>
|
|
<button class="generic" disabled>Generic</button>
|
|
|
|
<button class="action">Action</button>
|
|
<button class="action" disabled>Action</button>
|
|
|
|
|
|
<button class="outlined">Default</button>
|
|
<button class="outlined" disabled>Default</button>
|
|
|
|
<button class="generic outlined">Generic</button>
|
|
<button class="generic outlined" disabled>Generic</button>
|
|
|
|
<button class="action outlined">Action</button>
|
|
<button class="action outlined" disabled>Action</button>
|
|
|
|
</div>
|
|
|
|
<h1>Form Elements</h1>
|
|
<div>
|
|
<FormText placeholder="Input Text" label="Field Label" :model="text"/>
|
|
<FormText placeholder="Input Text" label="Field with Error" error="An error message" :model="text"/>
|
|
<FormText placeholder="Input Text" label="Field Label" off="true"/>
|
|
<FormNumber placeholder="A Number" label="Field Label" />
|
|
<FormNumber placeholder="A Number" label="Field Label" error="An Error"/>
|
|
<FormNumber placeholder="A Number" label="Field Label" off="true"/>
|
|
<FormSelect placeholder="Placeholder" label="Select">
|
|
<option value="optionA">Option A</option>
|
|
<option value="optionB">Option B</option>
|
|
<option value="optionC">Option C</option>
|
|
<option value="optionD">Option D</option>
|
|
</FormSelect>
|
|
<FormSelect placeholder="Placeholder" label="Select" off="true">
|
|
<option value="optionA">Option A</option>
|
|
<option value="optionB">Option B</option>
|
|
<option value="optionC">Option C</option>
|
|
<option value="optionD">Option D</option>
|
|
</FormSelect>
|
|
<FormCheckbox label="Checkbox"/>
|
|
<FormCheckbox label="Checkbox" error="An Error Message"/>
|
|
<FormCheckbox label="Checkbox" off="true"/>
|
|
</div>
|
|
<h2>Toasts</h2>
|
|
<div>
|
|
<Toast type="info">An Information!</Toast>
|
|
<Toast type="warn">A Warning!</Toast>
|
|
<Toast type="error">An Error!</Toast>
|
|
<Toast type="success">Success!</Toast>
|
|
<Toast auto_close="5000">Autoclose</Toast>
|
|
</div>
|
|
</template>
|
|
</ContentContainer>
|
|
</BaseContainer>
|
|
|
|
|
|
</template>
|
|
|
|
<script>
|
|
|
|
import BaseContainer from './components/layout/BaseContainer';
|
|
import ContentContainer from './components/layout/ContentContainer';
|
|
|
|
import FormText from './components/form/FormText';
|
|
import FormNumber from './components/form/FormNumber';
|
|
import FormSelect from './components/form/FormSelect';
|
|
import FormCheckbox from './components/form/FormCheckbox';
|
|
|
|
import Toast from './components/Toast'
|
|
|
|
export default {
|
|
components: {
|
|
BaseContainer,
|
|
ContentContainer,
|
|
|
|
FormText,
|
|
FormNumber,
|
|
FormSelect,
|
|
FormCheckbox,
|
|
|
|
Toast
|
|
},
|
|
data(){
|
|
return {
|
|
text: '',
|
|
number: 0
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
|
|
@import './assets/styles/main.css';
|
|
@import './assets/styles/buttons.css';
|
|
|
|
|
|
|
|
#test {
|
|
margin: 40px;
|
|
padding: 24px;
|
|
background-color: var(--white-normal);
|
|
}
|
|
|
|
</style> |