Различный вид полей «Радиополе» и «Флажок» в Sencha Touch 1.1 - PullRequest
Новая
       1

Различный вид полей «Радиополе» и «Флажок» в Sencha Touch 1.1

4 голосов
/ 17 января 2012

По умолчанию Sencha Touch 1.1 предоставляет radiofield и checkboxfield, которые показывают галочку (галочку).Из-за этого дизайна нет никакого визуального способа различать их.

Sencha Touch radiofield

Как я могу изменить внешний вид radiofield, чтобы он выглядел как традиционный переключатель

Ответы [ 2 ]

2 голосов
/ 14 марта 2012

Я добавил свои собственные стили, чтобы изменить внешний вид флажка. 

.x-field .x-input-radio:after, .x-field .x-input-radio:checked:after {
    content: "";
    position: absolute;
    width: 1.25em;
    height: 1.25em;
    top: 50%;
    left: auto;
    -webkit-transform: rotate(0deg) skew(0deg);
    -webkit-transform-origin: 50% 50%;
    -webkit-border-radius: 2em;
    right: 1.1em;
    border: .45em solid;
    margin-top: -0.75em;
}
.x-field .x-input-radio:checked:after {
    border-color: #06346a;
}
.x-field .x-input-radio:after {
    border-color: #dddddd;
}
0 голосов
/ 24 марта 2012 
.x-field .x-input-radio:after,
.x-field.x-item-disabled .x-input-radio:checked:after {
    content: "";
    position: absolute;
    width: 1.4em;
    height: 1.4em;
    top: 50%;
    left: auto;
    right: 1.1em;
    -webkit-mask-image: url();
    margin-top: -0.7em;
    border-radius: 15px;
}
.x-field .x-input-radio:checked:after {
    content: "";
    position: absolute;
    top: 50%;
    left: auto;
    right: 1.1em;
    -webkit-mask-image: url();
    margin-top: -0.7em;
    border: 5px solid #dddddd;
    border-radius: 15px;
}

Ссылка: http://tjwebb.wordpress.com/2012/03/24/how-to-override-the-default-sencha-touch-2-radio-field-style/

...