This package provides a moderately customizable (more in the works!!), lightweight, modern React functional component tabbed container.
The impetus behind this project was creating a UI driven by a data object, rather than a DOM tree. I have always found thick DOM trees more difficult to read and write than standard data objects. By carefully crafting an array of data, just like you would for a graph visualization, you can create a tabbed data container with just one line of HTML and just a few props.
- React environment
- package.json ->
{"type": "module"}
npm i tabylonia --save
import { Tabylon } from 'tabylonia'
<Tabylon />
<Tabylon
containerStyle={containerStyle}
tabBarStyle={tabBarStyle}
tabStyle={tabStyle}
activeComponentStyle={activeComponentStyle}
data={data}
themeType='light'
/>
| Name | PropType | Default value | Description |
|---|---|---|---|
| bgcolor | string | rgba(0,0,0) | background color for element container |
| fcolor | sgtring | rgba(255,255,255) | initial font color for entire element |
| dcolor | string | rgba(255,255,255,.5) | initial text decoration color |
containerStyle = {
bgcolor: 'rgba(0,0,0)',
fcolor: 'rgba(255,255,255)',
dcolor: 'rgba(255,255,255,.5)'
}
| Name | PropType | Default value | Description |
|---|---|---|---|
| height | string | '5em' | starting height of tab bar |
| width | string | '100%' | starting width of tab bar |
tabBarStyle: {
height: '5em',
width: '100%',
}
| Name | PropType | Default value | Description |
|---|---|---|---|
| titleAlign | string | 'center' | alignment of tab title when not active |
| titleAlignActive | string | 'flex-start' | alignment of tab title when active |
| style | string | 'standard' | tab theme definer (not done) |
| grow | boolean | false | true: applies flex grow (tabs grow to take all availabe space when active), false: sets static witdth of tabs |
| bcolor | string | 'rgba(255, 255, 255, 0.5)' | non-active tab background color |
| acolor | string | 'rgba(255,255,255)' | active tab background color |
tabStyle = {
titleAlign: 'center',
titleAlignActive: 'flex-start',
style: 'standard',
grow: false,
bcolor: 'rgba(255, 255, 255, 0.5)',
acolor: 'rgba(255,255,255)',
}
| Name | PropType | Default value | Description |
|---|---|---|---|
| bgcolor | string | 'rgba(255,255,255)' | active panel background color (img/video capability coming next) |
| flexDirection | string | 'column' | flex direction |
| justifyContent | string | 'center' | horizontal align |
| alignItems | string | 'center' | vertical align |
activeComponentStyle = {
bgcolor: 'rgba(255,255,255)',
flexDirection: 'column',
justifyContent: 'center',
alignItems: 'center'
}
There are only three options to pass here, standard and light and browser (more coming soon!!). pick you favorite or design a brand new one using the available styling props (see above)
themeType = 'light' OR themeType = 'standard' OR themeType = 'browser'
these are for setting the size of the element inside the parent container. Use vh/vw for sizing relative to window and percentages for relative to parent element. starts at 100%, takes entire space of parent element.
height = '100%'
width = '100%'
Until I can really nail down the sizing of the element by passing props (doesn't quite work the way I expected it too... I guess I should have expected that), use a parent element inside the client to generate size constraints and leaving the height and width props at 100% OR not including them at all as they are packaged as defaults anyway
<div className="holder">
<Tabylon (...props) />
</div>
________________________
.holder {
width: 50%;
max-height: 50%;
display: flex;
flex: 1 1 auto;
}
initialized at '0 auto' to compensate for centering <'100%' width element
margin = '0 auto'
This is where the magic happens. All of the tabs as well as the managment of the active container are run from the data object. The reason I designed it this way was to give the developer the greatest freedom in combination with the high iteration speed. By passing an array of specifically crafted data objects, perhaps collated from database call or API hits, all UI management is taken care of without adding a confusing tree of HTML elements. Following are two examples of how to pass data to the active component as it stands.
Each constituent object of the data array must have at least three named properties, name, tabContent.subtitle and data. Name is the tab identifier, tabContent.subtitle is the text content of the tab, and data is the component passed to the active panel.
THE DATA OBJECT:
the component passed into the data property will show up in the active container panel.
data: [
{
name: 'one',
tabContent: {
subtitle: 'Weather',
},
activeTabContent: {
elOne: {
title: 'link one',
alt: 'link one',
link: '/'
},
elTwo: {
title: 'link two',
alt: 'link two',
link: '/'
},
},
data: <Component />
},
{
name: 'two',
tabContent: {
subtitle: 'Finance',
},
activeTabContent: {
elOne: {
title: 'link one',
alt: 'link one',
link: '/'
},
elTwo: {
title: 'link two',
alt: 'link two',
link: '/'
},
},
data: <Component />
},
{
name: 'three',
tabContent: {
subtitle: 'Golf',
},
activeTabContent: {
elOne: {
title: 'link one',
alt: 'link one',
link: '/'
},
elTwo: {
title: 'link two',
alt: 'link two',
link: '/'
},
},
data: <Component />
},
{
name: 'four',
tabContent: {
subtitle: 'Random',
},
activeTabContent: {
elOne: {
title: 'link one',
alt: 'link one',
link: '/'
},
elTwo: {
title: 'link two',
alt: 'link two',
link: '/'
},
},
data: <Component />
},
See the open issues for a list of proposed features (and known issues).
Contributions are what make the open source community such an amazing place to be learn, inspire, and create. Any contributions you make are greatly appreciated.
- Fork the Project
- Create your Feature Branch (
git checkout -b feature/AmazingFeature) - Commit your Changes (
git commit -m 'Add some AmazingFeature') - Push to the Branch (
git push origin feature/AmazingFeature) - Open a Pull Request
Distributed under the UnLicense. See LICENSE for more information.