@nativescript-community/ui-material-segmentedbar

NativeScript Material SegmentedBar

Material Design's SegmentedBar component for NativeScript.

Contents

1. Installation
2. Changelog
3. FAQ
4. Usage
   • Plain NativeScript
   • Angular
   • Vue
5. API

Installation

For NativeScript 7.0+

• tns plugin add @nativescript-community/ui-material-segmentedbar

For NativeScript 6.x

• tns plugin add nativescript-material-segmentedbar

Be sure to run a new build after adding plugins to avoid any issues.

Changelog

FAQ

Usage

Plain NativeScript

IMPORTANT: Make sure you include xmlns:mds="@nativescript-community/ui-material-segmentedbar" on the Page element.

XML

<Page xmlns:mds="@nativescript-community/ui-material-segmentedbar">
    <SegmentedBar>
      <SegmentedBarItem title="First" />
      <SegmentedBarItem title="Second" />
      <SegmentedBarItem title="Third" />
    </SegmentedBar>
</Page>

CSS

mdsegmentedbar {
    ripple-color: blue;
    elevation: 4;
}

NativeScript + Angular

import { NativeScriptMaterialSegmentedBarModule } from "@nativescript-community/ui-material-segmentedbar/angular";

@NgModule({
    imports: [
        NativeScriptMaterialSegmentedBarModule,
        ...
    ],
    ...
})

<SegmentedBar>
  <SegmentedBarItem title="First" />
  <SegmentedBarItem title="Second" />
  <SegmentedBarItem title="Third" />
</SegmentedBar>

NativeScript + Vue

import SegmentedBarPlugin from '@nativescript-community/ui-material-segmentedbar/vue';

Vue.use(SegmentedBarPlugin);

<SMDegmentedBar>
  <MDSegmentedBarItem title="First" />
  <MDSegmentedBarItem title="Second" />
  <MDSegmentedBarItem title="Third" />
</MDSegmentedBar>

API

SegmentedBarItem on Android inherits MDButton so you can use any prop of MDButton like variant