MacOS Tabs
Installation
npm install --save macos-tabs
or
yarn add macos-tabs
Usage
API
MacOSTabs
type Props = // onClick event when the user clicks on the AddTabButton on a tab header void // onClick event when the user clicks on the CloseTabButton on a tab header void // Event when the user stops dragging a header // The updated tabs contain the new ordering, you can directly update your state with // these returned tabs // The updated index of the active tab is also provided void // Event when the user clicks on a tab header // The index of the clicked header is passed back void // Event when the user's mouse enters a tab header void // Even when the user's mouse leaves a tab header void // Event when the activeTabIndex is updated internally // This allows you to keep track of the activeTabIndex even // if you are letting MacOSTabs handle the state void // Specify the position of addTabButton addTabPosition: 'none' | 'start' | 'end' // Declare whether or not you want to manage the activeTabIndex autoActiveTab: boolean // Can be used to set initial active tab index // If autoActiveTab is false, then you should have methods // to manage the activeTabIndex state activeTabIndex: number // Tab content should be wrapped in a TabBody component with the correct props // Tabs order can be modified programmatically by manually changing the order // of the array tabs: Tabs // Declare a div or react component to render when there are no tabs open defaultContent: Object // Flag to show or hide tab headers showHeader: boolean // Declare the header height in px (note: styles have not been tested with // anything besides the default of 24px, this is a WIP) headerHeight: number | string // Declare a custom element that the body should be rendered into // instead of directly below the tab headers // i.e. <div id="tabBody" /> customBodyElementId: string // Set tab scroll behavior scrollX: 'normal' | 'reversed' | 'disabled' // Set tab scroll behavior scrollY: 'normal' | 'reversed' | 'disabled' // Apply custom styles to specified component(s) styles: addTabButton?: Object closeTabButton?: Object tab?: Object tabActive?: Object outerTabContainer?: Object innerTabContainer?: Object // Apply custom classnames to specified component(s) classNames: addTabButton?: string closeTabButton?: string tab?: string tabActive?: string outerTabContainer?: string innerTabContainer?: string // Override icons on buttons icons: addTabButton?: Object | string closeTabButton?: Object | string // Experimental/Not Completed void dragOutDistance: number static defaultProps = tabs: activeTabIndex: 0 scrollX: 'normal' scrollY: 'disabled' addTabPosition: 'end' showHeader: true headerHeight: 24 dragOutDistance: 40 autoActiveTab: true styles: {} classNames: {} icons: {}
TabBody
type Props = // Label that will be displayed on the tab header label: string | number // Children components to render children?: HTMLElement | Component<* * *> // Unique tabId tabId: string | number // Optional styles/classnames // Set additional TabBody styles // Note: In most cases, setting styles on the child component is sufficient style?: Object // Set TabBody classname className?: string static defaultProps = label: ''
Minimal Example
const defaultStyles = height: '100%' { superprops thisid = 0 thisstate = tabs: this this this } { return <TabBody label= `Test Tab ` tabId= id key= id > <div style= height: '100%' border: '1px solid red' textAlign: 'center' boxSizing: 'border-box' paddingTop: '20%' > Hello id ! </div> </TabBody> } { this } { const newTabs = thisstatetabs newTabs this } { const newTabs = thisstatetabs newTabs this } { return <div style= defaultStyles > <MacOSTabs tabs= thisstatetabs onDragStop= thisonDragStop onAddTabButtonClick= thisonAddTabButtonClick onCloseTabButtonClick= thisonCloseTabButtonClick /> </div> }
Controlled Active Tab & CustomBodyElementID Example
const defaultStyles = height: '100%' { superprops thisid = 0 thisstate = tabs: this this this activeTabIndex: 0 } { return <TabBody label= `Test Tab ` tabId= id key= id > <div style= height: '100%' border: '1px solid red' textAlign: 'center' boxSizing: 'border-box' paddingTop: '20%' > <form> <label> Name id : <input type="text" name="name" /> </label> <input type="submit" value="Submit" /> </form> </div> </TabBody> } { this } { const newTabs = thisstatetabs newTabs this } { const newTabs = thisstatetabs newTabs if closedTabIndex <= thisstateactiveTabIndex this else this } { this } { return <div style= defaultStyles > <MacOSTabs tabs= thisstatetabs onDragStop= thisonDragStop onAddTabButtonClick= thisonAddTabButtonClick onCloseTabButtonClick= thisonCloseTabButtonClick onSetActiveTab= thisonSetActiveTab activeTabIndex= thisstateactiveTabIndex defaultContent= <div>Add a tab to get started!</div> customBodyElementId='custom1' /> <div id='custom1' style= height: 'calc(100% - 24px)' /> </div> }