photus
v1.0.3
Published
This project is a library that facilitates the creation of galleries for your systems
Downloads
13
Readme
💡 Motivo
Sabemos o quanto é difícil para um desenvolvedor web escolher e trabalhar com componentes e bibliotecas de construção de interfaces. Pensando nisso, desenvolvemos uma solução usando javascript puro para facilitar o gerencimento de um processo extremamente custoso: a construção de galerias de imagens; que permite mais agilidade e otimiza o seu tempo. Essa biblioteca está sendo projetada para ter alta escalabilidade e flexibilizade, além de integrar fielmente ao design definido.
⚠️ Esse projeto está em fase beta, por esse motivo não deve ser usado no ambiente de produção
📗 Requerimento
🛠️ Como utilizar
$ git clone [email protected]:brunofamiliar/photus.git
$ cd photus
$ npm install
$ npm run build- Copie os arquivos gerados dentro do diretório "photus/dist" para a raiz do seu projeto;
- Para utilizar a lib em seu projeto, importe os arquivos .js e .css compilados e crie uma tag div com a id "pht__endpoint", essa tag é necessária para a injeção de dependência. Ex: index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./css/main.css">
<title>Photus - Simple Gallery</title>
</head>
<body>
<div id="pht__endpoint"></div>
</body>
<script src="./photus.min.js"></script>
</html>⚙️ Configurações disponíveis
Opções
Propriedade | Descrição | Tipo | Padrão ------------ | --------- | ---- | ------ type | Defina o tipo de layout a ser utilizado | string | grid images | Carrega as imagens da galeria | object[] | [] style | Edite o estilo para adaptar ao design | object[] | []
Images
Propriedade | Descrição | Tipo | Padrão ------------ | --------- | ---- | ------ name | Nome da imagem (será utilizado também como label) | string | - path | Url a ser buscado a imagem | string | -
Style
Layout Grid
Propriedade | Descrição | Tipo | Padrão ------------ | --------- | ---- | ------ columns | Quantidade de colunas | number | 4 cardSize | Tamanho do cartão de imagem | number | 200 contentWidth | Largura total do container | number | - gap | Espaçamento entre cards | number | 1 borderRadius | Borda dos cards (top, right, bottom, left) | array[number] | []