Syonet Bootstrap | Documentação

Badges

Útil componente para indicação visual. Pode servir, por exemplo, como contador de itens ou indicador de agrupamento.

Badge Sucesso! Erro! Cuidado! Informação

<!-- Badge padrão -->
    <span class="syo-badge">Badge</span>

    <!-- Badge de sucesso -->
    <span class="syo-badge syo-success">Sucesso!</span>

    <!-- Badge de erro -->
    <span class="syo-badge syo-error">Erro!</span>

    <!-- Badge de aviso -->
    <span class="syo-badge syo-warning">Cuidado!</span>

    <!-- Badge de informação -->
    <span class="syo-badge syo-info">Informação</span>
</div>

Blocos

Simples componente para separação visual de título e conteúdo.

Título do bloco em cima

Conteúdo

Título do bloco embaixo

<div class="row">
    <div class="col col-medium-6">
        <div class="syo-block">
            <div class="syo-block-header">
                <div class="syo-block-toolbar">
                    Toolbar
                </div>
                <div class="syo-block-title">
                    Título do bloco em cima
                </div>
            </div>
            <div class="syo-block-content">
                Conteúdo
            </div>
        </div>
    </div>
    <div class="col col-medium-6">
        <div class="syo-block">
            <div class="syo-block-content">
                Conteúdo
            </div>
            <div class="syo-block-footer">
                <div class="syo-block-title">
                    Título do bloco embaixo
                </div>
                <div class="syo-block-toolbar">
                    Toolbar
                </div>
            </div>
        </div>
    </div>
</div>

Se for necessário incluir uma tabela dentro do bloco, existe um tratamento especial da mesma para que o conteúdo do bloco não fique tão "pesado", como você pode ver no exemplo abaixo:

Bloco com uma tabela

Coluna 1	Coluna 2	Coluna 3
Texto 1	Texto 2	Texto 3
Texto 1	Texto 2	Texto 3
Texto 1	Texto 2	Texto 3
Footer 1	Footer 2	Footer 3

Buttonset

Agrupe uma série de botões .syo-button dentro de um .syo-buttonset.

<div class="syo-buttonset">
    <button type="button" class="syo-button">Ação 1</button>
    <button type="button" class="syo-button">Ação 2</button>
    <button type="button" class="syo-button">Ação 3</button>
</div>

Check List

Uma ótima substituição para a clássica lista de checkboxes ou radios, que são um verdadeiro pesadelo para interfaces touch screen!

Checkbox

Header Opcional
Opção 1
Opção 2
Opção 3
Opção 4

Radio

Radio 1
Radio 2
Radio 3

<ul class="syo-check-list">
    <li class="syo-check-list-header">Header Opcional</li>
    <li>
        <input type="checkbox" name="checklist" id="checklist-option1">
        <label for="checklist-option1">Opção 1</label>
    </li>
    <li>
        <input type="checkbox" name="checklist" id="checklist-option2">
        <label for="checklist-option2">Opção 2</label>
    </li>
</ul>

<ul class="syo-check-list">
    <li>
        <input type="radio" name="radiolist" id="radiolist-option1">
        <label for="radiolist-option1">Radio 1</label>
    </li>
    <li>
        <input type="radio" name="radiolist" id="radiolist-option2">
        <label for="radiolist-option2">Radio 2</label>
    </li>
</ul>

Para implementar o Check List, lembre-se de sempre atribuir um id aos checkboxes/radios, bem como um <label> que referencia tal valor no atributo for, assim como está no código do exemplo anterior.

Form Table

O form table é um componente para uma exibição de fichas complexas, com muitos campos, no estilo rótulo/valor. Também aceita controles de formulário nas células de valor.

<form class="syo-form-table">
    <legend>Título do formulário</legend>

    <div class="syo-field">
        <label class="col col-medium-2 col-small-4">Label:</label>
        <div class="col col-medium-4 col-small-8 syo-field-text">
            Valor da célula
        </div>

        <label class="col col-medium-2 col-small-4">Label:</label>
        <div class="col col-medium-4 col-small-8">
            <input type="text">
        </div>
    </div>

    <div class="syo-field">
        <label class="col col-medium-2 col-small-4">Label:</label>
        <div class="col col-medium-10 col-small-8 syo-field-text">
            Valor da célula
        </div>
    </div>
</form>

Headers

Para utilizar como separador de seções de páginas, você pode utilizar os 2 tipos de headers a seguir. Basta utilizar a classe .syo-header e alguma classe dos estilos opcionais: .syo-header-ruler ou .syo-header-bar.

Lorem Ipsum

<div class="syo-header syo-header-ruler">
    <h3>...</h3>
</div>

<div class="syo-header syo-header-bar">
    <h3>...</h3>
</div>

Input Row

Coloque um campo input de texto + botões dentro de um mesmo elemento de forma que sempre ocupem toda uma linha.

<div class="row">
    <div class="syo-input-row col col-medium-6">
        <input type="text" placeholder="Nome">
        <div class="syo-input-row-addon">
            <button class="syo-button">
                <i class="icon-ok"></i>
            </button>
        </div>
    </div>
    <div class="syo-input-row col col-medium-6">
        <input type="text" placeholder="Digite sua pesquisa...">
        <div class="syo-input-row-addon">
            <button class="syo-button">
                <i class="icon-search"></i>
                Pesquisar
            </button>
        </div>
    </div>
</div>

Navbar

Navbars são componentes para incluir uma navegação básica horizontal.

<div class="syo-navbar">
    <div class="container">
        <a href="#" class="syo-navbar-title">Projeto</a>
        <ul class="syo-nav">
            <li class="syo-active"><a href="#">Link 1</a></li>
            <li><a href="#">Link 2</a></li>
            <li><a href="#">Link 3</a></li>
        </ul>
        <div class="syo-pull-right syo-navbar-content">Conteúdo à direita</div>
    </div>
</div>

Nav

Componentes de navegação com o mesmo HTML base, apenas diferenciando as classes utilizadas. Todos estilos estão acessíveis atráves da classe .syo-nav.

Nav list

Navegação vertical, que permite um fácil agrupamento com headers opcionais. Melhor utilizados como sidebars.

Título
Link 1
Link 2
Link 3

<ul class="syo-nav syo-nav-list">
    <li class="syo-nav-header">Título</li>
    <li><a href="#">Link 1</a></li>
    <li><a href="#">Link 2</a></li>
    <li><a href="#">Link 3</a></li>
</ul>

Nav Tray

Navegação em bandeja, no estilo das pastas do Android. É possível posicionar até 4 itens por linha utilizando as classes .syo-nav-tray-*.

<ul class="syo-nav syo-nav-tray syo-nav-tray-2">
    <li><a href><i class="icon-home"></i><span class="syo-nav-tray-label">Home</span></a></li>
    <li><a href><i class="icon-heart-o"></i><span class="syo-nav-tray-label">Recomendar</span></a></li>
    <li><a href><i class="icon-comments"></i><span class="syo-nav-tray-label">Comentários</span></a></li>
    <li><a href><i class="icon-sign-out"></i><span class="syo-nav-tray-label">Sair</span></a></li>
</ul>

Notificação

Cria um componente de notificação estático, útil para alertar o usuário de alguma coisa.

Notificação padrão

Informação

Erro

Alerta

Sucesso

<div class="syo-notification">Notificação padrão</div>
<div class="syo-notification syo-info">Informação</div>
<div class="syo-notification syo-error">Erro</div>
<div class="syo-notification syo-warning">Alerta</div>
<div class="syo-notification syo-success">Sucesso</div>

Paginação

Simples componente de paginação, com uma larga área de clique - o que facilita para interfaces touch sensitive.

<div class="syo-pagination">
    <ul>
        <li class="syo-active"><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
        <li class="syo-disabled"><a href="#">4</a></li>
    </ul>
</div>

Para marcar um item como desabilitado, adicione a classe .syo-disabled:

<div class="syo-pagination">
    <ul>
        <li class="syo-disabled"><a href="#">1</a></li>
    </ul>
</div>

Importante: Tal classe não desabilita realmente o item da paginação. Ela serve apenas como um indicador visual de que o item deve estar desabilitado.

Popover

Um popover é um balão que serve para exibir qualquer HTML. Ele é utilizado como uma diretiva do Angular.

<button class="syo-button" syo-popover="{
    title: 'Título do Popover',
    template: 'Olá mundo!'
}">
    Clique aqui
</button>

Atributos

Nome Tipo Detalhes

syoPopover

Nome	Tipo	Detalhes
syoPopover	`Object`	Aceita as seguintes propriedades: `event` Tipo: String Define qual evento irá exibir o popover. Os valores suportados são: click mouseenter `locals` Tipo: Object Um objeto de variáveis para mesclar no escopo do popover. Por exemplo, passando a seguinte configuração: { locals: { foo: 123, bar: "baz" } } As variáveis `foo` e `bar` ficarão disponíveis no escopo do popover com os valores definidos acima. `model` Tipo: String Determina que propriedade do escopo atual irá receber a instância do controller do popover. `onClose` Tipo: Function Executa uma função após o popover ter sido fechado. `position` Tipo: String Define o posicionamento do popover em relação ao elemento em que foi chamado. O valor possível pode ser um dos seguintes: `top` - posiciona no topo, centralizado. `top-start` - posiciona no topo, à esquerda. `top-end` - posiciona no topo, à direita. `left` - posiciona à esquerda, centralizado. `left-start` - posiciona à esquerda, na parte superior. `left-end` - posiciona à esquerda, na parte inferior. `right` - posiciona à direita, centralizado. `right-start` - posiciona à direita, na parte superior. `right-end` - posiciona à direita, na parte inferior. `bottom` - posiciona embaixo, centralizado. `bottom-start` - posiciona embaixo, à esquerda. `bottom-end` - posiciona embaixo, à direita. Caso nenhum valor seja passado, o padrão `top` será usado. `scope` Tipo: Scope Determina qual o escopo do popover, e cria um escopo filho a partir deste. Caso nenhum escopo seja passado, usa o `$rootScope.` `title` Tipo: String Define o título do popover. `template` Tipo: String Define o conteúdo do popover como HTML. Se utilizado, sobrescreve o valor de `templateUrl`. `templateUrl` Tipo: String Define a URL de um HTML que contem o conteúdo do popover.

Object

Aceita as seguintes propriedades:

event Tipo: String
Define qual evento irá exibir o popover. Os valores suportados são:
- click
- mouseenter
locals Tipo: Object
Um objeto de variáveis para mesclar no escopo do popover.
Por exemplo, passando a seguinte configuração:
```
{
    locals: {
        foo: 123,
        bar: "baz"
    }
}
```
As variáveis foo e bar ficarão disponíveis no escopo do popover com os valores definidos acima.
model Tipo: String
Determina que propriedade do escopo atual irá receber a instância do controller do popover.
onClose Tipo: Function
Executa uma função após o popover ter sido fechado.
position Tipo: String
Define o posicionamento do popover em relação ao elemento em que foi chamado. O valor possível pode ser um dos seguintes:
- top - posiciona no topo, centralizado.
- top-start - posiciona no topo, à esquerda.
- top-end - posiciona no topo, à direita.
- left - posiciona à esquerda, centralizado.
- left-start - posiciona à esquerda, na parte superior.
- left-end - posiciona à esquerda, na parte inferior.
- right - posiciona à direita, centralizado.
- right-start - posiciona à direita, na parte superior.
- right-end - posiciona à direita, na parte inferior.
- bottom - posiciona embaixo, centralizado.
- bottom-start - posiciona embaixo, à esquerda.
- bottom-end - posiciona embaixo, à direita.
Caso nenhum valor seja passado, o padrão top será usado.
scope Tipo: Scope
Determina qual o escopo do popover, e cria um escopo filho a partir deste. Caso nenhum escopo seja passado, usa o $rootScope.
title Tipo: String
Define o título do popover.
template Tipo: String
Define o conteúdo do popover como HTML. Se utilizado, sobrescreve o valor de templateUrl.
templateUrl Tipo: String
Define a URL de um HTML que contem o conteúdo do popover.

Progressbar

Renderize uma progressbar utilizando apenas CSS. Lembre-se de definir uma largura para o .syo-progressbar-value.

<div class="syo-progressbar">
    <div class="syo-progressbar-value" style="width:60%"></div>
</div>

Para criar uma progressbar em aplicações Angular.js que controlam o preenchimento da mesma, utilize a diretiva syo-progressbar.

Tamanho:

<div syo-progressbar="50"></div>