wassname/talk
1
0
Fork 0
mirror of https://github.com/wassname/talk.git synced 2026-07-05 07:05:45 +08:00
Code Issues Packages Projects Releases Wiki Activity

change

Browse Source
This commit is contained in:
Belén Curcio
2018-09-10 12:55:31 -03:00
parent 49bfb6bcbf
commit a8b24187cb
5 changed files with 79 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/core/client/ui/components/Tabs/Tab.mdx
+25
View File
@@ -0,0 +1,25 @@
---
name: TabBar
menu: UI Kit
---
import { Playground, PropsTable } from 'docz'
import HorizontalGutter from '../HorizontalGutter'
import TabBar from './TabBar'
import Tab from './Tab'
# Tab
`Tab` component is to be used within the `TabBar` component. This renders a Tab inside the Tab Bar.s
## Basic Usage
<Playground>
<HorizontalGutter>
<TabBar defaultActiveTab="one">
<Tab tabId="one">Tab one</Tab>
<Tab tabId="second">Active Tab</Tab>
<Tab tabId="three">Tab Three</Tab>
</TabBar>
</HorizontalGutter>
</Playground>
src/core/client/ui/components/Tabs/TabBar.mdx
+4 -4
View File
@@ -16,19 +16,19 @@ import Tab from './Tab'
<Playground>
<HorizontalGutter>
<TabBar defaultActiveId="one">
<TabBar defaultActiveTab="one">
<Tab tabId="one">Tab one</Tab>
<Tab tabId="second">Active Tab</Tab>
<Tab tabId="three">Tab Three</Tab>
</TabBar>
<TabBar defaultActiveId="one" activeId="second">
<TabBar defaultActiveTab="one" activeTab="second">
<Tab tabId="one">Tab one</Tab>
<Tab tabId="second">Active Tab</Tab>
<Tab tabId="three">Tab Three</Tab>
</TabBar>
<TabBar defaultActiveId="one" activeId="three">
<TabBar defaultActiveTab="one" activeTab="three">
<Tab tabId="one">Tab one</Tab>
<Tab tabId="second">Active Tab</Tab>
<Tab tabId="three">Tab Three</Tab>
@@ -41,7 +41,7 @@ import Tab from './Tab'
<Playground>
<HorizontalGutter>
<TabBar defaultActiveId="one" color="secondary">
<TabBar defaultActiveTab="one" color="secondary">
<Tab tabId="one">Tab one</Tab>
<Tab tabId="second">Active Tab</Tab>
<Tab tabId="three">Tab Three</Tab>
src/core/client/ui/components/Tabs/TabBar.tsx
+4 -4
View File
@@ -16,7 +16,7 @@ export interface TabBarProps {
color: "primary" | "secondary";
activeTab?: string;
defaultActiveId?: string;
defaultActiveTab?: string;
onChange?: (activeId: string) => void;
onTabClick?: (tabId: string) => void;
@@ -30,7 +30,7 @@ const TabBar: StatelessComponent<TabBarProps> = props => {
onTabClick,
activeTab,
color,
defaultActiveId,
defaultActiveTab,
} = props;
const rootClassName = cn(
@@ -49,8 +49,8 @@ const TabBar: StatelessComponent<TabBarProps> = props => {
React.cloneElement(child, {
index,
active:
defaultActiveId && !activeTab
? child.props.tabId === defaultActiveId
defaultActiveTab && !activeTab
? child.props.tabId === defaultActiveTab
: child.props.tabId === activeTab,
color,
onTabClick,
src/core/client/ui/components/Tabs/TabContent.mdx
+23
View File
@@ -0,0 +1,23 @@
---
name: TabContent
menu: UI Kit
---
import { Playground, PropsTable } from 'docz'
import HorizontalGutter from '../HorizontalGutter'
import TabPane from './TabPane'
import TabContent from './TabContent'
# TabContent
## Basic Use
<Playground>
<HorizontalGutter>
<TabContent activeTab="one">
<TabPane tabId="one">Hola One</TabPane>
<TabPane tabId="two">Hola Two</TabPane>
<TabPane tabId="three">Hola Three</TabPane>
</TabContent>
</HorizontalGutter>
</Playground>
src/core/client/ui/components/Tabs/TabPane.mdx
+23
View File
@@ -0,0 +1,23 @@
---
name: TabPane
menu: UI Kit
---
import { Playground, PropsTable } from 'docz'
import HorizontalGutter from '../HorizontalGutter'
import TabPane from './TabPane'
import TabContent from './TabContent'
# TabPane
## Basic Use
<Playground>
<HorizontalGutter>
<TabContent activeTab="one">
<TabPane tabId="one">Hola One</TabPane>
<TabPane tabId="two">Hola Two</TabPane>
<TabPane tabId="three">Hola Three</TabPane>
</TabContent>
</HorizontalGutter>
</Playground>