How to add text beside the ionicons. I only see the ionicons but the text is unable to show.Iwant to show 'More' and 'Less' with the ionicons when user click on it.
Example, preset condition is ion-plus sign and 'More'. Click 'More', it will show ion-minus and 'Less'. Function wise is working. Only 'more and 'less' not shown.
Below is my code
<div ng-click="toggleon()" <i class="icon" ng-class="showMore ? 'ion-android-remove-circle assertive' : 'ion-android-add-circle positive'"></i><i class="padding" ng-class="showMore ? 'Less' : 'More'"></i></div>
</div>
ng-class is used to apply a CSS class to an element. It cannot be used to apply text. Use ng-bind instead. Also use <span> and not <i> for texts.
<div ng-click="toggleon()"> <i class="icon" ng-class="showMore ? 'ion-android-remove-circle assertive' : 'ion-android-add-circle positive'"></i><span class="padding" ng-bind="showMore ? 'Less' : 'More'"></span></div>
Related
Okay .. I want to create a button once it's clicked it allows you to add a photo .. like the input tag of attribute type = "file" .. I've already designed the button shape .. all what is remained is to click on it so a window blows up .. and choose a photo to display in the post box ..
enter image description here
<div class="extras">
<ul class="icons">
<li class="photos">
<i class="fa-solid fa-image">
</i>
</li>
<li class="tag"> <i class="fa-solid fa-user-tag"> </i> </li>
</ul>
<div class="button">
<button>launch</button>
</div>
</div>
here is the element of class photos which I want it to display the window of adding a photo once it's clicked .. exactly like .. just different button style ..
If I understand well, what you have to do is this: first you'll need to add an id to your <li class="photos"> and your <button>launch</button>. And also remove your <i id="up"> component since you'll add it with JavaScript. See the html bellow.
<div class="extras">
<ul class="icons">
<li id="photos-component" class="photos">
<!-- there used to be an <i> tag here! -->
</li>
<li class="tag">
<i class="fa-solid fa-user-tag"> </i>
</li>
</ul>
<div class="button">
<button id="launch-button">launch</button>
</div>
</div>
After adding the ids, you'll need to call a JavaScript file by inserting a <script src="insert-your-file-name.js"></script> at the bottom of your <body>. Probably, you already have done this. If not, do it.
In that file, you'll want to add the following code.
// This constant bellow contains your photos component
const photosComponent = document.getElementById("photos-component");
// This constant bellow contains your launch button
const button = document.getElementById("launch-button");
// This whole chunk of code bellow is a function that will run whenever
// you click the button
button.addEventListener("click", () => {
// Here we create a new empty <input> tag
const fileInput = document.createElement("input");
// Here we add all the attributes for the <input> tag
fileInput.id = "up";
fileInput.type = "file";
fileInput.classList.add("fa-solid fa-image");
// Here we add the input to the photos component
photosComponent.append(fileInput);
// Here we change the style of the button
button.classList.add("insert-button-style");
})
Hopefully it helps. You can always read more about the JavaScript HTML DOM (Document Object Model) by googleing it.
These links might help you in your search:
https://www.w3schools.com/js/js_htmldom.asp
https://www.javascripttutorial.net/javascript-dom/
I am new to the material UI. here, I have two tabs and that tabs has some content.
Now, I am trying to add the text overflow elipses to this . But the text is in span over there,
<Tab
key={`${tab}_${index}`}
classes={{
root: css.tabRoot,
selected: css.tabSelected,
wrapper: css.tabIconWrapper,
labelIcon: css.tabLabelIcon
}}
disableRipple
label={tab.label}
value={tab.value}
icon={
tab.icon ? <Icons className={css.tabIcons} iconname={tab.icon} /> : null
}
/>
Now, Here the label is having a bit more length . So, I am just trying to limit it as max-width : 100px;
But in the material UI it is getting a bit complicated to override .
SO, what I tried is ,
label={<Typography className={selectedTab ? '' : ''}>{tab.label}</Typography>}
But here
I am not able to get which tab has been selected , I mean I want to add that class if the tab is selected.
can any one help me with this ? any solution like with or without typography works for me.
thanks.
div class="MuiTabs-scroller MuiTabs-fixed" role="tablist" style="overflow: hidden;">
<div class="MuiTabs-flexContainer">
<button class="MuiButtonBase-root MuiTab-root VIP_tabRoot MuiTab-textColorInherit Mui-selected VIP_tabSelected" tabindex="0" type="button" role="tab" aria-selected="true">
<span class="MuiTab-wrapper VIP_tabIconWrapper">Test004</span>
</button>
</div>
</div>
I'm trying to use [ngClass] with multiple conditions to change the caret of a open/close panel.
Currently the down arrow works flawlessly.
When I click the arrow and the condition changes to false, it changes the icon to a empty box and is not recognizing the correct class name.
<i [ngClass]="{'fa fa-caret-up pull-right': isActive4 == true,
'fa fa-caret-down pull-right': isActive4 == false}"
(click)="section4Click()"></i>
The section4Click() changes isActive4 to true/false depending on what it was before.
When I inspect element of the box that shows up after I click the down caret (which works), I get the following class name...
fa-caret-up
instead of...
fa fa-caret-up pull-right
Anyone know why this occurs? It seems like its doing half the job...
I've also tried just doing isActive4 and !isActive4, and the same happens.
It's hard to tell from looking at your code. But you can try this:
<i class="fa pull-right" [class.fa-caret-up]="isActive4" [class.fa-caret-down]="!isActive4" (click)="section4Click()"></i>
I would also recommend printing the values to see what you get:
<p>{{ isActive4 === true }}</p>
This will work.
<i class="fa pull-right" [ngClass]="{'fa-caret-up': isActive4 == true,
'fa-caret-down': isActive4 == false}"
(click)="section4Click()"></i>
I'm using an icon, which I display based on a condition using ng-class. I want to add ID's for both the HTML tags.
<i ng-show="ctrl.data.length > 1"
ng-class="{'glyphicon glyphicon-chevron-down': !ctrl.isOpen,
'glyphicon glyphicon-chevron-up': ctrl.isOpen}">
</i>
In order to have a dynamic ID value, wrap it in {{}} so that Angular interprets that value.
<i ng-show="ctrl.data.length > 1" id="{{ctrl.isOpen ? 'chevron-up' : 'chevron-down'}}"
ng-class="{'glyphicon glyphicon-chevron-down': !ctrl.isOpen,
'glyphicon glyphicon-chevron-up': ctrl.isOpen}">
</i>
How can I (using either AngularJs or HTML), swap my returned text for a Font Awesome font when the text matches a certain string?
For example: If my {{profileData.channels}} returns the following string:
Twitter, YouTube and Facebook - how can I substitute these for the Font Awesome fonts; fa fa-twitter-square; fa fa-youtube-square; fa fa-facebook-square
Below is my <div> where I would like to display these:
<div class="mentionsMeta">
<div>
<h2>Channels></i></h2>
<hr>
<span class="itemInfo">{{profileData.channels}}</span>
</div>
</div>
I think you are looking at a logic like this.
<span class="itemInfo {{ profileData.channels === 'Twitter' ? 'fa fa-twitter-square' : '' }}">{{profileData.channels === 'Twitter' ? '' : profileData.channels}}</span>
Of course you can make this much better, for example you can change your profileData array of string with an array of objects where you set the corresponding class, so that you will have something like
<span ng-if="profileData.isSpecial" class="itemInfo {{profileData.channels}}"></span>
<span ng-if="!profileData.isSpecial" class="itemInfo">{{profileData.channels}}</span>