Rev | Line | |
---|
[35734] | 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.