Prosas Edital
Renderiza as informações de um edital.
Antes de começar
Veja aqui os pré-requisitos.
Uso básico
Visualizando um edital.
<prosas-edital client-id="SEU_CLIENT_ID" edital-id="1234"></prosas-edital>
Customizando com css
É possível aplicar o próprio CSS nas partes de um componente. No exemplo abaixo o componente é centralizado na página, uma nova fonte padrão é definida e a parte aba-painel-nav é expandida para preencher o espaço lateral.
...
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Jacquard+12+Charted&display=swap" rel="stylesheet" />
<style type="text/css">
prosas-edital::part(aba-painel-nav) {
display: flex;
flex-direction: column;
gap: 1rem;
}
prosas-edital::part(edital-container) {
font-family: 'Jacquard 12 Charted', system-ui;
font-weight: 400;
font-style: normal;
width: 70%;
margin: auto;
}
</style>
<prosas-edital client-id="SEU_CLIENT_ID" edital-id="1234" not-show="lateral,informacao.image_logo"></prosas-edital>
...
Parts
Parts definidas:
- prosas-button
- edital-container
- edital-viewcard
- edital-lateral
- edital-informacoes
- aba-painel-nav
- box-container
Atributos
Atributo | Obrigatório | Valores |
---|---|---|
client-id | sim | UID do client |
edital-id | sim | Id do edital |
not-show | não | Qualquer um dos valores da lista separados por vígula. Lista: informacao.inscrevase, informacao.descricao, informacao.tipo_de_empreendedor, informacao.valores, informacao.fontes_financiamento, informacao.locais, informacao.areas_interesse, informacao.subarea, informacao.publicos_alvo, informacao.ods, lateral.midias.redes_sociais, lateral.midias.sites, lateral.midias.videos, abanavigation, lateral,lateral.perfil, lateral.midias, lateral.complementares, informacao.nome, informacao.image_capa, informacao.image_logo, viewcard |
Exemplo completo
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<script type="text/javascript" src="https://cdn.prosas.com.br/front-sdk/prod/latest/webcomponents.bundle.js"></script>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Jacquard+12+Charted&display=swap" rel="stylesheet" />
<title></title>
</head>
<body>
<script type="text/javascript">
window.setProsasTheme({
primaryClr: '#44AA48',
primaryTextClr: '#FFFFFF',
secondaryClr: '#FFFFFF',
secondaryTextClr: '#000000',
terciaryClr: '#000000',
terciaryTextClr: '000000',
})
</script>
<style type="text/css">
prosas-edital::part(aba-painel-nav) {
display: flex;
flex-direction: column;
gap: 1rem;
}
prosas-edital::part(edital-container) {
font-family: 'Jacquard 12 Charted', system-ui;
font-weight: 400;
font-style: normal;
width: 70%;
margin: auto;
}
</style>
<prosas-edital client-id="SEU_CLIENT_ID" edital-id="1234" not-show="lateral,informacao.image_logo"></prosas-edital>
</body>
</html>
Veja o exemplo aqui!