Destaques importantes

Evento de abrir e fechar modal

Qualquer componente pode receber os seguintes paramentos que serão utilizados para abertura e fechamento de modal

data-nomeDoComponente-open="nomeDoComponente-referenciaParaCadaItem"

data-ref="nomeDoComponente-referenciaParaCadaItem"

data-nomeDoComponente-close="nomeDoComponente-referenciaParaCadaItem"

Graph d3:


                      <div class="graph-d3">
    <div class="graph__legend flex flex-row text-seventieslean">
    </div>

    <script src="https://d3js.org/d3.v4.min.js"></script>

    <svg id="graph-d3-svg" width="1000" height="1000" data-graph-conections="graph"></svg>

    <script>
      var graph = {
        "nodes": [{
            "id": 1,
            "name": "A I G AGENCIA DE VIAGENS E CONFECCOES LTDA",
            "nivel": 0,
            "protesto": 'true'
          },
          {
            "id": 2,
            "name": "A I G AGENCIA DE VIAGENS E CONFECCOES LTDA",
            "nivel": 1,
          },
          {
            "id": 3,
            "name": "A I G AGENCIA DE VIAGENS E CONFECCOES LTDA",
            "nivel": 1,
          },
          {
            "id": 4,
            "name": "A I G AGENCIA DE VIAGENS E CONFECCOES LTDA",
            "nivel": 1,
          },
          {
            "id": 5,
            "name": "A I G AGENCIA DE VIAGENS E CONFECCOES LTDA",
            "nivel": 2,
            "protesto": 'false'
          },
          {
            "id": 6,
            "name": "A I G AGENCIA DE VIAGENS E CONFECCOES LTDA",
            "nivel": 2,
            "protesto": 'true'
          },
          {
            "id": 7,
            "name": "A I G AGENCIA DE VIAGENS E CONFECCOES LTDA",
            "nivel": 2,
            "protesto": 'false',
          },
          {
            "id": 8,
            "name": "A I G AGENCIA DE VIAGENS E CONFECCOES LTDA",
            "nivel": 2,
            "protesto": 'unknown'
          },
          {
            "id": 9,
            "name": "A I G AGENCIA DE VIAGENS E CONFECCOES LTDA",
            "nivel": 2,
            "protesto": 'unknown'
          },
          {
            "id": 10,
            "name": "A I G AGENCIA DE VIAGENS E CONFECCOES LTDA",
            "nivel": 2,
            "protesto": 'unknown'
          },
          {
            "id": 11,
            "name": "FO",
            "nivel": 2,
            "protesto": 'unknown'
          },
          {
            "id": 12,
            "name": "FO",
            "nivel": 2,
            "protesto": 'false'
          },
          {
            "id": 13,
            "name": "FO",
            "nivel": 2,
            "protesto": 'unknown'
          },
          {
            "id": 14,
            "name": "FO",
            "nivel": 2,
            "protesto": 'unknown'
          },
          {
            "id": 15,
            "name": "FO",
            "nivel": 2,
            "protesto": 'false'
          }
        ],
        "links": [{
            "source": 1,
            "target": 2
          },
          {
            "source": 1,
            "target": 3
          },
          {
            "source": 1,
            "target": 4
          },
          {
            "source": 2,
            "target": 5
          },
          {
            "source": 2,
            "target": 7
          },
          {
            "source": 2,
            "target": 8
          },
          {
            "source": 2,
            "target": 9
          },
          {
            "source": 2,
            "target": 10
          },
          {
            "source": 3,
            "target": 6
          },
          {
            "source": 3,
            "target": 11
          },
          {
            "source": 4,
            "target": 12
          },
          {
            "source": 4,
              "target": 13
          },
      {
          "source": 4,
          "target": 14
        },
          {
            "source": 4,
            "target": 15
          }
        ]
      }
    </script>
  </div>

Smart Score:

É possível alterar a imagem do score alternando a class da tag imagem entre as seguintes opções:
- smart-score-low
- smart-score-medium
- smart-score-high

Smart Score

567

risco alto


                      <div class="border border-marcelosgrey bg-cream rounded px-2.5 pb-1 text-center">
    <div class="text-seventieslean text-sm">
      <span>Smart</span>
      <strong>Score</strong>
    </div>
    <div class="flex flex-row items-center justify-center">
      <span class="text-lg font-medium">567</span>
      <img class="smart-score-low ml-2" width="40" height="30">
    </div>
    <div class="text-xs leading-tight text-seventieslean">
      risco alto
    </div>
  </div>

Alerts:

É possível definir qual direção deseja que o Alert saia da tela: alert-top, alert-right, alert-bottom e alert-left

Alert content


                      <div class="alert alert-success alert-left">
      Alert content
      <span  class="alert-close"></span>
  </div>

Ops algo de errado


                      <div class="alert alert-danger alert-top">
    Ops algo de errado
    <span  class="alert-close"></span>
  </div>

Info/warning


                      <div class="alert alert-info alert-bottom">
    Info/warning
    <span  class="alert-close"></span>
  </div>

Dialog:


                      <div class="dialog" tabindex="-1" role="dialog" aria-modal="true" data-ref="dialog-teste">
    <div class="dialog-header">
      <h1>Title</h1>
      <div class="dialog-close-button" data-dialog-close="dialog-teste"></div>
    </div>
    <div class="dialog-content">
      <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At</p>
      <span class="text-assistive">Mostrando dados de 01/02/2017 até 29/1/2021 (última data disponível)</span>
    </div>
    <div class="dialog-footer">
      <button class="btn btn-default" data-dialog-close="dialog-teste">Cancelar</button>
      <button class="btn bg-goldcashu border-notblanco text-blanco font-bold">Confirmar</button>
    </div>
  </div>

Toastr:

Hello, world! This is a toast message.


                      <div class="toastr">
    <h4 class="text-goldcashu">Cashu</h4>
    <p class="text-assistive-bold">Hello, world! This is a toast message.</p>
  </div>

Multiple select:


                      <div class="select css-container" data-ref="select-teste">
    <div class="select__control">
      <div class="select__control--search">
        <span class="select__icon"></span>
        <input type="text" placeholder="Buscar" class="select__input"></div>
        <span class="select__close" data-select-close="select-teste"></span>
      </div>
      <div class="select__list-options" data-name="tipo-estabelecimento" data-options="Açougues, Comércio de imovies, Hotelaria">
    </div>
  </div>

Paragraph:

Este é um parágrafo


                      <p>Este é um parágrafo</p>

Paginator:


                      <div class="container position-relative">
    <div class="pt-md pb-md text-center">
      <ul class="pagination">
        <a class="page-item" href="#">Anterior</a>

        <a class="page-item" href="#">1</a>

        <a class="page-item active" href="#">2</a>

        <a class="page-item" href="#">3</a>

        <a class="page-item" href="#">Próximo</a>
      </ul>
    </div>
  </div>

Buttons:


                      <button class="btn btn-default">Botão padrão</button>


                      <button class="btn btn-ghost">Botão ghost</button>


                      <button class="btn btn-default btn-rounded">Botão arredondado</button>

Button Group:

Gráfico Lista Mapa


                      <div class="btn-group">
    <input id="grafico" type="radio" name="tipo" value="grafico">
    <label for="grafico">Gráfico</label>
    <input id="lista" type="radio" name="tipo" value="lista">
    <label for="lista">Lista</label>
    <input id="mapa" type="radio" name="tipo" value="mapa">
    <label for="mapa">Mapa</label>
  </div>

Checkbox:

Checkbox desabilitado Checkbox marcado - desabilitado


                      <input id="check1" type="checkbox" disabled="" class="checkbox">
  <label for="check1">Checkbox desabilitado</label>
  <input id="check2" type="checkbox" class="checkbox">
  <label for="check2"></label>
  <input id="check3" type="checkbox" class="checkbox">
  <label for="check3"></label>
  <input id="check4" type="checkbox" disabled="" class="checkbox" checked="">
  <label for="check4">Checkbox marcado - desabilitado</label>

Container:

Container

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At

Mostrando dados de 01/02/2017 até 29/1/2021 (última data disponível)


                      <div class="container">
    <h1>Container</h1>
    <p class="mt-xs">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
      labore et dolore magna aliquyam erat, sed diam voluptua. At</p><span
      class="text-assistive text-seventieslean font-bold">Mostrando dados de 01/02/2017 até 29/1/2021 (última data
      disponível)</span>
    <div class="container-content mt-sm"></div>
  </div>

Date:


                      <input type="date" class="form-input">

Form:

Default

Text input

assistive text

Correct

Text input

Muito bem

Wrong

Text input

Algo errado

Select

Textarea

Range

Paginação

Labels

LabelInformation
LabelInformation


                      <input type="date" class="form-input">

Navbar:


                      <nav class="nav-bar flex justify-between">
    <div class="logo-cashu"></div>
    <div>
      <div class="icon icon-smart-business-report"></div>
      <span class="text-assistive bold">Smart business report</span>
    </div>
  </nav>

Radio Button:

Radio

Radio desmarcado

Radio marcado - desabilitado

Radio desabilitado


  <div class="radio-button__container mx-6">
    <input id="radio1" type="radio" name="radio-group" class="radio-button" checked="" hidden>
    <label class="radio-button-label pl-6">
      Radio
    </label>
  </div>

Search:

É possível controlar o tamanho do container passando a class de controle do tailwindcss (https://tailwindcss.com/docs/width) que define o width


                      <div class="search-input-container">
    <span class="search-input-addon">
      <span class="search-icon"></span>
    </span>
    <input class="form-input search" type="text" placeholder="Buscar">
  </div>

Sidebar:


                      <nav class="side-nav">
    <header>
      <h4>Title</h4>
    </header>
    <ul>
      <li><a href="#">Item 1</a></li>
      <li><a href="#">Item 2</a></li>
      <li><a href="#">Item 3</a></li>
    </ul>
  </nav>

Switch:


                      <div class="switch-box"><label class="switch"><input type="checkbox" hidden checked=""><span class="slider"></span></label>
  </div>
  <div class="switch-box"><label class="switch"><input type="checkbox" hidden><span class="slider"></span></label></div>
  <div class="switch-box"><label class="switch"><input type="checkbox" hidden disabled=""><span class="slider"></span></label>
  </div>

Tab:

Visão geral

Faturamento

Fluxo de caixa

Curva ABC

Lastro

Protestos

Dados cadastrais

Visão geral


                      <div class="tabs">
    <div class="tablist">
      <div class="tab" role="tab" aria-selected="true">Visão geral</div>
      <div class="tab" role="tab" aria-selected="false">Faturamento</div>
      <div class="tab" role="tab" aria-selected="false">Fluxo de caixa</div>
      <div class="tab" role="tab" aria-selected="false">Curva ABC</div>
      <div class="tab" role="tab" aria-selected="false">Lastro</div>
      <div class="tab" role="tab" aria-selected="false">Protestos</div>
      <div class="tab" role="tab" aria-selected="false">Dados cadastrais</div>
    </div>
    <div role="tabpanel">
      <p>Visão geral</p>
    </div>
  </div>

Table:

Id do pedido	Valor	Data da ocorrência
726241	R$ 1.899,40	14/03/2020
741778	R$ 1.714,25	09/03/2020
761384	R$ 1.376,50	14/03/2020
761162	R$ 1.804,70	22/03/2020
773495	R$ 1.349,10	21/04/2020
773268	R$ 1.468,60	27/04/2020
772382	R$ 1.265,75	06/05/2020
772007	R$ 2.747,40	24/05/2020


                      <table class="table w-full border border-1 border-marcelosgrey rounded">
    <thead class="align-middle">
      <tr class="bg-notblanco h-20">
        <th class="px-4">Id do pedido</th>
        <th class="px-4">Valor</th>
        <th class="px-4">Data da ocorrência</th>
      </tr>
    </thead>
    <tbody>
      <tr class="h-20 align-middle ">
        <td class="px-4 text-sm text-blackcashu font-medium">726241</td>
        <td class="px-4 text-sm text-seventieslean font-medium">R$ 1.899,40</td>
        <td class="px-4 text-sm text-seventieslean font-medium">14/03/2020</td>
      </tr>
      <tr class="h-20 align-middle ">
        <td class="px-4 text-sm text-blackcashu font-medium">741778</td>
        <td class="px-4 text-sm text-seventieslean font-medium">R$ 1.714,25</td>
        <td class="px-4 text-sm text-seventieslean font-medium">09/03/2020</td>
      </tr>
      <tr class="h-20 align-middle ">
        <td class="px-4 text-sm text-blackcashu font-medium">761384</td>
        <td class="px-4 text-sm text-seventieslean font-medium">R$ 1.376,50</td>
        <td class="px-4 text-sm text-seventieslean font-medium">14/03/2020</td>
      </tr>
      <tr class="h-20 align-middle ">
        <td class="px-4 text-sm text-blackcashu font-medium">761162</td>
        <td class="px-4 text-sm text-seventieslean font-medium">R$ 1.804,70</td>
        <td class="px-4 text-sm text-seventieslean font-medium">22/03/2020</td>
      </tr>
      <tr class="h-20 align-middle ">
        <td class="px-4 text-sm text-blackcashu font-medium">773495</td>
        <td class="px-4 text-sm text-seventieslean font-medium">R$ 1.349,10</td>
        <td class="px-4 text-sm text-seventieslean font-medium">21/04/2020</td>
      </tr>
      <tr class="h-20 align-middle ">
        <td class="px-4 text-sm text-blackcashu font-medium">773268</td>
        <td class="px-4 text-sm text-seventieslean font-medium">R$ 1.468,60</td>
        <td class="px-4 text-sm text-seventieslean font-medium">27/04/2020</td>
      </tr>
      <tr class="h-20 align-middle ">
        <td class="px-4 text-sm text-blackcashu font-medium">772382</td>
        <td class="px-4 text-sm text-seventieslean font-medium">R$ 1.265,75</td>
        <td class="px-4 text-sm text-seventieslean font-medium">06/05/2020</td>
      </tr>
      <tr class="h-20 align-middle ">
        <td class="px-4 text-sm text-blackcashu font-medium">772007</td>
        <td class="px-4 text-sm text-seventieslean font-medium">R$ 2.747,40</td>
        <td class="px-4 text-sm text-seventieslean font-medium">24/05/2020</td>
      </tr>
    </tbody>
  </table>

Destaques importantes

Evento de abrir e fechar modal

Graph d3:

Smart Score:

Alerts:

Dialog:

Title

Toastr:

Cashu

Multiple select:

Popover:

Title

Paragraph:

Paginator:

Tooltip:

Buttons:

Button Group:

Checkbox:

Container:

Container

Date:

Form:

Default

Correct

Wrong

Select

Textarea

Range

Paginação

Labels

Navbar:

Radio Button:

Search:

Sidebar:

Switch:

Tab:

Table:

Destaques importantes

Evento de abrir e fechar modal

Graph d3:

Smart Score:

Alerts:

Dialog:

Toastr:

Cashu

Multiple select:

Popover:

Title

Paragraph:

Paginator:

Tooltip:

Breadcrumb:

Buttons:

Button Group:

Checkbox:

Container:

Container

Date:

Form:

Default

Correct

Wrong

Select

Textarea

Range

Paginação

Labels

Navbar:

Radio Button:

Search:

Sidebar:

Switch:

Tab:

Table: