|
|
| (18 revisões intermediárias pela mesma usuária não estão sendo mostradas) |
| Linha 1: |
Linha 1: |
| <includeonly> | | <includeonly>{{#switch: {{{tipo|interno}}} | externo = [{{{url}}} <span class="btn btn-warning mb-2">{{{texto|Visitar site}}}</span>] | #default = [[{{{pagina}}}|<span class="btn btn-primary mb-2">{{{texto|Ir para o verbete}}}</span>]]}}</includeonly><noinclude> |
| {{#vardefine:color|{{{color|primary}}}}} | | == Uso == |
| {{#vardefine:style|btn{{#if:{{{outline|}}}|-outline}}-{{#var:color}}}}
| | <pre> |
| {{#vardefine:size|{{#if:{{{size|}}}|btn-{{{size}}}}}}}
| | {{Botão |
| {{#vardefine:block|{{#if:{{{block|}}}|btn-block}}}}
| | | tipo = interno ou externo |
| {{#vardefine:disabled|{{#if:{{{disabled|}}}|disabled}}}}
| | | pagina = nome da página (link interno) |
| | | | url = link externo completo |
| {{#vardefine:tooltip| | | | texto = texto do botão |
| {{#if:{{{tooltip|}}}|
| |
| data-toggle="tooltip" title="{{{tooltip}}}"
| |
| }}
| |
| }} | | }} |
| | </pre> |
|
| |
|
| {{#vardefine:titleAttr| | | ==Exemplo== |
| {{#if:{{{title|}}}|title="{{{title}}}"}}
| | {{Botão |
| | | tipo = interno |
| | | pagina = Rocinha |
| | | texto = Ir para o verbete |
| }} | | }} |
|
| |
|
| {{#vardefine:iconLeft| | | <pre> |
| {{#if:{{{icon|}}}|
| | {{Botão |
| {{#if:{{{iconpos|left}}}|<i class="{{{icon}}}"></i> }}
| | | tipo = interno |
| }}
| | | pagina = Rocinha |
| | | texto = Ir para o verbete |
| }} | | }} |
| | </pre> |
|
| |
|
| {{#vardefine:iconRight|
| |
| {{#if:{{{icon|}}}|
| |
| {{#ifeq:{{{iconpos|left}}}|right| <i class="{{{icon}}}"></i>}}
| |
| }}
| |
| }}
| |
|
| |
|
| {{#vardefine:content| | | {{Botão |
| {{#var:iconLeft}}{{{name|Texto}}}{{#var:iconRight}}
| | | tipo = externo |
| | | pagina = Fiocruz |
| | | url = https://fiocruz.br |
| | | texto = Visitar site |
| }} | | }} |
|
| |
|
| {{#vardefine:classes|
| | <pre> |
| btn
| | {{Botão |
| {{#var:style}} | | | tipo = externo |
| {{#var:size}}
| | | pagina = Fiocruz |
| {{#var:block}}
| | | url = https://fiocruz.br |
| {{#var:disabled}}
| | | texto = Visitar site |
| {{{class|}}}
| |
| }} | | }} |
| | </pre> |
|
| |
|
| {{#if:{{{link|}}}|
| | ==Template Data== |
| {{#if:{{#pos:{{{link}}}|://}}
| |
| | [{{{link}}} <span class="{{#var:classes}}" role="button" {{#var:tooltip}} {{#var:titleAttr}} aria-disabled="{{#if:{{{disabled|}}}|true|false}}">{{#var:content}}</span>]
| |
| | [[{{{link}}}|<span class="{{#var:classes}}" role="button" {{#var:tooltip}} {{#var:titleAttr}} aria-disabled="{{#if:{{{disabled|}}}|true|false}}">{{#var:content}}</span>]]
| |
| }}
| |
| |
| |
| <span class="{{#var:classes}}" role="button" {{#var:tooltip}} {{#var:titleAttr}} aria-disabled="{{#if:{{{disabled|}}}|true|false}}">
| |
| {{#var:content}}
| |
| </span>
| |
| }}
| |
| </includeonly>
| |
| <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> | | <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.", | | "description": "Botão para links internos (Wikifavelas) ou externos (URLs).", |
| "format": "inline",
| |
| "paramOrder": [
| |
| "name",
| |
| "link",
| |
| "color",
| |
| "outline",
| |
| "size",
| |
| "block",
| |
| "icon",
| |
| "iconpos",
| |
| "tooltip",
| |
| "title",
| |
| "disabled",
| |
| "class"
| |
| ],
| |
| "params": { | | "params": { |
| "name": { | | "tipo": { |
| "label": "Texto do botão", | | "label": "Tipo de link", |
| "description": "Texto exibido dentro do botão", | | "description": "Define se o botão aponta para página interna ou URL externa. Escolha interno para uma página da Wikifavelas e externo para uma página de outro site", |
| "type": "string", | | "type": "string", |
| "required": false, | | "default": "interno", |
| "default": "Texto", | | "suggestedvalues": ["interno", "externo"] |
| "example": "Clique aqui"
| |
| }, | | }, |
| "link": { | | "pagina": { |
| "label": "Link", | | "label": "Página interna", |
| "description": "Página interna (ex: Brasil) ou URL externa (ex: https://google.com). Se vazio, o botão não será clicável.", | | "description": "Nome do verbete ou página da Wikifavelas (use somente para links internos). Não deve incluir o endereço completo do tipo HTTP. O campo tem busca ativa nos verbetes existentes.", |
| "type": "string", | | "type": "wiki-page-name", |
| "required": false,
| | "example": "Rocinha" |
| "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": { | | "url": { |
| "label": "Outline", | | "label": "URL externa", |
| "description": "Usa estilo com borda (btn-outline-*)", | | "description": "Informe o link externo completo, incluindo o https://.", |
| "type": "boolean" | | "type": "url", |
| | "example": "https://fiocruz.br" |
| }, | | }, |
| "size": { | | "texto": { |
| "label": "Tamanho", | | "label": "Texto do botão", |
| "description": "Define o tamanho do botão", | | "description": "Utilize esse campo se desejar mudar o texto a ser exibido no botão.", |
| "type": "string", | | "type": "string", |
| "suggestedvalues": [
| | "default": "Ir para o verbete" |
| "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"
| |
| } | | } |
| } | | }, |
| | "format": "block" |
| } | | } |
| </templatedata> | | </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 ==
| |
|
| |
| === 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.
| |
|
| |
| <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 red}}}</span>
| |
| <span class="btn {{#switch: {{{color|green}}} | red = btn-primary | green = btn-secondary | white = btn-warning | blue = btn-info}}" role="button" aria-disabled="false">{{{name|Texto do botão green}}}</span>
| |
| <span class="btn {{#switch: {{{color|white}}} | red = btn-primary | green = btn-secondary | white = btn-warning | blue = btn-info}}" role="button" aria-disabled="false">{{{name|Texto do botão white}}}</span>
| |
| <span class="btn {{#switch: {{{color|blue}}} | red = btn-primary | green = btn-secondary | white = btn-warning | blue = btn-info}}" role="button" aria-disabled="false">{{{name|Texto do botão blue}}}</span>
| |
|
| |
| 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:
| |
|
| |
| <pre>
| |
| {{Botão
| |
| |link=Dicionário de Favelas Marielle Franco
| |
| |color=red
| |
| |name=Página Inicial
| |
| }}
| |
| </pre>
| |
|
| |
| Resultado:
| |
| {{Botão
| |
| |link=Dicionário de Favelas Marielle Franco
| |
| |color=red
| |
| |name=Página Inicial
| |
| }}
| |
|
| |
| == Código ==
| |
| <pre>[[{{{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>]]
| |
| </pre>
| |
|
| |
|
| |
|
| |
|
| __NOTOC__ | | __NOTOC__ |
|
| |
| </noinclude> | | </noinclude> |
