📈 Site oficial do Dash (Documentação)
| # | Comando / Função / Parâmetro | O que faz | Exemplo / Instalação |
|---|---|---|---|
| 1 | pip install dash | Instalação da biblioteca principal | pip install dash pandas |
| 2 | Dash(__name__) | Inicializa a aplicação Dash | app = Dash(__name__) |
| 3 | html.Div() | Cria um elemento de divisão (container) | html.Div(children='Olá Dash') |
| 4 | html.H1() | Cabeçalho de nível 1 | html.H1('Meu Dashboard') |
| 5 | html.P() | Elemento de parágrafo | html.P('Texto descritivo') |
| 6 | html.Br() | Quebra de linha simples | html.Br() |
| 7 | html.Img() | Insere uma imagem | html.Img(src='/assets/logo.png') |
| 8 | html.Button() | Botão padrão HTML | html.Button('Clique', id='btn') |
| 9 | dcc.Graph() | Renderiza um gráfico Plotly | dcc.Graph(figure=fig) |
| 10 | dcc.Dropdown() | Menu de seleção suspensa | dcc.Dropdown(['A', 'B'], 'A') |
| 11 | dcc.Slider() | Controle deslizante numérico | dcc.Slider(0, 10, 1, value=5) |
| 12 | dcc.Input() | Campo de entrada de texto/número | dcc.Input(type='text') |
| 13 | dcc.Checklist() | Caixas de seleção múltipla | dcc.Checklist(['Op1', 'Op2']) |
| 14 | dcc.RadioItems() | Botões de rádio (seleção única) | dcc.RadioItems(['S', 'N']) |
| 15 | dcc.DatePickerRange() | Seleção de intervalo de datas | dcc.DatePickerRange(id='dt') |
| 16 | dcc.Markdown() | Renderiza texto em Markdown | dcc.Markdown('# Título MD') |
| 17 | dcc.Store() | Armazena dados no navegador do cliente | dcc.Store(id='session-data') |
| 18 | dcc.Interval() | Dispara callbacks periodicamente | dcc.Interval(interval=1000) |
| 19 | dcc.Link() | Link para navegação interna (SPA) | dcc.Link('Ir', href='/p1') |
| 20 | dcc.Location() | Monitora a URL do navegador | dcc.Location(id='url') |
| 21 | dcc.Loading() | Exibe spinner durante carregamento | dcc.Loading(children=[...]) |
| 22 | dcc.Upload() | Componente para upload de arquivos | dcc.Upload('Arraste aqui') |
| 23 | dcc.Tabs() | Container para abas de navegação | dcc.Tabs(id='tabs', children=[...]) |
| 24 | dcc.Tab() | Conteúdo de uma aba específica | dcc.Tab(label='Aba 1') |
| 25 | dcc.Clipboard() | Botão para copiar para área de transferência | dcc.Clipboard(target_id='copiar') |
| 26 | @callback() | Decorador para lógica interativa | @callback(Output(...), Input(...)) |
| 27 | Output() | Define o destino do retorno do callback | Output('id', 'property') |
| 28 | Input() | Define o gatilho do callback | Input('btn', 'n_clicks') |
| 29 | State() | Lê valor sem disparar o callback | State('input', 'value') |
| 30 | ctx.triggered_id | Identifica qual ID disparou o callback | id = ctx.triggered_id |
| 31 | no_update | Impede a atualização de um Output | return dash.no_update |
| 32 | prevent_initial_call | Evita execução no carregamento da página | @callback(..., prevent_initial_call=True) |
| 33 | clientside_callback | Executa lógica JavaScript no cliente | clientside_callback("function...", ...) |
| 34 | dash_table.DataTable() | Tabela interativa avançada | dash_table.DataTable(df.to_dict('records')) |
| 35 | columns= | Define colunas da tabela | columns=[{"name": i, "id": i} for i in df.columns] |
| 36 | page_size= | Número de linhas por página | page_size=10 |
| 37 | sort_action= | Habilita ordenação ('native') | sort_action='native' |
| 38 | filter_action= | Habilita filtros nas colunas | filter_action='native' |
| 39 | editable=True | Permite edição direta na célula | editable=True |
| 40 | row_selectable= | Habilita seleção de linhas ('single'/'multi') | row_selectable='multi' |
| 41 | style= | Dicionário de CSS inline | style={'color': 'red'} |
| 42 | className= | Atribui classe CSS externa | className='container-fluid' |
| 43 | external_stylesheets | Carrega CSS externo (ex: Bootstrap) | external_stylesheets=[dbc.themes.BOOTSTRAP] |
| 44 | app.layout | Define a estrutura da página | app.layout = html.Div(...) |
| 45 | pip install dash-bootstrap-components | Instalação do pacote Bootstrap | pip install dash-bootstrap-components |
| 46 | dbc.Container() | Container responsivo Bootstrap | dbc.Container(children, fluid=True) |
| 47 | dbc.Row() | Linha do sistema de grid | dbc.Row([dbc.Col(...)]) |
| 48 | dbc.Col() | Coluna do sistema de grid | dbc.Col(width=6) |
| 49 | dbc.Card() | Container de cartão estilizado | dbc.Card(dbc.CardBody(...)) |
| 50 | dbc.Navbar() | Barra de navegação superior | dbc.NavbarSimple(...) |
| 51 | dbc.Alert() | Mensagens de alerta coloridas | dbc.Alert("Erro!", color="danger") |
| 52 | dbc.Modal() | Janelas pop-up (diálogos) | dbc.Modal([dbc.ModalHeader(...)]) |
| 53 | app.run(debug=True) | Inicia o servidor de desenvolvimento | if __name__ == '__main__': app.run(debug=True) |
| 54 | multi=True | Permite seleção múltipla no Dropdown | dcc.Dropdown(..., multi=True) |
| 55 | placeholder= | Texto de ajuda em campos vazios | placeholder='Selecione...' |
| 56 | clearable=False | Impede limpeza de seleção no Dropdown | clearable=False |
| 57 | persistence=True | Mantém estado após recarregar página | persistence=True |
| 58 | children= | Conteúdo interno de um componente | html.Div(children=[...]) |
| 59 | id= | Identificador único para callbacks | id='meu-comp' |
| 60 | inline=True | Exibe Checklist horizontalmente | dcc.Checklist(..., inline=True) |
| 61 | options= | Lista de opções para seletores | options=[{'label': 'X', 'value': 1}] |
| 62 | value= | Valor inicial/atual do componente | value='padrão' |
| 63 | disabled=True | Desabilita o componente | disabled=True |
| 64 | max_length= | Limite de caracteres no Input | dcc.Input(max_length=10) |
| 65 | debounce=True | Envia valor apenas após Enter ou perda de foco | dcc.Input(debounce=True) |
| 66 | min= | Valor mínimo permitido | min=0 |
| 67 | max= | Valor máximo permitido | max=100 |
| 68 | step= | Incremento de valores | step=0.5 |
| 69 | marks= | Rótulos customizados no Slider | marks={0: 'Início', 10: 'Fim'} |
| 70 | vertical=True | Altera Slider para orientação vertical | vertical=True |
| 71 | updatemode= | Quando o Slider envia dados ('mouseup'/'drag') | updatemode='drag' |
| 72 | href= | Destino de um link | html.A('Link', href='https://...') |
| 73 | target='_blank' | Abre link em nova aba | html.A(..., target='_blank') |
| 74 | dangerously_allow_html | Permite HTML em Markdown (Cuidado!) | dcc.Markdown(..., dangerously_allow_html=True) |
| 75 | mathjax=True | Habilita fórmulas matemáticas no Markdown | dcc.Markdown(..., mathjax=True) |
| 76 | loading_state | Propriedade de leitura do estado de carga | Input('comp', 'loading_state') |
| 77 | title= | Texto ao passar o mouse | html.Div(title='Dica') |
| 78 | n_clicks | Contador de cliques em botões | Input('btn', 'n_clicks') |
| 79 | n_clicks_timestamp | Timestamp do último clique | State('btn', 'n_clicks_timestamp') |
| 80 | active_tab | Identifica aba selecionada no DBC | Input('tabs', 'active_tab') |
| 81 | is_open | Controla visibilidade de Modal/Collapse | Output('modal', 'is_open') |
| 82 | key= | Ajuda o React a identificar mudanças em listas | html.Div(key='unique_id') |
| 83 | figure.update_layout() | Atualiza layout do gráfico Plotly | fig.update_layout(title='Gráfico') |
| 84 | figure.add_trace() | Adiciona nova série ao gráfico | fig.add_trace(go.Scatter(...)) |
| 85 | px.scatter() | Cria dispersão rápida com Plotly Express | px.scatter(df, x='x', y='y') |
| 86 | px.bar() | Cria barras rápidas com Plotly Express | px.bar(df, x='cat', y='total') |
| 87 | px.line() | Cria linhas rápidas com Plotly Express | px.line(df, x='data', y='valor') |
| 88 | dash.register_page() | Registra página em apps multi-páginas | dash.register_page(__name__, path='/') |
| 89 | dash.page_container | Container onde as páginas são renderizadas | html.Div(dash.page_container) |
| 90 | suppress_callback_exceptions | Evita erros de IDs inexistentes no layout inicial | app = Dash(..., suppress_callback_exceptions=True) |
| 91 | assets_folder= | Define pasta de arquivos estáticos | app = Dash(assets_folder='static') |
| 92 | requests_pathname_prefix | Configuração para deploy em subpastas | app = Dash(requests_pathname_prefix='/app/') |
| 93 | server = app.server | Expõe a instância Flask para o Gunicorn | server = app.server |