Criando uma página personalizada para reservas usando o Carbon UI Builder do IBM
Aprenda a criar uma página usando o Carbon UI Builder do IBM. Nesta lição, você pode criar o formulário manualmente de acordo com o design de sua escolha ou baixar o modelo e importar o formulário para o construtor.
Procedimento
Use o Carbon UI Builder do IBM para criar uma nova página Criar reserva.
Carbon é o sistema de design d IBM com implementações de componentes prontas para uso em Angular, React e Vue.
O Carbon UI Builder da IBM é uma ferramenta visual para componentes Carbon UI que permite criar páginas de produtos em uma fração do tempo que normalmente levaria. Exporte em segundos como imagem para apresentações, aplicativo de demonstração ao vivo para testes do usuário ou código com qualidade de produção e incorpore no front-end do produto existente. Não é necessário saber programar. Para obter mais informações, consulte o repositório carbon-ui-builder GitHub.
Você pode criar o formulário manualmente ou usar os recursos de amostra para importá-lo para o Carbon UI Builder ( IBM ) (recomendado).
Para criar o formulário manualmente:
- Abra o Carbon UI Builder da IBM : https://builder.carbondesignsystem.com
- Vá para .
- Clique em Página em branco (com grade) e, em seguida, clique em Avançar.
- Use o Carbon UI Builder do IBM para criar uma nova página Criar reserva arrastando e soltando os elementos do formulário no construtor.
- Depois de concluir a criação do formulário, clique em Exportar. Certifique-se de 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.
Recomendado: Para importar o formulário para o Carbon UI Builder do IBM :
Exemplo: como referência, você pode usar os ativos de amostra para criar o seguinte formulário no Carbon UI Builder do IBM :
Para usar os ativos de amostra:
- Baixe e extraia os recursos de amostra: create-reservation-form.zip.
- Abra o Carbon UI Builder da IBM : https://builder.carbondesignsystem.com
- Vá para .
- Clique em Importar JSON e, em seguida, clique em Avançar.
- Clique em Adicionar arquivo e selecione o arquivo create-reservation-form.json extraído.
- Clique em Concluído. O formulário de exemplo Criar reserva é importado para o Carbon UI Builder do IBM. Analise os elementos do formulário para se familiarizar com a forma como a amostra é construída.
- Renomeie o título para Criar formulário de reserva para que os caminhos dos arquivos Angular contenham create-reservation-form.
- Clique em Exportar. Certifique-se de 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.