Remove button type. Add class. Format code.
This commit is contained in:
parent
da0ce5c07d
commit
0c9331d553
3 changed files with 13 additions and 18 deletions
16
src/App.vue
16
src/App.vue
|
|
@ -9,11 +9,6 @@
|
||||||
<p class="text-center fs-6 fw-bold">What year is your vehichle?</p>
|
<p class="text-center fs-6 fw-bold">What year is your vehichle?</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="row">
|
|
||||||
<div class="col">
|
|
||||||
<buttonPrimary />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="row mt-5">
|
<div class="row mt-5">
|
||||||
<radioCard
|
<radioCard
|
||||||
radioLabel="Windshield"
|
radioLabel="Windshield"
|
||||||
|
|
@ -39,20 +34,25 @@
|
||||||
</div>
|
</div>
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col my-3 d-flex align-items-center">
|
<div class="col my-3 d-flex align-items-center">
|
||||||
<buttonPrimary buttonText="Primary" buttonType="btn-primary" />
|
<buttonPrimary
|
||||||
|
buttonText="Primary"
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col my-3 d-flex align-items-center">
|
<div class="col my-3 d-flex align-items-center">
|
||||||
<buttonPrimary
|
<buttonPrimary
|
||||||
buttonText="Primary Focus"
|
buttonText="Primary Focus"
|
||||||
buttonType="btn-primary-focus"
|
class="btn-primary-focus"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col my-3 d-flex align-items-center">
|
<div class="col my-3 d-flex align-items-center">
|
||||||
<buttonPrimary buttonText="Disabled" buttonType="disabled" />
|
<buttonPrimary
|
||||||
|
buttonText="Disabled"
|
||||||
|
class="disabled"
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="row">
|
<div class="row">
|
||||||
|
|
|
||||||
|
|
@ -1,13 +1,9 @@
|
||||||
<template>
|
<template>
|
||||||
<button
|
<button
|
||||||
type="button"
|
class="btn btn-primary d-flex align-items-center"
|
||||||
class="btn d-flex align-items-center"
|
|
||||||
v-on:click="showLoader()"
|
v-on:click="showLoader()"
|
||||||
v-bind:class="[
|
v-bind:class="[this.isLoading ? 'button-loader' : 'not-loading', this.buttonType,]"
|
||||||
this.isLoading ? 'button-loader' : 'not-loading',
|
>
|
||||||
this.buttonType,
|
|
||||||
]"
|
|
||||||
>
|
|
||||||
{{ this.buttonText }}
|
{{ this.buttonText }}
|
||||||
</button>
|
</button>
|
||||||
</template>
|
</template>
|
||||||
|
|
@ -16,8 +12,7 @@
|
||||||
export default {
|
export default {
|
||||||
name: "buttonPrimary",
|
name: "buttonPrimary",
|
||||||
props: {
|
props: {
|
||||||
buttonText: String,
|
buttonText: String
|
||||||
buttonType: String,
|
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
|
|
|
||||||
|
|
@ -19,7 +19,7 @@
|
||||||
v-bind:src="require(`@/assets/img/icons/${radioImage}`)"
|
v-bind:src="require(`@/assets/img/icons/${radioImage}`)"
|
||||||
v-bind:alt="altText"
|
v-bind:alt="altText"
|
||||||
/>
|
/>
|
||||||
<span class="mt-auto mb-2">{{ radioLabel }}</span>
|
<span class="mt-auto mb-2 text-center lh-1">{{ radioLabel }}</span>
|
||||||
</label>
|
</label>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue