Origami Frontend Components & Services

SassDoc: o-tabs

oTabs(opts)

Outputs all available features and styles for tabs.

The output includes the .o-tabs class definition as well as class definitions for every variant.

parameter type default description
opts (optional) ('sizes': ('big'), 'themes': ('primary', 'inverse')) Tab options including themes to output styles for.

Examples

Example #1

All tab styles

@include oTabs();

Example #2

Base styles and primary theme

@include oTabs($opts: ('themes': ('primary'));

Links

oButtonsGetColor(...)

Gets the color of a button property for a given theme and state.

parameter type default description
state
property
type
theme A theme string or a custom theme map.

Returns

Color - The hex colour for a button property.

Examples

Example #1

background: oButtonsGetColor($state: 'default', $property: 'color', $type: 'primary');

Example #2

background: oButtonsGetColor($state: 'hover', $property: 'border', $type: 'secondary');

Links

o-tabs-is-silent

Silent mode: on (true) or off (false) Set to false to output default tabs classes

Links

oTabs(opts)

Outputs all available features and styles for tabs.

The output includes the .o-tabs class definition as well as class definitions for every variant.

parameter type default description
opts (optional) ('sizes': ('big'), 'themes': ('primary', 'inverse')) Tab options including themes to output styles for.

Examples

Example #1

All tab styles

@include oTabs();

Example #2

Base styles and primary theme

@include oTabs($opts: ('themes': ('primary'));

Links

Status
active
Switch component view

GitHub: o-tabs@8.1.3

Install o-tabs

If using the Build Service, add o-tabs@^8.1.3 to your script and link tags.

If using the npm package manager for a Manual Build, run npm install --save-peer "@financial-times/o-tabs@^8.1.3".

Help & Support

o-tabs is maintained directly by the Origami team. If you have any questions about o-tabs or Origami in general, we are happy to help. 😊

Slack: #origami-support
Email: origami.support@ft.com

Feedback / Issues

To report a bug or request features please create an issue on Github. For support or general feedback please get in touch 😊

Slack: #origami-support
Email: origami.support@ft.com