Samples showing samples for controlling the Authoring eXperience with oXygen
The tabs folder contains a sample showing how one can use tabs.
We use a LESS library to implement support for tabs, and then in the main
LESS file we can declaratively mention that we want tabs for a specific element
like
.tabs (
selector1, selector2, ... selectorN;
label1, label2, ... labelN;
)or, if we want all the other elements not selected by the specified selectors to be available in a last tab, we can use
.tabsWithOthers (
selector1, selector2, ... selectorN;
label1, label2, ... labelN;
labelForLastTab
)So, basically, in order to create 4 tabs for a DITA task for the content of
a taskbody element, one containing the content of the prereq element
labeled Pre-requisites another the content of context labeled Context,
the 3rd tab containing the content of steps labled Steps and a last tab
containing all the other elements labeld More.... we can use something like:
taskbody{
.tabsWithOthers(
prereq, context, steps;
Pre-requisites, Context, Steps;
'More...'
);
}If we have a div element containing code samples in codeblock elements for
different languages, marked with the outputclass attribute, then in order to
create 3 tabs to show Java, CPP and XML blocks, we can use something like:
div{
.tabs(
"codeblock[outputclass~='language-java']",
"codeblock[outputclass~='language-cpp']",
"codeblock[outputclass~='language-xml']";
Java, CPP, XML;
);
}Here it is the how the sample DITA task file (tabs/samples/task.dita) is rendered
in the oXygen XML Author mode

or you can try it live in the oXygen XML Web Author with the tabs described above, specified in the
tabs/css/task.less file:
task.dita.
Copyright 2018 Syncro Soft SRL.
This project is licensed under Apache License 2.0