README

Symfony UX Interactive Image 是一个整合了 Interactive Image jQuery 插件的 Symfony 扩展包。请访问 main Symfony UX 仓库

安装

使用 Composer 和 Symfony Flex 安装此扩展包

composer require baztianzh/ux-interactive-image

安装依赖

# Install the JavaScript dependencies
yarn install --force
yarn watch

使用方法

基本使用

// ...
use BaztianZh\UX\InteractiveImage\Builder\InteractiveImageBuilderInterface;

class HomeController extends AbstractController
{
    #[Route('/', name: 'app_homepage')]
    public function index(InteractiveImageBuilderInterface $builder): Response
    {
        $interactiveImage = $builder->createInteractiveImage('/build/images/my-image.jpg');

        $textItem = new TextItem(200, 20,'title', 'description');
        
        $interactiveImage->addItem($textItem);

        return $this->render('home/index.html.twig', [
            'interactiveImage' => $interactiveImage,
        ]);
    }
}

渲染

  <div class="row">
      {{ render_interactive_image(interactiveImage) }}
  </div>
  
  # You can customize by adding class
  {{ render_interactive_image(interactiveImage, {'class': 'my-class'}) }}

选项

// ...
use BaztianZh\UX\InteractiveImage\Builder\InteractiveImageBuilderInterface;

class HomeController extends AbstractController
{
    #[Route('/', name: 'app_homepage')]
    public function index(InteractiveImageBuilderInterface $builder): Response
    {
        $interactiveImage = $builder->createInteractiveImage('/build/images/my-image.jpg');

        $textItem = new TextItem(200, 20,'title', 'description');
        
        $interactiveImage->addItem($textItem);
        
        # Change default options
        $interactiveImage->getOptions()
            ->setDebug(true)
            ->setShareBox(true)
            ->setSocialMedia($socialMedia)
            ->setTriggerEvent(TriggerEventName::HOVER)
            ->setAllowHtml(true)
        ;

        return $this->render('home/index.html.twig', [
            'interactiveImage' => $interactiveImage,
        ]);
    }
}

文档

更多信息请查看 文档