Interfaces fluidas es un sistema de diseño multiplataforma de código abierto que brinda a los diseñadores y desarrolladores los marcos que necesitan para crear excelentes aplicaciones. Es un lenguaje de diseño desarrollado por Microsoft en 2017. Productos como Microsoft Office 365, OneDrive, Outlook, Azure y muchos más usan Fluent Interface para que todas las aplicaciones se vean consistentes en diferentes plataformas. Si le gusta el aspecto limpio y minimalista de las aplicaciones de Microsoft, es la única biblioteca que debe usar. En este artículo, instalaremos Fluent UI y veremos cómo usarlo con React.js.
Características de la interfaz de usuario fluida:
- Muy personalizable.
- Componentes actualizados.
- Multiplataforma.
- Fuente abierta.
Requisito previo:
- Editor de código como (VS Code, Atom, Sublime, etc).
- NodeJS debe estar instalado.
- Conceptos básicos de React.js.
Comencemos a construir la aplicación React.
Creando una aplicación React:
Paso 1: Cree una aplicación React escribiendo el siguiente comando en la terminal:
npx create-react-app fluentui-demo
Paso 2: Ahora, vaya a la carpeta del proyecto, es decir, fluentui-demo, ejecutando el siguiente comando:
cd fluentui-demo
Estructura del proyecto: Se verá así:
Instalación de la interfaz de usuario fluida: Para instalar Fluent UI, ejecute el siguiente comando en su directorio de trabajo.
npm install @fluentui/react
Nombre de archivo: App.js: Este es el único componente predeterminado de nuestra aplicación que contiene toda la lógica. Aquí importaremos la biblioteca Fluent UI y mostraremos un logotipo y algunos botones.
JavaScript
import './App.css';import { DefaultButton, PrimaryButton } from '@fluentui/react/lib/Button';import { FontSizes } from '@fluentui/theme';import { Icon } from '@fluentui/react/lib/Icon';import { initializeIcons } from '@fluentui/font-icons-mdl2'; function App() { // Initialization for Fluent UI Icons initializeIcons(); return ( <div className="App"> <span style={{ fontSize: FontSizes.size42 }}> Hello Geeks! </span> <br /> <Icon iconName="WindowsLogo" style={{ fontSize: FontSizes.size68, color: '#0078d4' }} /> <br /> <div> <DefaultButton className='btn'> Default Button </DefaultButton> <PrimaryButton className='btn'> Primary Button </PrimaryButton> </div> </div> );} export default App; |
Producción:
