Skip to content

Commit 5a76267

Browse files
mnajdovamnajdova
authoredJul 24, 2023
[docs][base] Add Tailwind CSS & plain CSS demo on the Tabs page (#37910)
·
v7.0.1v5.14.2
1 parent 42fa316 commit 5a76267

File tree

10 files changed

+402
-34
lines changed

10 files changed

+402
-34
lines changed
 

‎docs/data/base/components/tabs/UnstyledTabsCustomized/css/index.js

+121
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,121 @@
1+
import * as React from 'react';
2+
import { useTheme } from '@mui/system';
3+
import Tabs from '@mui/base/Tabs';
4+
import TabsList from '@mui/base/TabsList';
5+
import TabPanel from '@mui/base/TabPanel';
6+
import { buttonClasses } from '@mui/base/Button';
7+
import Tab, { tabClasses } from '@mui/base/Tab';
8+
9+
export default function UnstyledTabsCustomized() {
10+
return (
11+
<React.Fragment>
12+
<Tabs defaultValue={1}>
13+
<TabsList className="CustomTabsList">
14+
<Tab className="CustomTab" value={1}>
15+
One
16+
</Tab>
17+
<Tab className="CustomTab" value={2}>
18+
Two
19+
</Tab>
20+
<Tab className="CustomTab" value={3}>
21+
Three
22+
</Tab>
23+
</TabsList>
24+
<TabPanel className="CustomTabPanel" value={1}>
25+
First page
26+
</TabPanel>
27+
<TabPanel className="CustomTabPanel" value={2}>
28+
Second page
29+
</TabPanel>
30+
<TabPanel className="CustomTabPanel" value={3}>
31+
Third page
32+
</TabPanel>
33+
</Tabs>
34+
<Styles />
35+
</React.Fragment>
36+
);
37+
}
38+
39+
const cyan = {
40+
50: '#E9F8FC',
41+
100: '#BDEBF4',
42+
200: '#99D8E5',
43+
300: '#66BACC',
44+
400: '#1F94AD',
45+
500: '#0D5463',
46+
600: '#094855',
47+
700: '#063C47',
48+
800: '#043039',
49+
900: '#022127',
50+
};
51+
52+
function useIsDarkMode() {
53+
const theme = useTheme();
54+
return theme.palette.mode === 'dark';
55+
}
56+
57+
function Styles() {
58+
// Replace this with your app logic for determining dark mode
59+
const isDarkMode = useIsDarkMode();
60+
return (
61+
<style>
62+
{`
63+
.CustomTabsList {
64+
min-width: 400px;
65+
background-color: ${cyan[500]};
66+
border-radius: 12px;
67+
margin-bottom: 16px;
68+
display: flex;
69+
align-items: center;
70+
justify-content: center;
71+
align-content: space-between;
72+
box-shadow: 0px 4px 6px ${
73+
isDarkMode ? 'rgba(0,0,0, 0.4)' : 'rgba(0,0,0, 0.2)'
74+
};
75+
}
76+
77+
.CustomTab {
78+
font-family: 'IBM Plex Sans', sans-serif;
79+
color: white;
80+
cursor: pointer;
81+
font-size: 0.875rem;
82+
font-weight: bold;
83+
background-color: transparent;
84+
width: 100%;
85+
line-height: 1.5;
86+
padding: 8px 12px;
87+
margin: 6px;
88+
border: none;
89+
border-radius: 8px;
90+
display: flex;
91+
justify-content: center;
92+
}
93+
94+
.CustomTab:hover {
95+
background-color: ${cyan[400]};
96+
}
97+
98+
.CustomTab:focus {
99+
color: #fff;
100+
outline: 3px solid ${cyan[200]};
101+
}
102+
103+
.CustomTab.${tabClasses.selected} {
104+
background-color: #fff;
105+
color: ${cyan[600]};
106+
}
107+
108+
.CustomTab.${buttonClasses.disabled} {
109+
opacity: 0.5;
110+
cursor: not-allowed;
111+
}
112+
113+
.CustomTabPanel {
114+
width: 100%;
115+
font-family: 'IBM Plex Sans', sans-serif;
116+
font-size: 0.875rem;
117+
}
118+
`}
119+
</style>
120+
);
121+
}

‎docs/data/base/components/tabs/UnstyledTabsCustomized/css/index.tsx

+121
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,121 @@
1+
import * as React from 'react';
2+
import { useTheme } from '@mui/system';
3+
import Tabs from '@mui/base/Tabs';
4+
import TabsList from '@mui/base/TabsList';
5+
import TabPanel from '@mui/base/TabPanel';
6+
import { buttonClasses } from '@mui/base/Button';
7+
import Tab, { tabClasses } from '@mui/base/Tab';
8+
9+
export default function UnstyledTabsCustomized() {
10+
return (
11+
<React.Fragment>
12+
<Tabs defaultValue={1}>
13+
<TabsList className="CustomTabsList">
14+
<Tab className="CustomTab" value={1}>
15+
One
16+
</Tab>
17+
<Tab className="CustomTab" value={2}>
18+
Two
19+
</Tab>
20+
<Tab className="CustomTab" value={3}>
21+
Three
22+
</Tab>
23+
</TabsList>
24+
<TabPanel className="CustomTabPanel" value={1}>
25+
First page
26+
</TabPanel>
27+
<TabPanel className="CustomTabPanel" value={2}>
28+
Second page
29+
</TabPanel>
30+
<TabPanel className="CustomTabPanel" value={3}>
31+
Third page
32+
</TabPanel>
33+
</Tabs>
34+
<Styles />
35+
</React.Fragment>
36+
);
37+
}
38+
39+
const cyan = {
40+
50: '#E9F8FC',
41+
100: '#BDEBF4',
42+
200: '#99D8E5',
43+
300: '#66BACC',
44+
400: '#1F94AD',
45+
500: '#0D5463',
46+
600: '#094855',
47+
700: '#063C47',
48+
800: '#043039',
49+
900: '#022127',
50+
};
51+
52+
function useIsDarkMode() {
53+
const theme = useTheme();
54+
return theme.palette.mode === 'dark';
55+
}
56+
57+
function Styles() {
58+
// Replace this with your app logic for determining dark mode
59+
const isDarkMode = useIsDarkMode();
60+
return (
61+
<style>
62+
{`
63+
.CustomTabsList {
64+
min-width: 400px;
65+
background-color: ${cyan[500]};
66+
border-radius: 12px;
67+
margin-bottom: 16px;
68+
display: flex;
69+
align-items: center;
70+
justify-content: center;
71+
align-content: space-between;
72+
box-shadow: 0px 4px 6px ${
73+
isDarkMode ? 'rgba(0,0,0, 0.4)' : 'rgba(0,0,0, 0.2)'
74+
};
75+
}
76+
77+
.CustomTab {
78+
font-family: 'IBM Plex Sans', sans-serif;
79+
color: white;
80+
cursor: pointer;
81+
font-size: 0.875rem;
82+
font-weight: bold;
83+
background-color: transparent;
84+
width: 100%;
85+
line-height: 1.5;
86+
padding: 8px 12px;
87+
margin: 6px;
88+
border: none;
89+
border-radius: 8px;
90+
display: flex;
91+
justify-content: center;
92+
}
93+
94+
.CustomTab:hover {
95+
background-color: ${cyan[400]};
96+
}
97+
98+
.CustomTab:focus {
99+
color: #fff;
100+
outline: 3px solid ${cyan[200]};
101+
}
102+
103+
.CustomTab.${tabClasses.selected} {
104+
background-color: #fff;
105+
color: ${cyan[600]};
106+
}
107+
108+
.CustomTab.${buttonClasses.disabled} {
109+
opacity: 0.5;
110+
cursor: not-allowed;
111+
}
112+
113+
.CustomTabPanel {
114+
width: 100%;
115+
font-family: 'IBM Plex Sans', sans-serif;
116+
font-size: 0.875rem;
117+
}
118+
`}
119+
</style>
120+
);
121+
}

‎docs/data/base/components/tabs/UnstyledTabsCustomized.js ‎docs/data/base/components/tabs/UnstyledTabsCustomized/system/index.js

+6-16
Original file line numberDiff line numberDiff line change
@@ -34,19 +34,6 @@ const blue = {
3434
900: '#003A75',
3535
};
3636

37-
const grey = {
38-
50: '#f6f8fa',
39-
100: '#eaeef2',
40-
200: '#d0d7de',
41-
300: '#afb8c1',
42-
400: '#8c959f',
43-
500: '#6e7781',
44-
600: '#57606a',
45-
700: '#424a53',
46-
800: '#32383f',
47-
900: '#24292f',
48-
};
49-
5037
const StyledTab = styled(Tab)`
5138
font-family: 'IBM Plex Sans', sans-serif;
5239
color: white;
@@ -55,10 +42,11 @@ const StyledTab = styled(Tab)`
5542
font-weight: bold;
5643
background-color: transparent;
5744
width: 100%;
58-
padding: 12px;
45+
line-height: 1.5;
46+
padding: 8px 12px;
5947
margin: 6px;
6048
border: none;
61-
border-radius: 7px;
49+
border-radius: 8px;
6250
display: flex;
6351
justify-content: center;
6452
@@ -98,6 +86,8 @@ const StyledTabsList = styled(TabsList)(
9886
align-items: center;
9987
justify-content: center;
10088
align-content: space-between;
101-
box-shadow: 0px 4px 8px ${theme.palette.mode === 'dark' ? grey[900] : grey[200]};
89+
box-shadow: 0px 4px 6px ${
90+
theme.palette.mode === 'dark' ? 'rgba(0,0,0, 0.4)' : 'rgba(0,0,0, 0.2)'
91+
};
10292
`,
10393
);

‎docs/data/base/components/tabs/UnstyledTabsCustomized.tsx ‎docs/data/base/components/tabs/UnstyledTabsCustomized/system/index.tsx

+6-16
Original file line numberDiff line numberDiff line change
@@ -34,19 +34,6 @@ const blue = {
3434
900: '#003A75',
3535
};
3636

37-
const grey = {
38-
50: '#f6f8fa',
39-
100: '#eaeef2',
40-
200: '#d0d7de',
41-
300: '#afb8c1',
42-
400: '#8c959f',
43-
500: '#6e7781',
44-
600: '#57606a',
45-
700: '#424a53',
46-
800: '#32383f',
47-
900: '#24292f',
48-
};
49-
5037
const StyledTab = styled(Tab)`
5138
font-family: 'IBM Plex Sans', sans-serif;
5239
color: white;
@@ -55,10 +42,11 @@ const StyledTab = styled(Tab)`
5542
font-weight: bold;
5643
background-color: transparent;
5744
width: 100%;
58-
padding: 12px;
45+
line-height: 1.5;
46+
padding: 8px 12px;
5947
margin: 6px;
6048
border: none;
61-
border-radius: 7px;
49+
border-radius: 8px;
6250
display: flex;
6351
justify-content: center;
6452
@@ -98,6 +86,8 @@ const StyledTabsList = styled(TabsList)(
9886
align-items: center;
9987
justify-content: center;
10088
align-content: space-between;
101-
box-shadow: 0px 4px 8px ${theme.palette.mode === 'dark' ? grey[900] : grey[200]};
89+
box-shadow: 0px 4px 6px ${
90+
theme.palette.mode === 'dark' ? 'rgba(0,0,0, 0.4)' : 'rgba(0,0,0, 0.2)'
91+
};
10292
`,
10393
);

‎docs/data/base/components/tabs/UnstyledTabsCustomized/tailwind/index.js

+71
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
import * as React from 'react';
2+
import Tabs from '@mui/base/Tabs';
3+
import TabsList from '@mui/base/TabsList';
4+
import TabPanel from '@mui/base/TabPanel';
5+
import Tab from '@mui/base/Tab';
6+
7+
export default function UnstyledTabsCustomized() {
8+
return (
9+
<Tabs defaultValue={1}>
10+
<TabsList className="mb-4 rounded-xl bg-purple-500 flex items-center justify-center content-between min-w-tabs-list shadow-lg">
11+
<Tab
12+
slotProps={{
13+
root: ({ selected, disabled }) => ({
14+
className: `${
15+
selected
16+
? 'text-purple-500 bg-white'
17+
: 'text-white bg-transparent focus:text-white hover:bg-purple-400'
18+
} ${
19+
disabled ? 'cursor-not-allowed opacity-50' : 'cursor-pointer'
20+
} text-sm font-bold w-full p-2 m-1.5 border-0 rounded-lg flex justify-center focus:outline-0 focus:shadow-outline-purple-light`,
21+
}),
22+
}}
23+
value={1}
24+
>
25+
One
26+
</Tab>
27+
<Tab
28+
slotProps={{
29+
root: ({ selected, disabled }) => ({
30+
className: `${
31+
selected
32+
? 'text-purple-500 bg-white'
33+
: 'text-white bg-transparent focus:text-white hover:bg-purple-400'
34+
} ${
35+
disabled ? 'cursor-not-allowed opacity-50' : 'cursor-pointer'
36+
} text-sm font-bold w-full p-2 m-1.5 border-0 rounded-md flex justify-center focus:outline-0 focus:shadow-outline-purple-light`,
37+
}),
38+
}}
39+
value={2}
40+
>
41+
Two
42+
</Tab>
43+
<Tab
44+
slotProps={{
45+
root: ({ selected, disabled }) => ({
46+
className: `${
47+
selected
48+
? 'text-purple-500 bg-white'
49+
: 'text-white bg-transparent focus:text-white hover:bg-purple-400'
50+
} ${
51+
disabled ? 'cursor-not-allowed opacity-50' : 'cursor-pointer'
52+
} text-sm font-bold w-full p-2 m-1.5 border-0 rounded-md flex justify-center focus:outline-0 focus:shadow-outline-purple-light`,
53+
}),
54+
}}
55+
value={3}
56+
>
57+
Three
58+
</Tab>
59+
</TabsList>
60+
<TabPanel className="w-full text-sm" value={1}>
61+
First page
62+
</TabPanel>
63+
<TabPanel className="w-full text-sm" value={2}>
64+
Second page
65+
</TabPanel>
66+
<TabPanel className="w-full text-sm" value={3}>
67+
Third page
68+
</TabPanel>
69+
</Tabs>
70+
);
71+
}

‎docs/data/base/components/tabs/UnstyledTabsCustomized/tailwind/index.tsx

+71
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
import * as React from 'react';
2+
import Tabs from '@mui/base/Tabs';
3+
import TabsList from '@mui/base/TabsList';
4+
import TabPanel from '@mui/base/TabPanel';
5+
import Tab from '@mui/base/Tab';
6+
7+
export default function UnstyledTabsCustomized() {
8+
return (
9+
<Tabs defaultValue={1}>
10+
<TabsList className="mb-4 rounded-xl bg-purple-500 flex items-center justify-center content-between min-w-tabs-list shadow-lg">
11+
<Tab
12+
slotProps={{
13+
root: ({ selected, disabled }) => ({
14+
className: `${
15+
selected
16+
? 'text-purple-500 bg-white'
17+
: 'text-white bg-transparent focus:text-white hover:bg-purple-400'
18+
} ${
19+
disabled ? 'cursor-not-allowed opacity-50' : 'cursor-pointer'
20+
} text-sm font-bold w-full p-2 m-1.5 border-0 rounded-lg flex justify-center focus:outline-0 focus:shadow-outline-purple-light`,
21+
}),
22+
}}
23+
value={1}
24+
>
25+
One
26+
</Tab>
27+
<Tab
28+
slotProps={{
29+
root: ({ selected, disabled }) => ({
30+
className: `${
31+
selected
32+
? 'text-purple-500 bg-white'
33+
: 'text-white bg-transparent focus:text-white hover:bg-purple-400'
34+
} ${
35+
disabled ? 'cursor-not-allowed opacity-50' : 'cursor-pointer'
36+
} text-sm font-bold w-full p-2 m-1.5 border-0 rounded-md flex justify-center focus:outline-0 focus:shadow-outline-purple-light`,
37+
}),
38+
}}
39+
value={2}
40+
>
41+
Two
42+
</Tab>
43+
<Tab
44+
slotProps={{
45+
root: ({ selected, disabled }) => ({
46+
className: `${
47+
selected
48+
? 'text-purple-500 bg-white'
49+
: 'text-white bg-transparent focus:text-white hover:bg-purple-400'
50+
} ${
51+
disabled ? 'cursor-not-allowed opacity-50' : 'cursor-pointer'
52+
} text-sm font-bold w-full p-2 m-1.5 border-0 rounded-md flex justify-center focus:outline-0 focus:shadow-outline-purple-light`,
53+
}),
54+
}}
55+
value={3}
56+
>
57+
Three
58+
</Tab>
59+
</TabsList>
60+
<TabPanel className="w-full text-sm" value={1}>
61+
First page
62+
</TabPanel>
63+
<TabPanel className="w-full text-sm" value={2}>
64+
Second page
65+
</TabPanel>
66+
<TabPanel className="w-full text-sm" value={3}>
67+
Third page
68+
</TabPanel>
69+
</Tabs>
70+
);
71+
}

‎docs/data/base/components/tabs/tabs.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -65,7 +65,7 @@ The following demo omits the `value` prop from the Tab components, and also defi
6565

6666
The next demo shows how to apply custom styles to a set of tabs:
6767

68-
{{"demo": "UnstyledTabsCustomized.js"}}
68+
{{"demo": "UnstyledTabsCustomized"}}
6969

7070
### Anatomy
7171

‎docs/src/modules/sandbox/CreateReactApp.ts

+3-1
Original file line numberDiff line numberDiff line change
@@ -33,8 +33,9 @@ export const getHtml = ({
3333
extend: {
3434
boxShadow: {
3535
'outline-purple': '0 0 0 4px rgba(192, 132, 252, 0.25)',
36+
'outline-purple-light': '0 0 0 4px rgba(245, 208, 254, 0.25)',
3637
'outline-purple-xs': '0 0 0 1px rgba(192, 132, 252, 0.25)',
37-
'outline-switch': '0 0 1px 8px rgba(0, 0, 0, 0.25)',
38+
'outline-switch': '0 0 1px 8px rgba(168, 85, 247, 0.35)',
3839
},
3940
cursor: {
4041
inherit: 'inherit',
@@ -55,6 +56,7 @@ export const getHtml = ({
5556
badge: '22px',
5657
listbox: '200px',
5758
snackbar: '300px',
59+
'tabs-list': '400px',
5860
},
5961
maxWidth: {
6062
snackbar: '560px',

‎docs/tailwind.config.js

+2
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ module.exports = {
1414
extend: {
1515
boxShadow: {
1616
'outline-purple': '0 0 0 4px rgba(192, 132, 252, 0.25)',
17+
'outline-purple-light': '0 0 0 4px rgba(245, 208, 254, 0.25)',
1718
'outline-purple-xs': '0 0 0 1px rgba(192, 132, 252, 0.25)',
1819
'outline-switch': '0 0 1px 8px rgba(168, 85, 247, 0.35)',
1920
},
@@ -36,6 +37,7 @@ module.exports = {
3637
badge: '22px',
3738
listbox: '200px',
3839
snackbar: '300px',
40+
'tabs-list': '400px',
3941
},
4042
maxWidth: {
4143
snackbar: '560px',

0 commit comments

Comments
 (0)
Please sign in to comment.