I am trying to add tailwind-css to Navlink(react-router-dom). I want to add active style. To add active styles I can use
<NavLink to="/faq" activeStyle={{fontWeight: "bold",color: "red"}}>
FAQs
</NavLink>
Is there a way to do this with tailwind-css, I don't want to use css, maybe something like this?
<NavLink to="/faq" className={`${active?'font-bold text-red':'text-gray-900'}...`}>
FAQs
</NavLink>
NavLink component has an activeClassName property.
https://reactrouter.com/web/api/NavLink
V6 of React Router does not have the activeClassName property anymore.
Here's how to style NavLink with Tailwind with the new version of ReactRouter and Remix
<NavLink
to="tasks"
className={({ isActive }) =>
isActive ? activeClassName : undefined
}
>
Tasks
</NavLink>
Taken from here https://remix.run/docs/en/v1/api/remix#navlink
Related
for your understanding i attached w3school screenshot.
enter image description here
if u have ever visited w3school website u will understand my requirement easily.
i want to create these html sidebar dynamic from my admin dashboard. first i will create one sidebar title name then insert content according to title name and so on..... for best understanding you can assume that i want to create w3school clone dynamic from where i can dynamic create sidebar and content. i read about react router dom and many more but not able to create like this.
You can use react-router for navigation and then render according to the route
https://codesandbox.io/s/c2zs4
here is the example I found, it used react-router for navigation and render components according to the route.
add in _app.js file
you can put a header here
<div className="flex">
<div className="W-2/6>
<Sidebar/>
</div>
<div className="w-4/6">
page component here
</div>
</div>
and footer here
I used tailwind CSS
I'm building an app with a v-app component at the root, using a v-navigation-drawer and I'd like to add a "Chat" page, where I'd also like to use v-navigation-drawer.
Problem is components don't display correctly. When I open the v-navigation-drawer of the app, it shifts the v-main of the chat page.
Opened app navigation
Closed app navigation, what I'd like regardless of whether the menu is collapsed or not
Here is my chat page's template:
<template>
<v-layout>
<v-navigation-drawer
permanent
color="deep-purple accent-6"
v-model="drawer"
:mini-variant.sync="mini"
>
<v-list-item class="px-2">
<v-list-item-avatar>
<v-img
src="https://media-exp1.licdn.com/dms/image/C4D03AQHYJ44y1nW7Rw/profile-displayphoto-shrink_800_800/0/1634940206364?e=1645660800&v=beta&t=ni_NG94SNNVHDbzpVEtKwftayQzDy1bDtse2FavjDSU"
></v-img>
</v-list-item-avatar>
<v-list-item-title>Cosmic Darine</v-list-item-title>
<v-btn icon #click.stop="mini = !mini">
<v-icon>mdi-chevron-left</v-icon>
</v-btn>
</v-list-item>
<v-divider></v-divider>
<v-list dense>
<v-list-item v-for="item in menuItems" :key="item.title" link>
<v-list-item-icon>
<v-icon>{{ item.icon }}</v-icon>
</v-list-item-icon>
<v-list-item-content>
<v-list-item-title>{{ item.title }}</v-list-item-title>
</v-list-item-content>
</v-list-item>
</v-list>
</v-navigation-drawer>
<v-main>
<v-container>
<v-row>
I am a content
</v-row>
<v-row>
<write-bar />
</v-row>
</v-container>
</v-main>
</v-layout>
</template>
Does anyone have a solution for this problem?
I managed to find a solution. I added 'absolute' as a prop to v-navigation-drawer. The menu open above the content (I wanted that, so it's okay) and doesn't shift the content anymore. But if anyone would like to shift content when it opens only when needed, I guess you have to use the #media rule and margin with a negative value to shift back when the screen width is under a specific value.
I have a question on the way react components interact with each other. My question is this: say I have a child component called About.js, and I also have some sass styles lets say about.scss, in my about component I do a require(./about.scss) and import the styles i need for my component.
When I render in a parent component, does the about.scss styles conflict with the styles present in the parent.scss file?
What is the best way to go about styling individual components and setting up the file structure?
Thanks!
Yes, when you import your SCSS file from your React file, what webpack does is it take your SCSS file and transform it into CSS file, and wraps up the content with the style tag and inject it into your page, so at the end of the day, your DOM will look like this:
<style>
// parent.css
.conflict{
background: skyblue;
}
</style>
<style>
// about.css
.conflict{
background: hotpink;
}
</style>
And most React developers prefer method of styling a component is using the inline-style
const App () => (
<div
style={{
background: 'skyblue',
}}
>
</div>
);
I am trying use inline css in html content but it shows the error you see in the picture below;
How can I use inline css in spfx webpart ?
<div className={`ms-Grid-col ms-u-md3`} style={{"border-color": "black"}}>
//Some Code
</div>
Simple way to do it is as follows,
It is not a good practice to do it. You should better use the sass files and define your styles there. Since this is not HTML, but JSX you can do something like this:
var style = {
color: 'white',
fontSize: 200
};
return <div style={style}> Have a good and productive day! </div>;
but this is not recommended. The code piece is not mine, but taken from this post React.js inline style best practices
Is there a Yeoman way of creating all the necessary templates required when adding a new view in a JHipster app? I want a simple static page, or a page that doesn't require a new entity. Let's say I want to add an "About" page, I believe I would need to do the following:
Add the "About" link to src/main/webapp/app/layouts/navbar/navbar.html:
<li ui-sref-active="active">
<a ui-sref="about" ng-click="vm.collapseNavbar()">
<span class="glyphicon glyphicon-wrench"></span>
<span class="hidden-sm" data-translate="global.menu.about">About</span>
</a>
</li>
Create the following new files:
src/main/webapp/app/about/about.controller.js
src/main/webapp/app/about/about.html
src/main/webapp/app/about/about.state.js
src/main/webapp/i18n/en/about.json, and any other language...
... and add the following lines in webapp/index.html:
<script src="app/about/about.state.js"></script>
<script src="app/about/about.controller.js"></script>
... and any necessary content to src/main/webapp/i18n/en/global.json.
Am I forgetting something?
Does this need to be done manually? Is there a Yeoman command for creating a new view that is independent of an entity? I know that this question has been asked, but I'm hoping that things have changed since then.
The jhipster module Nav Element do it automatically for us. In addition it creates an angular component too for the new item in the menu.
Here is instruction how to add static page:
https://codefitter2.blogspot.com/2016/09/how-to-add-new-menu-and-static-page-in.html
You may try creating an entity without any fields or relations and with "--skip-server" option.
yo jhipster:entity about --skip-server