Skip to content

Latest commit

 

History

History
683 lines (450 loc) · 15.4 KB

index.md

File metadata and controls

683 lines (450 loc) · 15.4 KB
layout version versionHref path category id title header_sub_title doc docType show_preview_device preview_device_url angular_controller
fluid/docs_base
3.9.2
/docs
api
segment
Segment
Ionic API Documentation
Segment
class
true
/docs/v3/demos/src/segment/www/
APIDemoCtrl

Segment

ion-segment

Improve this doc

A Segment is a group of buttons, sometimes known as Segmented Controls, that allow the user to interact with a compact group of a number of controls. Segments provide functionality similar to tabs, selecting one will unselect all others. You should use a tab bar instead of a segmented control when you want to let the user move back and forth between distinct pages in your app. You could use Angular's ngModel or FormBuilder API. For an overview on how FormBuilder works, checkout Angular Forms, or Angular FormBuilder

<!-- Segment in a header -->
<ion-header>
  <ion-toolbar>
    <ion-segment [(ngModel)]="icons" color="secondary">
      <ion-segment-button value="camera">
        <ion-icon name="camera"></ion-icon>
      </ion-segment-button>
      <ion-segment-button value="bookmark">
        <ion-icon name="bookmark"></ion-icon>
      </ion-segment-button>
    </ion-segment>
  </ion-toolbar>
</ion-header>

<ion-content>
<!-- Segment in content -->
<ion-segment [(ngModel)]="relationship" color="primary" (ionChange)="segmentChanged($event)">
<ion-segment-button value="friends">
Friends
</ion-segment-button>
<ion-segment-button value="enemies">
Enemies
</ion-segment-button>
</ion-segment>


<!-- Segment in a form -->
<form [formGroup]="myForm">
<ion-segment formControlName="mapStyle" color="danger">
<ion-segment-button value="standard">
Standard
</ion-segment-button>
<ion-segment-button value="hybrid">
Hybrid
</ion-segment-button>
<ion-segment-button value="sat">
Satellite
</ion-segment-button>
</ion-segment>
</form>
</ion-content>

Sass Variables

  <a ng-init="setSassPlatform('ios')" ng-class="{ active: active === 'ios' }" ng-click="setSassPlatform('ios')" >iOS</a>



  <a ng-class="{ active: active === 'md' }" ng-click="setSassPlatform('md')">Material Design</a>



  <a ng-class="{ active: active === 'wp' }" ng-click="setSassPlatform('wp')">Windows Platform</a>

  <tr>
    <td><code>$segment-button-ios-background-color</code></td>

      <td><code>transparent</code></td>

    <td><p>Background of the segment button</p>

  <tr>
    <td><code>$segment-button-ios-background-color-activated</code></td>

      <td><code>$toolbar-ios-active-color</code></td>

    <td><p>Background of the activated segment button</p>

  <tr>
    <td><code>$segment-button-ios-text-color</code></td>

      <td><code>color-contrast($colors-ios, $segment-button-ios-background-color-activated)</code></td>

    <td><p>Text color of the segment button</p>

  <tr>
    <td><code>$segment-button-ios-transition-activated</code></td>

      <td><code>100ms all linear</code></td>

    <td><p>Transition of the activated segment button</p>

  <tr>
    <td><code>$segment-button-ios-transition-hover</code></td>

      <td><code>100ms all linear</code></td>

    <td><p>Transition of the segment button on hover</p>

  <tr>
    <td><code>$segment-button-ios-transition-active</code></td>

      <td><code>100ms all linear</code></td>

    <td><p>Transition of the segment button when pressed</p>

  <tr>
    <td><code>$segment-button-ios-opacity-hover</code></td>

      <td><code>.1</code></td>

    <td><p>Opacity of the segment button on hover</p>

  <tr>
    <td><code>$segment-button-ios-opacity-active</code></td>

      <td><code>.16</code></td>

    <td><p>Opacity of the segment button when pressed</p>

  <tr>
    <td><code>$segment-button-ios-opacity-activated</code></td>

      <td><code>1</code></td>

    <td><p>Opacity of the activated segment button</p>

  <tr>
    <td><code>$segment-button-ios-opacity-disabled</code></td>

      <td><code>.3</code></td>

    <td><p>Opacity of the disabled segment button</p>

  <tr>
    <td><code>$segment-button-ios-border-width</code></td>

      <td><code>1px</code></td>

    <td><p>Border width of the segment button</p>

  <tr>
    <td><code>$segment-button-ios-height</code></td>

      <td><code>3.2rem</code></td>

    <td><p>Height of the segment button</p>

  <tr>
    <td><code>$segment-button-ios-line-height</code></td>

      <td><code>3rem</code></td>

    <td><p>Line height of the segment button</p>

  <tr>
    <td><code>$segment-button-ios-font-size</code></td>

      <td><code>1.3rem</code></td>

    <td><p>Font size of the segment button</p>

  <tr>
    <td><code>$segment-button-ios-border-radius</code></td>

      <td><code>4px</code></td>

    <td><p>Border radius of the segment button</p>

  <tr>
    <td><code>$segment-button-ios-icon-size</code></td>

      <td><code>2.6rem</code></td>

    <td><p>Size of an icon in the segment button</p>

  <tr>
    <td><code>$segment-button-ios-icon-line-height</code></td>

      <td><code>2.8rem</code></td>

    <td><p>Line height of an icon in the segment button</p>

  <tr>
    <td><code>$segment-button-ios-toolbar-button-max-width</code></td>

      <td><code>100px</code></td>

    <td><p>Max width of the segment button in a toolbar</p>

  <tr>
    <td><code>$segment-button-ios-toolbar-button-height</code></td>

      <td><code>2.6rem</code></td>

    <td><p>Height of the segment button in a toolbar</p>

  <tr>
    <td><code>$segment-button-ios-toolbar-line-height</code></td>

      <td><code>2.5rem</code></td>

    <td><p>Line height of the segment button in a toolbar</p>

  <tr>
    <td><code>$segment-button-ios-toolbar-font-size</code></td>

      <td><code>1.2rem</code></td>

    <td><p>Font size of the segment button in a toolbar</p>

  <tr>
    <td><code>$segment-button-ios-toolbar-icon-size</code></td>

      <td><code>2.2rem</code></td>

    <td><p>Size of an icon in the segment button in a toolbar</p>

  <tr>
    <td><code>$segment-button-ios-toolbar-icon-line-height</code></td>

      <td><code>2.4rem</code></td>

    <td><p>Line height of an icon in the segment button in a toolbar</p>

</tbody>
Property Default Description 
  <tr>
    <td><code>$segment-button-md-text-color-activated</code></td>

      <td><code>$toolbar-md-active-color</code></td>

    <td><p>Text color of the activated segment button</p>

  <tr>
    <td><code>$segment-button-md-border-color-activated</code></td>

      <td><code>$toolbar-md-active-color</code></td>

    <td><p>Border color of the activated segment button</p>

  <tr>
    <td><code>$segment-button-md-border-bottom-width</code></td>

      <td><code>2px</code></td>

    <td><p>Width of the bottom border on the segment button</p>

  <tr>
    <td><code>$segment-button-md-border-bottom-color</code></td>

      <td><code>rgba(#000, .10)</code></td>

    <td><p>Color of the bottom border on the segment button</p>

  <tr>
    <td><code>$segment-button-md-opacity</code></td>

      <td><code>.7</code></td>

    <td><p>Opacity of the segment button</p>

  <tr>
    <td><code>$segment-button-md-opacity-activated</code></td>

      <td><code>1</code></td>

    <td><p>Opacity of the activated segment button</p>

  <tr>
    <td><code>$segment-button-md-opacity-disabled</code></td>

      <td><code>.3</code></td>

    <td><p>Opacity of the disabled segment button</p>

  <tr>
    <td><code>$segment-button-md-padding-top</code></td>

      <td><code>0</code></td>

    <td><p>Padding top of the segment button</p>

  <tr>
    <td><code>$segment-button-md-padding-end</code></td>

      <td><code>6px</code></td>

    <td><p>Padding end of the segment button</p>

  <tr>
    <td><code>$segment-button-md-padding-bottom</code></td>

      <td><code>$segment-button-md-padding-top</code></td>

    <td><p>Padding bottom of the segment button</p>

  <tr>
    <td><code>$segment-button-md-padding-start</code></td>

      <td><code>$segment-button-md-padding-end</code></td>

    <td><p>Padding start of the segment button</p>

  <tr>
    <td><code>$segment-button-md-height</code></td>

      <td><code>4.2rem</code></td>

    <td><p>Height of the segment button</p>

  <tr>
    <td><code>$segment-button-md-line-height</code></td>

      <td><code>4rem</code></td>

    <td><p>Line height of the segment button</p>

  <tr>
    <td><code>$segment-button-md-font-size</code></td>

      <td><code>1.2rem</code></td>

    <td><p>Font size of the segment button</p>

  <tr>
    <td><code>$segment-button-md-icon-size</code></td>

      <td><code>2.6rem</code></td>

    <td><p>Size of an icon in the segment button</p>

  <tr>
    <td><code>$segment-button-md-icon-line-height</code></td>

      <td><code>$segment-button-md-line-height</code></td>

    <td><p>Line height of an icon in the segment button</p>

</tbody>
Property Default Description 
  <tr>
    <td><code>$segment-button-wp-background-color</code></td>

      <td><code>transparent</code></td>

    <td><p>Background of the segment button</p>

  <tr>
    <td><code>$segment-button-wp-text-color-activated</code></td>

      <td><code>$toolbar-wp-text-color</code></td>

    <td><p>Text color of the activated segment button</p>

  <tr>
    <td><code>$segment-button-wp-padding-top</code></td>

      <td><code>0</code></td>

    <td><p>Padding top of the segment button</p>

  <tr>
    <td><code>$segment-button-wp-padding-end</code></td>

      <td><code>6px</code></td>

    <td><p>Padding end of the segment button</p>

  <tr>
    <td><code>$segment-button-wp-padding-bottom</code></td>

      <td><code>$segment-button-wp-padding-top</code></td>

    <td><p>Padding bottom of the segment button</p>

  <tr>
    <td><code>$segment-button-wp-padding-start</code></td>

      <td><code>$segment-button-wp-padding-end</code></td>

    <td><p>Padding start of the segment button</p>

  <tr>
    <td><code>$segment-button-wp-height</code></td>

      <td><code>4rem</code></td>

    <td><p>Height of the segment button</p>

  <tr>
    <td><code>$segment-button-wp-line-height</code></td>

      <td><code>4rem</code></td>

    <td><p>Line height of the segment button</p>

  <tr>
    <td><code>$segment-button-wp-font-size</code></td>

      <td><code>1.3rem</code></td>

    <td><p>Font size of the segment button</p>

  <tr>
    <td><code>$segment-button-wp-text-transform</code></td>

      <td><code>uppercase</code></td>

    <td><p>Text transform of the segment button</p>

  <tr>
    <td><code>$segment-button-wp-font-weight</code></td>

      <td><code>bold</code></td>

    <td><p>Font weight of the segment button</p>

  <tr>
    <td><code>$segment-button-wp-opacity</code></td>

      <td><code>.5</code></td>

    <td><p>Opacity of the segment button</p>

  <tr>
    <td><code>$segment-button-wp-opacity-activated</code></td>

      <td><code>1</code></td>

    <td><p>Opacity of the activated segment button</p>

  <tr>
    <td><code>$segment-button-wp-opacity-disabled</code></td>

      <td><code>.3</code></td>

    <td><p>Opacity of the disabled segment button</p>

  <tr>
    <td><code>$segment-button-wp-icon-size</code></td>

      <td><code>2.6rem</code></td>

    <td><p>Size of an icon in the segment button</p>

  <tr>
    <td><code>$segment-button-wp-icon-line-height</code></td>

      <td><code>$segment-button-wp-line-height</code></td>

    <td><p>Line height of an icon in the segment button</p>

  <tr>
    <td><code>$segment-button-wp-buttons-justify-content</code></td>

      <td><code>flex-start</code></td>

    <td><p>Position of the buttons in the segment</p>

</tbody>
Property Default Description

Related

Segment Component Docs, Angular Forms