Switch between active views using a file-tab interface, a standards-based DOM Component
npm install rwt-file-tabs

##### Premium DOM Component
by Read Write Tools | Abstract |
|---|
| The rwt-file-tabs DOM component is a thin bar containing named file tabs. It is typically used with apps that allow multiple files to be worked on simultaneously. |
The rwt-file-tabs DOM component can be used in scenarios
with multiple views or multiple work tasks.
This component can be configured with a fixed set of tabs which are slotted into
the component when designing the document. Alternatively, its programming API
allows tabs to be created and removed as needed, when working with a dynamic set
of tabs.
Tabs can be configured using CSS to adjust their size and typography.
The tab bar occupies a fixed width. When the size of all tabs exceeds that
width, scroll buttons are automatically enabled.
Dynamic tabs can be closable
or not, based on an attribute set on
the DOM component by the developer.
#### In the wild
To see an example of this component in use, visit the BLUEFIDDLE
website. It uses two components: one vertical and one horizontal. To understand
what's going on under the hood, use the browser's inspector to view the HTML
source code and network activity, and follow along as you read this
documentation.
#### Prerequisites
The rwt-file-tabs DOM component works in any browser that
supports modern W3C standards. Templates are written using BLUE
PHRASE notation, which can be compiled into HTML using the free Read Write View
desktop app. It has no other prerequisites. Distribution and installation are
done with either NPM or via Github.
#### Download
OPTION 1: Familiar with Node.js and the OPTION 2: No prior experience using NPM? Important note: This DOM component uses Node.js and NPM and
Download using NPM
package.json file?
Great. Install the component with this command:
npm install rwt-file-tabs
Just follow these general steps:
package.json file in the root of your web project using the command:
npm init
npm install rwt-file-tabs
package.json as a convenient distribution and installation mechanism. The DOM component itself does not need them.
If you prefer using Github directly, simply follow these steps:
Download using Github
node_modules directory in the root of your web project.
git clone https://github.com/readwritetools/rwt-file-tabs.git
After installation, you need to add a few things to your HTML page to make use
of it.
* Add a script tag to load the component's rwt-file-tabs.js file:
``html`
* Add the component tag somewhere on the page, configuring it with these optional
attributes:
* closable This optional attribute instructs the component to add an 'x' button toscroll-side={left|right}
each dynamically added tab, allowing the user to remove the tab.
* When the space occupied by the tabs is too large,left
scroll buttons are enabled. They can be positioned to the or the right ofanchor-side={left|right}
the tabs.
* When the space occupied by the tabs is less than theleft
width of the component, the unoccupied space can be anchored to the or toright
the of the tabs.role=navigation
* This web accessible ARIA attribute tells readers that the
component is used for navigation.
If the component is to be used with a predetermined set of tabs, they can be
slotted in. Here's an example:
`html`
If the component is to be used with a dynamic set of tabs, they can be added and
removed using these methods.
insertTab(id, value, title)id should be a unique identifier. It will be used for manipulating the tab.value is the text to display on the tab. Text that is too long will be ellipsed.title parameter is optional, and if provided will be used as the hover tooltip.removeTab(id)id is the identifier of the tab to remove.getCurrentTab()currentTabId and currentTabValue.setCurrentTab(id)id.getScrollableOverflow()setScrollPosition(left)left parameter is the number of pixels to programmatically scroll the tabs. It should be an integer from 0 to scrollableOverflow.scrollMaxRight()The component issues life-cycle events.
component-loadedwaitOnLoading() method which returns a promise that resolves when the component-loaded event is received. Call this asynchronously with await.tab-activatedevent argument has a detail property containing the currentTabId and currentTabValue of the newly activated tab.tab-closingpreventDefault() to cancel the operation. The event argument has a detail property containing the currentTabId and currentTabValue of the item about to be closed.#### Tab styling
The component can be styled with these CSS variables:
`css`
rwt-file-tabs {
--width: 100%;
--height: 2rem;
--nav-button-size: 1.6rem;
}
The tabs can be styled with these CSS variables:
`css`
rwt-file-tabs {
--font-weight: normal;
--letter-spacing: 0px;
--text-align: left;
--min-width: 2rem;
--max-width: 6rem;
}
#### Dialog color scheme
The default color palette for the component uses a dark mode theme. You can use
CSS to override the variables' defaults:
`css`
rwt-file-tabs {
--color: var(--white);
--accent-color1: var(--pure-white);
--background: var(--black);
--accent-background1: var(--pure-black);
--accent-background2: var(--nav-black);
--accent-background3: var(--medium-black);
--accent-background4: var(--gray);
}
The component can be oriented vertically by wrapping it in a positioned element
and using a CSS transform. Here's an example of how to do it:
#### HTML
`html`
#### CSS
`css`
div#viewtabs-area {
position: absolute;
top: 2.3rem;
left: 0;
bottom: 0;
width: 2.0rem;
border-top: 1px solid #000;
border-bottom: 1px solid #000;
}
#viewtabs {
position: absolute;
transform: rotate(-90deg);
transform-origin: left top;
width: 34rem; / JavaScript will override /
top: 34rem; / JavaScript will override /
}
#### JavaScript
`js${height}px
function onResize() {
var viewTabsArea = document.getElementById('viewtabs-area');
var viewTabs = document.getElementById('viewtabs');
var height = viewTabsArea.offsetHeight;
viewTabs.style.width = ;${height}px
viewTabs.style.top = ;
}
window.addEventListener('resize', onResize);
`
---
| Documentation | READ WRITE HUB | |
| Source code | github | |
| Component catalog | DOM COMPONENTS | |
| Package installation | npm | |
| Publication venue | READ WRITE STACK |
The rwt-file-tabs DOM component is not freeware. After
evaluating it and before using it in a public-facing website, eBook, mobile app,
or desktop application, you must obtain a license from Read Write Tools
.

File Tabs Software License Agreement
#### Activation
To activate your license, copy the rwt-registration-keys.js file to the *rootcustomer-number
directory of your website*, providing the and access-key sent toexample.com` with your website's hostname.
your email address, and replacing
Follow this example:
export default [{
"product-key": "rwt-file-tabs",
"registration": "example.com",
"customer-number": "CN-xxx-yyyyy",
"access-key": "AK-xxx-yyyyy"
}]