I am implementing React-accessible-accordion in my React application.The click functionality is working fine however, I do not see the arrow icon appearing on the accordion. I tried to compare it with the DOM structure shown in the example in npm and I see the div for the icon itself is not getting added to my DOM.
My code-
import React from 'react';
import ReactDOM from 'react-dom';
import {
Accordion,
AccordionItem,
AccordionItemTitle,
AccordionItemBody,
} from 'react-accessible-accordion';
import 'react-accessible-accordion/dist/fancy-example.css';
import 'react-accessible-accordion/dist/minimal-example.css';
<div className="container">
<Accordion>
<AccordionItem>
<AccordionItemTitle>
<h4>Hello, This is me..</h4>
</AccordionItemTitle>
<AccordionItemBody>
Some Text
</AccordionItemBody>
</AccordionItem>
</Accordion>
</div>
The arrow icon comes from the
<div class="accordion__arrow" role="presentation"></div>
and this is not getting added for me. Any reason why is that happening. I am using the exact demo code shown in on npm site.
Link I have referred-
https://www.npmjs.com/package/react-accessible-accordion
In my knowledge, the only thing I have not added is,
document.querySelector('[data-mount]')
Is that the reason my arrow icons are not loading?
I am not sure if this is an open bug but the examples shown has these icons in each of the accordion.
Did you import the CSS style ?
// Demo styles, see 'Styles' section below for some notes on use.
import 'react-accessible-accordion/dist/fancy-example.css';
Adding below in AccordionTitle, solves the issue-
<h3 className="u-position-relative">
Accessible Accordion
<div className="accordion__arrow" role="presentation"/>
</h3>
You need to do couple to things to make it work:
1] You need to copy all the contents of this file'react-accessible-accordion/dist/fancy-example.css'; to another file because we going to override some classes.
2] You need to add a div in the AccordionItemTitle
<AccordionItemTitle>
<h4>Hello, This is me..</h4>
<div className="accordion__arrow" role="presentation" />
</AccordionItemTitle>
3] in the stylesheet you createdm type the following styles
.accordion__item {
position: relative;
}
.accordion__arrow {
display: inline-block;
width: 24px;
height: 12px;
position: absolute;
top: 40px;
right: 15px;
margin-top: -6px;
}
The toggle button should appear after that.
add yhis piece of code
<AccordionItemTitle>
<h3 className="u-position-relative">
Accessible Accordion
<div className="accordion__arrow" role="presentation" />
</h3>
</AccordionItemTitle>
Related
I want to use content variable with in-line styles in react, but I dont know how to do this ?
CSS3
.right::after, button::after {
content: var(--content);
display: block;
position: absolute;
white-space: nowrap;
padding: 40px 40px;
pointer-events:none;
}
React Component
return (
<Button
{...configButton}
style={{'--content': "Login" }}
>
<div class="left"></div>
Login
<div class="right"></div>
{children}
</Button>
);
Ok the solution to this problem is quite simple, It made me think for a while.
The css variable that you provided works indeed.
But when it comes to the content of a psudo element then you should provide the value with a pair of quotes and it will work fine.
<Button
{...configButton}
style={{'--content': "'Login'" }}
>
change the "Login" into "'Login'" and this should work fine.
thank you.
It should work.
Are you passing style to the actual rendered element in Button component?
Is the CSS aplied?
div:after {
content: var(--test-var);
}
<div style="--test-var: 'Test'"></div>
I am using react and I was wondering, I am used to add styling directly in the ClassName.
Let's assume I want to create a seperate css file later to modify the design of the website. For instance this div has a className with the style. What if I want to add a background gradient to it. how do I achieve this from a seperate file. if I add another className it will not work.
<div className="modal-body my-2">
You will probably just have to import your css file with the styles you want to add, then add that same class name in the className tag as you would normally do, it should work without problems
import 'otherStyle.css'
.otherStyles {
//Styles here
}
<div class="currentStyle OtherStyle">
Here you go with a solution
.otherClass {
background: #eee;
}
import CSS from "./path to CSS file";
<div className={`modal-body my-2 ${CSS.otherClass}`}>
import './style1.css';
import './style2.css';
return(
<div className="first second">
</div>
)
//style1.css
.first{
width : 100%;
}
//style2.css
.second{
color : black;
}
I am working on the dynamic side bar for our project, basically what we want to do is to set up a dynamic side bar when user click on the side bar it will spread when user click back sidebar should collapse and show only icons (but not totally collapse it will keep the icons) for example before user click the icon. We are using sidenav.toggle()from angular material function which basically closes the sidebar completely and if I don't use toggle() function "Side" mode for navbar does not work. So I want collapse to icon with side mode. (The other reason we need to keep the side mode is that we also need to make sure when user spread the sidebar, right side content should push to right)
After user click the icon
Is there a way to do that?
Thanks.
Option 1: Generating Automatically:
You can create a navigation component from templates provided by Material itself using 'Angular CLI component schematics'
ng generate #angular/material:nav your-component-name
The above command will generate a new component that includes a toolbar with the app name and a responsive side nav based on Material breakpoints.
See more about angular material schematics here
Option 2: Implementing Manually:
To implement that, you just have to refer these two links:
Resizing Sidenav | Angular Material
Navigation List | Angular Material
glance through the following code. Implementation will be something like this:
<mat-drawer-container class="example-container mat-typography" autosize>
<mat-drawer #drawer mode="side" disableClose="true" opened="true">
<button mat-mini-fab (click)="isExpanded = !isExpanded" color="warn" style="margin: 10px;">
<mat-icon aria-label="Menu">menu</mat-icon>
</button>
<mat-nav-list>
<mat-list-item>
<mat-icon mat-list-icon>person</mat-icon>
<h4 mat-line *ngIf="isExpanded">Management A</h4>
</mat-list-item>
<mat-list-item>
<mat-icon mat-list-icon>assignment</mat-icon>
<h4 mat-line *ngIf="isExpanded">Management B</h4>
</mat-list-item>
<mat-list-item>
<mat-icon mat-list-icon>domain</mat-icon>
<h4 mat-line *ngIf="isExpanded">Management C</h4>
</mat-list-item>
<mat-list-item>
<mat-icon mat-list-icon>folder_shared</mat-icon>
<h4 mat-line *ngIf="isExpanded">Management X</h4>
</mat-list-item>
</mat-nav-list>
</mat-drawer>
<div class="example-sidenav-content">
You cards and screen Contents goes here..
Will be pushed towards right on expanding side navbar.
</div>
</mat-drawer-container>
I did this with a bit of CSS
mat-sidenav:not(.mat-drawer-opened) {
transform: translate3d(0, 0, 0) !important;
visibility: visible !important;
width: 60px !important;
overflow: hidden;
}
So when the draw is NOT open, the width of the sidenav is 60px and not 0. Just enough to show your icons.
OK, the next issue is that you'll need to hide a bunch of stuff like button name and other descriptive stuff, for me I need to change the height of the profile image and hide additional text. I did this in the same way as above using the :not selector:
mat-sidenav:not(.mat-drawer-opened) div.leftNav div.navProfile img {
width: 40px; margin: 16px 0 0px 0;
}
mat-sidenav:not(.mat-drawer-opened) .navTitle,
mat-sidenav:not(.mat-drawer-opened) .profileTitle {
display: none;
}
When collapsed I didn't want to show the button names so I wrapped the name in a *ngIf
<span class="navName" *ngIf="opened">{{ page?.name }} </span>
This should work, and it does but there is a problem. The ngIf is bound to the opened event and you will notice a delay when the event is firing (to account for it animation) to show your labels when the drawer is open.
To fix this I had to delve into the api of sidenav and found an eventemitter call openedStart and closedStart. I created a new bool in the component class,
showNavLabels: boolean;
then bound the events to this bool in the HTML.
<mat-sidenav class="sidenav" #sidenav mode="side" [(opened)]="opened"
(openedStart)='showNavLabels = !showNavLabels'
(closedStart)='showNavLabels = !showNavLabels' >
I am sure there is better way as I am not that experienced with Angular yet.
I hope it helps you out.
I created an example based on scss. Maybe someone can help to create the mobile version according to this sample.
Step 1: Add below style to styles.scss
// src/styles.scss
:root {
--menu-width-open: 200px;
--menu-width-closed: 64px;
}
.mat-drawer-container {
.mat-drawer {
box-sizing: content-box;
width: var(--menu-width-open);
transition: all 0.3s ease-in-out !important;
}
.mat-drawer-content {
// transform: translateX(200px);
margin-left: var(--menu-width-open) !important;
transition: all 0.3s ease-in-out !important;
}
&.container-closed {
.mat-drawer {
width: var(--menu-width-closed);
}
.mat-drawer-content {
// transform: translateX(64px) !important;
margin-left: var(--menu-width-closed) !important;
}
}
}
Step 2: Add drawer to app.componenet.html
<mat-drawer-container class="example-container" autosize [ngClass]="{ 'container-closed': !showFiller }">
<mat-drawer #drawer class="example-sidenav" mode="side" disableClose="true" opened="true">
<button (click)="showFiller = !showFiller" mat-raised-button>click</button>
</mat-drawer>
<div class="example-sidenav-content">
<router-outlet></router-outlet>
<button type="button" mat-button (click)="drawer.toggle()">Toggle sidenav</button>
</div>
</mat-drawer-container>
Step 3: And add showFiller = false; to app.component.ts file.
// app.component.ts
#Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss'],
})
export class AppComponent {
showFiller = false;
}
There is a feature request for this https://github.com/angular/material2/issues/1728
if you read the comments you'll also find a few examples on how to implement it yourself while it's not officialy available.
I created a wrapper for my app in React. I am trying to get the footer to stay at the absolute bottom of the page but when the children render, the footer stays at the original bottom of the page and does not resize with the page. Code below. (imagine a scrollable page with a footer in the middle now after child renders).
import React, { Component } from 'react';
import Header from "./Header";
import Footer from "./Footer";
export default class Wrapper extends Component {
render() {
return (
<div className="app-wrapper">
<Header/>
<div className="content">
{this.props.children}
</div>
<div>
<Footer/>
</div>
</div>
);
}
}
I'm not that good at CSS. Any ideas as to what I could try? I have already tried googling around for solutions to no avail.I have tried the basic solutions such as position:relative; left:0; bottom:0; right:0; position: fixed, position: absolute etc.
You should give position: relative|fixed (depending on your needs) to the parent container.
For exemple :
<div style={{ position: 'fixed', bottom: '0' }}>
<Footer />
</div>
HTML dock to bottom
sorry for the confusion guys. I had the style redefined in my css file so my styles were being overridden. :(
I have an angular2 application using the Angular2-material library for styling. I'm trying to add a FAB (Floating Action Button) to hover in the right corner of the application, but it's fixing itself to its parent component, and not the window.
The hierarchy of the application is as follows:
app.component
|-detail.component
Within the app.component template, I am using the md-sidenav-layout directive with router-outlet in the body of the layout directive:
<md-sidenav-layout>
<md-sidenav #sideNav (open)="closeStartButton.focus()">
<router-outlet name="navMenu"></router-outlet>
<br>
<button md-button #closeStartButton (click)="sideNav.close()">Close</button>
</md-sidenav>
<md-toolbar color="primary">
<button md-icon-button (click)="sideNav.toggle()">
<md-icon class="md-24">menu</md-icon>
</button>
<span>{{title}}</span>
</md-toolbar>
<div role="main">
<router-outlet></router-outlet>
</div>
</md-sidenav-layout>
Inside the detail component template, I have the following at the top of the template:
<button md-mini-fab class="fab" (click)="toggleAdd()">
<i class="material-icons">add</i>
</button>
And the css for that component:
.fab {
display: block;
position: fixed;
right: 2rem;
bottom: 2rem;
z-index: 10;
}
However, when I navigate to the detail page, the .fab is positioned relative to the component, not the window. I've tried using encapsulation: ViewEncapsulation.None on the detail component, but that doesn't affect it either. Is there a way to keep the fab defined within the detail component, but have it still be fixed relative to the window?
Look for something applying a CSS transform up the chain. In my case I was applying a transform via Angular animations. Apparently transform breaks position:fixed. Why does `transform` break `position: fixed`?
I hope I can figure out how to make this work, now.
in your app.component.html add this code:
<md-sidenav-container>
<md-sidenav mode="side" opened="true">Drawer content</md-sidenav>
<div class="my-content">Main content</div>
</md-sidenav-container>
global styles.css:
html, body, material-app, md-sidenav-container, .my-content {
margin: 0;
width: 100%;
height: 100%;
}
it works for me! ;)
I answered a very similar question here.
The gist: I solved this with a quite heavy workaround. I removed the FAB from the main content, defined a secondary router outlet in my template (outside md-sidenav-layout), created a standalone component for the FAB, and used an Observable in a service to broadcast the click events to the main components.
The answer in the other thread contains code samples and a working plunker example.