index.html 1.8 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Tabs</title>
  6. <link rel="stylesheet" href="resources/style.css">
  7. </head>
  8. <body>
  9. <h1>wingsline-vue-tabs</h1>
  10. <p>A Vue component to display tabs. The tab handles are separated from the tab panels.</p>
  11. <h2>Examples:</h2>
  12. <div id="app">
  13. <!-- tabs -->
  14. <p>Languages:</p>
  15. <tabs for="foo"></tabs>
  16. <p>Letters:</p>
  17. <tabs for="bar"></tabs>
  18. <p>
  19. Some content between the tabs and the panels.
  20. </p>
  21. <h3>Languages</h3>
  22. <!-- panels -->
  23. <panels name="foo" class="foo">
  24. <panel name="English">
  25. This is the english content
  26. </panel>
  27. <panel name="Spanish">
  28. Spanish content
  29. </panel>
  30. <panel name="Hungarian">
  31. Hungarian content
  32. </panel>
  33. </panels>
  34. <h3>Letters</h3>
  35. <!-- panels -->
  36. <panels name="bar">
  37. <panel name="a" id="foo">
  38. A
  39. </panel>
  40. <panel name="b">
  41. B
  42. </panel>
  43. <panel name="c">
  44. C
  45. </panel>
  46. <panel name="d">
  47. D
  48. </panel>
  49. </panels>
  50. <p>
  51. You can also use normal links to switch the tabs.
  52. Select the <a href="#foo.spanish">spanish</a> language or the letter
  53. <a href="#bar.c">c</a>. A <a href="#invalid">non existing</a> hash will not change the tabs.
  54. </p>
  55. <p>
  56. Hash format for targetting tabs: <code>PANELS-NAME.PANEL-NAME</code>. For example
  57. in order to target the hungarian panel, you would use <code>#foo.hungarian</code> like this:
  58. <a href="#foo.hungarian">hungarian</a> panel.
  59. </p>
  60. <p>
  61. For installation and usage please visit the
  62. <a href="https://wingsline.net/code/Wingsline/vue-tabs">wingsline-vue-tabs</a> repository.
  63. </p>
  64. </div>
  65. <script src="resources/app.js"></script>
  66. </body>
  67. </html>