LogoLogo
timvero.comMaven Repository
  • timveroOS SDK guide
  • timveroOS how-to
  • timveroOS admin-side setup
  • How to use Maven credentials
  • timveroOS SDKs
    • v. 7.11
      • Ubuntu environment setup
      • Data model setup
      • New data source connection, with Bud Financial example
      • Flow customization
      • Decision process execution
      • Participant/ assets dynamic profile setup
      • Documents flow integration setup
      • Application form setup
      • Application API Integration Guide
      • UI/ UX components
        • Collapsing blocks
    • v. 7.10
      • Ubuntu environment setup
      • Data model setup
      • New data source connection, with Bud Financial example
      • Flow customization
      • Participant/ assets dynamic profile setup
      • Documents flow integration setup
      • Application form setup
      • Application API Integration Guide
      • UI/ UX components
        • Collapsing blocks
Powered by GitBook
On this page
  • Basic Setup
  • Additional Settings

Was this helpful?

  1. timveroOS SDKs
  2. v. 7.11
  3. UI/ UX components

Collapsing blocks

Basic Setup

To enable collapse tabs for an entity, follow these steps:

  1. Add the collapse-tabs class to the block with the article__header class.

  2. The entity structure must match the following template:

<article class="article">
    <div class="article__header collapse-tabs">
        <div class="header-left">
        </div>
        <div class="header-right">
        </div>
    </div>
    <th:block th:insert="~{/common/view-main :: tabs(${tabs})}"/>
</article>

Additional Settings

1. Disabling Default Opening of the First Tab

To prevent the first tab from opening automatically, pass the defaultNotActive = true parameter:

<th:block 
    th:insert="~{/common/view-main :: tabs(${tabs})}"
    th:with="defaultNotActive = true"
/>

2. Setting a Default-Open Entity

To make an entity open by default (when others are closed), add the default-show-tabs class to the wrapper block:

<article class="article default-show-tabs">
    <div class="article__header collapse-tabs">
        <!-- Header content -->
    </div>
    <th:block th:insert="~{/common/view-main :: tabs(${tabs})}"/>
</article>
PreviousUI/ UX componentsNextv. 7.10

Last updated 1 month ago

Was this helpful?