search

nvisionative / nvQuickComponents

nvQuickComponents is a collection of versatile web components, based 100% on web standards, to help developers break free from framework churn.
GNU General Public License v3.0
12 stars 5 forks source link

Added Tabs #6

Closed SkyeHoefling closed 5 years ago

SkyeHoefling commented 5 years ago

Adds new nvQuickComponent Tabs that allows a developer to easily specify any number of tabs they want. This only uses javascript to build the tabs and after that it is all CSS. The declarative approach makes this faster and less error prone than javascript.

Usage

<nvq-tabs>
    <div slot key="tab-2" name="Tab 2">
        <p>Content Tab 2</p>
    </div>
    <div slot key="tab-3" name="Tab 3">
        <p>Content Tab 3</p>
    </div>
</nvq-tabs>

Once you declare the <nvq-tabs> markup element you just create <div> elements inside it for each tab. You will need to specify the following attributes or it will not work.

Attribute Purpose
slot this defines that the div is a tab and will be used in the javascript generation
key The hashtag id in the browser for each tab, in th example about tab-1, tab-2 and tab-3
name The name of the tab that will be printed on the screen

Fixes: #5

david-poindexter commented 5 years ago

Oops - needed to merge AutoComplete prior to this one and somehow whacked it up. How do we re-commit this one?