Segmented Controls

Description

Segmented Control is a UI component that presents related, but mutually-exclusive actions/options together. It can be used as a button group to navigate between related pages, a filter for content underneath or as a kind of a radio-group. Each segment functions as an individual button.

Do's & Don'ts

Only group items that are related and have a logical connection to each other
Only one item should be active at any given time
One item must always be active
Use short and concise labels
Place the component in close proximity to the content area it controls (usually above due to it's width)
AVOID letting it wrap into multiple rows (could happen in cases with dynamic labels)
AVOID grouping items that aren't clearly related
AVOID using more than a handful of options

Basic Example

This example demonstrates how the active state is determined automatically. You can set 'href' to a URL, path, hash, model instance or a named route and the component will smartly matche it against current page URL to decide the active state. This streamlines the interface, sparing you manual active state configuration. To achieve this effect in a React component, provide "currentHref" argument (which makes it usable with "ReactRouter").

= segmented_controls do
  = segmented_link_to "Print Summary", print_summary_path
  = segmented_link_to "Digital Summary", digital_summary_path

import { SegmentedControls } from 'n2-styles';

function ExampleComponent() {
  links = [
    { label: "Print Summary", href: "/print_summary/33" },
    { label: "Digital Summary", href: "/digital_summary/33" },
  ];

  return (
    <SegmentedControls items={links} currentHref={location.pathname} />
  );
}

export { ExampleComponent };

<div class="segmented-controls">
  <a class="segmented-control active" href="http://localhost:3030/print_summary/33">Print Summary</a>
  <a class="segmented-control" href="http://localhost:3030/digital_summary/33">Digital Summary</a>
</div>

Active Segment

Use active argument when the active state cannot be determined automatically.

= segmented_controls do
  = segmented_link_to "Option 1", "#", active: false
  = segmented_link_to "Option 2", "#", active: true
  = segmented_link_to "Option 3", "#", active: false

import { SegmentedControls } from 'n2-styles'

function myComponent(props) {
  links = [
    { label: "Option 1", href: "#option_1", active: false },
    { label: "Option 2", href: "#option_2", active: true },
    { label: "Option 3", href: "#option_3" }, // 'active: false' can be omitted in a React component
  ];

  return (
    <SegmentedControls items={links} />
  );
};

<div class="segmented-controls">
  <a class="segmented-control" href="#">Option 1</a>
  <a class="segmented-control active" href="#">Option 2</a>
  <a class="segmented-control" href="#">Option 3</a>
</div>

Versatile Color and HTML Attributes

This example showcases two things: usage of different colors for design variations and ability to apply custom HTML attributes (adhering to the format used by the "html_attributes" argument in other Rails view helpers).

= segmented_controls(class: "deep-purple", id: "element-id", data: { id: 173 }) do
  = segmented_link_to "Option 1", "#", active: true
  = segmented_link_to "Option 2", "#", active: false
  = segmented_link_to "Option 3", "#", active: false

= segmented_controls(class: "purple") do
  = segmented_link_to "Option 1", option_1_path
  = segmented_link_to "Option 2", option_2_path
  = segmented_link_to "Option 3", option_3_path

= segmented_controls(class: "green") do
  = segmented_link_to "Option 1", option_1_path
  = segmented_link_to "Option 2", option_2_path
  = segmented_link_to "Option 3", option_3_path

import { SegmentedControls } from 'n2-styles'

function myComponent(props) {
  links = [
    { label: "Option 1", href: "#option_1" },
    { label: "Option 2", href: "#option_2" },
    { label: "Option 3", href: "#option_3" },
  ];

  return (
    <div>
      <SegmentedControls
        items={links}
        color="deep-purple"
        currentHref="#option_1"
        id="element-id"
        data-id="173"
      />
      <SegmentedControls items={links} color="purple" currentHref="#option_2" />
      <SegmentedControls items={links} color="green" currentHref="#option_3" />
    </div>
  )
}

<div class="segmented-controls deep-purple" id="element-id" data-id="173">
  <a class="segmented-control active" href="#">Option 1</a>
  <a class="segmented-control" href="#">Option 2</a>
  <a class="segmented-control" href="#">Option 3</a>
</div>

<div class="segmented-controls purple">
  <a class="segmented-control" href="/option/1">Option 1</a>
  <a class="segmented-control active" href="/option/2">Option 2</a>
  <a class="segmented-control" href="/option/3">Option 3</a>
</div>

<div class="segmented-controls green">
  <a class="segmented-control" href="/option/1">Option 1</a>
  <a class="segmented-control" href="/option/2">Option 2</a>
  <a class="segmented-control active" href="/option/3">Option 3</a>
</div>