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:
Exemplo de utilização:
Para mais detalhes e/ou colaboração, fork neste repo:
https://github.com/rpmeir/tswiper
https://packagist.org/packages/rpmeir/tswiper
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:
- <?php
- use Rpmeir\TSwiper\TSwiper;
- use Adianti\Control\TPage;
- use Adianti\Widget\Container\THBox;
- use Adianti\Widget\Container\TVBox;
- use Adianti\Widget\Util\TXMLBreadCrumb;
- /**
- * TSwiperView
- *
- * @version v1.0.0
- * @package tswiper
- * @author Rodrigo Pires Meira
- */
- class TSwiperView extends TPage
- {
- public function __construct()
- {
- parent::__construct();
- $items = [];
- $items[] = (object) ['content' => 'Slide 1 <br> A'];
- $items[] = (object) ['content' => 'Slide 2 <br> B'];
- $items[] = (object) ['content' => 'Slide 3 <br> C'];
- $items[] = (object) ['content' => 'Slide 4 <br> D'];
- $items[] = (object) ['content' => 'Slide 5 <br> E'];
- $items[] = (object) ['content' => 'Slide 6 <br> F'];
- $items[] = (object) ['content' => 'Slide 7 <br> G'];
- $items[] = (object) ['content' => 'Slide 8 <br> H'];
- $items[] = (object) ['content' => 'Slide 9 <br> I'];
- $items[] = (object) ['content' => 'Slide 10 <br> J'];
- $template = '<b>teste</b><br>{content}';
- $hbox = new THBox;
- $swiper1 = new TSwiper();
- $swiper1->setSlidesPerView(2, true);
- $swiper1->setSpaceBetween(15);
- $swiper1->enableFreeMode();
- $swiper1->enableScrollbar();
- $swiper1->{'style'} = 'height: 200px;margin:25px auto;';
- $swiper1->setItemTemplate($template);
- foreach($items as $key => $item)
- {
- $swiperitem = $swiper1->addItem($item);
- $swiperitem->{'style'} = 'border: solid 1px #ddd;border-radius: 4px';
- }
- $hbox->add($swiper1, 'width:100%;');
- $swiper2 = new TSwiper();
- $swiper2->setSlidesPerView(4, false);
- $swiper2->setSpaceBetween(15);
- $swiper2->enablePagination();
- $swiper2->{'style'} = 'height: 200px;margin:25px auto;';
- $swiper2->setItemTemplate($template);
- foreach($items as $key => $item)
- {
- $swiperitem = $swiper2->addItem($item);
- $swiperitem->{'style'} = 'border: solid 1px #ddd;border-radius: 4px';
- }
- $hbox->add($swiper2, 'width:100%;');
- $swiper3 = new TSwiper();
- $swiper3->enablePagination('fraction');
- $swiper3->centerSlides();
- $swiper3->setEffect('flip');
- $swiper3->{'style'} = 'height: 200px;width:100%;margin:25px auto;';
- $swiper3->setItemTemplate($template);
- foreach($items as $key => $item)
- {
- $swiperitem = $swiper3->addItem($item);
- $swiperitem->{'style'} = 'border: solid 1px #ddd;border-radius: 4px';
- }
- $hbox->add($swiper3, 'width:100%;');
- // wrap the page content using vertical box
- $vbox = new TVBox;
- $vbox->style = 'width: 90%; margin: auto;';
- $vbox->add(new TXMLBreadCrumb('menu.xml', __CLASS__));
- $vbox->add($hbox);
- parent::add($vbox);
- }
- }
- ?>
Para mais detalhes e/ou colaboração, fork neste repo:
https://github.com/rpmeir/tswiper
https://packagist.org/packages/rpmeir/tswiper
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!