Skip to content

Commit 640971e

Browse files
howbizarrehowbizarre
committed
ADD: Comntent and Bootstrap actions
1 parent 2265753 commit 640971e

File tree

9 files changed

+233
-34
lines changed

9 files changed

+233
-34
lines changed

‎src/App.vue‎

Lines changed: 1 addition & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,3 @@
11
<template>
2-
<Nav />
32
<RouterView />
4-
</template>
5-
6-
<script lang="ts" setup>
7-
import Nav from "@/components/Nav.vue";
8-
</script>
3+
</template>

‎src/components/Footer.vue‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
<template>
2+
<div class="border-top py-3 d-flex justify-content-between align-items-center">
3+
<div>
4+
<Refs /> <a href="https://bizarre.how/" class="text-decoration-none" title="Starter by How Bizarre">How Bizarre</a>
5+
</div>
6+
<a href="https://github.com/howbizarre/starter-template_vue-3-vite-bootstrap-5-with-icons" class="text-decoration-none" title="Boilerplate for Vue 3 with Vite and Bootstrap 5 with Icons">
7+
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24">
8+
<g id="feGithub0" fill="none" fill-rule="evenodd" stroke="none" stroke-width="1">
9+
<g id="feGithub1" fill="currentColor">
10+
<path id="feGithub2" d="M12 2C6.475 2 2 6.475 2 12a9.994 9.994 0 0 0 6.838 9.488c.5.087.687-.213.687-.476c0-.237-.013-1.024-.013-1.862c-2.512.463-3.162-.612-3.362-1.175c-.113-.288-.6-1.175-1.025-1.413c-.35-.187-.85-.65-.013-.662c.788-.013 1.35.725 1.538 1.025c.9 1.512 2.338 1.087 2.912.825c.088-.65.35-1.087.638-1.337c-2.225-.25-4.55-1.113-4.55-4.938c0-1.088.387-1.987 1.025-2.688c-.1-.25-.45-1.275.1-2.65c0 0 .837-.262 2.75 1.026a9.28 9.28 0 0 1 2.5-.338c.85 0 1.7.112 2.5.337c1.912-1.3 2.75-1.024 2.75-1.024c.55 1.375.2 2.4.1 2.65c.637.7 1.025 1.587 1.025 2.687c0 3.838-2.337 4.688-4.562 4.938c.362.312.675.912.675 1.85c0 1.337-.013 2.412-.013 2.75c0 .262.188.574.688.474A10.016 10.016 0 0 0 22 12c0-5.525-4.475-10-10-10Z" />
11+
</g>
12+
</g>
13+
</svg>
14+
</a>
15+
</div>
16+
</template>
17+
18+
<script lang="ts" setup>
19+
import Refs from "@/components/Refs.vue";
20+
</script>

‎src/components/Heads.vue‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
<template>
2+
<div class="p-5 mb-4 bg-light rounded-3">
3+
<div class="container-fluid py-5">
4+
<h1 class="display-5 fw-bold"><slot></slot></h1>
5+
<p class="col-md-8 fs-4">The point of it all is beyond the grasp of human intelligence. Be humble. Be grateful simply knowing that you, we, all are taking part in this One big story called The Universe. Thankfully, we have the tools to acknowledge that fact in wonder and awe.</p>
6+
</div>
7+
</div>
8+
</template>

‎src/components/Nav.vue‎

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -44,15 +44,13 @@
4444

4545
<div class="collapse navbar-collapse" id="navbarNavDropdown">
4646
<ul class="navbar-nav ms-auto">
47-
<template v-for="rt in routes">
48-
<li class="nav-item text-uppercase" v-for="route in rt.children" :key="route.path">
49-
<router-link :to="route.path" class="nav-link" :title="route.name"
50-
:class="{ active: isActive(route.path) }">
51-
<i class="bi bi-house-fill" v-if="route.path === '/'"></i>
52-
{{ route.path !== "/" ? route.name : "" }}
53-
</router-link>
54-
</li>
55-
</template>
47+
<li class="nav-item text-uppercase" v-for="route in routes" :key="route.path">
48+
<router-link :to="route.path" class="nav-link" :title="route.children[0].name"
49+
:class="{ active: isActive(route.path) }">
50+
<i class="bi bi-house-fill" v-if="route.path === '/'"></i>
51+
{{ route.path !== "/" ? route.children[0].name : "" }}
52+
</router-link>
53+
</li>
5654
</ul>
5755
</div>
5856
</nav>
@@ -80,7 +78,9 @@ a {
8078
transition: all 0.25s;
8179
8280
&.nav-link.router-link-active.router-link-exact-active,
83-
&:hover { color: $blc; }
81+
&:hover {
82+
color: $blc;
83+
}
8484
}
8585
8686
ul {

‎src/components/Refs.vue‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
<template>
2+
<small v-for="(item, i) in list">
3+
{{ item }}
4+
<small>{{ i + 1 < list.length ? ' - ' : '' }}</small>
5+
</small>
6+
</template>
7+
8+
<script lang="ts" setup>
9+
import { onBeforeUpdate, reactive, ref } from "vue";
10+
11+
const year = new Date().getFullYear();
12+
const list = reactive([2019, year]);
13+
const divs = ref();
14+
15+
onBeforeUpdate(() => {
16+
divs.value = [];
17+
});
18+
</script>

‎src/layouts/Default.vue‎

Lines changed: 20 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,21 @@
11
<template>
2-
<RouterView />
3-
</template>
2+
<Nav />
3+
4+
<header class="container">
5+
<Heads>What is the point of all?</Heads>
6+
</header>
7+
8+
<main class="container flex-shrink-0 mb-4">
9+
<router-view />
10+
</main>
11+
12+
<footer class="container footer mb-2 mt-auto">
13+
<Footer />
14+
</footer>
15+
</template>
16+
17+
<script lang="ts" setup>
18+
import Nav from "@/components/Nav.vue";
19+
import Heads from "@/components/Heads.vue";
20+
import Footer from "@/components/Footer.vue";
21+
</script>

‎src/layouts/Page.vue‎

Lines changed: 15 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,16 @@
11
<template>
2-
<RouterView />
3-
</template>
2+
<Nav />
3+
4+
<main class="container flex-shrink-0 mb-4">
5+
<router-view />
6+
</main>
7+
8+
<footer class="container footer mb-2 mt-auto">
9+
<Footer />
10+
</footer>
11+
</template>
12+
13+
<script lang="ts" setup>
14+
import Nav from "@/components/Nav.vue";
15+
import Footer from "@/components/Footer.vue";
16+
</script>

‎src/router/index.ts‎

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -2,27 +2,27 @@ import { createRouter, createWebHistory } from "vue-router";
22

33
/** Layouts */
44
import Page from "@/layouts/Page.vue";
5-
import Default from "@/layouts/Default.vue";
6-
7-
/** Views */
8-
import Home from "@/views/Home.vue";
9-
import About from "@/views/About.vue";
10-
import Contacts from "@/views/Contacts.vue";
115

126
export const routes = [
137
{
148
path: "/",
15-
component: Default,
9+
component: () => import("@/layouts/Default.vue"),
1610
children: [
17-
{ path: "/", name: "Home", component: Home }
11+
{ path: "", name: "Home", component: () => import("@/views/Home.vue") }
1812
],
1913
},
2014
{
21-
path: "/",
22-
component: Page,
15+
path: "/about",
16+
component: () => import("@/layouts/Page.vue"),
17+
children: [
18+
{ path: "", name: "About", component: () => import("@/views/About.vue") }
19+
],
20+
},
21+
{
22+
path: "/contacts",
23+
component: () => import("@/layouts/Page.vue"),
2324
children: [
24-
{ path: "about", name: "About", component: About },
25-
{ path: "contacts", name: "Contacts", component: Contacts },
25+
{ path: "", name: "Contacts", component: () => import("@/views/Contacts.vue") },
2626
],
2727
},
2828
];

‎src/views/Home.vue‎

Lines changed: 129 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,130 @@
11
<template>
2-
<div>Home</div>
3-
</template>
2+
<div class="row align-items-md-stretch">
3+
<div class="col-md-6 mb-4">
4+
<div class="h-100 p-5 text-white bg-dark rounded-3">
5+
<h2>{{ msg }}</h2>
6+
<p>Before getting started with Bootstrap’s modal component, be sure to read the following as our menu options have recently changed.</p>
7+
<ul>
8+
<li>
9+
Modals are built with HTML, CSS, and JavaScript. They’re positioned over everything else in the document and remove scroll from the
10+
<code class="highlighter-rouge">&lt;body&gt;</code>
11+
so that modal content scrolls instead.
12+
</li>
13+
<li>Clicking on the modal “backdrop” will automatically close the modal.</li>
14+
<li>Bootstrap only supports one modal window at a time. Nested modals aren’t supported as we believe them to be poor user experiences.</li>
15+
<li>
16+
Modals use
17+
<code class="highlighter-rouge">position: fixed</code>
18+
, which can sometimes be a bit particular about its rendering. Whenever possible, place your modal HTML in a top-level position to avoid potential interference from other elements. You’ll likely run into issues when nesting a
19+
<code class="highlighter-rouge">.modal</code>
20+
within another fixed element.
21+
</li>
22+
<li>
23+
Once again, due to
24+
<code class="highlighter-rouge">position: fixed</code>
25+
, there are some caveats with using modals on mobile devices.
26+
<a href="https://getbootstrap.com/docs/4.0/getting-started/browsers-devices/#modals-and-dropdowns-on-mobile" target="_blank" rel="noopener noreferrer">See our browser support docs</a>
27+
for details.
28+
</li>
29+
<li>
30+
Due to how HTML5 defines its semantics,
31+
<a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-autofocus" target="_blank" rel="noopener noreferrer">
32+
the
33+
<code class="highlighter-rouge">autofocus</code>
34+
HTML attribute
35+
</a>
36+
has no effect in Bootstrap modals. To achieve the same effect, use some custom JavaScript:
37+
</li>
38+
</ul>
39+
40+
<button type="button" class="btn btn-outline-light" @click="modal.show()">Launch modal</button>
41+
<div class="modal fade" ref="infoModal" tabindex="-1" aria-hidden="true">
42+
<div class="modal-dialog">
43+
<div class="modal-content">
44+
<div class="modal-header">
45+
<h5 class="modal-title text-dark" id="infoModalLabel">How many clicks you've passed?!</h5>
46+
<button type="button" class="btn-close" @click="modal.hide()" aria-label="Close"></button>
47+
</div>
48+
<div class="modal-body">
49+
<button @click="state.count++" class="btn btn-primary text-uppercase">You clicked me {{ state.count }} time{{ state.count === 1 ? "" : "s" }}</button>
50+
</div>
51+
<div class="modal-footer">
52+
<button type="button" class="btn btn-secondary" @click="modal.hide()">Close</button>
53+
</div>
54+
</div>
55+
</div>
56+
</div>
57+
</div>
58+
</div>
59+
<div class="col-md-6 mb-4">
60+
<div class="p-5 bg-light border rounded-3 mb-4">
61+
<h2>Bootstrap Toast</h2>
62+
<p>Toasts are lightweight notifications designed to mimic the push notifications that have been popularized by mobile and desktop operating systems. They’re built with flexbox, so they’re easy to align and position.</p>
63+
64+
<button type="button" class="btn btn-outline-secondary" @click="toast.show()">Show Toast</button>
65+
<div class="position-fixed bottom-0 end-0 p-3 emerge-11">
66+
<div ref="bsToast" class="toast hide" role="alert" aria-live="assertive" aria-atomic="true">
67+
<div class="toast-header bg-info text-dark">
68+
<i class="bi bi-hand-index me-1"></i>
69+
<strong class="me-auto">Which finger?!</strong>
70+
<small>Some times ago</small>
71+
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
72+
</div>
73+
<div class="toast-body bg-light">Hello, world! This is a toast message.</div>
74+
</div>
75+
</div>
76+
</div>
77+
<div class="p-5 bg-light border rounded-3">
78+
<h2>Bootstrap Grid</h2>
79+
<p>
80+
Bootstrap’s grid system uses a series of containers, rows, and columns to layout and align content. It’s built with
81+
<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox" target="_blank" rel="noopener noreferrer">flexbox</a>
82+
and is fully responsive. Below is an example and an in-depth explanation for how the grid system comes together.
83+
</p>
84+
<div class="bd-example bd-example-row">
85+
<div class="row">
86+
<div class="col-12 col-lg-8">.col-12 .col-lg-8</div>
87+
<div class="col-12 col-lg-4">.col-12 .col-lg-4</div>
88+
</div>
89+
90+
<div class="row">
91+
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
92+
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
93+
<div class="col-12 col-md-4">.col-12 .col-md-4</div>
94+
</div>
95+
96+
<div class="row">
97+
<div class="col-6">.col-6</div>
98+
<div class="col-6">.col-6</div>
99+
</div>
100+
</div>
101+
</div>
102+
<div class="p-5 bg-light border rounded-3 mt-4 d-flex justify-content-between">
103+
<i class="bi bi-house-fill"></i>
104+
<i class="bi bi-boxes"></i>
105+
<i class="bi bi-car-front-fill"></i>
106+
<i class="bi bi-cart4"></i>
107+
<i class="bi bi-cloud-snow"></i>
108+
<i class="bi bi-gear"></i>
109+
</div>
110+
</div>
111+
</div>
112+
</template>
113+
114+
<script lang="ts" setup>
115+
import { reactive, onMounted, ref } from "vue";
116+
import { Modal, Toast } from "bootstrap";
117+
118+
const props = defineProps(['msg']);
119+
120+
const state = reactive({ count: 0 });
121+
const modal = ref();
122+
const toast = ref();
123+
const infoModal = ref();
124+
const bsToast = ref();
125+
126+
onMounted(() => {
127+
modal.value = new Modal(infoModal.value);
128+
toast.value = new Toast(bsToast.value);
129+
});
130+
</script>

0 commit comments

Comments
 (0)