I'm trying to change style of tabs in Angular Dart using SCSS but it's not working. I don't see anything wrong.
Dart code contains
#Component(
selector: 'x-product-params-screen',
styleUrls: const ['element/tabs.css', 'element/buttons.css'],
templateUrl: 'scr_product_config.html',
...
element/tabs.scss contains
#import 'package:angular_components/css/material/material';
#import 'package:angular_components/material_tab/mixins';
#include tab-panel-accent-color('.tab-panel', $mat-red);
#include tab-panel-tab-strip-width('material-tab-panel', 300px);
#include tab-strip-color('material-tab-panel', '#ff0000', '#ff00ff');
and template scr_product_config.html contains
<material-tab-panel *ngIf="product.parts.length > 1">
<material-tab *ngFor="let part of product.parts"
[label]="part.name"
[part]="part">
<x-part-config
[part]="part"
(onConfigure)="onConfigure($event)">
</x-part-config>
</material-tab>
</material-tab-panel>
But neighter strip width nor tab color change.
The first thing to look at when debugging such issue is what HTML you have and what CSS was generated. I do not see class tab-panel in your HTML, but other than that it looks good and very similar to the example, and it seems to run fine there.
So maybe there is something else in your app that is overriding some styles?
Related
I am trying to add an extra color to my Bootstrap 5.2.3 project, but it's not generating the bg-* or text-* classes.
I tried using the Bootstrap 5.1 solutions found on GitHub, like these:
$starorange: #df711b;
$custom-theme-colors: (
"starorange": $starorange
);
$theme-colors: map-merge($theme-colors, $custom-theme-colors);
$theme-colors-rgb: map-loop($theme-colors, to-rgb, "$value");
$utilities-colors: map-merge($utilities-colors, $theme-colors-rgb);
$utilities-text-colors: map-loop($utilities-colors, rgba-css-var, "$key", "text");
$utilities-bg-colors: map-loop($utilities-colors, rgba-css-var, "$key", "bg");
#import "bootstrap";
But using < div class = "bg-starorange" > text < / div > does absolutely nothing. The bg-starorange class is not being generated.
So I went to the Bootstrap 5.2.3 docs and read that for this version, it should just be:
#import "variables.scss";
$custom-colors: (
"purple": $purple
);
// Merge the maps
$theme-colors: map-merge($theme-colors, $custom-colors);
#import "~bootstrap/scss/bootstrap";
The purple var is coming from the variables.scss file which is imported earlier and just includes some colors, but no maps etc.
When I use bg-purple on a div, I dont see anything in the dev tools inspector, when I do a global search in the whole project for "bg-purple" nothing is found. What am I doing wrong?
I'm migrating an application to Dart 2 and Angular 5.
I have this code in an html file
<material-list-item *ngFor="let key of keyList"
(trigger)="clickItem(key)">{{key}}
</material-list-item>
Everything works if I declare the use of 'materialDirectives' in the corresponding dart file, but if I only import 'MaterialListItemComponent', the click on the item is not triggered.
I actually tried to add a couple more directives, but using the following list does not work:
MaterialButtonComponent,
MaterialIconComponent,
MaterialDialogComponent,
MaterialListComponent,
MaterialListItemComponent,
MaterialInputComponent,
MaterialPopupComponent,
ModalComponent,
PopupSourceDirective,
ButtonDirective.
materialDirectives is deprecated and I don't wan't to include everything if not necessary. Looking for an answer to this question but also for a way to identify which directives are used by different components.
MaterialListItemComponent extends ButtonDirective which has the logic for trigger. So that should be all you need. Along with NgFor for just the code in your example.
The demo which is similar to your code uses:
FocusItemDirective,
FocusListDirective,
MaterialIconComponent,
MaterialListComponent,
MaterialListItemComponent,
MaterialSelectItemComponent,
NgFor
Is there any runtime errors?
I am using AngularDart where i need to show and hide component based on boolean value registerDisplay. Tried using *ngIf , but throwing an error . Below is the html.
app_component.html:
<div *ngIf="!registerDisplay">
<register-component></register-component>
</div>
What might be the reason. I came across solution for the error in Angular typescript . But that is not applicable to dart. Please suggest .
You need to register directives you want to use in the template
#Component(
selector: 'my-component',
directives: const [
MaterialButtonComponent,
MaterialIconComponent,
MaterialTooltipDirective,
...
NgIf,
...
],
instead of registering every directive individually you can register
the common set provided by Angular itself by adding
coreDirectives,
to the directives list.
See also https://github.com/dart-lang/angular/blob/master/angular/lib/src/common/common_directives.dart
I set up a new project using
ng new app
ng add #angular/material
I included the following line in styles.css:
#import '~#angular/material/prebuilt-themes/deeppurple-amber.css';
I want to apply the primary color of the deeppurple-amber theme to a <p> element.
How can I extract the primary color of a prebuilt scheme and apply it to my own component in Angular 6??
Instead of importing the pre-built theme, include the content of the pre-built theme instead.
#import '~#angular/material/theming';
// Include non-theme styles for core.
#include mat-core();
// Define a theme.
$primary: mat-palette($mat-deep-purple);
$accent: mat-palette($mat-amber, A200, A100, A400);
$theme: mat-light-theme($primary, $accent);
// Include all theme styles for the components.
#include angular-material-theme($theme);
You can then access the palettes and colors and theme your own components.
I have come across this strange problem and it is driving me nuts.
It looks like a bug, but I don't know if maybe I am doing someting wrong.
The CSS attached to a component via cssUrl doesn't work on Internet Explorer.
If I add some content to the html template and I use classes from the CSS, those classes are not applied in IE. However, the same code works fine in Dartium, Chrome and Firefox.
I have created a sample project in github showing the error:
https://github.com/gonzalopezzi/ie-angulardart-shadowdom-bug
The project has the following dependencies:
dependencies:
browser: 0.10.0+2
angular: 0.11.0
shadow_dom: 0.10.0
(I have tried to avoid "any" but those are the latest versions of such packages)
I have a very simple component:
import 'package:angular/angular.dart';
#Component(selector: 'internet-explorer-bug',
templateUrl:'internet-explorer-bug/internet-explorer-bug.html',
cssUrl:'internet-explorer-bug/internet-explorer-bug.css',
useShadowDom: true,
publishAs: 'cmp')
class InternetExplorerBug {
}
This is the css file (internet-explorer-bug.css):
.red-div {
background-color: red;
}
And this is the template (internet-explorer-bug.html)
<div id="main-div">
<div class="red-div">Red background?</div>
</div>
The component works properly in Dartium, Chrome and Firefox. It doesn't show the red background in Internet Explorer, though.
I have tested it in Internet Explorer 10 and 11. These are the results:
The red background is not displayed
The browser downloads the css file (I can see that in IE dev tools)
If I inspect the DOM, I see a strange css attribute assigned to the div with the name "background-color:red" and no value:
.red-div {
background-color:red: ;
}
I have posted the same question in the mailing list (here). If I somebody helps me there I will post the solution here too.
Any help will be appreciated.
Thanks in advance.
I guess this line causes the problem
<script src="packages/shadow_dom/shadow_dom.min.js"></script>
This is deprecated. You should use
<script src="packages/web_components/platform.js"></script>
You need to change your pubspec.yaml too (shadow_dom to web_components)