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