Last change
on this file since 35723 was 35723, checked in by cstephen, 2 years ago |
Add support for file macronisation
|
File size:
1.7 KB
|
Line | |
---|
1 | <template>
|
---|
2 | <div class="container">
|
---|
3 | <div class="tabs">
|
---|
4 | <div v-for="tab of tabs" :key="tab">
|
---|
5 | <input type="radio" name="tabs" :id="tab.value" :value="tab.value" class="radio" v-model="internalSelected" />
|
---|
6 | <label class="tab" :for="tab.value">{{ tab.label }}</label>
|
---|
7 | </div>
|
---|
8 | </div>
|
---|
9 | </div>
|
---|
10 | </template>
|
---|
11 |
|
---|
12 | <style scoped lang="scss">
|
---|
13 | .container {
|
---|
14 | display: flex;
|
---|
15 | justify-content: flex-start;
|
---|
16 | padding: 0;
|
---|
17 | width: auto;
|
---|
18 | }
|
---|
19 |
|
---|
20 | .tabs {
|
---|
21 | display: flex;
|
---|
22 | }
|
---|
23 |
|
---|
24 | .radio {
|
---|
25 | display: none;
|
---|
26 |
|
---|
27 | &:checked {
|
---|
28 | & + label {
|
---|
29 | color: var(--bg-color);
|
---|
30 | border-bottom: 2px solid var(--bg-color);
|
---|
31 | background-color: rgba(var(--bg-color-raw), 0.05);
|
---|
32 | }
|
---|
33 | }
|
---|
34 | }
|
---|
35 |
|
---|
36 | .tab {
|
---|
37 | display: flex;
|
---|
38 | align-items: center;
|
---|
39 | justify-content: center;
|
---|
40 |
|
---|
41 | padding: 0.4em 1em;
|
---|
42 | min-width: 8em;
|
---|
43 | min-height: 3em;
|
---|
44 |
|
---|
45 | font-size: 1.25rem;
|
---|
46 | cursor: pointer;
|
---|
47 | border: 2px solid transparent; // Prevents attempting to animate the border height
|
---|
48 |
|
---|
49 | transition-duration: 0.15s;
|
---|
50 | }
|
---|
51 | </style>
|
---|
52 |
|
---|
53 | <script>
|
---|
54 | export default {
|
---|
55 | name: "TabBar",
|
---|
56 | props: {
|
---|
57 | /** @type {Array<{label: String, id: String}} */
|
---|
58 | tabs: Array,
|
---|
59 | modelValue: String
|
---|
60 | },
|
---|
61 | emits: [
|
---|
62 | "update:modelValue"
|
---|
63 | ],
|
---|
64 | computed: {
|
---|
65 | internalSelected: {
|
---|
66 | get() {
|
---|
67 | return this.modelValue;
|
---|
68 | },
|
---|
69 | set(newValue) {
|
---|
70 | this.$emit("update:modelValue", newValue);
|
---|
71 | }
|
---|
72 | }
|
---|
73 | },
|
---|
74 | watch: {
|
---|
75 | },
|
---|
76 | methods: {
|
---|
77 | },
|
---|
78 | beforeMount() {
|
---|
79 | if (this.modelValue === null && this.tabs.length > 0) {
|
---|
80 | this.$emit("update:modelValue", this.tabs[0].value);
|
---|
81 | }
|
---|
82 | }
|
---|
83 | }
|
---|
84 | </script>
|
---|
Note:
See
TracBrowser
for help on using the repository browser.