91 lines
2.6 KiB
Vue
91 lines
2.6 KiB
Vue
<template>
|
|
<div id="test">
|
|
<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>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
|
|
import FormText from './components/form/FormText';
|
|
import FormNumber from './components/form/FormNumber';
|
|
import FormSelect from './components/form/FormSelect';
|
|
import FormCheckbox from './components/form/FormCheckbox';
|
|
|
|
export default {
|
|
components: {
|
|
FormText,
|
|
FormNumber,
|
|
FormSelect,
|
|
FormCheckbox
|
|
},
|
|
data(){
|
|
return {
|
|
text: '',
|
|
number: 0
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
|
|
@import './assets/styles/main.css';
|
|
@import './assets/styles/buttons.css';
|
|
|
|
body {
|
|
background-color: var(--white-washed);
|
|
}
|
|
|
|
#test {
|
|
margin: 40px;
|
|
padding: 24px;
|
|
background-color: var(--white-normal);
|
|
}
|
|
|
|
</style> |