Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Tab docs #70

Merged
merged 16 commits into from
Aug 19, 2022
Merged

Tab docs #70

Changes from all commits
Commits
Show all changes
16 commits
Select commit Hold shift + click to select a range
f5e845a
Tab component v1
saurabhsutar192 Aug 17, 2022
aa63a93
Tab Component Changes
saurabhsutar192 Aug 18, 2022
90280c0
Merge branch 'main' into tab-component
saurabhsutar192 Aug 18, 2022
f2bb0c5
document fix
saurabhsutar192 Aug 18, 2022
b8ae76a
minor fix
saurabhsutar192 Aug 18, 2022
b9a8f4d
mdx changes
saurabhsutar192 Aug 18, 2022
10429f2
mdx changes
saurabhsutar192 Aug 18, 2022
5b9e071
minor mdx changes
saurabhsutar192 Aug 18, 2022
3b4e2c1
type changes
saurabhsutar192 Aug 18, 2022
682d29e
changes for build
saurabhsutar192 Aug 18, 2022
cdaeef1
docs removed
saurabhsutar192 Aug 19, 2022
48321ef
docs added
saurabhsutar192 Aug 19, 2022
ebb70c9
Merge branch 'main' into tab-component
saurabhsutar192 Aug 19, 2022
0b1ec47
changes for build
saurabhsutar192 Aug 19, 2022
d832cb4
Merge branch 'main' of https://github.com/antstackio/hover-design int…
saurabhsutar192 Aug 19, 2022
a042990
document changes
saurabhsutar192 Aug 19, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
143 changes: 76 additions & 67 deletions docs/docs/components/tab.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@ import { Tab } from "@hover-design/react";

import "@hover-design/react/dist/style.css";
import { Tab } from "@hover-design/react";
import { useState } from "react";

```jsx
const tabData = [
Expand Down Expand Up @@ -148,76 +149,84 @@ const tabData = [

> **_(tabData)_** contains the whole tab object which is selected.

<Tab
grow
defaultValue={"first"}
tabData={[
{
label: "First",
value: "first",
},
{
label: "Second",
value: "second",
disabled: true,
},
{
label: "Third",
value: "third",
icon: (
<div
style={{
border: "1px solid black",
borderRadius: "50%",
height: "16px",
width: "16px",
display: "flex",
alignItems: "center",
justifyContent: "center",
}}
>
O
</div>
),
},
{
label: "Fourth",
value: "fourth",
icon: (
<div
style={{
border: "1px solid black",
borderRadius: "50%",
height: "16px",
width: "16px",
display: "flex",
alignItems: "center",
justifyContent: "center",
}}
>
O
</div>
),
badge: "13",
},
]}
>
{(selectedTab) => <div>{selectedTab?.label}</div>}
</Tab>
export const App = () => {
const [activeTab, setActiveTab] = useState("first");
return (
<Tab
grow
value={activeTab}
onChange={(selectedTab) => setActiveTab(selectedTab.value)}
tabData={[
{
label: "First",
value: "first",
},
{
label: "Second",
value: "second",
disabled: true,
},
{
label: "Third",
value: "third",
icon: (
<div
style={{
border: "1px solid black",
borderRadius: "50%",
height: "16px",
width: "16px",
display: "flex",
alignItems: "center",
justifyContent: "center",
}}
>
O
</div>
),
},
{
label: "Fourth",
value: "fourth",
icon: (
<div
style={{
border: "1px solid black",
borderRadius: "50%",
height: "16px",
width: "16px",
display: "flex",
alignItems: "center",
justifyContent: "center",
}}
>
O
</div>
),
badge: "13",
},
]}
>
{(selectedTab) => <div>{selectedTab?.label}</div>}
</Tab>
);
};

<App />

### Props Reference

| Attributes | Values | Default Value | Optional ? |
| :----------- | :-----------------------------------------------------------------------: | :-----------: | ---------: |
| defaultValue | _ must be equal to value from ** Tab Object ** _ `string` &#124; `number` | | Yes |
| value | _ must be equal to value from ** Tab Object ** _ `string` &#124; `number` | | Yes |
| color | `string` | `#2F80ED` | Yes |
| background | `string` | `#d7e9ff` | Yes |
| onChange | `(selectedTabObject)=>void` | `()=>{}` | Yes |
| grow | grows to fit the containter `boolean` | `false` | Yes |
| height | `string` | `40px` | Yes |
| tabData | `Array of` **_Tab Object_** | | No |
| children | _ not a prop but children to the `<Tab/>`_ `(selectedTabObject)=> JSX ` | | No |
| Attributes | Values | Default Value | Optional ? |
| :----------- | :-----------------------------------------------------------------------------: | :-----------: | ---------: |
| defaultValue | _ must be equal to value from ** Tab Object ** _ <br/> `string` &#124; `number` | | Yes |
| value | _ must be equal to value from ** Tab Object ** _ <br/> `string` &#124; `number` | | Yes |
| color | `string` | `#2F80ED` | Yes |
| background | `string` | `#d7e9ff` | Yes |
| onChange | `(selectedTabObject)=>void` | `()=>{}` | Yes |
| grow | grows to fit the containter `boolean` | `false` | Yes |
| height | `string` | `40px` | Yes |
| tabData | `Array of` **_Tab Object_** | | No |
| children | _ not a prop but children to the `<Tab/>`_ <br/> `(selectedTabObject)=> JSX ` | | No |

### Tab Object

Expand Down