Version: 3.0.0

Tab

<Tab> on lumin

Description

The tab component allows you to change a content view using button controls. You can organize an extensive amount of data in a compact form. Only one tab can be active at a time, and the active tab can be scrollable.

Example

import React from "react";
import { LinearLayout, Tab, Text, PageView, Line, Content, View, Prism, Scene } from "magic-script-components";
export default class MyApp extends React.Component {
state = { activePage: 0 }
onHomeClicked = () => this.setState({ activePage: 0 })
onAboutClicked = () => this.setState({ activePage: 1 })
onContactClicked = () => this.setState({ activePage: 2 })
render() {
return (
<Scene>
<Prism size={[1, 1, 0.2]} >
<View name="main-view" alignment={'center-center'}>
<LinearLayout
alignment='center-center'
name='top-layout'
orientation='vertical'
defaultItemAlignment="center-left"
>
<Text textSize={0.05} text='Tabs' />
<LinearLayout
name='tab-page-layout'
defaultItemPadding={[0.01, 0.01, 0.01, 0.01]}
defaultItemAlignment="center-left"
orientation='vertical'
>
<LinearLayout
name='tab-layout'
defaultItemAlignment="center-left"
defaultItemPadding={[0.01, 0.02, 0.01, 0.02]}
orientation='horizontal'
>
<Tab text='Home' onClick={this.onHomeClicked} />
<Tab text='About' onClick={this.onAboutClicked} />
<Tab text='Contact' onClick={this.onContactClicked} />
</LinearLayout>
<Line points={[
[-0.35, 0.2, 0],
[0.35, 0.2, 0]
]}
/>
<PageView visiblePage={this.state.activePage}>
<Content name="page-home">
<Text textSize={0.05}>Welcome ...</Text>
</Content>
<Content name="page-about">
<Text textSize={0.05}>About us ...</Text>
</Content>
<Content name="page-contact">
<Text textSize={0.05}>Contact ...</Text>
</Content>
</PageView>
</LinearLayout>
</LinearLayout>
</View>
</Prism>
</Scene>
);
}
}

Common Events

Common Properties

Create Properties

NameTypeDefault ValueRequiredDescription
textstringn/aNThe UTF-8 encoded text to initially set the Eclipse label to.
typestringn/aThe EclipseLabelType

Eclipse Label Types