Comments (2)
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.
from chocolatechip-ui.
Thank you for helpful links and references.
from chocolatechip-ui.
Related Issues (20)
- Example navigation-backto: scroll always results entering detail page HOT 2
- Grid do not work on Safari (iPad) HOT 2
- Chocolatechipjs in its own repo HOT 2
- Back button not rendering correctly on WP8 HOT 3
- Phonegap iOS scrolling singletap hadling issues HOT 23
- $.UIEditList callback function when an item is deleted HOT 6
- data-goto not functioning in Firefox 34, 35 HOT 7
- Chocolatechip-ui app freezes after iOS unlock HOT 2
- Keyboard autofocus being triggered on input fields
- data-goto syntax in docs is wrong HOT 1
- Cannot read property 'classList' of null HOT 4
- chui 3.5.5 does not work on Android Jellybean (4.2) HOT 12
- chocolatechip-ui.json purpose? HOT 3
- $.UIDeletable cannot read property 'on' of undefined HOT 13
- $.UIGoToArticle() loses history between tabs HOT 12
- wp8 nokia lumia 520 "back button issue" HOT 5
- Low Memory Warnings HOT 6
- Error when using $.UIGoToArticle HOT 9
- Tabbar on Android - with scrolled content double click needed HOT 11
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from chocolatechip-ui.