@chakra-ui/react#TabPanel TypeScript Examples
The following examples show how to use
@chakra-ui/react#TabPanel.
You can vote up the ones you like or vote down the ones you don't like,
and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
| Source File: TrackPage.tsx From takeout-app with MIT License | 6 votes |
|
TrackPageSkeleton: React.FC = () => {
return (
<Tabs>
<TabList>
<Tab>
<Skeleton w="240px" h="25px" />
</Tab>
</TabList>
<TabPanels>
<TabPanel p={0}>
<TrackViewSkeleton />
</TabPanel>
</TabPanels>
</Tabs>
);
}
Example #2
| Source File: App.tsx From engine with MIT License | 5 votes |
|
App: view = ({
data = observe.structure.data,
viewsCount = observe.structure.count.views,
producersCount = observe.structure.count.producers,
}) => {
if (!data || !viewsCount || !producersCount) {
return;
}
return (
<ChakraProvider>
<SimpleGrid columns={2}>
<Box bg="gray.100" h="100vh">
<Tabs>
<TabList position="relative">
<Tab>State</Tab>
<Tab>
Views <Tag>{viewsCount}</Tag>
</Tab>
<Tab>
Producers <Tag>{producersCount}</Tag>
</Tab>
<Tab>Stats</Tab>
</TabList>
<TabPanels>
<TabPanel pr="0">
<List>
<Box overflowY="scroll" h="92vh">
<StateTree data={data} />
</Box>
</List>
</TabPanel>
<TabPanel pr="0">
<ViewsTab />
</TabPanel>
<TabPanel pr="0">
<ProducersTab />
</TabPanel>
<TabPanel pr="0">
<StatsTab />
</TabPanel>
</TabPanels>
</Tabs>
</Box>
<Box bg="gray.200" borderLeft="solid 1px" borderColor="gray.300">
<EditElement />
<ElementDescription />
</Box>
</SimpleGrid>
</ChakraProvider>
);
}
Example #3
| Source File: index.tsx From dope-monorepo with GNU General Public License v3.0 | 5 votes |
|
export default function Debug(props: DebugData) {
const handleKey = (e: KeyboardEvent) => {
if (e.key === 'Escape')
{
props.manager.events.emit('close');
e.stopPropagation();
}
}
useEffect(() => {
document.addEventListener('keyup', handleKey);
return () => {
document.removeEventListener('keyup', handleKey);
}
});
return (
<ChakraProvider theme={theme}>
<Container style={{
display: 'flex',
overflow: 'auto',
position: "absolute",
top: "2%",
right: "2%",
width: "40%",
height: "50%",
backgroundColor: "rgba(255,255,255,0.8)",
borderRadius: "10px",
}}>
<div style={{
position: "relative",
padding: "1rem",
}}>
<Tabs>
<TabList>
<Tab fontSize="0.8rem">Player</Tab>
<Tab fontSize="0.8rem">World</Tab>
<Tab fontSize="0.8rem">Hustlers</Tab>
<Tab fontSize="0.8rem">Item Entities</Tab>
<Tab fontSize="0.8rem">Lights</Tab>
</TabList>
<TabPanels>
<TabPanel>
<PlayerPanel player={props.player} />
</TabPanel>
<TabPanel>
<WorldPanel map={props.map} />
</TabPanel>
<TabPanel>
<HustlersPanel hustlers={props.hustlers} />
</TabPanel>
<TabPanel>
<ItemEntitiesPanel itemEntities={props.itemEntities} />
</TabPanel>
<TabPanel>
<LightsPanel player={props.player} lights={props.lights} />
</TabPanel>
</TabPanels>
</Tabs>
</div>
</Container>
</ChakraProvider>
)
}
Example #4
| Source File: index.tsx From dope-monorepo with GNU General Public License v3.0 | 5 votes |
|
DopeTabs = ({ tabs }: DopeTabsProps) => {
return (
<Tabs>
<TabList padding="8px 8px 0 8px" backgroundColor="#222222">
{tabs.map(tab => (
<Tab
key={tab.number}
marginRight="8px"
maxWidth="239px"
width="100%"
backgroundColor="#434345"
border="2px solid #000000"
borderTopRadius="10px"
color="white"
_selected={{ bg: 'white', color: 'black' }}
lineHeight="16px"
fontSize="14px"
fontFamily="ChicagoFLF"
padding="6px 12px"
display="flex"
justifyContent="space-between"
>
<Box flexGrow="1" />
<Box flexGrow="1">
<Text margin="0">{formatTitle(tab.title)}</Text>
</Box>
<Box flexGrow="1">
{Boolean(tab.number) && (
<Box
margin="0 0 0 auto"
width="min-content"
fontSize="12px"
lineHeight="12px"
color="white"
backgroundColor="#202221"
borderRadius="23px"
padding="4px 8px"
>
{tab.number}
</Box>
)}
</Box>
</Tab>
))}
</TabList>
<TabPanels>
{tabs.map(tab => (
<TabPanel>{tab.content}</TabPanel>
))}
</TabPanels>
</Tabs>
);
}
Example #5
| Source File: index.tsx From calories-in with MIT License | 5 votes |
|
function Tabs({
nameInputRef,
food,
isEditing,
selectedTabName,
tabNames,
onTabNameChange,
}: Props) {
const { formState } = useFormContext()
const tabIndex = tabNames.indexOf(selectedTabName)
function onTabIndexChange(index: number) {
onTabNameChange(tabNames[index])
}
return (
<TabsBase
variant="enclosed"
colorScheme="teal"
index={tabIndex}
onChange={onTabIndexChange}
>
<TabList>
<Tab color={formState.errors?.energy ? 'red.500' : undefined}>
Nutrition Facts
</Tab>
{tabNames.includes('volume') && <Tab>Volume</Tab>}
{tabNames.includes('link') && <Tab>Link</Tab>}
</TabList>
<TabPanels>
<TabPanel px={0}>
<NutritionFactsFormFields
nameInputRef={nameInputRef}
canEdit={isEditing}
/>
</TabPanel>
{tabNames.includes('volume') && (
<TabPanel px={0}>
<VolumeFormFields food={food} canEdit={isEditing} />
</TabPanel>
)}
{tabNames.includes('link') && (
<TabPanel px={0}>
<UrlField canEdit={isEditing} food={food} />
</TabPanel>
)}
</TabPanels>
</TabsBase>
)
}
Example #6
| Source File: tech-stack.tsx From portfolio with MIT License | 4 votes |
|
TechStack = () => {
const [skillsList, setSkillsList] = useState([]);
React.useEffect(() => {
setSkillsList(skills);
}, []);
const filterSkills = tab => {
console.log(skills.filter(skill => skill.type === tab));
if (tab.length) setSkillsList(skills.filter(skill => skill.type === tab));
else setSkillsList(skills);
};
return (
<PageSlideFade>
<VStack spacing={8}>
<Section>
<VStack>
<Header mt={0} mb={1}>
Tech Stack
</Header>
<Text
fontSize={"xl"}
color={useColorModeValue("gray.500", "gray.200")}
maxW="lg"
textAlign="center"
>
A list of my favorite tools and technologies that I use on a
regular basis.
</Text>
</VStack>
</Section>
<Section>
<Tabs
variant="soft-rounded"
colorScheme="blue"
align="center"
w="100%"
>
<TabList display="flex" flexWrap="wrap">
<Tab
bg={useColorModeValue("gray.100", "gray.800")}
color={useColorModeValue("gray.600", "gray.500")}
_selected={{
color: "green.800",
bg: "green.100"
}}
mr={2}
mt={2}
onClick={() => filterSkills("")}
>
<HStack spacing={1}>
<Icon as={AiTwotoneThunderbolt} weight="fill" />
<Text>All</Text>
</HStack>
</Tab>
<Tab
bg={useColorModeValue("gray.100", "gray.800")}
color={useColorModeValue("gray.500", "gray.500")}
_selected={{
color: useColorModeValue("gray.100", "gray.800"),
bg: useColorModeValue("gray.900", "gray.100")
}}
mr={2}
mt={2}
onClick={() => filterSkills("development")}
>
<HStack spacing={1}>
<Icon as={BiDesktop} weight="fill" />
<Text>Web Development</Text>
</HStack>
</Tab>
<Tab
bg={useColorModeValue("gray.100", "gray.800")}
color={useColorModeValue("gray.600", "gray.500")}
_selected={{
color: "green.800",
bg: "green.100"
}}
mr={2}
mt={2}
onClick={() => filterSkills("design")}
>
<HStack spacing={1}>
<Icon as={GiSpiderWeb} weight="fill" />
<Text>Web Design</Text>
</HStack>
</Tab>
<Tab
bg={useColorModeValue("gray.100", "gray.800")}
color={useColorModeValue("gray.600", "gray.500")}
_selected={{
color: "red.800",
bg: "red.100"
}}
mr={2}
mt={2}
onClick={() => filterSkills("devops")}
>
<HStack spacing={1}>
<Icon as={AiOutlineCloudServer} weight="fill" />
<Text>Devops</Text>
</HStack>
</Tab>
</TabList>
<TabPanels minHeight={"45vh"}>
<TabPanel px={0}>
<MotionBox
variants={container}
initial="hidden"
animate="visible"
>
<SimpleGrid columns={[1, 1, 2]} spacing={4} mt={8}>
{skillsList.map((tool, index) => (
<SkillCard
key={index}
name={tool.name}
description={tool.description}
image={tool.image}
platform={"web"}
link={tool.link}
/>
))}
</SimpleGrid>
</MotionBox>
</TabPanel>
<TabPanel px={0}>
<MotionBox
variants={container}
initial="hidden"
animate="visible"
>
<SimpleGrid columns={[1, 2]} spacing={4} mt={8}>
{skillsList.map((tool, index) => (
<SkillCard
key={index}
name={tool.name}
description={tool.description}
image={tool.image}
platform={"web"}
link={tool.link}
/>
))}
</SimpleGrid>
</MotionBox>
</TabPanel>
<TabPanel px={0}>
<MotionBox
variants={container}
initial="hidden"
animate="visible"
>
<SimpleGrid columns={[1, 2]} spacing={4} mt={8}>
{skillsList.map((tool, index) => (
<SkillCard
key={index}
name={tool.name}
description={tool.description}
image={tool.image}
platform={"web"}
link={tool.link}
/>
))}
</SimpleGrid>
</MotionBox>
</TabPanel>
<TabPanel px={0}>
<MotionBox
variants={container}
initial="hidden"
animate="visible"
>
<SimpleGrid columns={[1, 2]} spacing={4} mt={8}>
{skillsList.map((tool, index) => (
<SkillCard
key={index}
name={tool.name}
description={tool.description}
image={tool.image}
platform={"web"}
link={tool.link}
/>
))}
</SimpleGrid>
</MotionBox>
</TabPanel>
</TabPanels>
</Tabs>
</Section>
</VStack>
</PageSlideFade>
);
}
Example #7
| Source File: ColorPickerControl.tsx From openchakra with MIT License | 4 votes |
|
ColorPickerControl = (props: ColorPickerPropType) => {
const theme = useTheme()
const themeColors: any = omit(theme.colors, [
'transparent',
'current',
'black',
'white',
])
const { setValue, setValueFromEvent } = useForm()
const value = usePropsSelector(props.name)
let propsIconButton: any = { bg: value }
if (value && themeColors[value]) {
propsIconButton = { colorScheme: value }
}
return (
<>
<Popover placement="bottom">
<PopoverTrigger>
{props.gradient ? (
<IconButton
mr={2}
boxShadow="md"
border={props.gradientColor ? 'none' : '2px solid grey'}
isRound
aria-label="Color"
size="xs"
colorScheme={props.gradientColor}
bg={props.gradientColor}
/>
) : (
<IconButton
mr={2}
boxShadow="md"
border={value ? 'none' : '2px solid grey'}
isRound
aria-label="Color"
size="xs"
{...propsIconButton}
/>
)}
</PopoverTrigger>
<Portal>
<PopoverContent width="200px">
<PopoverArrow />
<PopoverBody>
{props.withFullColor ? (
<Tabs size="sm" variant="soft-rounded" colorScheme="green">
<TabList>
<Tab>Theme</Tab>
<Tab>All</Tab>
</TabList>
<TabPanels mt={4}>
<TabPanel p={0}>
{props.gradient ? (
<HuesPickerControl
name={props.name}
themeColors={themeColors}
enableHues
setValue={setValue}
gradient={true}
index={props.index}
updateGradient={props.updateGradient}
/>
) : (
<HuesPickerControl
name={props.name}
themeColors={themeColors}
enableHues
setValue={setValue}
gradient={props.gradient}
/>
)}
</TabPanel>
<TabPanel p={0}>
<Box position="relative" height="150px">
<ColorPicker
color={props.gradient ? props.gradientColor : value}
onChange={(color: any) => {
props.gradient
? props.updateGradient!(
`#${color.hex}`,
props.index!,
)
: setValue(props.name, `#${color.hex}`)
}}
/>
);
</Box>
</TabPanel>
</TabPanels>
</Tabs>
) : props.gradient ? (
<HuesPickerControl
name={props.name}
themeColors={themeColors}
enableHues
setValue={setValue}
gradient={true}
index={props.index}
updateGradient={props.updateGradient}
/>
) : (
<HuesPickerControl
name={props.name}
themeColors={themeColors}
enableHues={false}
setValue={setValue}
gradient={props.gradient}
/>
)}
</PopoverBody>
</PopoverContent>
</Portal>
</Popover>
{props.gradient ? (
<Input
width="100px"
size="sm"
name={props.name}
onChange={(e: ChangeEvent<HTMLInputElement>) => {
props.gradient
? props.updateGradient!(e.target.value, props.index!)
: setValue(props.name, e.target.value)
}}
value={props.gradientColor}
/>
) : (
<Input
width="100px"
size="sm"
name={props.name}
onChange={setValueFromEvent}
value={value}
/>
)}
</>
)
}
Example #8
| Source File: TrackPage.tsx From takeout-app with MIT License | 4 votes |
|
TrackPageInner: React.FC = () => {
const history = useHistory();
const streamOptionState = Api.useTrackStreamOptions();
const { slug: trackSlug } = useParams<{ slug: string }>();
const { data: conferenceData, error: conferenceError, mutate: mutateConferenceData } = Api.useConference();
React.useEffect(() => {
if (!conferenceData) return;
if (conferenceData.requested_at === 0) return; // Partially mutated by consumeIvsMetadata
const now = dayjs();
const isStale = conferenceData.stale_after && conferenceData.stale_after - 2 <= now.unix();
console.log("conferenceData freshness", {
isStale,
now: now.toISOString(),
at: dayjs.unix(conferenceData.requested_at).toISOString(),
stale_after: dayjs.unix(conferenceData.stale_after).toISOString(),
});
if (isStale) {
console.log("conferenceData is stale; request revalidation");
mutateConferenceData();
const interval = setInterval(() => {
console.log("Revalidating stale conferenceData...");
mutateConferenceData();
}, 1000);
return () => clearInterval(interval);
} else {
console.log("conferenceData is fresh!");
}
}, [conferenceData?.requested_at, conferenceData?.stale_after]);
if (!conferenceData) {
return (
<>
{conferenceError ? (
<Box my={2}>
<ErrorAlert error={conferenceError} />
</Box>
) : null}
<TrackPageSkeleton />
</>
);
}
const conference = conferenceData?.conference;
const trackIndex = conference.track_order.indexOf(trackSlug);
const tracks = conference.track_order
.filter((k) => conference.tracks.hasOwnProperty(k))
.map((k) => conference.tracks[k]);
const onTabChange = (_index: number) => {
// Do nothing (RouterLink does all)
// const slug = conference.track_order[index];
//history.push(`/tracks/${slug}`);
};
return (
<Tabs isLazy index={trackIndex} onChange={onTabChange} variant="rk-tracks">
{trackIndex === -1 ? (
<Redirect to={`/tracks/${encodeURIComponent(conferenceData.conference.default_track)}`} />
) : null}
<TabList>
{tracks.map((t) => (
<Tab as={RouterLink} to={`/tracks/${encodeURIComponent(t.slug)}`} key={t.slug}>
<TrackTabContent track={t} selected={t.slug === trackSlug} />
</Tab>
))}
</TabList>
<TabPanels>
{tracks.map((t) => {
return (
<TabPanel key={t.slug} p={0}>
<React.Suspense fallback={<TrackViewSkeleton />}>
<TrackView track={t} streamOptionsState={streamOptionState} />
</React.Suspense>
</TabPanel>
);
})}
</TabPanels>
</Tabs>
);
}
