[ Bootstrap ] How can i create cards on first

[skinkairewalker]

hello everyone !

i am trying to add components on Start of items like this screenshot :

https://prnt.sc/uv4bva

code :

Code: Select all

ExamineDesktops()
Global deskwidth.i = DesktopWidth(0)
Global deskheight.i = DesktopHeight(0)

Procedure AppendBody(content.s)
  !$("body").append(v_content);
EndProcedure

Procedure AppendContent(component.i,content.s)
    GID = GadgetID(component)
    ! $(v_gid.div).append(v_content);
EndProcedure

Procedure teste()
  Debug "asdas"
  AppendContent(0,"<div class='card' style='width: 18rem;'>" +
 " <img class='card-img-top' src='.../100px180/' alt='Imagem de capa do card'>" +
 " <div class='card-body'>" +
 "   <h5 class='card-title'>Título do card</h5>" +
 "   <p class='card-text'>Um exemplo de texto rápido para construir o título do card e fazer preencher o conteúdo do card.</p>" +
 "   <a href='#' class='btn btn-primary' onclick='f_teste()'>Visitar</a>" +
 " </div>" +
  "</div>")
EndProcedure  

Procedure Main()
  
  OpenWindow(0, 0, 0, 600, 600, "",#PB_Window_Background)
  
  ScrollAreaGadget(0, 0, 0, deskwidth, deskheight,600,600) : CloseGadgetList()
  
  AppendContent(0,"<div class='alert alert-success' role='alert'>"+
             "<h4 class='alert-heading'>Muito bem!</h4>"+
             "<p>Aêêê! Você conseguiu ler essa mensagem de alerta. Esse texto vai ter quer se extender um pouquinho pra você conseguir ver como o espaçamento dentro de um alerta funciona.</p>"+
             "<hr>"+
             "<p class='mb-0'>Sempre que precisar, use utilitários de margem para manter As coisas perfeitas.</p>"+
             "</div>")

  AppendContent(0,"<div class='card' style='width: 18rem;'>" +
 " <img class='card-img-top' src='.../100px180/' alt='Imagem de capa do card'>" +
 " <div class='card-body'>" +
 "   <h5 class='card-title'>Título do card</h5>" +
 "   <p class='card-text'>Um exemplo de texto rápido para construir o título do card e fazer preencher o conteúdo do card.</p>" +
 "   <a href='#' class='btn btn-primary' onclick='f_teste()'>Visitar</a>" +
 " </div>" +
  "</div>")
  AppendContent(0,"<div class='card' style='width: 18rem;'>" +
 " <img class='card-img-top' src='.../100px180/' alt='Imagem de capa do card'>" +
 " <div class='card-body'>" +
 "   <h5 class='card-title'>Título do card</h5>" +
 "   <p class='card-text'>Um exemplo de texto rápido para construir o título do card e fazer preencher o conteúdo do card.</p>" +
 "   <a href='#' class='btn btn-primary' onclick='f_teste()'>Visitar</a>" +
 " </div>" +
  "</div>")
  
EndProcedure


! $("<link rel='stylesheet' type='text/css'>").attr("href", "https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css").appendTo("head");

! require(["https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.bundle.min.js"], function() {
Main()
! });

[Peter]

Besides .append() you can also use .prepend(). So you can add another card in front of any card.

Code: Select all

Procedure AppendContent(component.i,content.s, Position = #PB_Ignore)
  GID = GadgetID(component)
  If Position <> #PB_Ignore
    ! $(".card:eq(" + v_position + ")").prepend(v_content);
  Else
    ! $(v_gid.div).append(v_content);
  EndIf
EndProcedure

Code: Select all

  AppendContent(0,"<div class='card' style='width: 18rem;'>" +
                  " <img class='card-img-top' src='.../100px180/' alt='Imagem de capa do card'>" +
                  " <div class='card-body'>" +
                  "   <h5 class='card-title'>0Título do card</h5>" +
                  "   <p class='card-text'>Um exemplo de texto rápido para construir o título do card e fazer preencher o conteúdo do card.</p>" +
                  "   <a href='#' class='btn btn-primary' onclick='f_teste()'>Visitar</a>" +
                  " </div>" +
                  "</div>", 0)

However, this code is not bullet-proof. If I were you, I would use different functions to add the content to your site (like AddHeader(), AddCard(), etc.)

[skinkairewalker]

thanks you very much @Peter