Creación de una página personalizada "Crear reserva" utilizando IBM Carbon UI Builder

Aprenda a crear una página utilizando IBM Carbon UI Builder. En esta lección, puede crear el formulario manualmente de acuerdo con el diseño que elija, o bien descargar el ejemplo e importar el formulario en el constructor.

Procedimiento

Utilice IBM Carbon UI Builder para crear una nueva página Crear reserva .

Carbon es el sistema de diseño de IBMcon implementaciones de componentes listos para utilizar en Angular, React y Vue.

IBM Carbon UI Builder es una herramienta de creación visual para componentes de Carbon UI que le permite crear páginas de producto en una fracción de tiempo que normalmente tarda. Exportar en segundos como imagen para presentaciones, aplicación demo en directo para pruebas de usuario o código de calidad de producción e incorporar en el front-end del producto existente. No se requiere codificación. Para obtener más información, consulte el repositorio carbon-ui-builder GitHub .

Puede crear el formulario manualmente o utilizar los activos de ejemplo para importar el formulario en IBM Carbon UI Builder (recomendado).

Para crear el formulario manualmente:

  1. Abra IBM Carbon UI Builder: https://builder.carbondesignsystem.com
  2. Vaya a Archivo > Nuevo.
  3. Pulse Página vacía (con cuadrícula)y, a continuación, pulse Siguiente.
  4. Utilice IBM Carbon UI Builder para crear una nueva página Crear reserva arrastrando y soltando los elementos de formulario en el constructor.
  5. Cuando haya terminado de crear el formulario, pulse Exportar. Asegúrese de que la pestaña Angular esté seleccionada y anote el código angular dentro de cada archivo generado. Se utilizarán más adelante en esta tarea.
Recomendado: Para importar el formulario en IBM Carbon UI Builder:
Ejemplo: como referencia, puede utilizar los activos de ejemplo para crear el siguiente formulario en IBM Carbon UI Builder:
Crear reserva
Para utilizar los activos de ejemplo:
  1. Descargue y extraiga los activos de ejemplo: create-reservation-form.zip.
  2. Abra IBM Carbon UI Builder: https://builder.carbondesignsystem.com
  3. Vaya a Archivo > Nuevo.
  4. Pulse Importar JSONy, a continuación, pulse Siguiente.
  5. Pulse Añadir archivoy, a continuación, seleccione el archivo create-reservation-form.json extraído.
  6. Pulse Terminado. El formulario Crear reserva de ejemplo se importa en IBM Carbon UI Builder. Revise los elementos de formulario para familiarizarse con cómo se crea el ejemplo.
  7. Cambie el nombre del título por Crear formulario de reserva para que las vías de acceso de archivo angulares contengan create-reservation-form.
    Título del Creador de IU de Carbon
  8. Pulse Exportar. Asegúrese de que la pestaña Angular esté seleccionada y anote el código angular dentro de cada archivo generado. Se utilizarán más adelante en esta tarea.