I have started a new app using React and react-bootstrap. There is only one component outside the App.js file. The contents:
import React from 'react';
import { Accordion, Button, Card } from 'react-bootstrap';
const accordionDemo = (props) => (
<Accordion defaultActiveKey="0">
<Card>
<Card.Header>
<Accordion.Toggle as={Button} variant="link" eventKey="0">
Card one
</Accordion.Toggle>
</Card.Header>
<Accordion.Collapse eventKey="0">
<Card.Body>Body of Card One.</Card.Body>
</Accordion.Collapse>
</Card>
<Card>
<Card.Header>
<Accordion.Toggle as={Button} variant="link" eventKey="1">
Card two
</Accordion.Toggle>
</Card.Header>
<Accordion.Collapse eventKey="1">
<Card.Body>Body of Card Two.</Card.Body>
</Accordion.Collapse>
</Card>
</Accordion>
);
export default accordionDemo;
This results in a button and text displaying for each card in the code. The buttons don't do anything except create a warning in the console: index.js:1 Warning: findDOMNode is deprecated in StrictMode. findDOMNode was passed an instance of Transition which is inside StrictMode.
A warning should break, right?
is this a react-bootstrap wide problem? Or perhaps Boottstrap?
Do I need to manually import some CSS? I thought The react components would come with that styling already.
So I was foolish. I did not have the bootstrap scss imported into my main scss file. And... that was everything.
The answer, therefore, is yes, you DO need to import CSS separately when using react-bootstrap -- as per https://react-bootstrap.github.io/getting-started/introduction/
Related
I have a third-party library that uses styled-components v5.3.6
I am using this UI library in my Next-JS app. My Next-JS app also has styled-components v5.3.6 as a dependency, using which i overwrite styling for my UI components.
For instance, i have a component in my UI-library as :
const Header = (props) => {
return (
<Text p="0 14px" {...props}/>
);
}
Usage in my main-app
For my requirement , i require padding of 4px on right and left. So, i created a styled.ts file and i have overwritten the component
mystyled.styled.ts
import styled from "styled-components";
export const ModifiedTextComponent = styled(Text)`
padding: 0 4px;
`
> someComponent.ts
import modifiedTextComponent from './mystyled.styled.ts';
function test() {
return <ModifiedTextComponent> Text </ModifiedTextComponent>
}
Issue
On SSR, css-specificity for this component changes. Styling defined in <ModifiedTextComponent /> takes less priority over styling of my Text Component.
So during SSR, my ModifiedTextComponent always ends up with a padding of '14px' instead of `4px` on left and right-side.
Note, for this query, naming my third-party UI library as `MyLib`
What i tried.
To resolve this, i removed styled-components dependencies from my main-app and exposed styled utility from my third-party library
Third-party library
import styled from 'styled-components'
export {styled}
main-app > mystyled.styled.ts
import {styled} from "MyLib";
export const ModifiedTextComponent = styled(Text)`
padding: 0 4px;
`
Exposing styled utility from my third-party library i.e MyLib and consuming it directly seems to resolve the issue.
But this creates an extra dependency on my UI library. I would like to know if there is some other way to resolve this. Also, wanted to understand why specificity for my third party library is high over css-styling that i add in my app.
Solution - 2 , suggested by styled-components-library
https://styled-components.com/docs/faqs#how-can-i-override-styles-with-higher-specificity
Please suggest if someone has a better solution to this, or an explanation to why CSS specificity gets affected with NextJS SSR and Styled-components.
Is it possible to have Vuetify v-drawer open on large screen and open/close by the toolbar button on mobile screens?
Something like:
https://design.gitlab.com/brand/basics
Check this codesanbox I made: https://codesandbox.io/s/stack-70931919-gbrmr?file=/src/App.vue
This is a basic navigation drawer setup I made. Feel free to modify it to your needs and let me know if you need help with that!
#cmfc31's solution is great, but unfortunately it doesn't work with Vuetify 3 anymore.
Here's how you can have your nav drawer open by default on large screens with Vuetify 3:
<script setup>
import { ref } from 'vue'
import { useDisplay } from 'vuetify'
const { mobile } = useDisplay()
const navDrawerIsOpen = ref(!mobile.value)
</script>
<template>
<v-navigation-drawer
v-model="navDrawerIsOpen"
>
<!-- nav drawer contents here -->
</v-navigation-drawer>
</template>
For opening/closing the nav drawer mobile screens, you can use the usual open/close button in an app bar or any other way you like to toggle the value of navDrawerIsOpen between true and false.
You can also de-structure breakpoints from useDisplay() as we know them from Vuetify 2 (e.g. smAndUp) but I find the use of mobile.value the most elegant way to solve this specific problem.
You will find more about breakpoints in Vuetify 3 here: https://next.vuetifyjs.com/en/features/display-and-platform/
I wonder if you are able to help me at all.
I'm attempting to build a forum using Laravel 8 and VueJS, however I've hit a brick wall where the Marked plugin doesn't seem to be working.
It does not convert the markdown to html, I think i'm using it correctly, but I may be wrong.
My Vue Component code is below
<template>
<v-card
elevation="2"
outlined
shaped
>
<v-container fluid>
<v-card-title>
{{data.title}}
</v-card-title>
<v-card-subtitle>
Posted By {{data.user}} {{data.created_at}}
</v-card-subtitle>
<v-spacer></v-spacer>
<v-card-text v-html="data.body"></v-card-text>
</v-container>
</v-card>
</template>
<script>
import marked from 'marked';
export default {
props:['data'],
computed:{
body(){
return marked.parse(this.data.body);
}
}
}
</script>
<style>
</style>
I have tried defining it as a global import, however it still does not work.
It still displays the markdown instead of converting to html.
Replace this line:
<v-card-text v-html="data.body"></v-card-text>
with:
<v-card-text v-html="body"></v-card-text>
In your code, you are using data, which is the raw prop. But what you really want is to use the computed value body, which calls Marked.
You should avoid using properties with the same names (data.body and body) to avoid confusion. If you rename your computed from body() to markedHtml(), the code will be a lot easier to read.
You also didn't import Marked correctly, use this import:
import { marked } from 'marked';
Existing questions on this subject refer to how to use Angular with FontAwesome Icons and the Answer is ideally Angular FontAwesome. I searched both repo's and didn't really find much using angular-fontawesome. There are hints of older solutions only.
So I have that. I am also using Angular Material Buttons, to which I have been tasked with using FontAwesome Icons in my Buttons and this leads me to Material Icons
I am not really sure where to begin.
Providing I have added an Icon to angular-fontawesome as described. I have a Button with a Icon ready to go, there is a standard method to use to connect the two?
TLDR: I want to use a Material Icon Button, but I am unable to use a Material Icon and have to use FontAwesome Icons instead. I don't know how to achieve this.
Approach 1: Material icon registry
Material allows to use custom SVG icons with its components (like mat-button). FontAwesome icons are also SVGs, so you can use this mechanism to solve task at hand.
// 1. Import desired FontAwesome icon
import { faFontAwesomeFlag } from '#fortawesome/free-brands-svg-icons';
import { icon } from '#fortawesome/fontawesome-svg-core';
// 4. Use with `mat-icon` component in your template
#Component({ template: '<button mat-button type="button"><mat-icon svgIcon="font-awesome" style="vertical-align: top"></mat-icon>Make Awesome!</button>' })
export class AppComponent {
constructor(registry: MatIconRegistry, sanitizer: DomSanitizer) {
// 2. Render icon into SVG string
const svg = icon(faFontAwesomeFlag).html.join('');
// 3. Register custom SVG icon in `MatIconRegistry`
registry.addSvgIconLiteral(
'font-awesome',
sanitizer.bypassSecurityTrustHtml(svg)
);
}
}
Also check this issue for description of a more lightweight implementation.
Approach 2: Use fa-icon component from angular-fontawesome library
As you already seem to use #fortawesome/angular-fontawesome package in your application, you can avoid using mat-icon altogether and use fa-icon inside mat-button instead.
import { faFontAwesomeFlag } from '#fortawesome/free-brands-svg-icons';
#Component({ template: '<button mat-button type="button"><fa-icon [icon]="faFontAwesomeFlag" style="padding-right: 6px"></fa-icon>Make Awesome!</button>' })
export class AppComponent {
faFontAwesomeFlag = faFontAwesomeFlag;
}
Note that you'll also need to add FontAwesomeModule to imports for this to work. See documentation for more details.
Here is the demo with both described approaches: https://stackblitz.com/edit/components-issue-8znrc5
Note that I also had to add some CSS to ensure that icon is aligned well with the button text.
Go to your project directory and run this command to install google material icons pack
npm add material-design-icons.
Next, update the “.angular-cli.json” file to include the web font into the “index.html” page when application gets compiled:
{
styles: [
"./assets/fonts/material-icons/material-icons.css"
]
}
Finally, you can test the font by updating the main application template with something like the following:
<h1>Material Icons</h1>
<i class="material-icons">account_circle</i>
<i class="material-icons">thumb_up</i>
You can refer to this site . I followed all the steps fro this site to use mat-icons when I was creating angular 6 project.
More
You can also checkout this stackblitz
Update
If you want to use font awesome icons I suggest you can start by following this guide . It's super easy and simple to use.
Install font-awesome dependency using the command npm install --save font-awesome angular-font-awesome.
After that import the module :
import { AngularFontAwesomeModule } from 'angular-font-awesome';
#NgModule({
//...
imports: [
//...
AngularFontAwesomeModule
],
//...
})
export class AppModule { }
I'm trying to use UIkit scrollspy together with aurelia but can't get it to work. I downloaded skeleton-navigation and installed uikit with jspm. Inside app.js I have:
import 'uikit';
import 'uikit/css/uikit.css!';
UIkit css elements work fine but scrollspy doesn't work. I have something like this inside my html:
<div class="uk-panel uk-panel-box uk-scrollspy-init-inview uk-scrollspy-inview uk-animation-fade" data-uk-scrollspy="{cls:'uk-animation-fade', repeat: true, delay:1000}"> .... </div>
Hi I find a simple way.
Just add data-uk-observe attribute in one static container. I put that in the body tag of my index.html, because in a aurelia app is the only static thing :-)
That way UIKit will observe for dom changes and when the templates are rendered it will recursively search for new components
I'm not sure of the performance issues, but so far so good.
Example:
<body aurelia-app="main" data-uk-observe>