Code Monkey home page Code Monkey logo

twig-components-bundle's Introduction

Twig Components

A Symfony 4 bundle for the Twig Components library.

This bundle allows you to create robust, reusable and automatically documented Twig components using the new component tag. Twig components allow you to quickly build and maintain your own UI toolkit, where each button, table or card has to be designed only once and can be used throughout your entire application.

For more information about Twig Components, see the documentation.

Setup and Usage

You can install this bundle through Composer:

$ composer require redant/twig-components-bundle

When this bundle is enabled in your Symfony bundle configuration, if will search all your template directories for defined components, every time the container is compiled.

This includes:

  • The templates/components folder (main application templates)
  • Every installed bundle's Resources/views/components folder (if defined)

Global variable

If you don't like the name of the global variable that defines the components, use the twig_components.global_variable parameter to change this:

# app/config/twig.yaml

twig_components:
    global_variable: 'ui'

This will register the button component as ui.button().

Note: If you set the prefix to false, no Twig global will be registered for defined components. You can then only use the render_component function.

Namespaces

If you define your components in subdirectories of the components/ directory, the additional directories will namespace your component.

For example, a component defined in components/ui/button.html.twig will be accessible as component.ui.button({}) or via render_component('ui.button', {}).

Generate documentation

You can generate a static HTML file with documentation using the supplied twig:components:generate-docs command.

Description:
  Generate documentation for Twig components

Usage:
  twig:components:generate-docs [options] <path>

Arguments:
  path                  Output directory

Options:
  --title=TITLE         Title for the generated documentation [default: "Twig components"]
  --generic             Disregard twig_component.global_variable settings and only show render_component() examples```

When you start your component template file with a comment ({# ... #}), its contents will be added at the top of the documentation for the component.

License

This library is licensed under the MIT License - see the LICENSE file for details.

twig-components-bundle's People

Contributors

cinamo avatar ricohumme avatar rebruch avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.