Exibição de favoritos
Criado para:
- Desenvolvedor
- Usuário
A visualização Favoritos consiste em uma coluna de imagens em miniatura.
A aparência do contêiner de visualização Favoritos é controlada com o seguinte seletor de classe CSS:
.s7ecatalogviewer .s7favoritesview
A posição e a altura da visualização Favoritos são gerenciadas pela visualização; no CSS, é possível definir apenas a largura.
Propriedades CSS da exibição Favoritos
| cor de fundo | Cor de fundo da visualização Favoritos. |
| largura | Largura da exibição. |
Exemplo - Para configurar uma visualização de Favoritos com 100 pixels de largura e um plano de fundo cinza semitransparente:
.s7ecatalogviewer .s7favoritesview {
width: 100px;
background-color: rgba(221, 221, 221, 0.5);
}
O espaçamento entre as miniaturas de Favoritos é controlado com o seguinte seletor de classe CSS:
.s7ecatalogviewer .s7favoritesview .s7thumbcell
Propriedades CSS das miniaturas de Favoritos
| margem | O tamanho da margem vertical ao redor de cada miniatura. O espaçamento real entre miniaturas é igual à soma das margens superior e inferior definidas para .s7thumbcell . |
Exemplo - Para configurar o espaçamento de dez pixels:
.s7ecatalogviewer .s7favoritesview .s7thumbcell {
margin: 5px;
}
A aparência da miniatura individual é controlada com o seguinte seletor de classe CSS:
.s7ecatalogviewer .s7favoritesview .s7thumb
Propriedades CSS das miniaturas de Favoritos
| largura | Largura da miniatura. |
| altura | Altura da miniatura. |
| borda | Borda da miniatura. |
NOTEstate, que pode ser usado para aplicar capas diferentes a estados de miniatura diferentes. Especificamente, state="selected" corresponde à miniatura selecionada recentemente pelo usuário. O atributo state="default" corresponde ao restante das miniaturas. E o atributo state="over" é usado ao passar o mouse.Exemplo - Para configurar miniaturas com 75 x 75 pixels, tem uma borda padrão cinza-claro e uma borda selecionada cinza-escuro:
.s7ecatalogviewer .s7favoritesview .s7thumb {
width: 75px;
height: 75px;
}
.s7ecatalogviewer .s7favoritesview .s7thumb[state="default"] {
border: 1px solid #dddddd;
}
.s7ecatalogviewer .s7favoritesview .s7thumb[state="selected"] {
border: 1px solid #666666;
}
A aparência do rótulo da miniatura é controlada com o seguinte seletor de classe CSS:
.s7ecatalogviewer .s7favoritesview .s7label
Propriedades CSS do rótulo Favoritos
Exemplo - Para configurar rótulos com uma fonte Helvetica® de 14 pixels:
.s7ecatalogviewer .s7favoritesview .s7label {
font-family: Helvetica,sans-serif;
font-size: 14px;
}