O Bloco de Página é um bloco poderoso que permite criar projetos complexos adicionando profundidade a eles. Este bloco permite criar um link para outra página, que será aninhada dentro da página atual. O Bloco de Página oferece várias opções de personalização para garantir que ele esteja alinhado com as necessidades específicas do seu projeto.
Por exemplo, em um cenário de blog, você pode incluir um resumo e uma imagem de capa dentro do Bloco de Página, onde o bloco representa um artigo do blog. Isso permite que você melhore o apelo visual e forneça uma visão geral breve do conteúdo.
Exemplo: (Tente clicar nele)
Aqui o bloco de página é usado com essa configuração:
Opções:
Crie uma tabela simples com uma linha de cabeçalho. Você pode adicionar várias linhas e colunas à tabela. No entanto, observe que ela não suporta estilos inline no momento. Se você precisar de uma tabela mais complexa, você tem a opção de criar sua própria tabela usando o bloco HTML. Alternativamente, você pode importar uma tabela de outra aplicação usando o bloco HTML e incorporá-la em um iframe.
(Veja o bloco HTML para mais informações)
exemplo:
Block | Basic | Advanced |
---|---|---|
Paragraph | 🟢 | - |
Heading | 🟢 | - |
Lists | 🟢 | - |
Expandable | - | 🟢 |
Table | - | 🟢 |
Quote | 🟢 | - |
Hint | 🟢 | - |
Html | - | 🟢 |
O bloco expansível é um bloco importante no Aviso. Ele permite a criação de algum conteúdo aninhado. Um expansível consiste em duas partes: a primeira parte é o texto que será exibido o tempo todo, e a segunda parte é o conteúdo aninhado. Na versão publicada, o usuário pode exibir ou ocultar o conteúdo aninhado clicando na pequena seta no lado direito ou simplesmente clicando na primeira parte.
O bloco expansível fornece uma maneira conveniente de criar suas perguntas frequentes (FAQ) de maneira simples e direta.
Exemplo: (Neste caso, um bloco HTML foi utilizado para exibir um iframe contendo o FAQ do Aviso. Você pode encontrar o código para replicá-lo abaixo.)
Código:
<iframe
id="notice-iframe-faq"
title="Notice FAQ"
src="https:///notice-faq.mynotice.io"
style="height: 500px; width: 100%;"
frameborder="0"
></iframe>
O bloco HTML permite que você supere as limitações do Aviso. Ele concede a liberdade de escrever qualquer código HTML, aplicar estilos CSS e adicionar scripts ao seu bloco. Se você deseja incorporar conteúdo para o qual não temos um bloco dedicado, pode utilizar o bloco HTML para criar um iframe e incorporar seu link desejado dentro dele.
Exemplo: (O código usado para cada exemplo pode ser observado abaixo de cada exemplo respectivo.)
Wikipedia em um iframe:
<iframe
id="wiki-page"
title="Wikipedia"
src="https://www.wikipedia.org/"
style="height: 500px; width: 100%;"
frameborder="0"
></iframe>
Exemplo de botão padrão:
<style>
.flex-button {
width: 130px;
height: 40px;
border: none;
background-color: #ff3466 !important;
color: #FFF !important;
border-radius: 6px;
font-size: 18px;
letter-spacing: 1px;
outline: none;
cursor: pointer;
overflow: hidden;
transition: all 0.2s;
margin: auto;
display: flex;
align-items: center;
}
</style>
<button
class='flex-button'
onclick="alert('🔥 this button is created with the HTML block 🔥')"
role="button">
click me 🤩
</button>
Dentro deste bloco, você tem a capacidade de implementar código JavaScript em sua página.
Exemplo:
Clicar nesta página abaixo deve acionar um alerta, você encontrará o código usado na página