mirror of
https://github.com/zhuzichu520/FluentUI.git
synced 2024-11-23 11:17:15 +08:00
update
This commit is contained in:
parent
cbb8c3122b
commit
243f8aa248
@ -132,7 +132,8 @@ FluExpander{
|
|||||||
"FluAcrylic",
|
"FluAcrylic",
|
||||||
"FluRemoteLoader",
|
"FluRemoteLoader",
|
||||||
"FluMenuBar",
|
"FluMenuBar",
|
||||||
"FluPagination"
|
"FluPagination",
|
||||||
|
"FluRadioButtons"
|
||||||
];
|
];
|
||||||
code = code.replace(/\n/g, "<br>");
|
code = code.replace(/\n/g, "<br>");
|
||||||
code = code.replace(/ /g, " ");
|
code = code.replace(/ /g, " ");
|
||||||
|
@ -221,6 +221,9 @@ FluScrollablePage{
|
|||||||
}
|
}
|
||||||
FluMenuItem{
|
FluMenuItem{
|
||||||
text:"Menu_4"
|
text:"Menu_4"
|
||||||
|
onClicked: {
|
||||||
|
console.debug(parent.height)
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
FluToggleSwitch{
|
FluToggleSwitch{
|
||||||
@ -259,24 +262,23 @@ FluScrollablePage{
|
|||||||
height: 100
|
height: 100
|
||||||
paddings: 10
|
paddings: 10
|
||||||
Layout.topMargin: 20
|
Layout.topMargin: 20
|
||||||
ColumnLayout{
|
FluRadioButtons{
|
||||||
spacing: 8
|
spacing: 8
|
||||||
anchors{
|
anchors{
|
||||||
verticalCenter: parent.verticalCenter
|
verticalCenter: parent.verticalCenter
|
||||||
left: parent.left
|
left: parent.left
|
||||||
}
|
}
|
||||||
Repeater{
|
FluRadioButton{
|
||||||
id:repeater
|
disabled:radio_button_switch.checked
|
||||||
property int selecIndex : 0
|
text:"Radio Button_1"
|
||||||
model: 3
|
}
|
||||||
delegate: FluRadioButton{
|
FluRadioButton{
|
||||||
checked : repeater.selecIndex===index
|
disabled:radio_button_switch.checked
|
||||||
disabled:radio_button_switch.checked
|
text:"Radio Button_2"
|
||||||
text:"Radio Button_"+index
|
}
|
||||||
clickListener:function(){
|
FluRadioButton{
|
||||||
repeater.selecIndex = index
|
disabled:radio_button_switch.checked
|
||||||
}
|
text:"Radio Button_3"
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
FluToggleSwitch{
|
FluToggleSwitch{
|
||||||
|
@ -27,7 +27,7 @@ FluScrollablePage{
|
|||||||
Layout.topMargin: 20
|
Layout.topMargin: 20
|
||||||
Item{
|
Item{
|
||||||
anchors.fill: parent
|
anchors.fill: parent
|
||||||
ColumnLayout{
|
FluRadioButtons{
|
||||||
spacing: 8
|
spacing: 8
|
||||||
anchors{
|
anchors{
|
||||||
top: parent.top
|
top: parent.top
|
||||||
@ -35,17 +35,14 @@ FluScrollablePage{
|
|||||||
topMargin: 15
|
topMargin: 15
|
||||||
leftMargin: 15
|
leftMargin: 15
|
||||||
}
|
}
|
||||||
Repeater{
|
FluRadioButton{
|
||||||
id:repeater
|
text:"Radio Button_1"
|
||||||
property int selecIndex : 0
|
}
|
||||||
model: 3
|
FluRadioButton{
|
||||||
delegate: FluRadioButton{
|
text:"Radio Button_2"
|
||||||
checked : repeater.selecIndex===index
|
}
|
||||||
text:"Radio Button_"+index
|
FluRadioButton{
|
||||||
clickListener:function() {
|
text:"Radio Button_3"
|
||||||
repeater.selecIndex = index
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -47,4 +47,55 @@ FluScrollablePage{
|
|||||||
}'
|
}'
|
||||||
}
|
}
|
||||||
|
|
||||||
|
FluArea{
|
||||||
|
Layout.fillWidth: true
|
||||||
|
height: 100
|
||||||
|
paddings: 10
|
||||||
|
Layout.topMargin: 20
|
||||||
|
FluRadioButtons{
|
||||||
|
spacing: 8
|
||||||
|
anchors.verticalCenter: parent.verticalCenter
|
||||||
|
anchors{
|
||||||
|
verticalCenter: parent.verticalCenter
|
||||||
|
left: parent.left
|
||||||
|
}
|
||||||
|
FluRadioButton{
|
||||||
|
disabled: radio_button_switch2.checked
|
||||||
|
text:"Radio Button_1"
|
||||||
|
}
|
||||||
|
FluRadioButton{
|
||||||
|
disabled: radio_button_switch2.checked
|
||||||
|
text:"Radio Button_2"
|
||||||
|
}
|
||||||
|
FluRadioButton{
|
||||||
|
disabled: radio_button_switch2.checked
|
||||||
|
text:"Radio Button_3"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
FluToggleSwitch{
|
||||||
|
id:radio_button_switch2
|
||||||
|
anchors{
|
||||||
|
right: parent.right
|
||||||
|
verticalCenter: parent.verticalCenter
|
||||||
|
}
|
||||||
|
text:"Disabled"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
CodeExpander{
|
||||||
|
Layout.fillWidth: true
|
||||||
|
Layout.topMargin: -1
|
||||||
|
code:'FluRadioButtons{
|
||||||
|
spacing: 8
|
||||||
|
FluRadioButton{
|
||||||
|
text:"Radio Button_1"
|
||||||
|
}
|
||||||
|
FluRadioButton{
|
||||||
|
text:"Radio Button_2"
|
||||||
|
}
|
||||||
|
FluRadioButton{
|
||||||
|
text:"Radio Button_3"
|
||||||
|
}
|
||||||
|
}'
|
||||||
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
@ -77,7 +77,7 @@ Button {
|
|||||||
onClicked: {
|
onClicked: {
|
||||||
if(items && menu.count !==0){
|
if(items && menu.count !==0){
|
||||||
var pos = control.mapToItem(null, 0, 0)
|
var pos = control.mapToItem(null, 0, 0)
|
||||||
var containerHeight = menu.height
|
var containerHeight = menu.count*36
|
||||||
if(window.height>pos.y+control.height+containerHeight){
|
if(window.height>pos.y+control.height+containerHeight){
|
||||||
menu.y = control.height
|
menu.y = control.height
|
||||||
}else if(pos.y>containerHeight){
|
}else if(pos.y>containerHeight){
|
||||||
@ -90,6 +90,7 @@ Button {
|
|||||||
}
|
}
|
||||||
FluMenu{
|
FluMenu{
|
||||||
id:menu
|
id:menu
|
||||||
|
modal:true
|
||||||
width: control.width
|
width: control.width
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -79,8 +79,7 @@ Item {
|
|||||||
Behavior on height {
|
Behavior on height {
|
||||||
NumberAnimation{
|
NumberAnimation{
|
||||||
duration: 167
|
duration: 167
|
||||||
easing.type: Easing.BezierSpline
|
easing.type: Easing.InCubic
|
||||||
easing.bezierCurve: expand ? [ 0, 0, 0, 1 ] : [ 1, 0, 0, 0 ]
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -16,7 +16,6 @@ T.Menu {
|
|||||||
spacing: 0
|
spacing: 0
|
||||||
delegate: FluMenuItem { }
|
delegate: FluMenuItem { }
|
||||||
enter: Transition {
|
enter: Transition {
|
||||||
reversible: true
|
|
||||||
NumberAnimation {
|
NumberAnimation {
|
||||||
property: "opacity"
|
property: "opacity"
|
||||||
from:0
|
from:0
|
||||||
|
@ -122,8 +122,7 @@ Item {
|
|||||||
Behavior on height {
|
Behavior on height {
|
||||||
NumberAnimation{
|
NumberAnimation{
|
||||||
duration: 167
|
duration: 167
|
||||||
easing.type: Easing.BezierSpline
|
easing.type: Easing.InCubic
|
||||||
easing.bezierCurve: [ 0, 0, 0, 1 ]
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -140,8 +139,7 @@ Item {
|
|||||||
Behavior on height {
|
Behavior on height {
|
||||||
NumberAnimation{
|
NumberAnimation{
|
||||||
duration: 167
|
duration: 167
|
||||||
easing.type: Easing.BezierSpline
|
easing.type: Easing.InCubic
|
||||||
easing.bezierCurve: [ 0, 0, 0, 1 ]
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
width: layout_list.width
|
width: layout_list.width
|
||||||
@ -333,8 +331,7 @@ Item {
|
|||||||
Behavior on height {
|
Behavior on height {
|
||||||
NumberAnimation{
|
NumberAnimation{
|
||||||
duration: 167
|
duration: 167
|
||||||
easing.type: Easing.BezierSpline
|
easing.type: Easing.InCubic
|
||||||
easing.bezierCurve: [ 0, 0, 0, 1 ]
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
clip: true
|
clip: true
|
||||||
@ -571,8 +568,7 @@ Item {
|
|||||||
Behavior on Layout.preferredWidth {
|
Behavior on Layout.preferredWidth {
|
||||||
NumberAnimation{
|
NumberAnimation{
|
||||||
duration: 167
|
duration: 167
|
||||||
easing.type: Easing.BezierSpline
|
easing.type: Easing.InCubic
|
||||||
easing.bezierCurve: [ 0, 0, 0, 1 ]
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -638,8 +634,7 @@ Item {
|
|||||||
Behavior on anchors.leftMargin {
|
Behavior on anchors.leftMargin {
|
||||||
NumberAnimation{
|
NumberAnimation{
|
||||||
duration: 167
|
duration: 167
|
||||||
easing.type: Easing.BezierSpline
|
easing.type: Easing.InCubic
|
||||||
easing.bezierCurve: [ 0, 0, 0, 1 ]
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
StackView{
|
StackView{
|
||||||
@ -695,15 +690,13 @@ Item {
|
|||||||
Behavior on width {
|
Behavior on width {
|
||||||
NumberAnimation{
|
NumberAnimation{
|
||||||
duration: 167
|
duration: 167
|
||||||
easing.type: Easing.BezierSpline
|
easing.type: Easing.InCubic
|
||||||
easing.bezierCurve: [ 0, 0, 0, 1 ]
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
Behavior on x {
|
Behavior on x {
|
||||||
NumberAnimation{
|
NumberAnimation{
|
||||||
duration: 167
|
duration: 167
|
||||||
easing.type: Easing.BezierSpline
|
easing.type: Easing.InCubic
|
||||||
easing.bezierCurve: [ 0, 0, 0, 1 ]
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
visible: {
|
visible: {
|
||||||
@ -768,7 +761,7 @@ Item {
|
|||||||
clip: true
|
clip: true
|
||||||
ScrollBar.vertical: FluScrollBar {}
|
ScrollBar.vertical: FluScrollBar {}
|
||||||
model:d.handleItems()
|
model:d.handleItems()
|
||||||
highlightMoveDuration: 150
|
highlightMoveDuration: 167
|
||||||
highlight: Item{
|
highlight: Item{
|
||||||
clip: true
|
clip: true
|
||||||
Rectangle{
|
Rectangle{
|
||||||
|
@ -27,7 +27,8 @@ Item {
|
|||||||
clip: true
|
clip: true
|
||||||
spacing: 20
|
spacing: 20
|
||||||
interactive: false
|
interactive: false
|
||||||
orientation:ListView.Horizontal
|
orientation: ListView.Horizontal
|
||||||
|
highlightMoveDuration: 167
|
||||||
highlight: Item{
|
highlight: Item{
|
||||||
clip: true
|
clip: true
|
||||||
Rectangle{
|
Rectangle{
|
||||||
@ -38,7 +39,8 @@ Item {
|
|||||||
y:37
|
y:37
|
||||||
Behavior on width {
|
Behavior on width {
|
||||||
NumberAnimation{
|
NumberAnimation{
|
||||||
duration: 150
|
duration: 167
|
||||||
|
easing.type: Easing.InCubic
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -61,11 +63,6 @@ Item {
|
|||||||
return normalColor
|
return normalColor
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
transitions: Transition {
|
|
||||||
NumberAnimation{
|
|
||||||
duration: 400;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
onClicked: {
|
onClicked: {
|
||||||
nav_list.currentIndex = index
|
nav_list.currentIndex = index
|
||||||
|
30
src/imports/FluentUI/Controls/FluRadioButtons.qml
Normal file
30
src/imports/FluentUI/Controls/FluRadioButtons.qml
Normal file
@ -0,0 +1,30 @@
|
|||||||
|
import QtQuick
|
||||||
|
import QtQuick.Controls
|
||||||
|
import QtQuick.Controls.Basic
|
||||||
|
import QtQuick.Layouts
|
||||||
|
import FluentUI
|
||||||
|
|
||||||
|
ColumnLayout {
|
||||||
|
default property alias buttons: control.data
|
||||||
|
property int currentIndex : -1
|
||||||
|
id:control
|
||||||
|
onCurrentIndexChanged: {
|
||||||
|
for(var i = 0;i<buttons.length;i++){
|
||||||
|
buttons[i].checked = false
|
||||||
|
}
|
||||||
|
buttons[currentIndex].checked = true
|
||||||
|
}
|
||||||
|
Component.onCompleted: {
|
||||||
|
for(var i = 0;i<buttons.length;i++){
|
||||||
|
buttons[i].clickListener = function(){
|
||||||
|
for(var i = 0;i<buttons.length;i++){
|
||||||
|
var button = buttons[i]
|
||||||
|
if(this === button){
|
||||||
|
currentIndex = i
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
currentIndex = 0
|
||||||
|
}
|
||||||
|
}
|
Loading…
Reference in New Issue
Block a user