Componente React Desktop macOS SegmentedControl

Mac OS. Un componente SegmentedControl es un conjunto lineal de dos o más segmentos donde cada uno de los cuales funciona como un botón mutuamente excluyente. Podemos usar el siguiente enfoque en ReactJS para usar el componente React Desktop macOS SegmentedControl.

Accesorios de control segmentado:

• caja: Se utiliza para indicar si el artículo está en una caja o no.
• altura: Se utiliza para establecer la altura del componente.
• oculto: Se utiliza para establecer la visibilidad del componente.
• margin: Se utiliza para establecer el margen exterior del componente.
• marginBottom: se utiliza para establecer el margen inferior exterior del componente.
• marginLeft: se utiliza para establecer el margen exterior izquierdo del componente.
• marginRight: Se utiliza para establecer el margen exterior derecho del componente.
• marginTop: Se utiliza para establecer el margen superior exterior del componente.
• ancho: Se utiliza para establecer el ancho de los componentes.

Accesorios de elementos de control segmentados:

• title: Se utiliza para establecer el título del elemento.
• onSelect: es una función de devolución de llamada que se activa al seleccionar un elemento.
• seleccionado: Se utiliza para indicar si el elemento está seleccionado o no.

Creación de la aplicación React e instalación del módulo:

• Paso 1: Cree una aplicación React usando el siguiente comando:

  npx create-react-app foldername

• Paso 2: después de crear la carpeta de su proyecto, es decir , el nombre de la carpeta , acceda a ella con el siguiente comando:

  cd foldername

• Paso 3: Después de crear la aplicación ReactJS, instale el módulo requerido usando el siguiente comando:

  npm install react-desktop

Estructura del proyecto: Tendrá el siguiente aspecto.

Estructura del proyecto

Ejemplo: ahora escriba el siguiente código en el archivo App.js. Aquí, la aplicación es nuestro componente predeterminado donde hemos escrito nuestro código.

import React, { useState } from 'react'
import { SegmentedControl, SegmentedControlItem } from 'react-desktop/macOs';
  
export default function App() {
  
  // Our State object
  const [currentSelection, setCurrentSelection] = useState(1)
  
  return (
    <div style={{
      display: 'block', width: 700, paddingLeft: 30
    }}>
      <h4>React-Desktop macOS SegmentedControl Component</h4>
      <SegmentedControl box>
        <SegmentedControlItem
          key={1}
          title={"TAB 1"}
          selected={currentSelection === 1}
          onSelect={() => setCurrentSelection(1)}
        >
          Sample Text 1
        </SegmentedControlItem>
        <SegmentedControlItem
          key={2}
          title={"TAB 2"}
          selected={currentSelection === 2}
          onSelect={() => setCurrentSelection(2)}
        >
          Sample Text 2
        </SegmentedControlItem>
      </SegmentedControl>
    </div>
  );
}

Paso para ejecutar la aplicación: ejecute la aplicación utilizando el siguiente comando desde el directorio raíz del proyecto:

npm start

Salida: Ahora abra su navegador y vaya a http://localhost:3000/ , verá la siguiente salida:

Referencia: https://reactdesktop.js.org/docs/mac-os/segmented-control