One other detail: note the > character after each label. Normally I'd use an icon font here, but since this is just an example, we'll use the standard ★ character. The star itself is going to be a character in the content attribute of the label's :before element. We need to hide the text of the label (the label text isn't absolutely necessary, but is useful for accessibility & testing).We're going to be using a :before element on the label to display our stars and make them clickable ( :before elements on inputs behave strangely).You'll note that each label has a span inside. %input ( type= 'radio' name= 'rating' value= "rating_2" id= "rating_2") Since radios need a common name and unique values & ids, we'll use the arbitrary name rating here.rating_selection %input ( type= 'radio' name= 'rating' value= "rating_1" id= "rating_1") Instead of using Javascript to write the user's selection back to a hidden input, we're going to skin a list of radio inputs. The Basic StarĪ star rating is just fancy UI allowing the user to select from a set of values (typically 1-5). Back in the day, we'd use a repeating background image and some JavaScript, but it's 2015 now, and in the world of retina screens and CSS3, we can do better. It also exerts some control over the alignment of items when they overflow the line.This pattern comes up regularly for us: providing the ability for a user to rate something via stars. It helps distribute extra free space leftover when either all the flex items on a line are inflexible, or are flexible but have reached their maximum size. This defines the alignment along the main axis. The cross size property is whichever of ‘width’ or ‘height’ that is in the cross dimension. cross size – The width or height of a flex item, whichever is in the cross dimension, is the item’s cross size.cross-start | cross-end – Flex lines are filled with items and placed into the container starting on the cross-start side of the flex container and going toward the cross-end side.Its direction depends on the main axis direction. cross axis – The axis perpendicular to the main axis is called the cross axis.The flex item’s main size property is either the ‘width’ or ‘height’ property, whichever is in the main dimension. main size – A flex item’s width or height, whichever is in the main dimension, is the item’s main size.main-start | main-end – The flex items are placed within the container starting from main-start and going to main-end. Beware, it is not necessarily horizontal it depends on the flex-direction property (see below).
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |