Skip to content

Instantly share code, notes, and snippets.

@Merec
Last active November 29, 2021 07:14
Show Gist options
  • Save Merec/7061971 to your computer and use it in GitHub Desktop.
Save Merec/7061971 to your computer and use it in GitHub Desktop.
Bootstrap3 Tabs mit Grid Elements für TYPO3. http://www.merec.org/typo3/bootstrap3-tabs-mit-grid-elements-fuer-typo3
<?xml version="1.0" encoding="utf-8" standalone="yes" ?>
<T3DataStructure>
<meta type="array">
<langDisable>1</langDisable>
</meta>
<sheets>
<general>
<ROOT type="array">
<TCEforms>
<sheetTitle>Einstellungen</sheetTitle>
</TCEforms>
<el type="array">
<display_type type="array">
<TCEforms type="array">
<label>Aussehen</label>
<config type="array">
<type>select</type>
<items type="array">
<numIndex index="0" type="array"><numIndex index="0">Tabs</numIndex><numIndex index="1">nav-tabs</numIndex></numIndex>
<numIndex index="1" type="array"><numIndex index="0">Pills</numIndex><numIndex index="1">nav-pills</numIndex></numIndex>
</items>
<default>nav-tabs</default>
</config>
</TCEforms>
</display_type>
<switch_effect type="array">
<TCEforms type="array">
<label>Switch effekt</label>
<config type="array">
<type>select</type>
<items type="array">
<numIndex index="0" type="array"><numIndex index="0">Ohne</numIndex><numIndex index="1"></numIndex></numIndex>
<numIndex index="1" type="array"><numIndex index="0">Einblenden</numIndex><numIndex index="1">fade</numIndex></numIndex>
</items>
<default></default>
</config>
</TCEforms>
</switch_effect>
</el>
</ROOT>
</general>
</sheets>
</T3DataStructure>
<ul class="nav {data.flexform_display_type}">
<f:for each="{data.tx_gridelements_view_children}" as="tab" iteration="tab_iteration">
<li{f:if(condition:'{tab_iteration.isFirst}',then:' class="active"')}><a href="#tab-content-{tab.uid}" data-toggle="tab">{tab.header}</a></li>
</f:for>
</ul>
<div class="tab-content">
<f:format.raw>{data.tx_gridelements_view_columns.0}</f:format.raw>
</div>
# Tabs Container
tx_gridelements.setup.uebb_bootstrap_tabs_container {
title = Tabs Container
description = Ein Element das mehrere Tabs enthält
flexformDS = FILE:fileadmin/templates/gridelements/bootstrap3_tabs/bootstrap3_tabs_container.xml
config {
colCount = 1
rowCount = 1
rows {
1 {
columns {
1 {
name = Tab Container Element
colPos = 0
allowed = gridelements_pi1
}
}
}
}
}
}
# Tab Element
tx_gridelements.setup.uebb_bootstrap_tabs_tab {
title = Tab
description = Ein Tab für einen Tab-Container
config {
colCount = 1
rowCount = 1
rows {
1 {
columns {
1 {
name = Tab Element
colPos = 0
}
}
}
}
}
}
# First define the tab cObject, we want this in the container
tt_content.gridelements_pi1.20.10.setup.uebb_bootstrap_tabs_tab {
# Add the ID and the Class to the tab container
preCObject = LOAD_REGISTER
preCObject {
containerId.cObject = COA
containerId.cObject {
wrap = id="|"
10 = TEXT
10.wrap = tab-content-|
10.field = uid
}
containerClasses.cObject = COA
containerClasses.cObject {
wrap = class="tab-pane |"
# fade or empty
10 = TEXT
10.field = parentgrid_flexform_switch_effect
10.noTrimWrap = | | |
# We want the active flag on the first child
20 = TEXT
20.value = active in
20.noTrimWrap = | | |
20.if {
value = 1
equals.data = cObj:parentRecordNumber
equals.prioriCalc = 1
}
}
}
outerWrap = <div {register: containerId} {register: containerClasses}>|</div>
outerWrap.insertData = 1
# Render the children the default way
columns.0 {
renderObj = < tt_content
}
}
# Define the Tab Container
tt_content.gridelements_pi1.20.10.setup.uebb_bootstrap_tabs_container {
# Render navigation using fluid
cObject = FLUIDTEMPLATE
cObject {
file = fileadmin/templates/gridelements/bootstrap3_tabs/bootstrap3_tabs_template.html
}
# Add the renderObj of the tab directly, this prevents the "csc-default"-wrap
columns.0 {
renderObj = < tt_content.gridelements_pi1
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment