I want to create a button like this to my application.Please someone help me to do this
You can make it by using the <ons-speed-dial> element of Onsen UI: https://tutorial.onsen.io/?framework=vanilla&category=reference&module=speed-dial
If you want your buttons to be scattered like in the Debugger, then after choosing the direction of the <ons-speed-dial>, add a margin to each of the <ons-speed-dial-item> to place them where you want them to be.
Related
I want to create steps or tracking bar in Sencha ExtJS Classic as the following images
what is the best way to implement this in ExtJS Classic?
each step have to be clickable
You can start with:
#example: https://fiddle.sencha.com/#view/editor&fiddle/274i
Or you start your own like this:
xtype: breadcrumb
example: https://fiddle.sencha.com/#view/editor&fiddle/31vu
Other than that you can also start with the segmentedbutton and use css ::after to add the colored line.
In the past I did this one time and it turned out to be a lot of work. We used layout: 'hbox' and used buttons.
The main problem was to add the logic to allow step back still keeping information, add logic after each step separately and make this a full "wizzard-component".
I'm not sure if this is the right place to ask because I dont have any code to show. I'm actually looking for ideas on possible ways to solve my problem.
I have an app that displays the grid on the screen when the media query has a min width of a tablet.
But when the view is in mobile mode I don't want to show the grid. Instead I have a drop down menu which has a grid option. When selected will be show in a paper-dialog (pop up)
The problem is I have to create two grids (vaadin-grid) and show the appropriate one based on the view. Is there a way to have only one grid? Can I put it in a paper-dialog but not pop-out when in tablet and desktop view?
Thanks in advance
If your grid element has every custom property then that is an element in the DOM, so you can move it into the dialog if thats needed using javascript:
let myGrid = this.$$('#myGrid');
let myDialogContent = this.$$('#myDialogContent');
Polymer.dom(myDialogContent).appendChild(myGrid);
Also if you think it a different way, then you can hide the grid outside of the screen and you can slide that in when it's needed like a drawer panel and you dont need to move the element at all in the DOM.
By the way for programming question stackoverflow has the https://softwareengineering.stackexchange.com/ site, but I think it is Ok to send it here.
Using ExtJS5 I want my toolbar buttons to look like the normal ExtJS buttons. In the documentation I see the CSS Mixins but I am not putting things together. Can someone give me a kick in the right direction? Thanks.
Use defaultButtonUI in your toolbar:
defaultButtonUI : 'default'
See documentation of defaultButtonUI:
A default ui to use for Button items. This is a quick and simple way
to change the look of all child Buttons.
If there is no value for defaultButtonUI, the button's ui value will
get -toolbar appended so the Button has a different look when it's a
child of a Toolbar.
See https://fiddle.sencha.com/#fiddle/jpo
After I called carousel page from menu, I want to display a specified carousel item.
I tried to use method like that
myCarsouselContent.setActiveCarouselItemIndex(index);
The problem is, carousel will slide step by step until index.
I don't want to show slide in screen. I think the best way is set value for initial-index = index. But I don't know how to do this.
Can someone help me?
EDIT: Changed my answer since there is an initial-index attribute which is better. Sorry about that.
Use initial-index="2" (or whatever index you like) as an attribute for <ons-carousel>.
<ons-carousel initial-index="2">
...
</ons-carousel>
Here you can see it in action:
http://codepen.io/argelius/pen/MYaGLK
I'm trying to animate a button so that if it is clicked, a picture will appear, but when it is clicked again, the picture will disappear- I want this to continue to happen indefinitely- I feel like this can easily be written with a macro, but I want to avoid unnecessary over-complicating of things. I tried to add in click animations but it will only appear and then disappear
Instead of using animations, you can toggle the transparency of the image between 0 (totally transparent) and 1 (totally solid) when click happens to achieve disappearing and appearing.