Работа с кнопками

RosaControls предоставляет элемент Button с возможностью выбора пресета цвета и формы

Пример с параметрами

Button { 
    text: i18n("large button") 
    sizeName: 'large'      # размер кнопки (или выставить вручную with & height) 
    paletteName: 'primary' # цвет текста и фона 
    dangerous: true  # выставит цвет текста в красный, не зависимо от paletteName 
    enabled: true    # если false, то иконка, текст и фон станут серыми 
    flat: false      # true - уберет фон кнопки 
}

Параметры цвета и формы

paletteName: 
    "primary" # основная кнопка 
    "secondary" # второстепенная кнопка 
    "secondary-neutral" # черно-белый стиль 
    "contextual" # без фона с обводкой 
 
sizeName: 
    "small"  # h32, r16 
    "medium" # h40, r12 
    "large"  # h48, r16 
}

Button

Простая кнопка без фона.

ToolButton { 
    text: i18n("Применить") 
    icon.source: Rosa.Theme.icon('24/week-color') 
}

IconButton

Кнопка для отображения иконки, с пресетами по размеру.

IconButton { 
    icon.source: Rosa.Theme.icon('16/close') 
    sizeName: "xxsmall" 
    shape: "circle" 
    color: Rosa.Theme.additionalDarkThemeOrangeColor 
}

Параметры размера и формы. При выборе параметров, сочетания размера и формы может не быть, тогда выставляется размер 48x48 px.

"xxsmall/circle": 16x16 
"xsmall/circle":  20x20 
"small/circle":   28x28 
"middle/circle":  48x48 
"slim/oval":      68x32 
"small/oval":     45x29 
"large/oval":     68x44 
"xlarge/oval":    92x60 
"xxlarge/oval":   154x44

IconLabelButton

Кнопка с иконкой и надписью. Основано на QML AbstractButton.

color # цвет фона 
textColor # цвет текста 
font # шрифт текста 
elide: false # elide текста 
spacing  # расстояние между "кнопкой" и надписью 
 
# кастомизация "кнопки" 
int buttonWidth: __sizes[sizeName].size.width 
int buttonHeight: __sizes[sizeName].size.height 
int radius: buttonHeight / 2 
 
# пресеты размера кнопки 
sizeName: 'slim' 
    "slim": { size: Rosa.Theme.scaleSize(68, 32), spacing: Rosa.Theme.scale(4) } 
    "large": { size: Rosa.Theme.scaleSize(68, 44), spacing: Rosa.Theme.scale(12) } 
    "xlarge": { size: Rosa.Theme.scaleSize(92, 60), spacing: Rosa.Theme.scale(8) }

IconLabelButton { 
    text: i18n("Switch wi-fi") 
    icon.source: Rosa.Theme.icon('24/week-dark') 
    sizeName: 'slim' 
} 
 
IconLabelButton { 
    text: i18n("Switch wi-fi") 
    icon.source: Rosa.Theme.icon('24/week-dark') 
    sizeName: 'large' 
    landscapeMode: true 
} 
 
IconLabelButton { 
    text: i18n("Switch wi-fi") 
    icon.source: Rosa.Theme.icon('24/week-dark') 
    sizeName: 'xlarge' 
}

CheckBox

Обычный checkbox с пресетами настроек для размера индикатора.

string sizeName: "small" # пресет размера индикатора 
"smallest" 
"small" 
"large" 
 
int spacing # расстояние между индикатором и текстом

CheckBox { 
    sizeName: "smallest" 
    text: "switch wifi" 
} 
 
CheckBox { 
    sizeName: "small" 
    text: "switch wifi" 
} 
 
CheckBox { 
    sizeName: "large" 
    text: "switch wifi" 
}

Switch

Обычный переключатель, основанный на QML Switch. Доступен в RosaStyle.

text # текст переключателя 
font: Rosa.Theme.labelMediumMidFont 
palette.text: Rosa.Theme.textColor 
 
spacing: Rosa.Theme.scale(4) # расстояние между индикатором и текстом
                        

Switch { 
    onCheckedChanged: { 
        process(checked) 
    } 
} 
 
Switch { 
    text: i18n("Switch with text") 
}