I would like to use feather-icons in Asp.net Core cshtml files. I followed their github steps but it won't show as it is stated in the docs:
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link" asp-controller="Home">
<i data-feather="home"></i>
Home
</a>
</li>
</ul>
_Layout
<script src="~/lib/feather-icons/dist/feather.js"></script>
You should add this code feather.replace() in js first.
And you can use online js reference, you can refer to this.
#{
ViewData["Title"] = "Test";
Layout = "~/Views/Shared/_Layout.cshtml";
}
#section Scripts{
<script src="https://unpkg.com/feather-icons"></script>
<script>
feather.replace()
</script>
}
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link" asp-controller="Home">
<i data-feather="home"></i>
Home
</a>
</li>
</ul>
Here is the result:
Related
I ran the create using the jsbundler and cssbundler, it installed the appropiate files.
$ rails new app -j esbuild --css bootstrap
I created a navbar from the bootstrap doc on a partial and rendered on the application.html.erb
but when I run
$ ./bin/dev
on the navbar when I click on the dropdown or the hamburger button nothing happens
<!--./app/views/shared/_navbar.html.erb-->
<nav class="navbar navbar-expand-lg bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link disabled">Disabled</a>
</li>
</ul>
<form class="d-flex" role="search">
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success" type="submit">Search</button>
</form>
</div>
</div>
</nav>
Also, I tryed importmap bootstrap but nothing seems to work.
You need to import bootstrap js files in your application.js, like that:
import "#hotwired/turbo-rails"
import "./controllers"
import * as bootstrap from "bootstrap"
document.addEventListener("turbo:load", () => {
var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
return new bootstrap.Tooltip(tooltipTriggerEl)
})
})
Reference: https://github.com/gorails-screencasts/bootstrap-css-bundling
Have you checked if the required bootstrap bundle js file is properly loaded?
Instead of using the asset pipeline why don't you add the required CSS and JS CDN links of bootstrap under the head tags in the application.html.erb file. I used this in my internship project and it works really well.
I have my navbar working great on fullscreen and the toggler is working on smaller screens. However, when you click on the toggler icon the navbar-items appear on the left side of the screen while the toggler-icon appears on the right. How do I fix this so that the navbar-items appear under the navbar icon and on the right side of the screen? I am using Bootstrap 5 for reference.
<nav class="navbar navbar-expand-md">
<a class="navbar-brand" href="/">
<img class="navbar-logo" src="{% static 'site_base/images/image1.png' %}" alt="MagPie Logo">
</a>
<button
class="navbar-toggler navbar-dark"
type="button"
data-bs-toggle="collapse"
data-bs-target="#main-navigation"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="main-navigation">
<ul class="navbar-nav ms-auto">
<li class="nav-item">
<a class="nav-link" href="#">About Us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Products</a>
<ul class="dropdown-menu">
<li class="dropdown-item">Product 1</li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Resources</a>
<ul class="dropdown-menu">
<li class="dropdown-item">User Guides</li>
<li class="dropdown-item">Videos</li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" href="/company">Company</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/contact-us">Contact Us</a>
</li>
</ul>
</div>
</nav>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link
href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="anonymous"
/>
</head>
<body>
<nav class="navbar navbar-expand-md">
<a class="navbar-brand" href="/">
<img
class="navbar-logo"
src="{% static 'site_base/images/image1.png' %}"
alt="MagPie Logo"
/>
</a>
<button
class="navbar-toggler navbar-dark"
style="background-color: red"
type="button"
data-bs-toggle="collapse"
data-bs-target="#main-navigation"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse text-end" id="main-navigation">
<ul class="navbar-nav ms-auto">
<li class="nav-item">
<a class="nav-link" href="#">About Us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Products</a>
<ul class="dropdown-menu">
<li class="dropdown-item">Product 1</li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Resources</a>
<ul class="dropdown-menu">
<li class="dropdown-item">User Guides</li>
<li class="dropdown-item">Videos</li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" href="/company">Company</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/contact-us">Contact Us</a>
</li>
</ul>
</div>
</nav>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous"
></script>
</body>
</html>
You can add text-end class on the navbar-collapse or ul.
Note: Try it on tablet to mobile size, I add background-color: red on the button, to make it visible.
Using Bootstrap 4.1 and using an example from the docs, just switching "href" for "data-target".
https://getbootstrap.com/docs/4.1/components/navs/#javascript-behavior
http://jsfiddle.net/aq9Laaew/70683/
Example
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="home-tab" data-toggle="tab" data-target="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" id="profile-tab" data-toggle="tab" data-target="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
</li>
<li class="nav-item">
<a class="nav-link" id="contact-tab" data-toggle="tab" data-target="#contact" role="tab" aria-controls="contact" aria-selected="false">Contact</a>
</li>
</ul>
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">AAA</div>
<div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">BBB</div>
<div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">CCC</div>
</div>
Tabs are working fine on all desktop browsers I have tried, including Safari, and all Android browsers I have tried as well.
However, on all iOS devices the tabs are inactive, that is, they are not switching, neither the tab links, nor the displayed content.
Anyone have an idea what I am doing wrong, or if this is a bug in Bootstrap 4.1?
According to HTML docs, a <a> is "interactive content" "if it has a href attribute". iOS implementation of this definition is literal and click events are ignored on anchors without href.
The proper way to enable clicks on iOS native devices is to use the id of the .tab-pane as href.
You could do it manually or you could use this lil' snippet which simply copies them from data-target, only on native iOS devices and only if the anchor does not already have a href attribute.
I haven't tested it on an iOS device but it should work:
$(window).on('load', () => {
let iOS = !!navigator.platform && /iPad|iPhone|iPod/.test(navigator.platform);
if (iOS)
$('[role="tablist"] .nav-link').each((i,e) => {
if (!$(e).attr('href'))
$(e).attr('href', $(e).data('target'));
})
})
Note all Bootstrap 4 tabs examples use href attributes. Before asking about or reporting a potential Bootstrap "bug", make sure your markup is valid and not missing anything compared to the Bootstrap docs examples.
Here's a test using your markup:
$(window).on('load', () => {
let iOSdevice = !!navigator.platform && /iPad|iPhone|iPod/.test(navigator.platform)
if (iOSdevice)
$('[role="tablist"] .nav-link').each((i,e) => {
if (!$(e).attr('href'))
$(e).attr('href', $(e).data('target'))
})
})
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="home-tab" data-toggle="tab" data-target="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" id="profile-tab" data-toggle="tab" data-target="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
</li>
<li class="nav-item">
<a class="nav-link" id="contact-tab" data-toggle="tab" data-target="#contact" role="tab" aria-controls="contact" aria-selected="false">Contact</a>
</li>
</ul>
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">AAA</div>
<div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">BBB</div>
<div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">CCC</div>
</div>
For iOS detection I used this SO answer.
I am trying to figure out the best way to use authentication to control which ul tag is displayed
Curent html
//wrap all this is authentication razor code?
<!-- START Profile button menu -logged in -->
<ul class="dropdown-menu dropdown-menu-right">
<li class="dropdown-header">Profile</li>
<li>
<a tabindex="-1" asp-area="" asp-controller="Manage" asp-action="Index">
<i class="si si-envelope-open pull-right"></i>
<span class="badge badge-primary pull-right">3</span>Inbox
</a>
</li>
<li>
<a tabindex="-1" asp-area="" asp-controller="Manage" asp-action="Index">
<i class="si si-user pull-right"></i>
<span class="badge badge-success pull-right">1</span>Profile
</a>
</li>
<li>
<a tabindex="-1" href="javascript:void(0)">
<i class="si si-settings pull-right"></i>Settings
</a>
</li>
<li class="divider"></li>
<li class="dropdown-header">Actions</li>
<li>
<a tabindex="-1" asp-area="" asp-controller="Account" asp-action="Lockout">
<i class="si si-lock pull-right"></i>Lock Account
</a>
</li>
<li>
<a tabindex="-1" asp-area="" asp-controller="Account" asp-action="Logout">
<i class="si si-logout pull-right"></i>Log out
</a>
</li>
</ul>
<!-- END Profile button menu -logged in-->
<!-- START Profile button menu - not logged in-->
<ul class="dropdown-menu dropdown-menu-right">
<li class="dropdown-header">Actions</li>
<li>
<a tabindex="-1" asp-area="" asp-controller="Account" asp-action="Login">
<i class="si si-logout pull-right"></i>Login
</a>
</li>
<li>
<a tabindex="-1" asp-area="" asp-controller="Register" asp-action="Register">
<i class="si si-lock pull-right"></i>Register
</a>
</li>
</ul>
<!-- END Profile button menu - not logged in -->
I found a blog post by Dave Paquette on custom tag helpers to accomplish this, but I couldn't get it to work. This html is in my partial view of my header navigation so I can't (or don't know how to check for this in the controller) so I opted to test for logged in user using Razor.
I don't see any blogs or tuorials on simple logged in user check. They all have to do with policy's, claims, etc. I just simply want to know if the user is logged in or not and display the ul dependent on that.
I think you need to use SignInManager to see if there is any user logged in. This will use Claims. If you are using the AplicationUser model you can do the following.
On your razor page use:
inject SignInManager<ApplicationUser> SignInManager
And then:
#if (SignInManager.IsSignedIn(User))
{
//some html...
}
I am trying to get a Shopping glyphcon near the "Shop" ActionLink, and this is what I get:
I want the home icon to be before the "Shop" and in the same line.
I'm using MVC5 .cshtml file
This is the Code:
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
#* Glasses Menu *#
<li class="dropdown">
Glasses <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>#Html.ActionLink("InfinityAR", "InfinityAR", "Glasses")</li>
<li>#Html.ActionLink("Google Glass", "GoogleGlass", "Glasses")</li>
#*<li class="divider"></li> //TODO: Enter here something
<li>Separated link</li>*#
</ul>
</li>
#* SDK's Menu *#
<li class="dropdown">
Developers <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li style="margin-left:10px">SDK</li>
<li class="divider"></li>
<li>#Html.ActionLink("METAIO", "Metaio", "Developers")</li>
</ul>
</li>
<li>
<span class="glyphicon glyphicon-home" />
</li>
<li>#Html.ActionLink("About", "About", "Home")</li>
<li>#Html.ActionLink("Contact", "Contact", "Home")</li>
</ul>
#Html.Partial("_LoginPartial")
</div>
I think you've confused what HTML.ActionLink() does. It generates the anchor link with tags.
So if you inspect the generated HTML code of this line:
#Html.ActionLink("Shop", "Shop", "Glasses")
It will produce something like this:
Shop
Your code will produce something like this:
Shop"><span class="glyphicon glyphicon-home" /></a>
You want to use the URL.Action() helper:
<span class="glyphicon glyphicon-home"></span> Shop