In which way can I define in laravel 7 with livewire 1.3 / turbolinks:5.2 / alpine#v2
current url of app for selecting current menu item(blade/bootstrap 4) ?
You can use this code:
<li class="{{ Request::is('products*') ? 'active' : '' }}">
<span>Products</span>
....
</li>
Related
I just using vue3 and want to apply dynamic style. my vue3 template like:
<ul>
<li v-for="(question, q_index) in questions" :key="q_index" v-show="question.visible" :style="{padding-left: `question.level`rem}">
<Question :title="question.title" :options="question.options" :name="question.id" :visible="question.visible" #opUpdate="opHandle"/>
</li>
</ul>
there is error on my template for '-'
Uncaught SyntaxError: Unexpected token '-'
How to set dynamic padding left css style in vue3 template?
It would suffice to remove the hyphen and use a template literal:
<ul>
<li
v-for="(question, i) in questions"
:key="i" v-show="question.visible"
:style="{ paddingLeft: `${question.level}rem` }"
>
<Question
#opUpdate="opHandle"
:title="question.title"
:options="question.options"
:name="question.id"
:visible="question.visible"
/>
</li>
</ul>
Additional: you can also use v-bind to pass object items to props that have the same name.
<Question
#opUpdate="opHandle"
v-bind="question" // takes care of `title`, `options` and `visible`
:name="question.id"
/>
You should wrap that property by quotes '' :
:style="{'padding-left': `question.level`rem}">
I am fetching a data from api and i am showing the result in li elements. The data coming is an array of object which has name and size . i want to design the li elements according to the size . How it can be done in angular 4 ?
Either write your own oderBy pipe or you can may be use https://github.com/danrevah/ngx-pipes#orderby?
You can utilize ngClass directive or class bindings [class.class-name]="booleanExpression"
<li
*ngFor="let item of data"
[class.item-big]="item.size === 'big'"
[class.item-small]="item.size === 'small'">
<!-- ... -->
</li>
or
<li
*ngFor="let item of data"
[ngClass]="{
'item-big': item.size === 'big',
'item-small': item.size === 'small'
}">
<!-- ... -->
</li>
More on that here
I want to display the image on page , my image directory path is web/symfony/web/uploads/abcd.png , any help would be appreciated..thanks
Try this: {{ asset('symfony/web/uploads/abcd.png') }}
You path must starting from symfony_project/web then path to you image 'symfony/web/uploads/abcd.png'.
According to code you've pasted in comments it would be
<li class="list-group-item"><img src="{{ asset('uploads/' ~ todo.image) }}"></li>
<li class="list-group-item">Category :{{ todo.category }}</li>
<li class="list-group-item">Description :{{ todo.description}}</li>
<li class="list-group-item">Author :{{ todo.author}}</li>
I have this block and I want to include it in some pages
<ul class="nav nav-tabs padding-18">
<li class="active">
Profile
</li>
<li>
Edit
</li>
<li>
Friends
</li>
</ul>
The first tag < li > has class named "active" , how can I applicate this class dynamically for the second or third tag < li > when I change the page ?
Compare the current route against the link's one and add the active class if it matches.
Use the ternary operator for a nice short syntax:
<li{{ (app.request.attributes.get('_route') == 'fos_user_profile_show') ? ' class="active"' }}>
I am using angular tree . It is working fine but the spacing of nodes when branching is not working...i.e they all are comming in straight line rather than at some distance from each other. Also I am getting this error on browser console.
Error: Lexer Error: Unexpected next character at columns 36-36 [?] in expression ['level-' + 1 + (row.branch.selected ? ' active':'')].
at Error (<anonymous>)
at throwError (http://localhost:8080/AngularJS/js/scripts/angular.js:6309:11)
at lex (http://localhost:8080/AngularJS/js/scripts/angular.js:6272:9)
at parser (http://localhost:8080/AngularJS/js/scripts/angular.js:6466:16)
at http://localhost:8080/AngularJS/js/scripts/angular.js:7080:29
at compileToFn (http://localhost:8080/AngularJS/js/scripts/angular.js:8973:16)
at Object.Scope.$watch (http://localhost:8080/AngularJS/js/scripts/angular.js:8305:19)
at http://localhost:8080/AngularJS/js/scripts/angular.js:13541:11
at nodeLinkFn (http://localhost:8080/AngularJS/js/scripts/angular.js:4774:13)
at compositeLinkFn (http://localhost:8080/AngularJS/js/scripts/angular.js:4365:15) <li ng-repeat="row in tree_rows | filter:{visible:true} track by row.branch.uid" ng-animate="'abn-tree-animate'" ng-class="'level-' + {{ row.level }} + (row.branch.selected ? ' active':'')" class="abn-tree-row ng-scope abn-tree-animate-enter-setup">
Here is my html file
<ul class="nav nav-list abn-tree">
<li ng-show="header" class="nav-header">{{ header }}</li>
<li ng-repeat="row in tree_rows | filter:{visible:true} track by row.branch.uid" ng- animate="'abn-tree-animate'" ng-class="'level-' + {{ row.level }} + (row.branch.selected ? ' active':'')" class="abn-tree-row"><a id="{{ row.label }}" ng- click="user_clicks_branch(row.branch)"><i ng-class="row.tree_icon" ng-click="row.branch.expanded = !row.branch.expanded" class="indented tree-icon"> </i><span class="indented tree-label">{{ row.label }}</span></a></li>
</ul>
You seem to be trying to use my angular-bootstrap-nav-tree.
The project has been updated recently to work well under Bootstrap 2 or Bootstrap 3, and also to work with Angular 1.1.5 or Angular 1.2.0 ( and is now MIT licence )
There are 4 working example pages now, using these different versions of Bootstrap and Angular. Please take another look -- I am sure you will be able to make it work.