Fluent UI 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 aplicaciones increíbles. Es un lenguaje de diseño desarrollado en 2017 por Microsoft. Los productos como Microsoft Office 365, OneDrive, Outlook, Azure y muchos más usan Fluent UI 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:
- Altamente personalizable.
- Componentes actualizados.
- Multiplataforma.
- Fuente abierta.
Requisito previo:
- Un 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 Fluent UI: 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:
