UNPKG

@visual-framework/vf-tabs

Version:

vf-tabs component

stable.visual-framework.dev

80 lines (77 loc) • 6 kB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
title: Tabs label: Tabs status: live context: exampleMultiColumns: "false" component-type: block variants: - name: default hidden: false context: tabs: - tab_title: Section tab_number: 1 tab_heading: Section 1 tab_content: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam euismod, tortor nec pharetra ultricies, ante erat imperdiet velit, nec laoreet enim lacus a velit. <a class="vf-link" href="#">Nam luctus</a>, enim in interdum condimentum, nisl diam iaculis lorem, vel volutpat mi leo sit amet lectus. Praesent non odio bibendum magna bibendum accumsan. - tab_title: A Short Section tab_number: 2 tab_heading: Section 2 tab_content: Nullam at diam nec arcu suscipit auctor non a erat. Sed et magna semper, eleifend magna non, facilisis nisl. Proin et est et lorem dictum finibus ut nec turpis. Aenean nisi tortor, euismod a mauris a, mattis scelerisque tortor. Sed dolor risus, varius a nibh id, condimentum lacinia est. In lacinia cursus odio a aliquam. Curabitur tortor magna, laoreet ut rhoncus at, sodales consequat tellus. - name: nested context: isExample: true tabs: - tab_title: Section tab_number: 58 tab_heading: Section 1 tab_content: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam euismod, tortor nec pharetra ultricies, ante erat imperdiet velit, nec laoreet enim lacus a velit. <a class="vf-link" href="#">Nam luctus</a>, enim in interdum condimentum, nisl diam iaculis lorem, vel volutpat mi leo sit amet lectus. Praesent non odio bibendum magna bibendum accumsan. - tab_title: A Short Section tab_number: 546 tab_heading: Section 2 tab_content: Nullam at diam nec arcu suscipit auctor non a erat. Sed et magna semper, eleifend magna non, facilisis nisl. Proin et est et lorem dictum finibus ut nec turpis. Aenean nisi tortor, euismod a mauris a, mattis scelerisque tortor. Sed dolor risus, varius a nibh id, condimentum lacinia est. In lacinia cursus odio a aliquam. Curabitur tortor magna, laoreet ut rhoncus at, sodales consequat tellus. - tab_title: A Rather Long Section tab_number: 878 tab_heading: Section 3 tab_content: Phasellus ac tristique orci. Nulla maximus <a class="vf-link" href="#">justo nec dignissim consequat</a>. Sed vehicula diam sit amet mi efficitur vehicula in in nisl. Aliquam erat volutpat. Suspendisse lorem turpis, accumsan consequat consectetur gravida, <a class="vf-link" href="#">pellentesque ac ante</a>. Aliquam in commodo ligula, sit amet mollis neque. Vestibulum at facilisis massa. - tab_title: Nested Tabs tab_heading: Section 4 tab_number: 8793456 tab_content: > <div class="vf-tabs"> <ul class="vf-tabs__list" data-vf-js-tabs> <li class="vf-tabs__item"> <a class="vf-tabs__link" href="#vf-tabs__section-nested--234548">Nested tab 1</a> </li> <li class="vf-tabs__item"> <a class="vf-tabs__link" href="#vf-tabs__section-nested--29974">Nested tab 2</a> </li> </ul> </div> <div class="vf-tabs-content" data-vf-js-tabs-content> <section class="vf-tabs__section" id="vf-tabs__section-nested--234548"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam euismod, tortor nec pharetra ultricies, ante erat imperdiet velit, nec laoreet enim lacus a velit. <a href="#">Nam luctus</a>, enim in interdum condimentum, nisl diam iaculis lorem, vel volutpat mi leo sit amet lectus. Praesent non odio bibendum magna bibendum accumsan.</p> </section> <section class="vf-tabs__section" id="vf-tabs__section-nested--29974"> <p>Nullam at diam nec arcu suscipit auctor non a erat. Sed et magna semper, eleifend magna non, facilisis nisl. Proin et est et lorem dictum finibus ut nec turpis. Aenean nisi tortor, euismod a mauris a, mattis scelerisque tortor. Sed dolor risus, varius a nibh id, condimentum lacinia est. In lacinia cursus odio a aliquam. Curabitur tortor magna, laoreet ut rhoncus at, sodales consequat tellus.</p> </section> </div> - tab_title: A fifth section tab_number: 545541 tab_heading: Section 5 tab_content: Phasellus ac tristique orci. Nulla maximus <a class="vf-link" href="#">justo nec dignissim consequat</a>. Sed vehicula diam sit amet mi efficitur vehicula in in nisl. Aliquam erat volutpat. Suspendisse lorem turpis, accumsan consequat consectetur gravida, <a class="vf-link" href="#">pellentesque ac ante</a>. Aliquam in commodo ligula, sit amet mollis neque. Vestibulum at facilisis massa. - tab_title: A sixth section tab_number: 621211 tab_heading: Section 6 tab_content: Phasellus ac tristique orci. Nulla maximus <a class="vf-link" href="#">justo nec dignissim consequat</a>. Sed vehicula diam sit amet mi efficitur vehicula in in nisl. Aliquam erat volutpat. Suspendisse lorem turpis, accumsan consequat consectetur gravida, <a class="vf-link" href="#">pellentesque ac ante</a>. Aliquam in commodo ligula, sit amet mollis neque. Vestibulum at facilisis massa. - name: deep link context: isExample: true tabs: - tab_title: Section tab_number: 99999 tab_heading: Default tab_content: An <a href="/components/vf-tabs#vf-tabs__section--88888">example deep link</a> loading this anchor will directly activate the neighbouring tab. <code>/vf-tabs#vf-tabs__section--88888</code> - tab_title: A Short Section tab_number: 88888 tab_heading: Deep-linked tab tab_content: If you see me on page load, the deep link has worked.