ツールボタン
ToolButton は、通常ツールバーや同様のコンパクトなUI領域のアクションに使用される特殊な Button です。多くの場合、アイコンのみを表示するように設定されますが、テキストを表示することもできます。RinUI の ToolButton は、内部の IconWidget の側面を制御するための便利なエイリアス(size および color)を提供します。
基本的なツールボタン(アイコンのみ)
ToolButton は、アイコンのみのボタンとして頻繁に使用され、ツールバーに適した控えめな外観のために flat: true に設定されることがよくあります。
qml
import QtQuick 2.15
import RinUI
// ...
ToolButton {
icon.name: "ic_fluent_apps_settings_20_regular"
onClicked: {
console.log("Settings ToolButton clicked");
}
}主なプロパティ
icon.name:string- 内部IconWidgetを介して表示される Fluent アイコンの名前。これはアイコンを設定する推奨の方法です。text:string- ボタンに表示されるテキスト。size:real- (エイリアス) 内部IconWidgetのsizeプロパティを設定し、アイコンの視覚的なサイズを制御します。ToolButtonのIconWidget定義内ではデフォルトで20です。color:color- (エイリアス) 内部IconWidgetのcolorプロパティを設定します。flat:bool-Buttonから継承されます。Buttonはデフォルトでfalseですが、ToolButtonは典型的なツールバーの外観のためにしばしば明示的にflat: trueに設定されます。enabled:bool- コントロールがインタラクティブかどうか。デフォルトはtrueです。
ToolButton は Button から継承されるため、すべての標準的な Button プロパティ(highlighted、checkable、primaryColor、さまざまな状態のスタイリングなど)およびシグナル(onClicked など)が利用可能です。
例:ComboBox インジケータとしての使用
RinUI の ComboBox は、内部で ToolButton をドロップダウン矢印インジケータとして使用します:
qml
// ComboBox.qml のインジケータからのスニペット
ToolButton {
flat: true
icon.name: "ic_fluent_chevron_down_20_regular"
size: 14
color: Theme.currentTheme.colors.textSecondaryColor
// ... その他のプロパティ
}これは、フラットなアイコンのみの ToolButton の一般的な使用例を示しています。