Tabylonia NPM | npm.io

PREQREQUISITES:

React environment
package.json ->
- {"type": "module"}

Installation ->

npm i tabylonia --save

Import module

import { Tabylon } from 'tabylonia'

Basic HTML Element

<Tabylon />

Advance HTML Element with options

<Tabylon
    containerStyle={containerStyle}
    tabBarStyle={tabBarStyle}
    tabStyle={tabStyle}
    activeComponentStyle={activeComponentStyle}
    data={data}
    themeType='light'
/>

OPTIONS

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'
    }

themeType = 'light' OR themeType = 'standard' OR themeType = 'browser'

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;
}

margin = '0 auto'

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 />
        },

Roadmap

See the open issues for a list of proposed features (and known issues).

Contributing

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.