Criando uma página customizada "Criar reserva" usando o IBM Carbon UI Builder

Aprenda como criar uma página usando o IBM Carbon UI Builder Nesta lição, é possível construir o formulário manualmente de acordo com o design de sua escolha ou fazer download da amostra e importar o formulário no construtor.

Procedimento

Use o IBM Carbon UI Builder para criar uma nova página Criar reserva .

Carbon é o sistema de design da IBMcom implementação de componentes prontos para uso em Angular, React e Vue.

O IBM Carbon UI Builder é uma ferramenta do construtor visual para componentes do Carbon UI que permite construir páginas do produto em uma fração de tempo que normalmente leva. Exporte em segundos como imagem para apresentações, aplicativo de demonstração ao vivo para teste do usuário ou código de qualidade de produção e incorpore no front-end do produto existente. Nenhuma codificação necessária. Para obter mais informações, consulte o repositório carbon-ui-builder GitHub .

É possível construir o formulário manualmente ou usar os ativos de amostra para importar o formulário no IBM Carbon UI Builder (recomendado).

Para construir o formulário manualmente:

  1. Abra o IBM Carbon UI Builder: https://builder.carbondesignsystem.com
  2. Acesse Arquivo > Novo.
  3. Clique em Página vazia (com grade)e, em seguida, clique em Avançar.
  4. Use o IBM Carbon UI Builder para criar uma nova página Criar reserva arrastando e soltando seus elementos de formulário no construtor
  5. Depois de concluir a construção do formulário, clique em Exportar. Assegure que a guia Angular esteja selecionada e anote o código angular dentro de cada arquivo gerado. Eles serão usados posteriormente nessa tarefa.
Recomendado: para importar o formulário no IBM Carbon UI Builder:
Exemplo: como uma referência, é possível usar os ativos de amostra para criar o formulário a seguir no IBM Carbon UI Builder:
Criar reserva
Para usar os ativos de amostra:
  1. Faça download e extraia os recursos de amostra: create-reservation-form.zip.
  2. Abra o IBM Carbon UI Builder: https://builder.carbondesignsystem.com
  3. Acesse Arquivo > Novo
  4. Clique em Importar JSON, em seguida, clique em Avançar.
  5. Clique em Incluir arquivoe, em seguida, selecione o arquivo create-reservation-form.json extraído
  6. Clique em Concluído O formulário Criar reserva de amostra é importado no IBM Carbon UI Builder. Revise os elementos do formulário para familiarizar-se com como a amostra é construída.
  7. Renomeie o título para Criar formulário de reserva para que os caminhos de arquivo Angular contenham create-reservation-form
    Título do Carbon UI Builder
  8. Clique em Exportar Assegure que a guia Angular esteja selecionada e anote o código angular dentro de cada arquivo gerado. Eles serão usados mais tarde nesta tarefa