jazznerd206 / tabylon

A customizable tabbed component for ReactJS available via the NPM registry

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

tabylon

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.

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

containerStyle = {}

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

tabBarStyle = {}

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

tabStyle = {}

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

activeComponentStyle = {}

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 = ""

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'

height = "" && width = ""

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


THE CURRENT STATE OF SIZING THE ELEMENT

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 = ""

initialized at '0 auto' to compensate for centering <'100%' width element

margin = '0 auto'

data = []

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


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.

  1. Fork the Project
  2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
  3. Commit your Changes (git commit -m 'Add some AmazingFeature')
  4. Push to the Branch (git push origin feature/AmazingFeature)
  5. Open a Pull Request

License

Distributed under the UnLicense. See LICENSE for more information.

Contact

About

A customizable tabbed component for ReactJS available via the NPM registry

License:The Unlicense


Languages

Language:JavaScript 96.3%Language:CSS 2.1%Language:HTML 1.6%