I've been fiddling with Angular-Material and it does seem pretty slick. One of the issues though, that we're having is the lack of the ability to close a tab using an 'X' button next to the tab's label. This is similar to what any browser tab UI will have to offer.
In the current UI framework we use (Angular Bootstrap UI) you could define the rendering of the tab header to add such a button.
Any ideas on how to implement it with Material's md-tab directive?
Thanks.
The docs at: https://material.angularjs.org/#/api/material.components.tabs/directive/mdTab
Say:
If the label attribute is not specified, then an optional
tag can be used to specify more complex tab header
markup. If neither the label nor the md-tab-label are specified, then
the nested markup of the is used as the tab header markup.
Why not define your in a tag?
Related
I have the following code:
header_contents.push(<DropdownButton bsSize='xsmall' bsStyle='link' pullRight={true} id={1} title='Menu'>
{item_menu}
</DropdownButton>);
I want to have the styling in Bootstrap to be white lettering (currently blue) as I think the link option is defaulted to that. How can you change the styling for Bootstrap to pass link color, and other properties like if you want to move the link down a little on the page?
I should mention we do very little CSS styling as most of that is done within the ReactJS components.
Either override bootstrap CSS in a css file (that is what your seem to avoid I understand): it is the better way to ensure a global effect over every link in your application.
Or do no sent bsStyle='link' as DropdownButton property but instead, insert a style property with custom CSS. Yet you can insert style even if you don't remove bsStyle. You could then create your own component wrapping DropdownButton to ensure the same graphic chart in your application.
I figured it out with the help of an online chat room. Here's what I did.
I first made a style (dropDownLinkStyle) in the react component like this.
let dropDownLinkStyle = {
color: 'white'
};
Then I used it (dropDownLinkStyle) in the dropdownButton like this.
header_contents.push(<DropdownButton bsSize='large' style={dropDownLinkStyle} bsStyle='link' pullRight={true} id={1 /* avoids react warning */} title='Menu'>
{item_menu}
</DropdownButton>);
I hope this helps. This allowed me to keep my bsStyle which is link (tells Bootstrap I want a link type on my screen instead of a button) and allows me to change that link to white lettering. I could also pass more styling by just adding it to the object -- dropDownLinkStyle
I wan't to use flexbox layout with angular ui tabs (ui.bootstrap.tabs). I have this plunker:
http://plnkr.co/edit/9ToL1WLwgDVT0DldMnaa
I changed the ui-template thus all div's get the flexbox classes. Still the tab content div is not filling up the fully available space.
Any idea?
I have found a solution. Here is an updated plunker:
http://plnkr.co/edit/oswSGYApFj9sSohms0FS?p=preview
The key is to override the display property of the '.tab-content>.active' class. By default it is set to 'display: block'. It has to be set to 'display: flex'.
I would like to use textAngular directive, but I also need text color changing functionality, which as far as I know, is missing.
Is it really missing, or it's just an hidden option that i didn't find?
Thanks for your answers.
Take a look at this Full Featured textAngular
which adds the following additional features to the existing plugin
Colorpicker via angular-bootstrap-colorpicker
Font family
Font size
Indent / outdent
Added angular-ui bootstrap dropdown toggle to hold common items
h1-h6 and p formatBlocks
text alignment
When creating, for example, dropdown menus I use the # sign on the link that toggles the dropdown. It works just fine with just for that and many other things where I need a link just to do something and stay on the same page.
Now I'm using angular and the problem I face is that when I use this sign on a link it thinks I'm referencing the route for / so that the app goes to the first screen.
How can I deal with this?
As far as I know another "ugly" workaround is to put href="javascript:;" to avoid the unintended navigation.
Or remove the href altogether but then when you mouseover you have no pointer. you need to add this to your CSS as described on UI Bootstrap page.
From: http://angular-ui.github.io/bootstrap/
Original Bootstrap's CSS depends on empty href attributes to style
cursors for several components (pagination, tabs etc.). But in
AngularJS adding empty href attributes to link tags will cause
unwanted route changes. This is why we need to remove empty href
attributes from directive templates and as a result styling is not
applied correctly. The remedy is simple, just add the following
styling to your application:
.nav, .pagination, .carousel, .panel-title a { cursor: pointer; }
This is a weird one we're currently porting an existing CakePHP app to Angular.JS, the CSS is the same and overall everything looks the same but there is small changes for example the font type or the size, also noticing small difference in spacing, padding and margins.
Does Angular add CSS style or overwrite existing styles?
AngularJS does not add any style elements nor does it add or remove any inline styles. It does however add classes to DOM elements such as ng-scope, ng-binding..etc all with the "ng" prefix.
Angular does add a few CSS styles, but nothing that would account for what you're seeing.
In particular, to hide elements while they're loading through an ngCloak directive, Angular adds a class to set the display property to 'none'.
You can see Angular's CSS in https://github.com/angular/angular.js/blob/master/css/angular.css.