vue3-uikit

1
<template>
2
  <h3>Accordion to Tabs</h3>
3
  <section class="accordion">    
4
    <!-- Tab заголовки -->
5
    <section class="accordion-tabs">
6
      <button
7
        v-for="(tab, index) in tabs"
8
        :key="index"
9
        :class="['accordion-tab', { 'accordion-active': isActiveTab(index) }]"
10
        @click="setActiveTab(index)"
11
      >
12
        {{ tab.label }}
13
      </button>
14
    </section>
15

16
    <!-- Tab контент -->
17
    <section class="accordion-content">
18
      <article
19
        v-for="(tab, index) in tabs"
20
        :key="index"
21
        :class="['accordion-item', { 'accordion-active': isActiveTab(index) }]"
22
      >
23
        <h4 class="accordion-item__label" @click="setActiveTab(index)">
24
          {{ tab.label }}
25
        </h4>
26
        <div class="accordion-item__container">
27
          <p>{{ tab.content }}</p>
28
        </div>
29
      </article>
30
    </section>
31
  </section>
32
</template>
33

34
<script>
35
import { ref } from "vue";
36

37
export default {
38
  name: "AccordionToTabs",
39
  setup() {
40
    const tabs = ref([
41
      {
42
        label: "Tab 1",
43
        content:
44
          "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates, deserunt minima?",
45
      },
46
      {
47
        label: "Tab 2",
48
        content:
49
          "Reprehenderit temporibus, assumenda cupiditate consequatur soluta odit ex repudiandae delectus cumque.",
50
      },
51
      {
52
        label: "Tab 3",
53
        content:
54
          "Bored ipsum dolor sit amet, consectetur adipisicing elit. Voluptates, deserunt minima?",
55
      },
56
      {
57
        label: "Tab 4",
58
        content:
59
          "Deus reprehenderit temporibus, assumenda cupiditate consequatur soluta odit ex repudiandae delectus cumque.",
60
      },
61
      {
62
        label: "Tab 5",
63
        content:
64
          "Voluptates deserunt minima, reprehenderit temporibus, assumenda cupiditate consequatur soluta.",
65
      },
66
    ]);
67

68
    const activeTab = ref(0);
69

70
    const setActiveTab = (index) => {
71
      activeTab.value = index;
72
    };
73

74
    const isActiveTab = (index) => {
75
      return activeTab.value === index;
76
    };
77

78
    return {
79
      tabs,
80
      activeTab,
81
      setActiveTab,
82
      isActiveTab,
83
    };
84
  },
85
};
86
</script>
87

88
<style scoped>
89
.accordion {
90
  background: #f9f9f9;
91
  box-shadow: 0 1em 2em -0.9em rgba(0, 0, 0, 0.7);
92
  border-radius: 10px;
93
  overflow: hidden;
94
  width: 100%;
95
  max-width: 400px;
96
  margin: 0 auto;
97
}
98

99
@media (min-width: 600px) {
100
  .accordion {
101
    max-width: 600px;
102
  }
103
}
104

105
.accordion-tabs {
106
  display: none;
107
}
108

109
@media (min-width: 600px) {
110
  .accordion-tabs {
111
    display: flex;
112
    background: rgba(68, 127, 255, 0.1);
113
  }
114

115
  .accordion-tab {
116
    background: rgba(68, 127, 255, 0.1);
117
    padding: 1rem 2rem;
118
    font: inherit;
119
    flex: 1;
120
    border: none;
121
    cursor: pointer;
122
    transition: background-color 0.1s ease;
123
  }
124

125
  .accordion-tab:hover {
126
    background: rgba(249, 249, 249, 0.1);
127
  }
128

129
  .accordion-tab.accordion-active {
130
    background: #f9f9f9;
131
  }
132
}
133

134
.accordion-content .accordion-item {
135
  border-bottom: 1px solid #eaeaea;
136
  padding: 1.25rem;
137
  background: #f9f9f9;
138
  transition: height 0.5s ease;
139
  cursor: pointer;
140
}
141

142
.accordion-content .accordion-item:last-child {
143
  border-bottom: none;
144
}
145

146
.accordion-content .accordion-item__label {
147
  margin: 0;
148
  cursor: pointer;
149
  transition: padding 0.2s ease;
150
}
151

152
/* Article не видны по умолчанию  */
153
.accordion-item {
154
  display: block;
155
}
156

157
.accordion-content .accordion-item__container {
158
  padding: 0;
159
  height: 0;
160
  overflow: hidden;
161
  opacity: 0;
162
  transition: padding 0.2s ease, opacity 0.5s 0.15s ease;
163
}
164

165
.accordion-content .accordion-active {
166
  background: rgba(68, 127, 255, 0.1);
167
  padding: 1rem;
168
  display: block;
169
  border: none;
170
  min-height: 100px;
171
}
172

173
.accordion-content .accordion-active .accordion-item__label {
174
  padding-bottom: 1.5rem;
175
  cursor: inherit;
176
}
177

178
.accordion-content .accordion-active .accordion-item__container {
179
  padding: 0;
180
  height: auto;
181
  opacity: 1;
182
}
183

184
@media (min-width: 600px) {
185
  .accordion-item {
186
    display: none;
187
  }
188

189
  .accordion-content .accordion-active {
190
    padding: 2.4rem;
191
    min-height: 260px;
192
  }
193

194
  .accordion-content .accordion-active .accordion-item__container {
195
    padding: 1.25em;
196
  }
197
}
198
</style>
199