UikTabContainer

A simple container with some styled properties. It is not required to be present when using UikTabItem.

PropertyTypeRequiredDefault ValueDescription
classNameStringfalsenullclassName, e.g. "my-custom-styling"
childrenReact.Nodefalsenull
ComponentReact.ElementTypefalsedivRenders the component with a given react element. By default, the component renders <div />. This is usefull when you want to use a same style but render a different HTML element or your custom component. Read and see more examples here.
...restanyfalseOther properties are passed down to the wrapping element

UikTabItem

Tab components to create basic tab panel. The tabs doesn't have any logic. The active tab property should be controlled by developer.

PropertyTypeRequiredDefault ValueDescription
classNameStringfalsenullclassName, e.g. "my-custom-styling"
childrenReact.Nodefalsenull
ComponentReact.ElementTypefalsedivRenders the component with a given react element. By default, the component renders <div />. This is usefull when you want to use a same style but render a different HTML element or your custom component. Read and see more examples here.
activeBooleanfalsefalseHighlights the Tab Item. You can also use className="active" instead.
extraReact.NodefalsenullAdds extra element on the right of the main content.
...restanyfalseOther properties are passed down to the wrapping element

Tabs Examples

Friends123Photos43Events Today
Something here
<UikWidget>
  <UikTabContainer>
    <UikTabItem
      active
      extra={ 123 }
    >
      Friends
    </UikTabItem>
    <UikTabItem extra={ 43 }>
      Photos
    </UikTabItem>
    <UikTabItem>
      Events Today
    </UikTabItem>
  </UikTabContainer>
  <UikWidgetContent>
    Something here
  </UikWidgetContent>
</UikWidget>