Initial Screen
El componente Initial Screen es un patrón que ayuda a los usuarios a entender qué deben hacer o qué debe suceder para comenzar a usar una funcionalidad o servicio. Combina componentes clave de la interfaz de usuario, como call to action, imágenes y texto informativo para guiar a los usuarios hacia una interacción específica. Se recomienda para el onboarding a un nuevo producto o servicio donde aún no hay información, y el usuario necesita realizar una acción o simplemente esperar a que se cumpla una condición.
import React from "react";
import { InitialScreen } from "@nimbus-ds/patterns";
import { BagIcon, FireIcon, TagIcon, TiendanubeIcon } from "@nimbus-ds/icons";
import { Button } from "@nimbus-ds/components";
const Example: React.FC = () => (
<InitialScreen>
<InitialScreen.Hero
subtitle="META"
title="¡Vendé más con Instagram y Facebook!"
bullets={[
<InitialScreen.Bullet
icon={<FireIcon />}
text="Integración gratis y rápida"
/>,
<InitialScreen.Bullet
icon={<BagIcon />}
text="Sincronización de catálogo en tiempo real"
/>,
<InitialScreen.Bullet
icon={<TagIcon />}
text="Creación y seguimiento de campañas"
/>,
<InitialScreen.Bullet
icon={<TiendanubeIcon />}
text="Medición de conversiones con API y píxel de Meta"
/>,
]}
actions={<Button appearance="primary">Conectar cuenta</Button>}
image={
<img
src="https://d26lpennugtm8s.cloudfront.net/assets/common/img/empty-screens/empty-orders.png"
alt="NuvemChatView"
width="100%"
/>
}
/>
</InitialScreen>
);
export default Example;
Instala el componente via terminal.
npm install @nimbus-ds/initial-screen
Se pueden pasar propiedades adicionales al componente <InitialScreen>. Revisa la documentación del div para ver la lista de props aceptadas por el componente <InitialScreen>.
InitialScreen
Name | Type | Default | Description |
---|---|---|---|
children* | React.ReactNode | Content of the InitialScreen component. |
InitialScreen.Bullet
Name | Type | Default | Description |
---|---|---|---|
icon | |||
text* | string |
InitialScreen.Card
Name | Type | Default | Description |
---|---|---|---|
icon | |||
title* | string | ||
description* | string |
InitialScreen.CardLayout
Name | Type | Default | Description |
---|---|---|---|
children |
InitialScreen.Feature
Name | Type | Default | Description |
---|---|---|---|
content | |||
image |
InitialScreen.FeatureItem
Name | Type | Default | Description |
---|---|---|---|
title* | string | ||
description* | string | ||
children |
InitialScreen.FeatureItemSpacing
Name | Type | Default | Description |
---|
InitialScreen.Hero
Name | Type | Default | Description |
---|---|---|---|
title | string | ||
subtitle | string | ||
actions | |||
image | |||
description | |||
bullets |
InitialScreen.Module
Name | Type | Default | Description |
---|---|---|---|
title* | string | ||
description* | string |
InitialScreen.Section
Name | Type | Default | Description |
---|---|---|---|
title* | string |