Tabs Component

This component initially has three tabs, Tabs, Advanced and Curated List, or if  you choose Child Pages, the third tab is changed to Child Pages.

• The component is designed to display a series of shared content pages.  
• The UBCMS title of each child or curated page becomes the title of their corresponding tab.
• When child pages are added or removed, the corresponding tab will be added (or removed).
• The component's height adjusts dynamically to show the entire content for each tab.  
• The width of the tab titles will vary with the character length of each title. For the Child Pages option, this can only be adjusted by changing the title in each shared content page. For the Curated List option, the displayed titles can also be adjusted in the component itself. The maximum width is around 200 px. Titles display on one line only and titles that are too long will be truncated with an ellipsis (...).
  
• When the published page is displayed, the visitor will see the contents of the first tab by default. Clicking another tab will load the new contents without refreshing the page, since the contents of all tabs are actually preloaded as the host page first loads.
• Each tab can be bookmarked directly -- the page will load the page with that tab's content displayed first.
• Content of each tab will be indexed separately by Google and other search engines.

1. Only shared content may be displayed with this component.
2. The component's height will adjust automatically to the actual height of the displayed content for each tab.
   
3. Tab title width will vary depending on the character length of each title. The maximum width is around 200 px. Titles display on one line only and longer titles will be truncated with an ellipsis. Width can not be adjusted by authors except by changing the wording of each title.

Click the wrench icon to 'configure' these settings.

Build tabs using: Choose between the default 'Curated' list option or 'Child Pages'.

• If you prefer the default, then proceed to the second tab to adjust the settings further.
• If you prefer to use a list built from child pages, choose that option and the second tab becomes a Child Pages tab where you can indicate the source of the shared content pages.

• Sets the visible tab name with text that is only visible to screen readers. This solves the accessibility issue where there may exist multiple tab components on the same page that have tabs (links) with duplicate names.
  

Host page - Specify on what page of your site you would like any shared content shown. By default will be the current page.

The thir dtab adjusts to your choice of your Curated or Child Pages.

Curated - Add one or more links to UBCMS pages that will then be displayed as tabs in the component.

Add Item - Click the '+' to add tabs.

• Use the magnifying glass to browse for each source page within shared content (must start with /content/shared). 
  
• Optionally provide a descriptive label to accompany each tab.  If not provided, the UBCMS will use the shared content page's title.

Child Pages - Indicate the location of the parent in shared content to define the pages that will then be displayed as tabs in the component.

• Use the magnifying glass to browse for each source page within shared content (must start with /content/shared).
  

To link to a tab in a Tabs component, click the tab in question and copy the URL that is displayed in the browser location bar. The main tab always loads by default, and shares the same URL as the actual page, but the other tabs insert their name into the page name of the URL.

For example, the tabs of the example on the demo site example will display as follows:

• default tab: 'Custom Title'
  • https://ubcms.buffalo.edu/content/demo/components/shared/tabs.html
  • in Author: /content/demo/components/shared/tabs.html
    
  • Yes, this is the default URL of the page itself.
• second tab: 'Host Demo'
  
  • https://ubcms.buffalo.edu/content/demo/components/shared/tabs.hosted-demo.html
  • in Author: /content/demo/components/shared/tabs.hosted-demo.html
    
  • Note the addition of "..hosted-demo" in the page name, "tabs..hosted-demo.html."
    
• third tab: 'Collapsible Content'
  • https://ubcms.buffalo.edu/content/demo/components/shared/tabs.collapsible-content.html
  • in Author: /content/demo/components/shared/tabs.collapsible-content.html
  • Note the addition of ".collapsible-content" in the page name, "tabs..collapsible-content.html."
• fourth tab: 'On This Page'
  • https://ubcms.buffalo.edu/content/demo/components/shared/tabs.on-this-page.html
  • in Author: /content/demo/components/shared/tabs.on-this-page.html
  • Note the addition of ".on-this-page" in the page name, "tabs.on-this-page.html."