Choose class style based on variable

Balkoth

Hello,

consider the following snippet taken from a bootstrap sample. How would one use latte to specify the active class style on the links based on a variable specified in the php part?

<div class="sidebar list-group" n:if="$is_member">
	<a href="#" class="list-group-item list-group-item-action active">Cras justo odio</a>
	<a href="#" class="list-group-item list-group-item-action">Dapibus ac facilisis in</a>
	<a href="#" class="list-group-item list-group-item-action">Morbi leo risus</a>
</div>

Nowhere in the documenation at https://latte.nette.org/ is a sample for this imho basic question. Generally i can not find any good documentation or good examples for latte. Not even the sample project for nette was helpfull. So in any case someone can help out here, that would be greatly appreciated.

Best regards,
Daniel

David Matějka

Hi,
for class attribute there is special n:class macro.

But generally you can use latte expression in any html attribute:

<span some-attr="foo {$condition ? bar}">

pux

As @DavidMatějka said, just use condition in class attribute. More real life example could be following:

Let's say your menu should link to different views of same presenter (note n:href attributes):

<div class="sidebar list-group" n:if="$is_member">
	<a n:href="MyPresenter:default" class="list-group-item list-group-item-action active">Cras justo odio</a>
	<a n:href="MyPresenter:detail" class="list-group-item list-group-item-action">Dapibus ac facilisis in</a>
	<a n:href="MyPresenter:list" class="list-group-item list-group-item-action">Morbi leo risus</a>
</div>

If you want to highlight (= add active class) current view, you have to pass view ID to template:

public function renderDefault()
{
    // ... code ...
    $this->template->viewId = 'default';
}

public function renderDetail()
{
    // ... code ...
    $this->template->viewId = 'detail';
}

public function renderList()
{
    // ... code ...
    $this->template->viewId = 'list';
}

After that, just add conditions to your sidebar latte code:

<div class="sidebar list-group" n:if="$is_member">
	<a n:href="MyPresenter:default" class="list-group-item list-group-item-action {if $viewId == 'default'}active{/if}">Cras justo odio</a>
	<a n:href="MyPresenter:detail" class="list-group-item list-group-item-action {if $viewId == 'detail'}active{/if}">Dapibus ac facilisis in</a>
	<a n:href="MyPresenter:list" class="list-group-item list-group-item-action {if $viewId == 'list'}active{/if}">Morbi leo risus</a>
</div>

Balkoth

Thanks for pointing me in the right directions, i got this working pretty easy.

@pux
I guess for the presenter you have to use nette? Or can this be done without? What you are mentioning here is basically what i want to achieve. I got a sidebar area with menu items and a content area where i want to display something based on the selected menu item.

If someone can point me to a sample of what i described above i guess i could work out the basics on my own.

pux

@Balkoth no you don't, you can use Latte standalone with other framework (I use it with Slim too), you just have to initialize it manually. But basic concept for your problem is the same – you have to pass some kind of view identification and decide, if your menu item is equal to current page – then add active class.

Presenters are part of fullstack Nette framework, you can find more about them here.

Other useful links:

Nette

Latte

Balkoth

I meant for the sample code you provided you have to use nette? Is there a sample on how to wire this “n:href="MyPresenter:default” up to a completely arbitrary class?

pux

Balkoth wrote:

I meant for the sample code you provided you have to use nette? Is there a sample on how to wire this “n:href="MyPresenter:default” up to a completely arbitrary class?

For n:href you have to (or at least I don't know how to use it without it). But just for condition, you can use Latte only.

More about link generator can be found here.

dakur

n:href is just another macro. It is defined in nette/application (link). You can define your own macro, but if you want to take advantage of the Presenter:action annotation, you have to have some kind of router in your application which is able to resolve Presenter:action to URL and vice-versa. That's actually one of the main reasons why people use frameworks – they integrate various tools and concepts together.

Last edited by dakur (2021-04-09 09:53)