Material Design Lite - Selos
Um componente de emblema MDL é uma notificação na tela que pode ser um número ou um ícone. Geralmente é usado para enfatizar o número de itens.
O MDL fornece uma variedade de classes CSS para aplicar vários aprimoramentos visuais e comportamentais predefinidos aos emblemas. A tabela a seguir lista as classes disponíveis e seus efeitos.
| Sr. Não. | Nome e descrição da classe |
|---|---|
| 1 | mdl-badge Identifica o elemento como um componente do emblema MDL. Obrigatório para span ou elemento de link. |
| 2 | mdl-badge--no-background Aplica efeito de círculo aberto ao emblema e é opcional. |
| 3 | mdl-badge--overlap Faz com que o crachá se sobreponha ao seu recipiente e é opcional. |
| 4 | data-badge="value" Atribui um valor de string ao emblema usado como atributo; requerido em span ou link. |
Exemplo
O exemplo a seguir ajudará você a entender o uso do mdl-badge classe para adicionar notificações a elementos de span e link.
As classes MDL fornecidas abaixo serão usadas neste exemplo.
mdl-badge - Identifica o elemento como um componente de crachá MDL.
data-badge- Atribui um valor de string ao emblema. Os ícones podem ser atribuídos a ele usando símbolos HTML.
mdl_badges.htm
<html>
<head>
<script src = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js">
</script>
<link rel = "stylesheet"
href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
<link rel = "stylesheet"
href = "https://fonts.googleapis.com/icon?family=Material+Icons">
<style>
body {
padding: 20px;
background: #fafafa;
position: relative;
}
</style>
</head>
<body>
<span class = "material-icons mdl-badge" data-badge = "1">account_box</span>
<span class = "material-icons mdl-badge" data-badge = "★">account_box</span>
<span class = "mdl-badge" data-badge = "4">Unread Messages</span>
<span class = "mdl-badge" data-badge = "⚑">Rating</span>
<a href = "#" class = "mdl-badge" data-badge = "5">Inbox</a>
</body>
</html>Resultado
Verifique o resultado.