Um momento
Aula 22
Cursos / Pesquisa de Imagens com o React Native
Retoques do Estilo do Componente de Detalhes da Imagem – Aula de React Native

Summary

Resumo do Transcript

O áudio discute a implementação de wireframes e o estilo de um botão em uma interface. Aqui estão os principais pontos abordados:

  • Wireframes: A conversa começa com referências aos wireframes disponíveis.
  • Botão de Voltar: O botão deve ser centralizado, semelhante ao título da imagem, utilizando a propriedade align self.
  • Espaçamento: O apresentador menciona a necessidade de criar espaço entre a imagem e o botão, sugerindo o uso de margem abaixo da imagem ou margem no topo do botão.
  • Borda do Botão: É decidido adicionar uma borda ao botão, especificando largura, espessura e cor. A borda deve ter um raio para um leve arredondamento.
  • Padding: Para evitar que o texto fique muito próximo das bordas do botão, é sugerido adicionar padding. O uso de padding igual em todos os lados elimina a necessidade de centralizar o texto.
  • Estilo do Texto: O texto do botão pode ser estilizado em negrito. O apresentador também menciona que os ajustes de estilo são opcionais e que o foco principal deve ser a funcionalidade.
  • Conclusão: O usuário é encorajado a modificar os estilos conforme preferir, incluindo o título da imagem e a aplicação de bordas.

Esses passos enfocam a criação de uma interface funcional e visualmente agradável, permitindo flexibilidade na personalização.

Video Transcript

Então vamos voltar aqui, tem uma imagem do wireframes, dos wireframes que a gente tem, né? wireframes, só pra você saber o que que eu tô falando, eu vou digitar lá. Então a gente vai botar o botão de voltar centralizado e com uns faços aqui entre a imagem e o botão, né? Quando você se lembra a gente pra centralizar o título da imagem, a gente usou o align self, né? Então vamos fazer o mesmo aqui, vamos voltar e cadê o botão aqui? Então primeiro eu vou dar um style, protótipo highlight aqui, eu vou dar o style, propriedade e vou passar os styles, talvez botão, vamos ver. E agora eu vou definir esses styles, botão aqui na forma de styles no... aqui, vamos fazer o botão, dar um object, eu sempre gosto de botar a vírgula aqui, que eu pode esquecer depois. Então vamos dar um primeiro, como é, um align self, né? Pra center. Então o botão vai centralizar, eu salvei o negócio atualizou, desculpa, queria deixar lá. Mas agora vamos ver com a pedinho aqui, ó, já tá no centro, né? Legal. Então vamos dar um espaço antes da imagem, tem várias maneiras de fazer isso, né? A gente pode dar uma margem no abaixo da imagem, ou a gente pode botar uma margem topo no botão, tá? Depende de você, que você quer fazer, tá bom? Ah, talvez eu ponha... Popou aqui mesmo no botão, no botão da imagem, vou botar uma margem topo aqui de, sei lá, aqui, igual ao outro aqui, né? Dar a gente topo. Então vai ter um espaço antes do botão, no topo, né? Vamos também botar uma borda, borda, né? Aqui tem uma borda, vamos fazer borda width, que é com a largura, né? Larga o aqui. Espesura aqui, vamos ver. E vou botar só um. Se quiser, por um... A redondada, você pode botar uns quatro, sei lá. Você tá bem a color, pra cor da borda. Sei lá, vamos botar um gray só pra ver como é que aparece. E também, quando a gente botar o botão aqui, talvez não tenha padding dentro do botão, aí as bordas vão ficar colando com o texto. Vamos resolver isso quando a gente vê o... Não, preview aqui. Vou clicar nesse cara aqui. Tá aí. Noite, como eu falei, aqui tem um espaço por causa do padding do mod top, né? E demos uma borda com width um. E o radius foi quatro pra redondar um pouquinho, né? Ah, vamos botar um padding, que esse negócio tá muito colado com o texto. Vamos botar um padding aqui. A gente pode pôr o padding no topo, no abaixo e... Left and right. Vamos botar, sei lá, vamos botar uns quatro. Vamos ver o que acontece. E eu acho que se notar a gente pôr um padding quatro, eu acho que nem precisa centralizar o texto, né? Porque a gente pôs um mesmo número de padding em todos os lados, então não precisa botar um centralizar o texto, o componente de texto. Ah, por favor, se você quiser adicionar mais pra um, por favor, ponha. Aqui o meu foco desses tutoriais é só a funcionalidade, não estamos focando no estilo, tá bom? Então, tá bom. Eu acho que tá bom assim. Você quer mudar o estilo pra botar esse texto mais abaixo e tal, por favor, faça o que ele quiser, né? Agora vamos botar, voltar, aí tá tudo legal, a imagem muda, clica aqui, aí, legalzinho. Vamos pôr esse texto aqui pra negrito, talvez, sei lá, vamos voltar aqui no esse cara aqui, o text, né? Não tem nenhum estilo, mas eu só vou adicionar esse style aqui, botar style, texto. Sei lá, se quiser botar o texto do botão, qualquer coisa, qualquer nome que você achar, você é melhor botar o texto do botão, só vou botar um font weight aqui pra deixar negrito. Aí a gente põe bold. Só pra ver como é que fica aí. É melhor. Se você não gosta, tire. Tá aí. Olha aí, legalzinho agora. Se quiser também botar bold pro título aqui e botar talvez uma borda pra imagem e melhorar esse estilo aqui, tá bom?
Nenhum comentário ainda (loading...)
Nenhum comentário ainda (loading...)
Gostou da aula? 😆👍
Apoie nosso trabalho com uma doação: