FluentUI/example/qml/page/T_Icons.qml

import QtQuick 2.15
import QtQuick.Controls 2.15
import QtQuick.Layouts 1.15
import QtQuick.Window 2.15
import FluentUI 1.0

FluContentPage {

    title: qsTr("Icons")

    FluTextBox{
        id: text_box
        placeholderText: qsTr("Please enter a keyword")
        anchors{
            top: parent.top
        }
    }

    FluFilledButton{
        text: qsTr("Search")
        anchors{
            left: text_box.right
            verticalCenter: text_box.verticalCenter
            leftMargin: 14
        }
        onClicked: {
            grid_view.model = FluApp.iconDatas(text_box.text)
        }
    }
    GridView{
        id: grid_view
        cellWidth: 110
        cellHeight: 110
        clip: true
        boundsBehavior: GridView.StopAtBounds
        model: FluApp.iconDatas()
        ScrollBar.vertical: FluScrollBar {}
        anchors{
            topMargin: 10
            top: text_box.bottom
            left: parent.left
            right: parent.right
            bottom: parent.bottom
        }
        delegate: Item {
            width: 100
            height: 100
            FluIconButton{
                id:item_icon
                iconSource: modelData.icon
                iconSize: 30
                padding: 0
                verticalPadding: 0
                horizontalPadding: 0
                bottomPadding: 30
                anchors.fill: parent
                onClicked: {
                    var text  ="FluentIcons."+modelData.name;
                    FluTools.clipText(text)
                    showSuccess(qsTr("You Copied ")+text)
                }
                FluText{
                    width: parent.width
                    horizontalAlignment: Qt.AlignHCenter
                    wrapMode: Text.WrapAnywhere
                    text: modelData.name
                    anchors.top: parent.top
                    anchors.topMargin: 60
                }
            }
        }
    }
}