Question

Ionic4项目中我们可以使用Ionic4Tab切换组件ion-segment对项目进行布局。

ion-segment官方文档地址:https://ionicframework.com/docs/api/segment

Segments display a group of related buttons, sometimes known as segmented controls, in a horizontal row. They can be displayed inside of a toolbar or the main content.

Their functionality is similar to tabs, where selecting one will deselect all others. Segments are useful for toggling between different views inside of the content. Tabs should be used instead of a segment when clicking on a control should navigate between pages.

ion-segment　用法(Usage)

angularjavascriptreactvue

  
    Friends
  
  
    Enemies
  




  
    Sunny
  
  
    Rainy
  




  
    Dogs
  
  
    Cats
  




  
    
  
  
    
  
  
    
  
  
    
  
  
    
  
  
    
  
  
    
  




  
    Standard
  
  
    Hybrid
  
  
    Satellite
  




  
    
      
    
    
      
    
  




  
    Python
  
  
    Javascript
  
</ion-segment>

import { Component } from '@angular/core';

@Component({
  selector: 'segment-example',
  templateUrl: 'segment-example.html',
  styleUrls: ['./segment-example.css'],
})
export class SegmentExample {
  segmentChanged(ev: any) {
    console.log('Segment changed', ev);
  }
}

  
    Friends
  
  
    Enemies
  




  
    Sunny
  
  
    Rainy
  




  
    Dogs
  
  
    Cats
  




  
    
  
  
    
  
  
    
  
  
    
  
  
    
  
  
    
  
  
    
  




  
    Standard
  
  
    Hybrid
  
  
    Satellite
  




  
    
      
    
    
      
    
  




  
    Python
  
  
    Javascript
  
</ion-segment>

// Listen for ionChange on all segments
const segments = document.querySelectorAll('ion-segment')
for (let i = 0; i  {
    console.log('Segment changed', ev);
  })
}

import React from 'react';

import { IonSegment, IonSegmentButton, IonLabel, IonIcon, IonToolbar } from '@ionic/react';

const Example: React.SFC = () => (
  
    {/*-- Default Segment --*/}
     console.log('Segment selected', e.detail.value)}>
      
        Friends
      
      
        Enemies
      
    

    {/*-- Disabled Segment --*/}
     console.log('Segment selected', e.detail.value)} disabled>
      
        Sunny
      
      
        Rainy
      
    

    {/*-- Segment with anchors --*/}
     console.log('Segment selected', e.detail.value)}>
      
        Dogs
      
      
        Cats
      
    

    {/*-- Scrollable Segment --*/}
    
      
        
      
      
        
      
      
        
      
      
        
      
      
        
      
      
        
      
      
        <IonIcon <span class