Skip to content

Commit e715bc6

Browse files
einazareeinazare
committed
docs: add tab components docs
1 parent 4ac3253 commit e715bc6

File tree

1 file changed

+198
-3
lines changed

1 file changed

+198
-3
lines changed

‎README.md

Lines changed: 198 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,7 @@ We plan on implementing more, in the weeks to come.
4242
- [Navbar](#navbar)
4343
- [Popover](#popover)
4444
- [Tooltip](#tooltip)
45-
- Tab Pills
45+
- [Tab Pills](#tab-pills)
4646

4747
## Quick start
4848

@@ -498,7 +498,7 @@ import {
498498
NavbarLink,
499499
NavbarNav,
500500
NavbarToggler
501-
} from "./src";
501+
} from "@tailwindjs/react-tailwindjs";
502502
503503
const YourComponent = () => {
504504
return (
@@ -541,7 +541,7 @@ import {
541541
NavbarLink,
542542
NavbarNav,
543543
NavbarToggler
544-
} from "./src";
544+
} from "@tailwindjs/react-tailwindjs";
545545
546546
const YourComponent = () => {
547547
const [show, setShow] = React.useState(false);
@@ -842,6 +842,201 @@ Tooltip.propTypes = {
842842
};
843843
```
844844

845+
### Tab Pills
846+
847+
Usage:
848+
849+
```
850+
// uncontrolled version
851+
import React from "react";
852+
import { TabContainer, TabItem, TabLink, TabContent } from "@tailwindjs/react-tailwindjs";
853+
854+
const YourComponent = () => {
855+
return (
856+
<>
857+
<TabContainer color="pink">
858+
<TabItem>
859+
<TabLink target="#tab-id-1">Simple</TabLink>
860+
</TabItem>
861+
<TabItem>
862+
<TabLink target="#tab-id-2" active>
863+
Active
864+
</TabLink>
865+
</TabItem>
866+
<TabItem>
867+
<TabLink target="#tab-id-3">Simple</TabLink>
868+
</TabItem>
869+
<TabItem>
870+
<TabLink target="#tab-id-4" disabled>
871+
Disabled
872+
</TabLink>
873+
</TabItem>
874+
</TabContainer>
875+
<TabContent id="tab-id-1">
876+
<p>
877+
Collaboratively administrate empowered markets via plug-and-play
878+
networks. Dynamically procrastinate B2C users after installed base
879+
benefits.
880+
</p>
881+
<p>
882+
Dramatically visualize customer directed convergence without
883+
revolutionary ROI.
884+
</p>
885+
</TabContent>
886+
<TabContent id="tab-id-2">
887+
<p>
888+
Completely synergize resource taxing relationships via premier niche
889+
markets. Professionally cultivate one-to-one customer service with
890+
robust ideas.
891+
</p>
892+
<p>
893+
Efficiently unleash cross-media information without cross-media value.
894+
Quickly maximize timely deliverables for real-time schemas.
895+
</p>
896+
</TabContent>
897+
<TabContent id="tab-id-3">
898+
<p>
899+
Efficiently unleash cross-media information without cross-media value.
900+
Quickly maximize timely deliverables for real-time schemas.
901+
</p>
902+
<p>
903+
Dramatically maintain clicks-and-mortar solutions without functional
904+
solutions.
905+
</p>
906+
</TabContent>
907+
<TabContent id="tab-id-4">
908+
<p>
909+
Completely synergize resource taxing relationships via premier niche
910+
markets. Professionally cultivate one-to-one customer service with
911+
robust ideas.
912+
</p>
913+
<p>
914+
Efficiently unleash cross-media information without cross-media value.
915+
Quickly maximize timely deliverables for real-time schemas.
916+
</p>
917+
</TabContent>
918+
</>
919+
);
920+
};
921+
922+
export default YourComponent;
923+
```
924+
925+
```
926+
// controlled version
927+
// on the controlled version you will have to send the color
928+
// of each tab-link individualy, the color from the tab-container
929+
// will no longer be applied :(
930+
import React from "react";
931+
import { TabContainer, TabItem, TabLink, TabContent } from "@tailwindjs/react-tailwindjs";
932+
933+
const YourComponent = () => {
934+
const [active, setActive] = React.useState("tab-id-2");
935+
const toggleActiveTab = tab => {
936+
setActive(tab);
937+
};
938+
return (
939+
<>
940+
{/* the color on the container does nothing on the controlled version */}
941+
<TabContainer controlled color="blue">
942+
<TabItem>
943+
<TabLink
944+
color="pink"
945+
target="#tab-id-1"
946+
active={active === "tab-id-1"}
947+
onClick={() => toggleActiveTab("tab-id-1")}
948+
>
949+
Simple
950+
</TabLink>
951+
</TabItem>
952+
<TabItem>
953+
<TabLink
954+
color="pink"
955+
target="#tab-id-2"
956+
active={active === "tab-id-2"}
957+
onClick={() => toggleActiveTab("tab-id-2")}
958+
>
959+
Active
960+
</TabLink>
961+
</TabItem>
962+
<TabItem>
963+
<TabLink
964+
color="pink"
965+
target="#tab-id-3"
966+
active={active === "tab-id-3"}
967+
onClick={() => toggleActiveTab("tab-id-3")}
968+
>
969+
Simple
970+
</TabLink>
971+
</TabItem>
972+
<TabItem>
973+
<TabLink
974+
color="pink"
975+
target="#tab-id-4"
976+
disabled
977+
active={active === "tab-id-4"}
978+
onClick={() => toggleActiveTab("tab-id-4")}
979+
>
980+
Disabled
981+
</TabLink>
982+
</TabItem>
983+
</TabContainer>
984+
<TabContent id="tab-id-1" active={active === "tab-id-1"}>
985+
<p>
986+
Collaboratively administrate empowered markets via plug-and-play
987+
networks. Dynamically procrastinate B2C users after installed base
988+
benefits.
989+
</p>
990+
<p>
991+
Dramatically visualize customer directed convergence without
992+
revolutionary ROI.
993+
</p>
994+
</TabContent>
995+
<TabContent id="tab-id-2" active={active === "tab-id-2"}>
996+
<p>
997+
Completely synergize resource taxing relationships via premier niche
998+
markets. Professionally cultivate one-to-one customer service with
999+
robust ideas.
1000+
</p>
1001+
<p>
1002+
Efficiently unleash cross-media information without cross-media value.
1003+
Quickly maximize timely deliverables for real-time schemas.
1004+
</p>
1005+
</TabContent>
1006+
<TabContent id="tab-id-3" active={active === "tab-id-3"}>
1007+
<p>
1008+
Efficiently unleash cross-media information without cross-media value.
1009+
Quickly maximize timely deliverables for real-time schemas.
1010+
</p>
1011+
<p>
1012+
Dramatically maintain clicks-and-mortar solutions without functional
1013+
solutions.
1014+
</p>
1015+
</TabContent>
1016+
<TabContent id="tab-id-4" active={active === "tab-id-4"}>
1017+
<p>
1018+
Completely synergize resource taxing relationships via premier niche
1019+
markets. Professionally cultivate one-to-one customer service with
1020+
robust ideas.
1021+
</p>
1022+
<p>
1023+
Efficiently unleash cross-media information without cross-media value.
1024+
Quickly maximize timely deliverables for real-time schemas.
1025+
</p>
1026+
</TabContent>
1027+
</>
1028+
);
1029+
};
1030+
1031+
export default YourComponent;
1032+
```
1033+
1034+
Props:
1035+
1036+
```
1037+
1038+
```
1039+
8451040

8461041
### Styles
8471042

0 commit comments

Comments
 (0)