jason/DigitalConsumer.FixMyGlass
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add headings and spacing to component test page.

Browse source
This commit is contained in:
bmauger 2021-11-18 08:53:56 -05:00
parent 74c169e353
commit 0d010fc204
1 changed files with 40 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

40
src/layouts/componentTest/componentTest.vue
View file

@ -1,5 +1,10 @@
<template>
<div class="container-fluid container-shadow p-2 rounded-3">
<div class="row my-4">
<div class="col">
<h4 class="m-0 p-2 bg-light rounded">Radio Card</h4>
</div>
</div>
<div class="row g-2">
<radioCard
radioLabel="Windshield"
@ -23,6 +28,11 @@
radioID="backglass"
/>
</div>
<div class="row my-4">
<div class="col">
<h4 class="m-0 p-2 bg-light rounded">Buttons</h4>
</div>
</div>
<div class="row">
<div class="col my-3 d-flex align-items-center">
<buttonPrimary
@ -37,6 +47,11 @@
/>
</div>
</div>
<div class="row my-4">
<div class="col">
<h4 class="m-0 p-2 bg-light rounded">List Button</h4>
</div>
</div>
<div class="row">
<div class="col my-3 d-flex align-items-center">
<listButton
@ -45,6 +60,11 @@
/>
</div>
</div>
<div class="row my-4">
<div class="col">
<h4 class="m-0 p-2 bg-light rounded">Radio Button Group</h4>
</div>
</div>
<div class="row">
<!-- The role="radiogroup" and aria-labelledby must be included in the parent component for the radio group -->
<div role="radiogroup" aria-labelledby="select-year-radio-group" class="col my-3 d-flex align-items-center flex-column">
@ -70,11 +90,21 @@
/>
</div>
</div>
<div class="row my-4">
<div class="col">
<h4 class="m-0 p-2 bg-light rounded">Text Link</h4>
</div>
</div>
<div class="row">
<div class="col my-3 d-flex align-items-center">
<a href="#">Text Link</a>
</div>
</div>
<div class="row my-4">
<div class="col">
<h4 class="m-0 p-2 bg-light rounded">Typogrophy</h4>
</div>
</div>
<div class="row my-2">
<div class="col">
<p>This is default body copy font size/weight</p>
@ -82,6 +112,11 @@
<p><small>This is also small using <code>&lt;small&gt;</code> tag</small></p>
</div>
</div>
<div class="row my-4">
<div class="col">
<h4 class="m-0 p-2 bg-light rounded">Headings</h4>
</div>
</div>
<div class="row my-2">
<div class="col">
<h1>h1 Heading</h1>
@ -112,6 +147,11 @@
<h6>h6 Heading</h6>
</div>
</div>
<div class="row my-4">
<div class="col">
<h4 class="m-0 p-2 bg-light rounded">Alerts</h4>
</div>
</div>
<div class="row my-2">
<div class="col">
<alert