TSwiper v1.0.0 TSwiper é um componente baseado na biblioteca Swiper para ser utilizada no Adianti Framework. Fornece funcionalidades touch e de sliders complementando funcionalidades dos outros componentes já existentes no framework. Consiste em duas classes em que seus métodos e propriedades possibilitam gerar o objeto de inicialização do objeto Swiper. Como instalar: composer require "rp...
RM
TSwiper v1.0.0  
TSwiper é um componente baseado na biblioteca Swiper para ser utilizada no Adianti Framework.

Fornece funcionalidades touch e de sliders complementando funcionalidades dos outros componentes já existentes no framework.

Consiste em duas classes em que seus métodos e propriedades possibilitam gerar o objeto de inicialização do objeto Swiper.

Como instalar:

composer require "rpmeir/tswiper:v1.0.0"


Exemplo de utilização:

 
  1. <?php
  2. use Rpmeir\TSwiper\TSwiper;
  3. use Adianti\Control\TPage;
  4. use Adianti\Widget\Container\THBox;
  5. use Adianti\Widget\Container\TVBox;
  6. use Adianti\Widget\Util\TXMLBreadCrumb;
  7. /**
  8. * TSwiperView
  9. *
  10. * @version v1.0.0
  11. * @package tswiper
  12. * @author Rodrigo Pires Meira
  13. */
  14. class TSwiperView extends TPage
  15. {
  16. public function __construct()
  17. {
  18. parent::__construct();
  19. $items = [];
  20. $items[] = (object) ['content' => 'Slide 1 <br> A'];
  21. $items[] = (object) ['content' => 'Slide 2 <br> B'];
  22. $items[] = (object) ['content' => 'Slide 3 <br> C'];
  23. $items[] = (object) ['content' => 'Slide 4 <br> D'];
  24. $items[] = (object) ['content' => 'Slide 5 <br> E'];
  25. $items[] = (object) ['content' => 'Slide 6 <br> F'];
  26. $items[] = (object) ['content' => 'Slide 7 <br> G'];
  27. $items[] = (object) ['content' => 'Slide 8 <br> H'];
  28. $items[] = (object) ['content' => 'Slide 9 <br> I'];
  29. $items[] = (object) ['content' => 'Slide 10 <br> J'];
  30. $template = '<b>teste</b><br>{content}';
  31. $hbox = new THBox;
  32. $swiper1 = new TSwiper();
  33. $swiper1->setSlidesPerView(2, true);
  34. $swiper1->setSpaceBetween(15);
  35. $swiper1->enableFreeMode();
  36. $swiper1->enableScrollbar();
  37. $swiper1->{'style'} = 'height: 200px;margin:25px auto;';
  38. $swiper1->setItemTemplate($template);
  39. foreach($items as $key => $item)
  40. {
  41. $swiperitem = $swiper1->addItem($item);
  42. $swiperitem->{'style'} = 'border: solid 1px #ddd;border-radius: 4px';
  43. }
  44. $hbox->add($swiper1, 'width:100%;');
  45. $swiper2 = new TSwiper();
  46. $swiper2->setSlidesPerView(4, false);
  47. $swiper2->setSpaceBetween(15);
  48. $swiper2->enablePagination();
  49. $swiper2->{'style'} = 'height: 200px;margin:25px auto;';
  50. $swiper2->setItemTemplate($template);
  51. foreach($items as $key => $item)
  52. {
  53. $swiperitem = $swiper2->addItem($item);
  54. $swiperitem->{'style'} = 'border: solid 1px #ddd;border-radius: 4px';
  55. }
  56. $hbox->add($swiper2, 'width:100%;');
  57. $swiper3 = new TSwiper();
  58. $swiper3->enablePagination('fraction');
  59. $swiper3->centerSlides();
  60. $swiper3->setEffect('flip');
  61. $swiper3->{'style'} = 'height: 200px;width:100%;margin:25px auto;';
  62. $swiper3->setItemTemplate($template);
  63. foreach($items as $key => $item)
  64. {
  65. $swiperitem = $swiper3->addItem($item);
  66. $swiperitem->{'style'} = 'border: solid 1px #ddd;border-radius: 4px';
  67. }
  68. $hbox->add($swiper3, 'width:100%;');
  69. // wrap the page content using vertical box
  70. $vbox = new TVBox;
  71. $vbox->style = 'width: 90%; margin: auto;';
  72. $vbox->add(new TXMLBreadCrumb('menu.xml', __CLASS__));
  73. $vbox->add($hbox);
  74. parent::add($vbox);
  75. }
  76. }
  77. ?>


Para mais detalhes e/ou colaboração, fork neste repo:

https://github.com/rpmeir/tswiper
https://packagist.org/packages/rpmeir/tswiper



Curso Dominando o Adianti Framework

O material mais completo de treinamento do Framework.
Curso em vídeo aulas + Livro completo + Códigos fontes do projeto ERPHouse.
Conteúdo Atualizado!


Dominando o Adianti Framework Quero me inscrever agora!

Comentários (1)


FS

Rodrigo.. Parabéns pelo componente.. show..
Me diga uma coisa.. Eu tô precisando criar esse efeito
de arrastar com o mouse no Kanban do Adianti.. ou seja,
quero arrastar a tela "quadros" do kanban com o uso do
mouse no modo horizontal.. semelhante ao efeito que tem
no Trello.. não sei se já viu isso.. mas é um recurso muito
legal.. pois facilita pra o usuário. Atualmente o que existe
é um scroll.. mas quando tem vários quadros fica ruim demais
a usabilidade.. Eu vi o seu componente.. no caso o vídeo
de demonstração no git.. ai vi justamente o efeito que
gostaria de aplicar no Kanban.. a pergunta é..
Como saberia me dizer como fazer isso no Kanban?
Desde já agradeço!