I'm using ng-bootstrap in an Angular project and I see checkbox and radio components in the components list (NgbCheckBox, NgbRadioGroup) but no regular button.
Am I crazy or is there no regular button component?
There is no "regular button component" as we (authors of ng-bootstrap) didn't feel like there is a need to a particular directive / component for buttons as in our view such a component / directive wouldn't provide any added value.
We are very careful about not coding / shipping components or directives that would introduce new abstractions without providing enough value. A component or directive needs to do something "useful" to make it into ng-bootstrap codebase. In general we see those things as providing value and thus justifying new abstraction:
JS behaviour (ex. positioning tooltips, toggling collapse with animations, opening modal etc.);
encapsulating markup that is repetitive / verbose to write by hand;
enhancing markup with accessibility support (screen readers, keyboard navigation etc.) that would be tricky to do "by hand";
WIKI article with more detailed reasoning.
If you believe that a directive / component for a button would be a worthwhile addition, feel free to open an issue to discuss.
Related
Trying to figure out exactly what the limitations are, if any, in the Sitecore CMS Rich Text Editor fields when not using pre-loaded styles or modifying the Telerik RadEditor control. Basically want to know how far we can go using on page custom styles with the style tag. Will we run into any conflicts with existing pre-loaded CSS?
When committing style tags or inline styles to any RTE, it can be done, but don't do it. For one, if other editors are not aware of it, they can over write those styles with one change. Also style tags in the body of a web page will violate accessibility standards (depending on if your company needs to be 501 compliant). Also if your designer's classes are overridden, on the page it can be a nightmare to fix and maintain.
Recommendation: Typically I would make all CSS options for a rendering as rendering parameters, but if you really need embedded CSS, I would make a new text field on the template of the page/content, and have the developer pull that CSS correctly into the layout.
Here's a link, it's a bit dated but it does a good job explaining rendering parameters, which is the path I highly recommend:
https://sitecoretricks.wordpress.com/2018/03/31/understanding-the-rendering-parameters/
I have an AngularJS app in development, and the CSS is already done, just adding functionality.
What I now need is stuff like
date pickers
modals
tooltips
I'd love to use some of the stuff from angular-strap, but it's based on the bootstrap.css file.
If I don't include the bootstrap file, it doesn't work. If I include it, it works, but it breaks everything, my whole layout is destroyed. That happens also if I include the bootstrap.css first.
I then tried to only load partial elements from the bootstrap site. For example, the date picker from angular-strap said to use elements like tooltip, so I only used the tooltip css elements using the bootstrap customiser, then it displays but inline, not a tooltip anymore.
It's quite frustrating. Is there a way to add those amazing libraries without breaking the CSS of the existing app? I'm somehow not seeing what's really required for that.
My company's project is in the exact same situation. We use Foundations for our grid layout. But we want to use things like AngularUI which is based off of foundations.
What we've done is to include the bootstrap JS. And then selectively choose the bootstrap css that is needed. Doing it this way has given us the ability to use Datepicker & Modal. (Although, recently I found some better angular datepickers - and the angularUI datepickers just don't have the usability that I was looking for).
So it seems that what you may be missing is the JS for bootstrap. But without seeing your code it's really hard to say.
Per your request, here are some of the datepickers that I like better:
ngQuickDate
ng-bs-daterangepicker (useful for date ranges) (although, this one also has a BS dependency)
Jquery UI Datepicker (implemented as a directive)
I wanted to consult with the sages here regarding Qt and skinning, get your opinion and chart a path for my development. My requirements are as follows:
My Qt/C++ application (cross platform with Mac, Windows and Linux versions) needs to have modular skins.
A skin is defined as a set of one or more elements: - Window background texture - Look/feel of UI controls such as edit boxes, drop down, radio buttons, buttons etc. - Look/feel of window "caption", resize grips etc.
Skins will be installed with the application installer, allowing the user to choose which one he/she wants to use. Users should be able to change skins on the fly.
Can I go the QML route? should this be custom and based on simple resources which are built into the application? Any design advice will be appreciated.
Thanks.
If I understood you correctly then stylesheet is the best way forward. You can create stylesheets similar to CSS and then pass them as command line option to your application or load on invocation to style your application at runtime. That way you can create multiple stylesheets each having a different look and feel and allow user to load them at will. Since its CSS it doesn't need any new learning and you can keep all your styling outside your source code.
Here are a list of resources that can get you up and running quickly:
http://blog.qt.io/blog/2007/11/27/theming-qt-for-fun-and-profit/
http://doc.qt.io/qt-5/stylesheet.html
I haven't played with QML yet, but you could also create a custom QStyle implementation that supports your resource format. Note that you'd lose style sheet support if you went this route.
Changing window captions is a little trickier if you want portability.
QML, if I understand correctly, doesn't really skin the widgets, it mainly deals with GUI layout etc etc.
QStyle is used to change the looks. It is a bit low-level though, and requires programming, so if you want to load different user-created skins (from an XML or so) it might be tricky to support extensive skinning. Chaining colors and a few items are easy enough though. (There might be someone else who've done something you could re-use.. not sure.)
For modifying widgets, use QStyle::polish(). You could use that to change the background picture (if it's a top-level window, or of a certain class). There are numerous repaint method to change almost every part of every widget.
Store/load the style using QSettings, by reading and setting the desired Style just after QApplication but before your main window is constructed.
I'm wondering what the best tool is for developing a mobile UI is. My requirements are that I retain full control over the look and movement of every UI component. I think Flex might be the best way to do this but I can't tell if I'll have that level of control using their UI components.
Any links would be appreciated. Thanks!
Edit: For example, looking at the documentation I see there's a an 'enabled' field which dims the color of a container and it's children if false. Am I able to change that so, maybe a repeated bitmap pattern appears if false?
Or, if there's a sliding menu can I edit the speed and change in speed as it closes?
You can create any component you like and make it look like anything you want. You don't have to use standard components. You can reskin any components just by specifying a new skin. It's really pretty easy.
You can create custom skins for Flex, for both Spark and Halo components. You also can create custom components, either based on other existing components, or based on the base component. You could even create custom objects which are just based on Sprites or similar (if you like to have control over everything :P).
edit
In response to your updated question. Regarding the enabled/disabled property, yes, it is possible to skin that. Spark components have states, for example a Button has a up, over and down state – and an disabled state. That state is exactly what is active when the enabled property is set to false. So yes, you can skin that.
Regarding the sliding menu animation, I'm not totally sure if that would be easily possible as I believe that this is coded into the component itself and not part of the skin to decide. However even if that is the case, you could instead create your own component that basically features exactly the same functionality but has a changed animation there.
I'm not sure if the Spark skinning wouldn't be able to do this though, because what you definitely can do is creating transitions between states. So if the slide is made with different states, you'll probably be able to change the transition as well.
Im using the accordion component in Flex and cant seem to get the header to have rounded corners. The footer rounds no problem but the header remnains square, any suggestions?
Here's an in-depth example from Doug McCune showing how to customize the Accordion control, with accompanying source code and explanation, in which he does something similar. While the specifics will depend on what you're trying to do, essentially you need to re-skin the button and/or selection skins of the accordion-item header.
Skinning can be a bit tricky, one of those things that seems like it ought to be easier than it is (and personally I find using Flash for skinning to be a pain for all but the simplest situations; I much prefer to do it in code or markup), but if you spend a little time with the code in the example I'm sure you'll see what's going on and be able to apply to your project. Hope it helps -- good luck!
Your best bet is to probably design the skin in flash and use that skin in flex.
I suggest downloading the flex skinning templates from here
http://www.adobe.com/cfusion/entitlement/index.cfm?event=custom&sku=RC00530&e=flex_skins
installing it.
When flash opens goto 'create from template' and click on more. Select flex skins. You can choose just to create an accordion template or a full skins template. Design it as you want. Run it to create a swc and then import that swc into flex. You can then use that skin in your accordion panel.
That way your skin can be designed with your rounded corners (make sure you have scale 9 enabled so that they scale properly)