Creación de una página personalizada para crear reservas mediante el generador de interfaces de usuario Carbon de IBM

Aprenda a crear una página utilizando el generador de interfaces de usuario Carbon de IBM. En esta lección, puede crear el formulario manualmente según el diseño que elija o descargar la muestra e importar el formulario al generador.

Procedimiento

Utilice el generador de interfaces de usuario Carbon ( IBM ) para crear una nueva página «Crear reserva ».

Carbon es el sistema de diseño de IBM con implementaciones de componentes listas para usar en Angular, React y Vue.

IBM Carbon UI Builder es una herramienta de creación visual para componentes Carbon UI que le permite crear páginas de productos en una fracción del tiempo que normalmente se tardaría. Exporta en segundos como imagen para presentaciones, aplicación de demostración en vivo para pruebas de usuario o código de calidad de producción e incorpóralo en el front-end del producto existente. No se requiere programación. Para obtener más información, consulte el repositorio carbon-ui-builder GitHub.

Puede crear el formulario manualmente o utilizar los recursos de muestra para importarlo al generador de interfaces de usuario Carbon de IBM (recomendado).

Para crear el formulario manualmente:

  1. Abre el generador de interfaces de usuario Carbon de IBM : https://builder.carbondesignsystem.com
  2. Ve a Archivo > Nuevo.
  3. Haga clic en Página en blanco (con cuadrícula) y, a continuación, haga clic en Siguiente.
  4. Utilice el generador de interfaces de usuario Carbon de IBM para crear una nueva página «Crear reserva» arrastrando y soltando los elementos del formulario en el generador.
  5. Una vez que haya terminado de crear el formulario, haga clic en Exportar. Asegúrate de que la pestaña Angular esté seleccionada y toma nota del código angular dentro de cada archivo generado. Se utilizarán más adelante en esta tarea.
Recomendado: Para importar el formulario al generador de interfaces de usuario Carbon de IBM :
Ejemplo: Como referencia, puede utilizar los activos de muestra para crear el siguiente formulario en el generador de interfaces de usuario Carbon de IBM :
Crear reserva
Para utilizar los activos de muestra:
  1. Descargue y extraiga los recursos de muestra: create-reservation-form.zip.
  2. Abre el generador de interfaces de usuario Carbon de IBM : https://builder.carbondesignsystem.com
  3. Ve a Archivo > Nuevo.
  4. Haga clic en Importar JSON y, a continuación, haga clic en Siguiente.
  5. Haga clic en Añadir archivo y seleccione el archivo create-reservation-form.json extraído.
  6. Haga clic en «Hecho ». El formulario de muestra «Crear reserva» se importa al generador de interfaces de usuario Carbon de IBM. Revise los elementos del formulario para familiarizarse con la estructura de la muestra.
  7. Cambia el nombre del título a «Crear formulario de reserva» para que las rutas de los archivos Angular contengan create-reservation-form.
    Título del generador de interfaces de usuario Carbon
  8. Haga clic en Exportar. Asegúrate de que la pestaña Angular esté seleccionada y toma nota del código angular dentro de cada archivo generado. Se utilizarán más adelante en esta tarea.

Qué hacer a continuación

Implemente su personalización. Para obtener más información, consulte Preparación para implementar personalizaciones en aplicaciones existentes.