Componentes/Janela

Janela

Janela de ferramenta de trading — componente composto com header (badge AI, abas de ferramentas com underline, dropdown Multi e ações), linha de abas em pill (filtros) e Container central com slot swappable que recebe qualquer conteúdo via children. Inclui floating menu opcional de ações (Fechar, Minimizar, Maximizar, Fixar, Renomear) e scrollbars laterais/inferior visuais.

Trading

Figma: 1909:41600

Preview

Default — slot vazio mostra "Componente coringa"

Componente coringa

Com componente no slot (Boleta versão Simples)

Estratégia

Disp.258.010.200,00 USDT

Quantidade

Preço da Ordem

TP/SL

PosiçãoZerado

Qtd: 0MÉDIO (BM)

ResultadoR$ 0,00

Sem scrollbars

Componente coringa

Código

Copie e cole no Claude Code para implementar este componente em pixel-perfect usando os tokens TRDR.

<!-- Janela TRDR — exemplo estático (Figma 1909:41600) -->
<div class="trdr-janela">

  <!-- HEADER -->
  <div class="trdr-janela-header">
    <span class="trdr-janela-tag-ai">
      <span class="material-symbols-outlined" style="font-size:12px">auto_awesome</span>
      AI
    </span>

    <div class="trdr-janela-tool-tabs">
      <button class="trdr-janela-tool-tab trdr-janela-tool-tab-active">Ferramenta 1</button>
      <button class="trdr-janela-tool-tab">Ferramenta 2</button>
      <button class="trdr-janela-tool-tab">Ferramenta 3</button>
      <button class="trdr-janela-tool-chevron">
        <span class="material-symbols-outlined">keyboard_arrow_down</span>
      </button>
    </div>

    <div class="trdr-janela-header-actions">
      <span class="trdr-janela-divider"></span>
      <button class="trdr-janela-icon-button trdr-janela-icon-link">
        <span class="material-symbols-outlined">link</span>
      </button>
      <button class="trdr-janela-multi">
        Multi
        <span class="material-symbols-outlined" style="font-size:16px">keyboard_arrow_down</span>
      </button>
      <button class="trdr-janela-icon-button">
        <span class="material-symbols-outlined">more_horiz</span>
      </button>
      <button class="trdr-janela-icon-button">
        <span class="material-symbols-outlined">close</span>
      </button>
    </div>
  </div>

  <!-- PILL TABS (filtros) -->
  <div class="trdr-janela-pill-row" role="tablist">
    <button class="trdr-janela-pill trdr-janela-pill-active">Aba 1</button>
    <button class="trdr-janela-pill">Aba 2</button>
    <button class="trdr-janela-pill">Aba 3</button>
    <button class="trdr-janela-pill">Aba 4</button>
    <button class="trdr-janela-pill">Aba 5</button>
  </div>

  <!-- CONTAINER (slot) -->
  <div class="trdr-janela-container">
    <div class="trdr-janela-container-inner">
      <!-- Slot: substitua pelo seu componente -->
      <span class="trdr-janela-coringa">Componente coringa</span>
    </div>
  </div>

  <!-- FLOATING MENU (opcional — more_horiz) -->
  <div class="trdr-janela-actions-menu" role="menu">
    <button class="trdr-janela-action-item"><span class="material-symbols-outlined">close</span>Fechar</button>
    <button class="trdr-janela-action-item"><span class="material-symbols-outlined">remove</span>Minimizar</button>
    <button class="trdr-janela-action-item"><span class="material-symbols-outlined">arrow_outward</span>Maximizar</button>
    <button class="trdr-janela-action-item"><span class="material-symbols-outlined">keep</span>Fixar</button>
    <button class="trdr-janela-action-item"><span class="material-symbols-outlined">edit</span>Renomear aba</button>
  </div>

</div>

Dimensões

Variante	Largura	Altura
Janela total	`476px`	`312px`
Header	`476px`	`41px`
Pill tabs row	`476px`	`45px`
Container central	`476px`	`226px`
Tag AI	`hug`	`19px`
Pill (filtro)	`hug`	`31px`
Botão Multi	`65px`	`33px`
Floating actions menu	`172px`	`192px`
Scrollbar lateral	`14px`	`—`
Scrollbar inferior	`—`	`14px`

Props / Variantes

Prop	Tipo	Valores
`tools`	JanelaTool[]	`{ label, icon? }`
`activeTool`	number	`012`
`onToolChange`	function	`(index) => void`
`tabs`	string[]	`["Aba 1", ...]`
`activeTab`	number	`0..N`
`onTabChange`	function	`(index) => void`
`multiLabel`	string	`Multi`
`showSideScroll`	boolean	`truefalse`
`showBottomScroll`	boolean	`truefalse`
`showActionsMenu`	boolean	`truefalse`
`actions`	JanelaAction[]	`{ icon, label, onClick? }`
`children`	ReactNode	`conteúdo do slot central`

Tokens Utilizados

Propriedade	Token	Valor
Janela bg / Header bg	`bg.secondary`	`#141519`
Pill row bg / Container bg	`bg.tertiary`	`#1A1A1A`
Tag AI bg	`bg.brand`	`#00D4FF`
Pill ativa bg / Multi bg	`action.secondary.default`	`#4A4A4A`
Pill inativa bg	`surface.secondary`	`#222222`
Texto pill ativa / título	`content.primary`	`#FFFFFF`
Texto item floating	`content.secondary`	`#E8E8E8`
Texto pill inativa / ícones / aba inativa	`content.tertiary`	`#A4A4A4`
Ícone link / underline aba ativa	`bg.brand`	`#00D4FF`
Stroke header / pill row / floating	`border.subtle`	`#222222`
Radius pill / botão Multi	`radius.lg`	`16px`
Radius janela / floating menu	`radius.md`	`8px`
Radius Tag AI / item floating	`radius.sm`	`4px`
Padding pill / gap header	`spacing.sm`	`8px`
Padding pill horizontal	`spacing.md`	`12px`
Padding container interno	`spacing.lg`	`16px`

Anatomia

Janela 476×312 com border-radius 8px e border subtle, em coluna:

1. HEADER (41px, bg --bg-secondary, border-bottom subtle):
   [Tag AI 19h #00D4FF radius 4] · [Tabs Ferramentas 14/16.8 com underline 2px brand na ativa + chevron 40×40] · [Divider 1×33 · Link cyan 24×24 · Multi 65×33 bg secondary radius 16 · more_horiz 24×24 · close 24×24]

2. PILL TABS (45px, bg --bg-tertiary, padding 8, gap 8, border-bottom subtle):
   5 pills 31h padding 8/12 radius 16. Ativa: bg --action-secondary-default + texto primary. Inativas: bg --surface-secondary + texto tertiary.

3. CONTAINER (226px, bg --bg-tertiary, padding 16, gap 8):
   Slot via children. Fallback visual: texto "Componente coringa". Scrollbars opcionais (lateral 14×, inferior ×14) com setas Material e thumb arredondado radius 16.

4. FLOATING ACTIONS MENU (172×192, opcional, ancorado em more_horiz):
   bg --bg-secondary, border subtle, radius 8, shadow drop. 5 ações (Fechar/Minimizar/Maximizar/Fixar/Renomear) 32h cada com ícone Material 20px tertiary + label Inter 14 secondary. Hover bg --surface-secondary.

Notas

Slot via React.children: passe qualquer componente (Boleta, Card, gráfico, etc.) como filho. O componente expõe estado controlado e não-controlado para activeTool/activeTab.