|
|
| Linha 1: |
Linha 1: |
| <includeonly>{{#if:{{{link|}}}|[[{{{link}}}|<span class="btn {{#if:{{{outline|}}}|btn-outline-|btn-}}{{{color|primary}}}{{#if:{{{size|}}}| btn-{{{size}}}}}{{#if:{{{block|}}}| btn-block}}{{#if:{{{disabled|}}}| disabled}} {{{class|}}}" role="button"{{#if:{{{tooltip|}}}| title="{{{tooltip}}"}}{{#if:{{{title|}}}| title="{{{title}}"}} aria-disabled="{{#if:{{{disabled|}}}|true|false}}">{{#if:{{{icon|}}}|{{#ifeq:{{{iconpos|left}}}|right|{{{name|Texto}}} <i class="{{{icon}}}"></i>|<i class="{{{icon}}}"></i> {{{name|Texto}}}}|{{{name|Texto}}}}</span>]]|<span class="btn {{#if:{{{outline|}}}|btn-outline-|btn-}}{{{color|primary}}}{{#if:{{{size|}}}| btn-{{{size}}}}}{{#if:{{{block|}}}| btn-block}}{{#if:{{{disabled|}}}| disabled}} {{{class|}}}" role="button"{{#if:{{{tooltip|}}}| title="{{{tooltip}}"}}{{#if:{{{title|}}}| title="{{{title}}"}} aria-disabled="{{#if:{{{disabled|}}}|true|false}}">{{#if:{{{icon|}}}|{{#ifeq:{{{iconpos|left}}}|right|{{{name|Texto}}} <i class="{{{icon}}}"></i>|<i class="{{{icon}}}"></i> {{{name|Texto}}}}|{{{name|Texto}}}}</span>}}</includeonly>
| | [[{{{link}}}|<span class="btn {{#switch: {{{color|red}}} | red = btn-primary | green = btn-secondary | white = btn-warning | blue = btn-info}}" role="button" aria-disabled="false">{{{name|Texto do botão}}}</span>]] |
| <noinclude> | | <noinclude> |
| Botão Bootstrap 4 compatível com MediaWiki (sem HTML bloqueado).
| |
|
| |
| Parâmetros:
| |
| - name = texto
| |
| - link = página interna ou URL externa
| |
| - color = primary, secondary, success, danger, warning, info, light, dark
| |
| - outline = 1
| |
| - size = sm, lg
| |
| - block = 1 (btn-block)
| |
| - icon = classes (ex: fa fa-user)
| |
| - iconpos = left/right (default: left)
| |
| - disabled = 1
| |
| - tooltip = texto do tooltip
| |
| - title = título (fallback acessível)
| |
| - class = classes extras
| |
|
| |
| Exemplos:
| |
| {{Botão|name=Salvar|color=success|icon=fa fa-check}}
| |
| {{Botão|name=Excluir|color=danger|outline=1}}
| |
| {{Botão|name=Ajuda|tooltip=Mais info}}
| |
|
| |
|
| |
| <templatedata>
| |
| {
| |
| "description": "Botão estilizado com Bootstrap 4 compatível com MediaWiki. Detecta automaticamente links internos e externos. Suporta cores, outline, tamanho, largura total, ícones e tooltip.",
| |
| "format": "inline",
| |
| "paramOrder": [
| |
| "name",
| |
| "link",
| |
| "color",
| |
| "outline",
| |
| "size",
| |
| "block",
| |
| "icon",
| |
| "iconpos",
| |
| "tooltip",
| |
| "title",
| |
| "disabled",
| |
| "class"
| |
| ],
| |
| "params": {
| |
| "name": {
| |
| "label": "Texto do botão",
| |
| "description": "Texto exibido dentro do botão",
| |
| "type": "string",
| |
| "required": false,
| |
| "default": "Texto",
| |
| "example": "Clique aqui"
| |
| },
| |
| "link": {
| |
| "label": "Link",
| |
| "description": "Página interna (ex: Brasil) ou URL externa (ex: https://google.com). Se vazio, o botão não será clicável.",
| |
| "type": "string",
| |
| "required": false,
| |
| "example": "Brasil"
| |
| },
| |
| "color": {
| |
| "label": "Cor",
| |
| "description": "Cor do botão (Bootstrap 4)",
| |
| "type": "string",
| |
| "default": "primary",
| |
| "suggestedvalues": [
| |
| "primary",
| |
| "secondary",
| |
| "success",
| |
| "danger",
| |
| "warning",
| |
| "info",
| |
| "light",
| |
| "dark"
| |
| ]
| |
| },
| |
| "outline": {
| |
| "label": "Outline",
| |
| "description": "Usa estilo com borda (btn-outline-*)",
| |
| "type": "boolean"
| |
| },
| |
| "size": {
| |
| "label": "Tamanho",
| |
| "description": "Define o tamanho do botão",
| |
| "type": "string",
| |
| "suggestedvalues": [
| |
| "sm",
| |
| "lg"
| |
| ],
| |
| "example": "lg"
| |
| },
| |
| "block": {
| |
| "label": "Largura total",
| |
| "description": "Ocupa toda a largura disponível (btn-block)",
| |
| "type": "boolean"
| |
| },
| |
| "icon": {
| |
| "label": "Ícone",
| |
| "description": "Classes do ícone (ex: fa fa-user)",
| |
| "type": "string",
| |
| "example": "fa fa-check"
| |
| },
| |
| "iconpos": {
| |
| "label": "Posição do ícone",
| |
| "description": "Define a posição do ícone em relação ao texto",
| |
| "type": "string",
| |
| "default": "left",
| |
| "suggestedvalues": [
| |
| "left",
| |
| "right"
| |
| ]
| |
| },
| |
| "tooltip": {
| |
| "label": "Tooltip",
| |
| "description": "Texto exibido ao passar o mouse (requer Bootstrap JS ativo)",
| |
| "type": "string",
| |
| "example": "Mais informações"
| |
| },
| |
| "title": {
| |
| "label": "Título",
| |
| "description": "Texto alternativo (acessibilidade)",
| |
| "type": "string",
| |
| "example": "Clique para abrir"
| |
| },
| |
| "disabled": {
| |
| "label": "Desabilitado",
| |
| "description": "Aplica estilo de botão desabilitado (visual)",
| |
| "type": "boolean"
| |
| },
| |
| "class": {
| |
| "label": "Classes extras",
| |
| "description": "Classes CSS adicionais",
| |
| "type": "string",
| |
| "example": "mt-2 mb-2"
| |
| }
| |
| }
| |
| }
| |
| </templatedata>
| |
|
| |
| ==anterior==
| |
| [[{{{link}}}|<span class="btn {{#switch: {{{color|red}}} | red = btn-primary | green = btn-secondary | white = btn-warning | blue = btn-info}}" role="button" aria-disabled="false">{{{name|Texto do botão}}}</span>]]
| |
|
| |
| == Como Usar == | | == Como Usar == |
|
| |
|
[[{{{link}}}|Texto do botão]]
Como Usar
Utilizando o Editor Visual
Selecione inserir Predefinição no Editor Visual e informe os parâmetros:
color: define a cor do botão predefinida nos estilos. Escolha uma das seguintes opções: red, green, white, ou blue.
Texto do botão red
Texto do botão green
Texto do botão white
Texto do botão blue
link: Informe o link da página cujo botão acionará.
name: Informe o texto que aparecerá no botão.
Utilizando o editor de código
Basta chamar a predefinição na página que deseja-se utilizar e inserir três parâmetros como no exemplo abaixo:
{{Botão
|link=Dicionário de Favelas Marielle Franco
|color=red
|name=Página Inicial
}}
Resultado:
Página Inicial
Código
[[{{{link}}}|<span class="btn {{#switch: {{{color|red}}} | red = btn-primary | green = btn-secondary | white = btn-warning | blue = btn-info}}" role="button" aria-disabled="false">{{{name|Texto do botão}}}</span>]]
