Ion-actionsheet
Galerinha, a partir de agora, iniciaremos uma sequência de estudos nos componentes visuais Ionic. Sempre haverá um pequeno texto explicativo alguns exemplos de implementação (não confunda com utilização, mesmo porque vários itens dependem de banco de dados e afins) e personalização (como troca de cores), óbvio que haverá também sempre alguma imagem ilustrativa.
Para todos os projetos vamos interpretar que você já leu os artigos anteriores e não vamos ser repetitivos, combinado? Então vamos ao que interessa.
ion-actionsheet
De forma bem grosseira é um menu que aparece de baixo para cima, próximo do meio da tela com uma variedade de botões ou escolhas depende do contexto e que geralmente é chamado por um clique do usuário em algum componente. A imagem acima ilustra bem ele já sendo chamado.
Sim, sim, eu sei que você quer saber como colocar isto no seu app, vamos a implementação! Ele não é um item copia e cola trivial, para que ele funcione é necessário uma ação conjunta entre a parte HTML e Typescript.
Para todos os exemplos de implementação utilizaremos o blank (app limpo) e se seguirmos os artigos anteriores teremos a tela abaixo:
Vamos deixar a nossa tela limpa tirando tudo do que está dentro da TAG ion-content que ficará como na imagem abaixo:
Agora podemos começar, vamos colocar um simples botão apenas para chamar o componente, siga a imagem abaixo:
Com este código aparecerá um botão, como na imagem:
Agora faremos uma série de inclusões no código TypeScript do arquivo home.page.ts, não é necessário entender "muuuuuuito" dos códigos TypeScript, neste momento, porque em artigos posteriores vamos falar melhor sobre como manipular de forma plena o TypeScript no contexto do Ionic, por hora execute cada passo mostrado. Com isso vamos acrescentar uma importação da biblioteca do ActionSheet, como na imagem abaixo:
Vamos agora acrescentar um controlador no construtor, como na imagem abaixo:
Enfim vamos colocar o método que faz a "magia" acontecer de fato, coloque o método exatamente entre o construtor e a chave de fechamento, faça exatamente como na imagem abaixo (a imagem está pegando apenas uma parte do método):
Como o código do método é um pouco extenso vou colocar logo abaixo ele na íntegra:
async exemploActionSheet() {
const actionSheet = await this.actionSheetController.create({
header: 'Galeria',
cssClass: 'my-custom-class',
buttons: [{
text: 'Excluir',
role: 'destructive',
icon: 'trash',
id: 'delete-button',
data: {
type: 'delete'
},
handler: () => {
console.log('Excluir Clicado');
}
}, {
text: 'Compartilhar',
icon: 'share',
data: 10,
handler: () => {
console.log('Compartilhar Clicado');
}
}, {
text: 'Play (abrir modal)',
icon: 'caret-forward-circle',
data: 'Data value',
handler: () => {
console.log('Play clicado');
}
}, {
text: 'Favorito',
icon: 'heart',
handler: () => {
console.log('Favorito clicado');
}
}, {
text: 'Cancelar',
icon: 'close',
role: 'cancel',
handler: () => {
console.log('Cancelar clicado');
}
}]
});
await actionSheet.present();
const { role, data } = await actionSheet.onDidDismiss();
}
Este método deve ser chamado pelo botão que fizemos no HTML, portanto, vamos voltar lá e colocá-lo no evento click do botão, como na imagem abaixo:
Por fim vamos ver como ficou, o botão deve ficar da seguinte maneira:
Muito bem, mesmo que ainda não estamos discutindo a importância do Typescript agora, precisamos fazer alguns comentários. Vamos começar com os ícones, percebam que dentro do método "exemploActionSheet()" existem subdivisões que tratam com cada botão, vamos ver o exemplo abaixo:
}, {
text: 'Favorito',
icon: 'heart',
handler: () => {
console.log('Favorito clicado');
}
}, {
No exemplo acima temos as especificações do botão de "Favorito" vejam que todos possuem a propriedade "text" que obviamente é a palavra ou texto que aparecerá para o usuário logo depois temos "icon" que representa o "desenhinho", ou ícone, que você quer que apareça para o usuário, mas você deve estar perguntando: "Da onde ele tira este nome para o ícone?", boa pergunta nenê, você encontrará vários ícones no link dos ícones do ionic clicando aqui (falaremos mais sobre ícones em artigos posteriores).
Continuando nossos estudos temos a propriedade "handler" que "captura" o clique do usuário, onde neste exemplo apenas demos saída para o console, em artigos posteriores trabalharemos melhor isto, não se preocupe agora. Quanto a personalização de cores será tudo realizado por CSS que faremos em artigos posteriores. Em outros botões há outras propriedades que falaremos com mais ênfase em artigos posteriores fique ligado! Por hora é importante que você execute as instruções demonstradas aqui com sucesso!
Espero que esteja apreciando esta nova sequência de artigos, lembre-se que se tiver alguma dúvida deixe nos comentários que terei o prazer da ajudar naquilo que compete meu conhecimento sobre o assunto, grande abraço e fiquem com Deus!!!
Comentários
Postar um comentário