From c360e656c64e98c4b1b496316482f62224a12be2 Mon Sep 17 00:00:00 2001 From: CaptainFalcon92 Date: Sat, 24 Oct 2020 00:32:16 +0200 Subject: [PATCH] Prepared some placeholder documentation for tabs --- docs/index.html.ejs | 81 +++++++++++++++++++++++++++++++++++++++++++-- 1 file changed, 79 insertions(+), 2 deletions(-) diff --git a/docs/index.html.ejs b/docs/index.html.ejs index 127359c..415d0b0 100644 --- a/docs/index.html.ejs +++ b/docs/index.html.ejs @@ -534,7 +534,7 @@ assistive technologies know the intent of this button. You may also use "Minimize", "Maximize", "Restore" and "Help" like so:

- + <%- example(`
A Title Bar
@@ -564,7 +564,7 @@
- + `) %>

You can make a title bar "inactive" by adding inactive class, @@ -720,6 +720,83 @@ +

+

Tabs

+
+
+ ... + +
+ — Microsoft Windows User Experience p. # +
+
+ +

+ To render a tab list, use a menu element with the + [role=tablist] attribute. The children of this menu (li + elements), should get a [role=tab] attribute. +

+ +

+ Tabs should be managed by adding custom javascript code. + All you need is to add the [aria-selected=true] attribute to the active tab. +

+ + <%- example(` +
+

Hello, world!

+ + +
  • Desktop
    • +
  • My computer
    • +
  • Control panel
    • +
  • Devices manager
    • +
  • Hardware profiles
    • +
  • Performance
    • +     +
    +
    +

    the tab content

    +
    +
    +
    + `) %> + +

    + To create multirows tabs, add a multirows + class to the menu tag. +

    + + <%- example(` +
    +

    Hello, world!

    + + +
  • Desktop
    • +
  • My computer
    • +
  • Control panel
    • +
  • Devices manager
    • +
  • Hardware profiles
    • +
  • Performance
    • +     + +
  • Users
    • +
  • Network
    • +
  • Programs
    • +
  • Services
    • +
  • Resources
    • +
  • Advanced
    • +     +
    +
    +

    the tab content

    +
    +
    +
    + `) %> +
    +
    +

    Issues, Contributing, etc.