Closed leonardovff closed 6 years ago
@GustavoCostaW I think that it is great. But I have a deliberation. We can think in a solution for everythings about style. For exemple: In my webapp, the float button is small in comparison with others components and I need to personalize the button with a largest dimension.
@leonardovff you can customize with /deep/
selector to provide a dynamic stylesheet, eg:
ngc-float-button /deep/ .content {
margin-right: 55px; /* the space between the content and the button */
}
ngc-float-button /deep/ .fab-toggle,
ngc-float-button /deep/ .fab-item,
ngc-float-button /deep/ .content {
transform: scale(1.1); /* 1.2, 1.3... */
}
I think that is the best way because each developer needs a specific customization and adding many @Input
properties is unfeasible. With css the developer can customize for your necessitation, what you think about it?
@GustavoCostaW the problem is: https://angular.io/guide/component-styles#deprecated-deep--and-ng-deep The use of /deep/, >>>, and ::ng-deep is deprecated
@leonardovff Interesting, I will investigate how I can make this soon if you have any idea let me know.
@leonardovff @GustavoCostaW what about an Input() class?: string
so you can pass a custom CSS class name, and use that to set up the styling - and it will get added to the element directly, no need to use ::ng-deep
?
I accomplished this with the following changes to the compiled code in ngc-float-button.component.js
now just use <ngc-float-button color="whatever color you like here">
@leonardovff @kreatemore @xxNoxiouSxx check the 1.2.0 version.
Thx @leonardovff for the issue, what you think about
@Input [color]
property?in
ngc-float-button
andngc-float-item-button
components?