SPACEX - Webpart - Galeria de fotos

Webpart para o Microsoft Sharepoint. A galeria de fotos foi construída com React.

Através do consumo da api do SpaceX, um conjunto de fotos em alta resolução é exibido.

Funcionalidades:

• Ao clicar em uma imagem um modal abre com uma exibição da imagem.
• Dentro do modal é possível passar e retroceder as imagens.
• Suporte aos layouts de coluna nativos do Sharepoint.
• O grid com as imagens se ajusta também em telas menores, acompanhando o container pai.
• Renderização condicional: O texto da galeria se adapta ao status da missão. Se a missão estiver na fase pré-lançamento, o texto mudará, acompanhando a chave 'upcoming' da API.

Images da solução:

1. Imagem do componente ocupando toda a largura do container:

2. Imagem do componente ocupando uma coluna com metade da largura. O grid com as imagens se adapta automaticamente:

3. Imagem do componente ocupando a menor coluna disponível no Sharepoint. O tema da seção também foi alterado para avaliar a compatibilidade da mudança feita pelo usuário.

4. Solução responsiva, se adapta ao tamanho da tela:

5. Modal exibindo a foto selecionada:

Used SharePoint Framework Version

Applies to

• SharePoint Framework
• Microsoft 365 tenant

Solution

SPACEX - Webpart - Galeria de fotos | Marcos Trannin

Outros Links:

-- Linkedin do Autor.