Where do I find example for buttons?

[stefek99]

Hi,

I've inherited a project that uses ChocolateChip-UI... I'm looking for buttons

Can you help me?

(I don't seem to find them in the docs)

Image for illustrative purposes. Thanks! Michal

[sourcebits-robertbiggs]

Buttons are implemented by putting the class "button" on an anchor tag:

<a class='button' href='#'>My Button</a>

Be aware that this gives you the default button look on all OSes. For iOS this looks like a tinted label-no borders or background color. On Android it looks like the rectangular Android ones, on Wndows like the Windows ones.

Rounded rect buttons don't exist on iOS any more. However, ChocolateChip-UI does have a class for action buttons, which have a rounded border around the text and transparent background. Action buttons on Android and Windows look like regular buttons on these platforms.

That said, if you really want those awful looking Bootstrap buttons, you can define a class to implement them. Do something like this:

button.wow-style {
   border: solid 1px red;
   background-color: red;
   color: white;
   border-radius: 6px;
}

<a class='button wow-style' href="#'>Button</a>

Be aware that buttons styled like this were common on iOS6, they are totally absent from iOS7 and may make your app look odd to users. Instead I'd probably just put a background color on an action button:

.button.action.new-style {
   background-color: red;
   border-color: red;
   color: white;
}

<a class='button new-style' href="#'>Button</a>

You can create a Back button by putting that class on a button:

<a href='# class='button back'>Main</a>

Please go to documentation/markup for information about buttons. http://chocolatechip-ui.com/documentation#/markup. Look for the link to "button" in the menu on the left. You can also take a look at the following examples after building them out: form-login.html form-register.html navigation-list-toolbars.html sheet.html

To be frank, iOS7 doesn't have much in the way of styles for buttons any more. Android and Windows ones are quite basic as well.

The best way to add some pizzaz to your theme is to spruce of the colors. You can do that by changing the default colors in the LESS source file colors.less. Each theme has one. To see an example of a customized color scheme, check out this example: https://github.com/sourcebits-robertbiggs/chui-red.

If you need some more help creating the button look you need, reach out. It's really easy since it's just basic CSS styles. Define a class, stick it on your button. Done.

[stefek99]

Thank you for helpful links and references.