React Desktop Windows MasterDetailsView Componente

Mac OS. El componente MasterDetailsView se usa paraPodemos usar el siguiente enfoque en ReactJS para usar el componente React Desktop Windows MasterDetailsView.

MasterDetailsView Props:

• color: Se utiliza para establecer el color principal del componente.
• tema: se utiliza para establecer el tema de la interfaz de usuario y este tema lo utiliza este componente y sus elementos secundarios.

MasterDetailsViewItem Props:

• color: Se utiliza para establecer el color principal del componente.
• tema: se utiliza para establecer el tema de la interfaz de usuario y este tema lo utiliza este componente y sus elementos secundarios.

MasterDetailsViewItemMaster Props:

• color: Se utiliza para establecer el color principal del componente.
• push: se utiliza para mostrar la animación push mientras se selecciona un elemento.
• seleccionado: se utiliza para indicar que el maestro está seleccionado.
• tema: se utiliza para establecer el tema de la interfaz de usuario y este tema lo utiliza este componente y sus elementos secundarios.
• ancho: Se utiliza para establecer el ancho del componente.

MasterDetailsViewItemDetails Props:

• fondo: Se utiliza para establecer el color de fondo.
• color: Se utiliza para establecer el color principal del componente.
• tema: se utiliza para establecer el tema de la interfaz de usuario y este tema lo utiliza este componente y sus elementos secundarios.

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 from 'react'
import {
  MasterDetailsViewItem,
  MasterDetailsViewItemMaster,
  MasterDetailsView,
  MasterDetailsViewItemDetails
} from 'react-desktop/windows';
  
export default function App() {
  return (
    <div style={{
      display: 'block', width: 700, paddingLeft: 30
    }}>
      <h4>React Desktop Windows MasterDetailsView Component</h4>
      <MasterDetailsView>
        <MasterDetailsViewItem>
          <MasterDetailsViewItemMaster push>
             Sample Item One
          </MasterDetailsViewItemMaster>
          <MasterDetailsViewItemDetails background>
            Greetings from GeeksforGeeks
          </MasterDetailsViewItemDetails>
        </MasterDetailsViewItem>
        <MasterDetailsViewItem>
          <MasterDetailsViewItemMaster push>
            Sample Item Two
          </MasterDetailsViewItemMaster>
        </MasterDetailsViewItem>
      </MasterDetailsView>
    </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: http://reactdesktop.js.org/docs/windows/master-details-view