I'm currently working on an application using Angular2.
Now that I finished my styling of the app, I want to make more themes to switch between.
I've tried setting my styleUrls to a variable and change it on click, but this doesn't work.
let styles= nightflat
#Component({
selector: 'start-app',
template: `
<div class="ui-g ui-g-nopad">
<div class="ui-g-12 ui-g-nopad" id="header">
<img src="../src/resources/icon/c2logo.png" alt="Logo" id="logo">
<button pButton icon="fa-sign-out" id="LogOut" type="button" label="LogOut" (click)="gotoLogout()"></button>
<h1></h1>
</div>
<div class="ui-g-12 ui-g-nopad">
<p-breadcrumb [model]="bcitems"></p-breadcrumb>
</div>
<div class="ui-g-12 ui-g-nopad">
<div class="ui-g-2 ui-g-nopad">
<p-panelMenu id="menu" [model]="itempanel"></p-panelMenu>
</div>
<div class="ui-g-10 ui-g-nopad" id="router-outlet">
<router-outlet> </router-outlet>
<div class="ui-g-12 ui-g-nopad">
<button pButton id="goBack" type="button" label="Zurück" (click)="goBack()"></button>
</div>
</div>
</div>
</div>
`
,
styleUrls: [styles],
directives: [Button],
providers: []
})
"nightflat" is an import from my style-urls.ts providing a css-path for every style I want to use (til now only 2):
export var nightflat = './dist/resources/scss/app.component.css'
export var froggy = './dist/resources/scss/test.component.css'
I then tried to use a function called by a Buttonclickevent to set the styles variable to another value.
setStyle(){
styles = froggy;
}
Well, that doesn't work at all.
First question: As I'm using gulp-inject - do I have to inject ALL of the style-sheets into my index.html?
Second question: How am I supposed to switch theming onclick?
Related
I am using Bootstrap to design my React project and all of a sudden the grid system doesn't work properly.Basically I need to have the first div with the className of row above the Card components, and centered.I have added more code but nothing that had to do with that particular main page or styling.I have pasted below my code.Does anyone know why this could've happened and how to fix it?
return (
<div>
<section id="service">
<div className='container'>
<div className='row'>
<div className='col-12'>
<h3 className='fs-5 text-center mb-0'>Our Services</h3>
<h1 className='display-6 text-center mb-4'>Our <b>Awesome</b> Services</h1>
<hr className='w-25 mx-auto'/>
</div>
</div>
<div className='row'>
<div className='col-md-4'>
<Card font = {'fa fa-cogs fa-4x mb-4 text-primary'} title='Easy Usage' content='Access your assigned task with only one click and start testing your code right now.'/>
</div>
<div className='col-md-4'>
<Card font = {'fa fa-cogs fa-4x mb-4 text-primary'} title='Instant Feedback' content='Run your solution using only one submit button with the help of our online compiler.'/>
</div>
<div className='col-md-4'>
<Card font = {'fa fa-cogs fa-4x mb-4 text-primary'} title='Optimize your time' content='Reduce your time spending on uploading assignments with our easy dashboard method.'/>
</div>
</div>
</div>
</section>
</div>
)
I have a Hit const which displays products (from Algolia). I use it in my main component. I would like to display the products in a row, however, I don't know how to do that, since if I write the row class around the const (in the main component) it doesn't work.
The Hit const is in a way mapping multiple products and I can't create a row from it, because placing row around Hit in the main component treats it as if it were one item and placing row inside of Hit treats each product as one row.
How could each product from Hit be displayed as a column inside a row?
This is the Hit const:
const Hit = ({ hit }) => (
<div className="col-6 col-sm-4 col-md-3">
<a className="mb-5 d-block font-color-black cursor-pointer">
<div
className="mb-3"
style={{
paddingBottom: "125%",
background: `url("${hit.image}") center center/cover`,
}}
></div>
<p className="font-size-subheader mb-2 font-weight-medium">
{hit.product}
</p>
<p className="font-size-subheader font-weight-medium pb-2 borderbottom border-color-black">
{hit.cena} <span className="hit-em">€</span>{" "}
</p>
</a>
</div>
);
This is the return of the main component, where Hit is used:
return (
<InstantSearch
searchClient={searchClient}
indexName="Besedilo"
searchState={props.searchState}
createURL={props.createURL}
onSearchStateChange={props.onSearchStateChange}
>
<div className="py-5 my-5">
<div className="py-4">
{/* Main Content */}
<div className="custom-container">
<div className="row">
<div className="col-12 col-lg-10 offset-lg-2">
<div className="collection">
<div className="row mb-5 collection-1">
<Hits hitComponent={Hit} /> //this is how Hit is used
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</InstantSearch>
);
Consider the code:
import React from 'react'
import DarkPattern from '../Assets/dark-pattern.jpg'
const Profile = () => {
return (
<div>
<section className="bg-dark text-light text-center ">
<img src='https://i.pinimg.com/originals/ba/c1/37/bac13770cdea801e72852d8dc7160295.png' className='profile-img' alt='profile-img' />
<div className="row px-5 w-75 mx-auto" >
<div className="text-start col-md-6 col-md-4">
<h1>Name</h1>
<p>Tag</p>
</div>
<div className="text-end col-md-6 col-md-4 ">
<h1>Level</h1>
<p>Score</p>
</div>
</div>
</section>
</div>
)
}
export default Profile
With the output:
and in mobile mode:
What I want to do in mobile mode is to make the text-align center only on mobile mode. I want to left column to text-align-start and the right to text-align-end. Any ideas??
P.S. Only bootstrap, don't wanna use the CSS Media Queries.
Check out the documentation around text classes:
https://getbootstrap.com/docs/4.0/utilities/text/#text-alignment
https://getbootstrap.com/docs/5.0/utilities/text/#text-alignment
You could set your default to be center and add on a text-md-left class on medium up.
As always mobile should be your default styling and then change as you go up in size.
I started creating a blog like react application and using bootstrap grid system.
There seems to be a big space between my two columns. Is there a way to get rid of this?
A screen shot is attached.
import React from 'react';
import ReactDom from 'react-dom';
import 'bootstrap/dist/css/bootstrap.css';
import faker from 'faker';
//Now create a new component
const App = () => {
const myCustomStyle = {color:'green', fontSize:'50px'}
return (
<div className="container">
<div className="row">
<div class="col-3">
<img alt="avatar" src={faker.image.avatar()}></img>
</div>
<div class="col-9" >
<p><b>Alex</b><span>Today at 5.00pm</span></p>
<p>Great blog post!</p>
</div>
</div>
</div>
)
}
ReactDom.render(<App />, document.querySelector('#root'))
Use the Bootstrap 4 auto layout columns instead...
col-auto - flex shrink
col - flex grow
<div class="container">
<div class="row">
<div class="col-auto">
<img alt="avatar" src="//placehold.it/100" />
</div>
<div class="col">
<p><b>Alex</b><span>Today at 5.00pm</span></p>
<p>Great blog post!</p>
</div>
</div>
</div>
https://www.codeply.com/go/ZHoBi8rAHB
I've been trying to customize a modal with a component passed as content. However, I can't seem to make it work. It just displayed a backdrop and the modal itself is not displaying. Watch this forked stackblitz code for more detail.
Basically I just need to customize the width of the modal. In the guide, it passed the content template reference as described in this section. But in my case, I am not passing a TemplateRef but a Component.
Remove the <ng-template let-modal> wrapper (and its closing half) from your NgbdModalContent's template.
#Component({
selector: 'ngbd-modal-content',
template: `
<div class="modal-header">
<h4 class="modal-title">Hi there!</h4>
<button type="button" class="close" aria-label="Close" (click)="activeModal.dismiss('Cross click')">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>Hello, {{name}}!</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-outline-dark" (click)="activeModal.close('Close click')">Close</button>
</div>
`
})
export class NgbdModalContent {
#Input() name;
constructor(public activeModal: NgbActiveModal) {}
}