mirror of
https://github.com/facebook/docusaurus.git
synced 2025-06-15 17:22:35 +02:00
parent
93e2b7dab3
commit
f15ba1b2ac
1 changed files with 27 additions and 18 deletions
|
@ -28,26 +28,35 @@ class MarkdownBlock extends React.Component {
|
||||||
return (
|
return (
|
||||||
<div className="tabs">
|
<div className="tabs">
|
||||||
<div className="nav-tabs">
|
<div className="nav-tabs">
|
||||||
{tabs.map((t, i) => (
|
{tabs.map((t, i) => {
|
||||||
|
const tabId = `tab-group-${groupId}-tab-${t.id}`;
|
||||||
|
const contentId = `tab-group-${groupId}-content-${t.id}`;
|
||||||
|
return (
|
||||||
<div
|
<div
|
||||||
|
id={tabId}
|
||||||
|
key={tabId}
|
||||||
className={`nav-link${i === 0 ? ' active' : ''}`}
|
className={`nav-link${i === 0 ? ' active' : ''}`}
|
||||||
id={`${t.id}-tab`}
|
|
||||||
data-group={`group_${t.groupId}`}
|
data-group={`group_${t.groupId}`}
|
||||||
data-tab={`tabpanel_${t.id}`}>
|
data-tab={contentId}>
|
||||||
{t.label}
|
{t.label}
|
||||||
</div>
|
</div>
|
||||||
))}
|
);
|
||||||
|
})}
|
||||||
</div>
|
</div>
|
||||||
<div className="tab-content">
|
<div className="tab-content">
|
||||||
{tabs.map((t, i) => (
|
{tabs.map((t, i) => {
|
||||||
|
const id = `tab-group-${groupId}-content-${t.id}`;
|
||||||
|
return (
|
||||||
<div
|
<div
|
||||||
|
id={id}
|
||||||
|
key={id}
|
||||||
className={`tab-pane${i === 0 ? ' active' : ''}`}
|
className={`tab-pane${i === 0 ? ' active' : ''}`}
|
||||||
data-group={`group_${t.groupId}`}
|
data-group={`group_${t.groupId}`}
|
||||||
tabIndex="-1"
|
tabIndex="-1">
|
||||||
id={`tabpanel_${t.id}`}>
|
|
||||||
{t.panelContent}
|
{t.panelContent}
|
||||||
</div>
|
</div>
|
||||||
))}
|
);
|
||||||
|
})}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue