initial fluent-widgets ui

examples/view/card_widget/demo.py

@@ -0,0 +1,514 @@
+# coding:utf-8
+import sys
+from pathlib import Path
+
+from PySide6.QtCore import Qt, QPoint, QSize, QUrl, QRect, QPropertyAnimation
+from PySide6.QtGui import QIcon, QFont, QColor, QPainter
+from PySide6.QtWidgets import QApplication, QWidget, QHBoxLayout, QVBoxLayout, QGraphicsOpacityEffect
+
+from qfluentwidgets import (CardWidget, setTheme, Theme, IconWidget, BodyLabel, CaptionLabel, PushButton,
+                            TransparentToolButton, FluentIcon, RoundMenu, Action, ElevatedCardWidget,
+                            ImageLabel, isDarkTheme, FlowLayout, MSFluentTitleBar, SimpleCardWidget,
+                            HeaderCardWidget, InfoBarIcon, HyperlinkLabel, HorizontalFlipView,
+                            PrimaryPushButton, TitleLabel, PillPushButton, setFont, ScrollArea,
+                            VerticalSeparator, MSFluentWindow, NavigationItemPosition, GroupHeaderCardWidget,
+                            ComboBox, SearchLineEdit)
+
+from qfluentwidgets.components.widgets.acrylic_label import AcrylicBrush
+
+
+def isWin11():
+    return sys.platform == 'win32' and sys.getwindowsversion().build >= 22000
+
+
+if isWin11():
+    from qframelesswindow import AcrylicWindow as Window
+else:
+    from qframelesswindow import FramelessWindow as Window
+
+
+class AppCard(CardWidget):
+    """ App card """
+
+    def __init__(self, icon, title, content, parent=None):
+        super().__init__(parent)
+        self.iconWidget = IconWidget(icon)
+        self.titleLabel = BodyLabel(title, self)
+        self.contentLabel = CaptionLabel(content, self)
+        self.openButton = PushButton('打开', self)
+        self.moreButton = TransparentToolButton(FluentIcon.MORE, self)
+
+        self.hBoxLayout = QHBoxLayout(self)
+        self.vBoxLayout = QVBoxLayout()
+
+        self.setFixedHeight(73)
+        self.iconWidget.setFixedSize(48, 48)
+        self.contentLabel.setTextColor("#606060", "#d2d2d2")
+        self.openButton.setFixedWidth(120)
+
+        self.hBoxLayout.setContentsMargins(20, 11, 11, 11)
+        self.hBoxLayout.setSpacing(15)
+        self.hBoxLayout.addWidget(self.iconWidget)
+
+        self.vBoxLayout.setContentsMargins(0, 0, 0, 0)
+        self.vBoxLayout.setSpacing(0)
+        self.vBoxLayout.addWidget(self.titleLabel, 0, Qt.AlignVCenter)
+        self.vBoxLayout.addWidget(self.contentLabel, 0, Qt.AlignVCenter)
+        self.vBoxLayout.setAlignment(Qt.AlignVCenter)
+        self.hBoxLayout.addLayout(self.vBoxLayout)
+
+        self.hBoxLayout.addStretch(1)
+        self.hBoxLayout.addWidget(self.openButton, 0, Qt.AlignRight)
+        self.hBoxLayout.addWidget(self.moreButton, 0, Qt.AlignRight)
+
+        self.moreButton.setFixedSize(32, 32)
+        self.moreButton.clicked.connect(self.onMoreButtonClicked)
+
+    def onMoreButtonClicked(self):
+        menu = RoundMenu(parent=self)
+        menu.addAction(Action(FluentIcon.SHARE, '共享', self))
+        menu.addAction(Action(FluentIcon.CHAT, '写评论', self))
+        menu.addAction(Action(FluentIcon.PIN, '固定到任务栏', self))
+
+        x = (self.moreButton.width() - menu.width()) // 2 + 10
+        pos = self.moreButton.mapToGlobal(QPoint(x, self.moreButton.height()))
+        menu.exec(pos)
+
+
+class EmojiCard(ElevatedCardWidget):
+    """ Emoji card """
+
+    def __init__(self, iconPath: str, parent=None):
+        super().__init__(parent)
+        self.iconWidget = ImageLabel(iconPath, self)
+        self.label = CaptionLabel(Path(iconPath).stem, self)
+
+        self.iconWidget.scaledToHeight(68)
+
+        self.vBoxLayout = QVBoxLayout(self)
+        self.vBoxLayout.setAlignment(Qt.AlignCenter)
+        self.vBoxLayout.addStretch(1)
+        self.vBoxLayout.addWidget(self.iconWidget, 0, Qt.AlignCenter)
+        self.vBoxLayout.addStretch(1)
+        self.vBoxLayout.addWidget(
+            self.label, 0, Qt.AlignHCenter | Qt.AlignBottom)
+
+        self.setFixedSize(168, 176)
+
+
+class StatisticsWidget(QWidget):
+    """ Statistics widget """
+
+    def __init__(self, title: str, value: str, parent=None):
+        super().__init__(parent=parent)
+        self.titleLabel = CaptionLabel(title, self)
+        self.valueLabel = BodyLabel(value, self)
+        self.vBoxLayout = QVBoxLayout(self)
+
+        self.vBoxLayout.setContentsMargins(16, 0, 16, 0)
+        self.vBoxLayout.addWidget(self.valueLabel, 0, Qt.AlignTop)
+        self.vBoxLayout.addWidget(self.titleLabel, 0, Qt.AlignBottom)
+
+        setFont(self.valueLabel, 18, QFont.DemiBold)
+        self.titleLabel.setTextColor(QColor(96, 96, 96), QColor(206, 206, 206))
+
+
+class AppInfoCard(SimpleCardWidget):
+    """ App information card """
+
+    def __init__(self, parent=None):
+        super().__init__(parent)
+        self.iconLabel = ImageLabel(":/qfluentwidgets/images/logo.png", self)
+        self.iconLabel.setBorderRadius(8, 8, 8, 8)
+        self.iconLabel.scaledToWidth(120)
+
+        self.nameLabel = TitleLabel('QFluentWidgets', self)
+        self.installButton = PrimaryPushButton('安装', self)
+        self.companyLabel = HyperlinkLabel(
+            QUrl('https://qfluentwidgets.com'), 'Shokokawaii Inc.', self)
+        self.installButton.setFixedWidth(160)
+
+        self.scoreWidget = StatisticsWidget('平均', '5.0', self)
+        self.separator = VerticalSeparator(self)
+        self.commentWidget = StatisticsWidget('评论数', '3K', self)
+
+        self.descriptionLabel = BodyLabel(
+            'PyQt-Fluent-Widgets 是一个基于 PyQt/PySide 的 Fluent Design 风格组件库，包含许多美观实用的组件，支持亮暗主题无缝切换和自定义主题色，帮助开发者快速实现美观优雅的现代化界面。', self)
+        self.descriptionLabel.setWordWrap(True)
+
+        self.tagButton = PillPushButton('组件库', self)
+        self.tagButton.setCheckable(False)
+        setFont(self.tagButton, 12)
+        self.tagButton.setFixedSize(80, 32)
+
+        self.shareButton = TransparentToolButton(FluentIcon.SHARE, self)
+        self.shareButton.setFixedSize(32, 32)
+        self.shareButton.setIconSize(QSize(14, 14))
+
+        self.hBoxLayout = QHBoxLayout(self)
+        self.vBoxLayout = QVBoxLayout()
+        self.topLayout = QHBoxLayout()
+        self.statisticsLayout = QHBoxLayout()
+        self.buttonLayout = QHBoxLayout()
+
+        self.initLayout()
+        self.setBorderRadius(8)
+
+    def initLayout(self):
+        self.hBoxLayout.setSpacing(30)
+        self.hBoxLayout.setContentsMargins(34, 24, 24, 24)
+        self.hBoxLayout.addWidget(self.iconLabel)
+        self.hBoxLayout.addLayout(self.vBoxLayout)
+
+        self.vBoxLayout.setContentsMargins(0, 0, 0, 0)
+        self.vBoxLayout.setSpacing(0)
+
+        # name label and install button
+        self.vBoxLayout.addLayout(self.topLayout)
+        self.topLayout.setContentsMargins(0, 0, 0, 0)
+        self.topLayout.addWidget(self.nameLabel)
+        self.topLayout.addWidget(self.installButton, 0, Qt.AlignRight)
+
+        # company label
+        self.vBoxLayout.addSpacing(3)
+        self.vBoxLayout.addWidget(self.companyLabel)
+
+        # statistics widgets
+        self.vBoxLayout.addSpacing(20)
+        self.vBoxLayout.addLayout(self.statisticsLayout)
+        self.statisticsLayout.setContentsMargins(0, 0, 0, 0)
+        self.statisticsLayout.setSpacing(10)
+        self.statisticsLayout.addWidget(self.scoreWidget)
+        self.statisticsLayout.addWidget(self.separator)
+        self.statisticsLayout.addWidget(self.commentWidget)
+        self.statisticsLayout.setAlignment(Qt.AlignLeft)
+
+        # description label
+        self.vBoxLayout.addSpacing(20)
+        self.vBoxLayout.addWidget(self.descriptionLabel)
+
+        # button
+        self.vBoxLayout.addSpacing(12)
+        self.buttonLayout.setContentsMargins(0, 0, 0, 0)
+        self.vBoxLayout.addLayout(self.buttonLayout)
+        self.buttonLayout.addWidget(self.tagButton, 0, Qt.AlignLeft)
+        self.buttonLayout.addWidget(self.shareButton, 0, Qt.AlignRight)
+
+
+class GalleryCard(HeaderCardWidget):
+    """ Gallery card """
+
+    def __init__(self, parent=None):
+        super().__init__(parent)
+        self.setTitle('屏幕截图')
+        self.setBorderRadius(8)
+
+        self.flipView = HorizontalFlipView(self)
+        self.expandButton = TransparentToolButton(
+            FluentIcon.CHEVRON_RIGHT_MED, self)
+
+        self.expandButton.setFixedSize(32, 32)
+        self.expandButton.setIconSize(QSize(12, 12))
+
+        self.flipView.addImages([
+            'resource/shoko1.jpg', 'resource/shoko2.jpg',
+            'resource/shoko3.jpg', 'resource/shoko4.jpg',
+        ])
+        self.flipView.setBorderRadius(8)
+        self.flipView.setSpacing(10)
+
+        self.headerLayout.addWidget(self.expandButton, 0, Qt.AlignRight)
+        self.viewLayout.addWidget(self.flipView)
+
+
+class DescriptionCard(HeaderCardWidget):
+    """ Description card """
+
+    def __init__(self, parent=None):
+        super().__init__(parent)
+        self.descriptionLabel = BodyLabel(
+            'PyQt-Fluent-Widgets 是一个基于 PyQt/PySide 的 Fluent Design 风格组件库，包含许多美观实用的组件，支持亮暗主题无缝切换和自定义主题色，搭配所见即所得的 QtDesigner，帮助开发者快速实现美观优雅的现代化界面。', self)
+
+        self.descriptionLabel.setWordWrap(True)
+        self.viewLayout.addWidget(self.descriptionLabel)
+        self.setTitle('描述')
+        self.setBorderRadius(8)
+
+
+class SystemRequirementCard(HeaderCardWidget):
+    """ System requirements card """
+
+    def __init__(self, parent=None):
+        super().__init__(parent)
+        self.setTitle('系统要求')
+        self.setBorderRadius(8)
+
+        self.infoLabel = BodyLabel('此产品适用于你的设备。具有复选标记的项目符合开发人员的系统要求。', self)
+        self.successIcon = IconWidget(InfoBarIcon.SUCCESS, self)
+        self.detailButton = HyperlinkLabel('详细信息', self)
+
+        self.vBoxLayout = QVBoxLayout()
+        self.hBoxLayout = QHBoxLayout()
+
+        self.successIcon.setFixedSize(16, 16)
+        self.hBoxLayout.setSpacing(10)
+        self.vBoxLayout.setSpacing(16)
+        self.hBoxLayout.setContentsMargins(0, 0, 0, 0)
+        self.vBoxLayout.setContentsMargins(0, 0, 0, 0)
+
+        self.hBoxLayout.addWidget(self.successIcon)
+        self.hBoxLayout.addWidget(self.infoLabel)
+        self.vBoxLayout.addLayout(self.hBoxLayout)
+        self.vBoxLayout.addWidget(self.detailButton)
+
+        self.viewLayout.addLayout(self.vBoxLayout)
+
+
+class SettinsCard(GroupHeaderCardWidget):
+
+    def __init__(self, parent=None):
+        super().__init__(parent)
+        self.setTitle("基本设置")
+        self.setBorderRadius(8)
+
+        self.chooseButton = PushButton("选择")
+        self.comboBox = ComboBox()
+        self.lineEdit = SearchLineEdit()
+
+        self.chooseButton.setFixedWidth(120)
+        self.lineEdit.setFixedWidth(320)
+        self.comboBox.setFixedWidth(320)
+        self.comboBox.addItems(["始终显示（首次打包时建议启用）", "始终隐藏"])
+        self.lineEdit.setPlaceholderText("输入入口脚本的路径")
+
+        self.addGroup("resource/Rocket.svg", "构建目录", "选择 Nuitka 的输出目录", self.chooseButton)
+        self.addGroup("resource/Joystick.svg", "运行终端", "设置是否显示命令行终端", self.comboBox)
+        self.addGroup("resource/Python.svg", "入口脚本", "选择软件的入口脚本", self.lineEdit)
+
+
+
+class LightBox(QWidget):
+    """ Light box """
+
+    def __init__(self, parent=None):
+        super().__init__(parent=parent)
+        if isDarkTheme():
+            tintColor = QColor(32, 32, 32, 200)
+        else:
+            tintColor = QColor(255, 255, 255, 160)
+
+        self.acrylicBrush = AcrylicBrush(self, 30, tintColor, QColor(0, 0, 0, 0))
+
+        self.opacityEffect = QGraphicsOpacityEffect(self)
+        self.opacityAni = QPropertyAnimation(self.opacityEffect, b"opacity", self)
+        self.opacityEffect.setOpacity(1)
+        self.setGraphicsEffect(self.opacityEffect)
+
+        self.vBoxLayout = QVBoxLayout(self)
+        self.closeButton = TransparentToolButton(FluentIcon.CLOSE, self)
+        self.flipView = HorizontalFlipView(self)
+        self.nameLabel = BodyLabel('屏幕截图 1', self)
+        self.pageNumButton = PillPushButton('1 / 4', self)
+
+        self.pageNumButton.setCheckable(False)
+        self.pageNumButton.setFixedSize(80, 32)
+        setFont(self.nameLabel, 16, QFont.DemiBold)
+
+        self.closeButton.setFixedSize(32, 32)
+        self.closeButton.setIconSize(QSize(14, 14))
+        self.closeButton.clicked.connect(self.fadeOut)
+
+        self.vBoxLayout.setContentsMargins(26, 28, 26, 28)
+        self.vBoxLayout.addWidget(self.closeButton, 0, Qt.AlignRight | Qt.AlignTop)
+        self.vBoxLayout.addWidget(self.flipView, 1)
+        self.vBoxLayout.addWidget(self.nameLabel, 0, Qt.AlignHCenter)
+        self.vBoxLayout.addSpacing(10)
+        self.vBoxLayout.addWidget(self.pageNumButton, 0, Qt.AlignHCenter)
+
+        self.flipView.addImages([
+            'resource/shoko1.jpg', 'resource/shoko2.jpg',
+            'resource/shoko3.jpg', 'resource/shoko4.jpg',
+        ])
+        self.flipView.currentIndexChanged.connect(self.setCurrentIndex)
+
+    def setCurrentIndex(self, index: int):
+        self.nameLabel.setText(f'屏幕截图 {index + 1}')
+        self.pageNumButton.setText(f'{index + 1} / {self.flipView.count()}')
+        self.flipView.setCurrentIndex(index)
+
+    def paintEvent(self, e):
+        if self.acrylicBrush.isAvailable():
+            return self.acrylicBrush.paint()
+
+        painter = QPainter(self)
+        painter.setPen(Qt.NoPen)
+        if isDarkTheme():
+            painter.setBrush(QColor(32, 32, 32))
+        else:
+            painter.setBrush(QColor(255, 255, 255))
+
+        painter.drawRect(self.rect())
+
+    def resizeEvent(self, e):
+        w = self.width() - 52
+        self.flipView.setItemSize(QSize(w, w * 9 // 16))
+
+    def fadeIn(self):
+        rect = QRect(self.mapToGlobal(QPoint()), self.size())
+        self.acrylicBrush.grabImage(rect)
+
+        self.opacityAni.setStartValue(0)
+        self.opacityAni.setEndValue(1)
+        self.opacityAni.setDuration(150)
+        self.opacityAni.start()
+        self.show()
+
+    def fadeOut(self):
+        self.opacityAni.setStartValue(1)
+        self.opacityAni.setEndValue(0)
+        self.opacityAni.setDuration(150)
+        self.opacityAni.finished.connect(self._onAniFinished)
+        self.opacityAni.start()
+
+    def _onAniFinished(self):
+        self.opacityAni.finished.disconnect()
+        self.hide()
+
+
+class MicaWindow(Window):
+
+    def __init__(self):
+        super().__init__()
+        self.setTitleBar(MSFluentTitleBar(self))
+        if isWin11():
+            self.windowEffect.setMicaEffect(self.winId(), isDarkTheme())
+
+
+class Demo1(MicaWindow):
+
+    def __init__(self):
+        super().__init__()
+        self.setWindowIcon(QIcon(':/qfluentwidgets/images/logo.png'))
+        self.setWindowTitle('Fluent Emoji gallery')
+
+        self.flowLayout = FlowLayout(self)
+
+        self.resize(580, 680)
+        self.flowLayout.setSpacing(6)
+        self.flowLayout.setContentsMargins(30, 60, 30, 30)
+        self.flowLayout.setAlignment(Qt.AlignVCenter)
+
+        for path in Path('./resource').glob('*.png'):
+            self.addCard(str(path))
+
+    def addCard(self, iconPath: str):
+        card = EmojiCard(iconPath, self)
+        self.flowLayout.addWidget(card)
+
+
+class Demo2(MicaWindow):
+
+    def __init__(self):
+        super().__init__()
+        self.resize(600, 600)
+
+        self.vBoxLayout = QVBoxLayout(self)
+
+        self.vBoxLayout.setSpacing(6)
+        self.vBoxLayout.setContentsMargins(30, 60, 30, 30)
+        self.vBoxLayout.setAlignment(Qt.AlignTop)
+
+        suffix = ":/qfluentwidgets/images/controls"
+        self.addCard(f":/qfluentwidgets/images/logo.png",
+                     "PyQt-Fluent-Widgets", 'Shokokawaii Inc.')
+        self.addCard(f"{suffix}/TitleBar.png",
+                     "PyQt-Frameless-Window", 'Shokokawaii Inc.')
+        self.addCard(f"{suffix}/RatingControl.png",
+                     "反馈中心", 'Microsoft Corporation')
+        self.addCard(f"{suffix}/Checkbox.png",
+                     "Microsoft 使用技巧", 'Microsoft Corporation')
+        self.addCard(f"{suffix}/Pivot.png", "MSN 天气", 'Microsoft Corporation')
+        self.addCard(f"{suffix}/MediaPlayerElement.png",
+                     "电影和电视", 'Microsoft Corporation')
+        self.addCard(f"{suffix}/PersonPicture.png",
+                     "照片", 'Microsoft Corporation')
+
+    def addCard(self, icon, title, content):
+        card = AppCard(icon, title, content, self)
+        self.vBoxLayout.addWidget(card, alignment=Qt.AlignTop)
+
+
+class AppInterface(ScrollArea):
+
+    def __init__(self, parent=None):
+        super().__init__(parent)
+
+        self.view = QWidget(self)
+
+        self.vBoxLayout = QVBoxLayout(self.view)
+        self.appCard = AppInfoCard(self)
+        self.galleryCard = GalleryCard(self)
+        self.descriptionCard = DescriptionCard(self)
+        self.settingCard = SettinsCard(self)
+        self.systemCard = SystemRequirementCard(self)
+
+        self.lightBox = LightBox(self)
+        self.lightBox.hide()
+        self.galleryCard.flipView.itemClicked.connect(self.showLightBox)
+
+        self.setWidget(self.view)
+        self.setWidgetResizable(True)
+        self.setObjectName("appInterface")
+
+        self.vBoxLayout.setSpacing(10)
+        self.vBoxLayout.setContentsMargins(0, 0, 10, 30)
+        self.vBoxLayout.addWidget(self.appCard, 0, Qt.AlignTop)
+        self.vBoxLayout.addWidget(self.galleryCard, 0, Qt.AlignTop)
+        self.vBoxLayout.addWidget(self.settingCard, 0, Qt.AlignTop)
+        self.vBoxLayout.addWidget(self.descriptionCard, 0, Qt.AlignTop)
+        self.vBoxLayout.addWidget(self.systemCard, 0, Qt.AlignTop)
+
+        self.enableTransparentBackground()
+
+    def showLightBox(self):
+        index = self.galleryCard.flipView.currentIndex()
+        self.lightBox.setCurrentIndex(index)
+        self.lightBox.fadeIn()
+
+    def resizeEvent(self, e):
+        super().resizeEvent(e)
+        self.lightBox.resize(self.size())
+
+
+class Demo3(MSFluentWindow):
+
+    def __init__(self, parent=None):
+        super().__init__(parent)
+
+        self.appInterface = AppInterface(self)
+
+        # add sub interfaces
+        self.addSubInterface(self.appInterface, FluentIcon.LIBRARY, "库", FluentIcon.LIBRARY_FILL, isTransparent=True)
+        self.navigationInterface.addItem("editInterface", FluentIcon.EDIT, "编辑", selectable=False)
+
+        self.navigationInterface.addItem(
+            "settingInterface", FluentIcon.SETTING, "设置", position=NavigationItemPosition.BOTTOM, selectable=False)
+
+        self.resize(880, 760)
+        self.setWindowTitle('PyQt-Fluent-Widgets')
+        self.setWindowIcon(QIcon(':/qfluentwidgets/images/logo.png'))
+
+        self.titleBar.raise_()
+
+
+if __name__ == '__main__':
+    # setTheme(Theme.DARK)
+
+    app = QApplication(sys.argv)
+    w1 = Demo1()
+    w1.show()
+    w2 = Demo2()
+    w2.show()
+    w3 = Demo3()
+    w3.show()
+    app.exec()

examples/view/card_widget/resource/Joystick.svg

@@ -0,0 +1,186 @@
+<svg width="100%" height="100%" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M4.29453 19.0004C4.13998 18.9699 3.99603 19.0881 3.99603 19.2457V23.1725C3.99603 23.941 4.43638 24.6416 5.1289 24.9748L13.9957 29.241C15.2287 29.8342 16.6647 29.8342 17.8978 29.241L26.765 24.9748C27.4575 24.6416 27.8979 23.941 27.8979 23.1725V19.2457C27.8979 19.0881 27.7539 18.9699 27.5994 19.0004L15.9472 21.3047L4.29453 19.0004Z" fill="url(#paint0_linear_18_3570)" />
+  <path d="M15.9291 11.9132L4.57068 17.1921C4.2178 17.356 3.99213 17.7098 3.99213 18.0989V18.8973C3.99213 18.9744 4.03638 19.0446 4.1059 19.0778L14.6516 24.1166C15.4696 24.5075 16.4204 24.5075 17.2384 24.1166L27.7841 19.0778C27.8536 19.0446 27.8979 18.9744 27.8979 18.8973V18.0989C27.8979 17.7098 27.6722 17.356 27.3193 17.1921L15.9609 11.9132V11.8984L15.945 11.9058L15.9291 11.8984V11.9132Z" fill="url(#paint1_linear_18_3570)" />
+  <path d="M15.9291 11.9132L4.57068 17.1921C4.2178 17.356 3.99213 17.7098 3.99213 18.0989V18.8973C3.99213 18.9744 4.03638 19.0446 4.1059 19.0778L14.6516 24.1166C15.4696 24.5075 16.4204 24.5075 17.2384 24.1166L27.7841 19.0778C27.8536 19.0446 27.8979 18.9744 27.8979 18.8973V18.0989C27.8979 17.7098 27.6722 17.356 27.3193 17.1921L15.9609 11.9132V11.8984L15.945 11.9058L15.9291 11.8984V11.9132Z" fill="url(#paint2_linear_18_3570)" />
+  <path d="M15.9291 11.9132L4.57068 17.1921C4.2178 17.356 3.99213 17.7098 3.99213 18.0989V18.8973C3.99213 18.9744 4.03638 19.0446 4.1059 19.0778L14.6516 24.1166C15.4696 24.5075 16.4204 24.5075 17.2384 24.1166L27.7841 19.0778C27.8536 19.0446 27.8979 18.9744 27.8979 18.8973V18.0989C27.8979 17.7098 27.6722 17.356 27.3193 17.1921L15.9609 11.9132V11.8984L15.945 11.9058L15.9291 11.8984V11.9132Z" fill="url(#paint3_linear_18_3570)" />
+  <path d="M15.9291 11.9132L4.57068 17.1921C4.2178 17.356 3.99213 17.7098 3.99213 18.0989V18.8973C3.99213 18.9744 4.03638 19.0446 4.1059 19.0778L14.6516 24.1166C15.4696 24.5075 16.4204 24.5075 17.2384 24.1166L27.7841 19.0778C27.8536 19.0446 27.8979 18.9744 27.8979 18.8973V18.0989C27.8979 17.7098 27.6722 17.356 27.3193 17.1921L15.9609 11.9132V11.8984L15.945 11.9058L15.9291 11.8984V11.9132Z" fill="url(#paint4_linear_18_3570)" />
+  <path d="M15.9291 11.9132L4.57068 17.1921C4.2178 17.356 3.99213 17.7098 3.99213 18.0989V18.8973C3.99213 18.9744 4.03638 19.0446 4.1059 19.0778L14.6516 24.1166C15.4696 24.5075 16.4204 24.5075 17.2384 24.1166L27.7841 19.0778C27.8536 19.0446 27.8979 18.9744 27.8979 18.8973V18.0989C27.8979 17.7098 27.6722 17.356 27.3193 17.1921L15.9609 11.9132V11.8984L15.945 11.9058L15.9291 11.8984V11.9132Z" fill="url(#paint5_radial_18_3570)" />
+  <g filter="url(#filter0_f_18_3570)">
+    <path d="M17.1909 24.2109L27.5347 19.2109" stroke="url(#paint6_linear_18_3570)" stroke-width="0.2" stroke-linecap="round" />
+  </g>
+  <g filter="url(#filter1_f_18_3570)">
+    <path d="M15.6869 24.3403C11.471 23.435 10.9236 19.4261 11.1768 17.5348L20.8273 17.6964C20.8705 20.2882 19.1623 23.7907 15.6869 24.3403Z" fill="url(#paint7_linear_18_3570)" />
+    <path d="M15.6869 24.3403C11.471 23.435 10.9236 19.4261 11.1768 17.5348L20.8273 17.6964C20.8705 20.2882 19.1623 23.7907 15.6869 24.3403Z" fill="url(#paint8_radial_18_3570)" />
+  </g>
+  <g filter="url(#filter2_f_18_3570)">
+    <path d="M7.94222 20.1172C6.76097 19.8319 6.60758 18.5686 6.67854 17.9727L9.38255 18.0236C9.39463 18.8403 8.91603 19.944 7.94222 20.1172Z" fill="url(#paint9_linear_18_3570)" />
+  </g>
+  <path d="M4.57068 18.101L15.0874 22.9887C15.6212 23.2368 16.2372 23.2371 16.7713 22.9896L27.3193 18.101C27.5267 18.0046 27.6902 17.8427 27.7897 17.6465C27.8595 17.7841 27.8979 17.9385 27.8979 18.0989V18.8973C27.8979 18.9744 27.8536 19.0446 27.7841 19.0778L17.2384 24.1166C16.4204 24.5075 15.4696 24.5075 14.6516 24.1166L4.1059 19.0778C4.03638 19.0446 3.99213 18.9744 3.99213 18.8973V18.0989C3.99213 17.9385 4.03048 17.7841 4.10028 17.6465C4.19981 17.8427 4.36327 18.0046 4.57068 18.101Z" fill="url(#paint10_linear_18_3570)" />
+  <g filter="url(#filter3_i_18_3570)">
+    <path d="M11.1529 17.3563C11.1344 17.4292 11.1249 17.5032 11.1249 17.5781C11.1249 18.7129 13.2971 19.6328 15.9765 19.6328C18.6559 19.6328 20.8281 18.7129 20.8281 17.5781C20.8281 17.5032 20.8186 17.4292 20.8001 17.3563C20.3768 15.0772 18.3782 13.3516 15.9765 13.3516C13.5748 13.3516 11.5762 15.0772 11.1529 17.3563Z" fill="#4C2F5A" />
+    <path d="M11.1529 17.3563C11.1344 17.4292 11.1249 17.5032 11.1249 17.5781C11.1249 18.7129 13.2971 19.6328 15.9765 19.6328C18.6559 19.6328 20.8281 18.7129 20.8281 17.5781C20.8281 17.5032 20.8186 17.4292 20.8001 17.3563C20.3768 15.0772 18.3782 13.3516 15.9765 13.3516C13.5748 13.3516 11.5762 15.0772 11.1529 17.3563Z" fill="url(#paint11_radial_18_3570)" />
+    <path d="M11.1529 17.3563C11.1344 17.4292 11.1249 17.5032 11.1249 17.5781C11.1249 18.7129 13.2971 19.6328 15.9765 19.6328C18.6559 19.6328 20.8281 18.7129 20.8281 17.5781C20.8281 17.5032 20.8186 17.4292 20.8001 17.3563C20.3768 15.0772 18.3782 13.3516 15.9765 13.3516C13.5748 13.3516 11.5762 15.0772 11.1529 17.3563Z" fill="url(#paint12_radial_18_3570)" />
+    <path d="M11.1529 17.3563C11.1344 17.4292 11.1249 17.5032 11.1249 17.5781C11.1249 18.7129 13.2971 19.6328 15.9765 19.6328C18.6559 19.6328 20.8281 18.7129 20.8281 17.5781C20.8281 17.5032 20.8186 17.4292 20.8001 17.3563C20.3768 15.0772 18.3782 13.3516 15.9765 13.3516C13.5748 13.3516 11.5762 15.0772 11.1529 17.3563Z" fill="url(#paint13_radial_18_3570)" />
+    <path d="M11.1529 17.3563C11.1344 17.4292 11.1249 17.5032 11.1249 17.5781C11.1249 18.7129 13.2971 19.6328 15.9765 19.6328C18.6559 19.6328 20.8281 18.7129 20.8281 17.5781C20.8281 17.5032 20.8186 17.4292 20.8001 17.3563C20.3768 15.0772 18.3782 13.3516 15.9765 13.3516C13.5748 13.3516 11.5762 15.0772 11.1529 17.3563Z" fill="url(#paint14_radial_18_3570)" />
+  </g>
+  <path d="M11.1529 17.3563C11.1344 17.4292 11.1249 17.5032 11.1249 17.5781C11.1249 18.7129 13.2971 19.6328 15.9765 19.6328C18.6559 19.6328 20.8281 18.7129 20.8281 17.5781C20.8281 17.5032 20.8186 17.4292 20.8001 17.3563C20.3768 15.0772 18.3782 13.3516 15.9765 13.3516C13.5748 13.3516 11.5762 15.0772 11.1529 17.3563Z" fill="url(#paint15_radial_18_3570)" />
+  <path d="M11.1529 17.3563C11.1344 17.4292 11.1249 17.5032 11.1249 17.5781C11.1249 18.7129 13.2971 19.6328 15.9765 19.6328C18.6559 19.6328 20.8281 18.7129 20.8281 17.5781C20.8281 17.5032 20.8186 17.4292 20.8001 17.3563C20.3768 15.0772 18.3782 13.3516 15.9765 13.3516C13.5748 13.3516 11.5762 15.0772 11.1529 17.3563Z" fill="url(#paint16_radial_18_3570)" />
+  <g filter="url(#filter4_f_18_3570)">
+    <path d="M7.98822 17.0898C8.75841 17.0898 9.38275 17.503 9.38275 18.2344C9.38275 18.668 8.75841 18.8555 7.98822 18.8555C7.21803 18.8555 6.59369 18.6875 6.59369 18.2344C6.59369 17.503 7.21803 17.0898 7.98822 17.0898Z" fill="#50416C" />
+  </g>
+  <path d="M7.98822 16.9766C8.71957 16.9766 9.31244 17.3897 9.31244 18.1211C9.31244 18.5547 8.71957 18.7422 7.98822 18.7422C7.25687 18.7422 6.664 18.5742 6.664 18.1211C6.664 17.3897 7.25687 16.9766 7.98822 16.9766Z" fill="url(#paint17_radial_18_3570)" />
+  <path d="M7.98822 16.9766C8.71957 16.9766 9.31244 17.3897 9.31244 18.1211C9.31244 18.5547 8.71957 18.7422 7.98822 18.7422C7.25687 18.7422 6.664 18.5742 6.664 18.1211C6.664 17.3897 7.25687 16.9766 7.98822 16.9766Z" fill="url(#paint18_radial_18_3570)" />
+  <path d="M7.98822 16.9766C8.71957 16.9766 9.31244 17.3897 9.31244 18.1211C9.31244 18.5547 8.71957 18.7422 7.98822 18.7422C7.25687 18.7422 6.664 18.5742 6.664 18.1211C6.664 17.3897 7.25687 16.9766 7.98822 16.9766Z" fill="url(#paint19_radial_18_3570)" />
+  <path d="M14.9453 9.85938C14.9453 9.31141 15.3895 8.86719 15.9374 8.86719C16.4854 8.86719 16.9296 9.31141 16.9296 9.85938V14.0078C16.9296 14.5558 16.4854 14.7266 15.9374 14.7266C15.3895 14.7266 14.9453 14.5558 14.9453 14.0078V9.85938Z" fill="url(#paint20_linear_18_3570)" />
+  <path d="M14.9453 9.85938C14.9453 9.31141 15.3895 8.86719 15.9374 8.86719C16.4854 8.86719 16.9296 9.31141 16.9296 9.85938V14.0078C16.9296 14.5558 16.4854 14.7266 15.9374 14.7266C15.3895 14.7266 14.9453 14.5558 14.9453 14.0078V9.85938Z" fill="url(#paint21_radial_18_3570)" />
+  <path d="M14.9453 9.85938C14.9453 9.31141 15.3895 8.86719 15.9374 8.86719C16.4854 8.86719 16.9296 9.31141 16.9296 9.85938V14.0078C16.9296 14.5558 16.4854 14.7266 15.9374 14.7266C15.3895 14.7266 14.9453 14.5558 14.9453 14.0078V9.85938Z" fill="url(#paint22_radial_18_3570)" />
+  <circle cx="15.9765" cy="6.39844" r="4.57812" fill="url(#paint23_radial_18_3570)" />
+  <circle cx="15.9765" cy="6.39844" r="4.57812" fill="url(#paint24_radial_18_3570)" />
+  <circle cx="15.9765" cy="6.39844" r="4.57812" fill="url(#paint25_radial_18_3570)" />
+  <g filter="url(#filter5_f_18_3570)">
+    <path d="M27.5347 17.868L16.722 22.9364C16.6037 22.9862 16.289 23.0828 15.9765 23.0703" stroke="#7067A3" stroke-width="0.2" stroke-linecap="round" />
+  </g>
+  <defs>
+    <filter id="filter0_f_18_3570" x="16.8909" y="18.9109" width="10.9438" height="5.60007" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+      <feFlood flood-opacity="0" result="BackgroundImageFix" />
+      <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
+      <feGaussianBlur stdDeviation="0.1" result="effect1_foregroundBlur_18_3570" />
+    </filter>
+    <filter id="filter1_f_18_3570" x="10.3749" y="16.7848" width="11.2032" height="8.30548" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+      <feFlood flood-opacity="0" result="BackgroundImageFix" />
+      <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
+      <feGaussianBlur stdDeviation="0.375" result="effect1_foregroundBlur_18_3570" />
+    </filter>
+    <filter id="filter2_f_18_3570" x="6.414" y="17.7227" width="3.21878" height="2.64453" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+      <feFlood flood-opacity="0" result="BackgroundImageFix" />
+      <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
+      <feGaussianBlur stdDeviation="0.125" result="effect1_foregroundBlur_18_3570" />
+    </filter>
+    <filter id="filter3_i_18_3570" x="11.1249" y="13.2516" width="9.70312" height="6.38125" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+      <feFlood flood-opacity="0" result="BackgroundImageFix" />
+      <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
+      <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
+      <feOffset dy="-0.1" />
+      <feGaussianBlur stdDeviation="0.2" />
+      <feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1" />
+      <feColorMatrix type="matrix" values="0 0 0 0 0.14902 0 0 0 0 0.0862745 0 0 0 0 0.235294 0 0 0 1 0" />
+      <feBlend mode="normal" in2="shape" result="effect1_innerShadow_18_3570" />
+    </filter>
+    <filter id="filter4_f_18_3570" x="6.44369" y="16.9398" width="3.08906" height="2.06563" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+      <feFlood flood-opacity="0" result="BackgroundImageFix" />
+      <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
+      <feGaussianBlur stdDeviation="0.075" result="effect1_foregroundBlur_18_3570" />
+    </filter>
+    <filter id="filter5_f_18_3570" x="15.7765" y="17.6679" width="11.9582" height="5.6035" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+      <feFlood flood-opacity="0" result="BackgroundImageFix" />
+      <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
+      <feGaussianBlur stdDeviation="0.05" result="effect1_foregroundBlur_18_3570" />
+    </filter>
+    <linearGradient id="paint0_linear_18_3570" x1="5.37495" y1="24.2266" x2="26.472" y2="24.2266" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#2F2137" />
+      <stop offset="0.447917" stop-color="#38224A" />
+      <stop offset="0.567708" stop-color="#5D3E7D" />
+    </linearGradient>
+    <linearGradient id="paint1_linear_18_3570" x1="26.2421" y1="17.4922" x2="3.30463" y2="17.4922" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#615D8D" />
+      <stop offset="1" stop-color="#5E5681" />
+    </linearGradient>
+    <linearGradient id="paint2_linear_18_3570" x1="26.2421" y1="17.4922" x2="3.30463" y2="17.4922" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#615D8D" />
+      <stop offset="1" stop-color="#5E5681" />
+    </linearGradient>
+    <linearGradient id="paint3_linear_18_3570" x1="9.98386" y1="20.6792" x2="10.1477" y2="20.3433" gradientUnits="userSpaceOnUse">
+      <stop offset="0.268621" stop-color="#4F3A84" />
+      <stop offset="1" stop-color="#534177" stop-opacity="0" />
+    </linearGradient>
+    <linearGradient id="paint4_linear_18_3570" x1="21.3208" y1="20.9986" x2="21.0914" y2="20.5153" gradientUnits="userSpaceOnUse">
+      <stop offset="0.338143" stop-color="#6152A2" />
+      <stop offset="1" stop-color="#5F5887" stop-opacity="0" />
+    </linearGradient>
+    <radialGradient id="paint5_radial_18_3570" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(16.3654 11.3467) rotate(90) scale(5.65532 9.54334)">
+      <stop stop-color="#6D6F9E" />
+      <stop offset="1" stop-color="#6D6F9E" stop-opacity="0" />
+    </radialGradient>
+    <linearGradient id="paint6_linear_18_3570" x1="26.5234" y1="19.8984" x2="17.8515" y2="24.2109" gradientUnits="userSpaceOnUse">
+      <stop offset="0.896047" stop-color="#69597D" />
+      <stop offset="1" stop-color="#69597D" stop-opacity="0" />
+    </linearGradient>
+    <linearGradient id="paint7_linear_18_3570" x1="15.9765" y1="18.4922" x2="15.9765" y2="24.3403" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#4D4277" />
+      <stop offset="1" stop-color="#4D4277" stop-opacity="0" />
+    </linearGradient>
+    <radialGradient id="paint8_radial_18_3570" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(15.9765 18.1172) rotate(90) scale(2.375 5.2725)">
+      <stop offset="0.328947" stop-color="#281E45" />
+      <stop offset="1" stop-color="#281E45" stop-opacity="0" />
+    </radialGradient>
+    <linearGradient id="paint9_linear_18_3570" x1="8.02338" y1="17.5078" x2="8.02338" y2="21.2056" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#4D4277" />
+      <stop offset="1" stop-color="#4D4277" stop-opacity="0" />
+    </linearGradient>
+    <linearGradient id="paint10_linear_18_3570" x1="26.3361" y1="21.119" x2="3.18921" y2="21.119" gradientUnits="userSpaceOnUse">
+      <stop offset="0.430684" stop-color="#6052A1" />
+      <stop offset="0.464436" stop-color="#4E3A83" />
+    </linearGradient>
+    <radialGradient id="paint11_radial_18_3570" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(16.4296 13.3516) rotate(94.1261) scale(6.29757 12.0208)">
+      <stop offset="0.646766" stop-color="#442A5D" stop-opacity="0" />
+      <stop offset="1" stop-color="#442A5D" />
+    </radialGradient>
+    <radialGradient id="paint12_radial_18_3570" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(20.0763 15.7498) rotate(151.174) scale(4.67961 3.04242)">
+      <stop stop-color="#6F5A85" />
+      <stop offset="1" stop-color="#6F5A85" stop-opacity="0" />
+    </radialGradient>
+    <radialGradient id="paint13_radial_18_3570" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(12.8419 13.3516) rotate(101.741) scale(5.63189 3.58864)">
+      <stop stop-color="#4A3947" />
+      <stop offset="1" stop-color="#4A3947" stop-opacity="0" />
+    </radialGradient>
+    <radialGradient id="paint14_radial_18_3570" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(15.7786 18.6328) rotate(-47.5718) scale(5.36144 5.4902)">
+      <stop offset="0.9419" stop-color="#766F8B" stop-opacity="0.0816862" />
+      <stop offset="0.991185" stop-color="#766F8B" />
+    </radialGradient>
+    <radialGradient id="paint15_radial_18_3570" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(10.9296 17.8672) rotate(-44.2361) scale(4.97229 4.86741)">
+      <stop stop-color="#422E3D" />
+      <stop offset="1" stop-color="#422E3D" stop-opacity="0" />
+    </radialGradient>
+    <radialGradient id="paint16_radial_18_3570" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(17.0234 18.6484) rotate(-139.07) scale(5.91484 7.01095)">
+      <stop offset="0.933845" stop-color="#50464D" stop-opacity="0" />
+      <stop offset="1" stop-color="#50464D" />
+    </radialGradient>
+    <radialGradient id="paint17_radial_18_3570" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(9.00775 18.1016) rotate(180) scale(2.15625 2.1875)">
+      <stop stop-color="#FF3389" />
+      <stop offset="1" stop-color="#E13B63" />
+    </radialGradient>
+    <radialGradient id="paint18_radial_18_3570" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(8.86931 18.1617) rotate(168.311) scale(1.13078 0.556121)">
+      <stop stop-color="#FF5EA3" />
+      <stop offset="1" stop-color="#FF5EA3" stop-opacity="0" />
+    </radialGradient>
+    <radialGradient id="paint19_radial_18_3570" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(8.61713 17.8594) rotate(166.189) scale(1.93083 1.90247)">
+      <stop offset="0.677262" stop-color="#C52754" stop-opacity="0" />
+      <stop offset="1" stop-color="#C52754" />
+    </radialGradient>
+    <linearGradient id="paint20_linear_18_3570" x1="15.2734" y1="12.9609" x2="17.0859" y2="12.9609" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#DDB7F2" />
+      <stop offset="1" stop-color="#F8EBFF" />
+    </linearGradient>
+    <radialGradient id="paint21_radial_18_3570" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(16.083 10.342) scale(1.71905 0.942707)">
+      <stop stop-color="#BD7CD0" />
+      <stop offset="1" stop-color="#BD7CD0" stop-opacity="0" />
+    </radialGradient>
+    <radialGradient id="paint22_radial_18_3570" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(15.4026 9.96593) rotate(123.064) scale(3.18369 2.01393)">
+      <stop offset="0.179717" stop-color="#B87EBA" />
+      <stop offset="1" stop-color="#BD7CD0" stop-opacity="0" />
+    </radialGradient>
+    <radialGradient id="paint23_radial_18_3570" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(18.8046 4.49219) rotate(142.722) scale(5.26263)">
+      <stop stop-color="#FF78AD" />
+      <stop offset="1" stop-color="#FB426F" />
+    </radialGradient>
+    <radialGradient id="paint24_radial_18_3570" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(18.6171 6.39844) rotate(-180) scale(7.21875)">
+      <stop offset="0.542662" stop-color="#CC515D" stop-opacity="0" />
+      <stop offset="1" stop-color="#CC515D" />
+      <stop offset="1" stop-color="#CC515D" />
+    </radialGradient>
+    <radialGradient id="paint25_radial_18_3570" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(15.9765 3.92969) rotate(90) scale(7.375)">
+      <stop offset="0.807095" stop-color="#B8276B" stop-opacity="0" />
+      <stop offset="1" stop-color="#B8276B" />
+    </radialGradient>
+  </defs>
+</svg>

examples/view/card_widget/resource/Python.svg

@@ -0,0 +1,19 @@
+<svg width="2500" height="2490" viewBox="0 0 256 255" xmlns="http://www.w3.org/2000/svg"
+    preserveAspectRatio="xMinYMin meet">
+    <defs>
+        <linearGradient x1="12.959%" y1="12.039%" x2="79.639%" y2="78.201%" id="a">
+            <stop stop-color="#387EB8" offset="0%" />
+            <stop stop-color="#366994" offset="100%" />
+        </linearGradient>
+        <linearGradient x1="19.128%" y1="20.579%" x2="90.742%" y2="88.429%" id="b">
+            <stop stop-color="#FFE052" offset="0%" />
+            <stop stop-color="#FFC331" offset="100%" />
+        </linearGradient>
+    </defs>
+    <path
+        d="M126.916.072c-64.832 0-60.784 28.115-60.784 28.115l.072 29.128h61.868v8.745H41.631S.145 61.355.145 126.77c0 65.417 36.21 63.097 36.21 63.097h21.61v-30.356s-1.165-36.21 35.632-36.21h61.362s34.475.557 34.475-33.319V33.97S194.67.072 126.916.072zM92.802 19.66a11.12 11.12 0 0 1 11.13 11.13 11.12 11.12 0 0 1-11.13 11.13 11.12 11.12 0 0 1-11.13-11.13 11.12 11.12 0 0 1 11.13-11.13z"
+        fill="url(#a)" />
+    <path
+        d="M128.757 254.126c64.832 0 60.784-28.115 60.784-28.115l-.072-29.127H127.6v-8.745h86.441s41.486 4.705 41.486-60.712c0-65.416-36.21-63.096-36.21-63.096h-21.61v30.355s1.165 36.21-35.632 36.21h-61.362s-34.475-.557-34.475 33.32v56.013s-5.235 33.897 62.518 33.897zm34.114-19.586a11.12 11.12 0 0 1-11.13-11.13 11.12 11.12 0 0 1 11.13-11.131 11.12 11.12 0 0 1 11.13 11.13 11.12 11.12 0 0 1-11.13 11.13z"
+        fill="url(#b)" />
+</svg>

examples/view/card_widget/resource/Rocket.svg

@@ -0,0 +1,200 @@
+<svg width="100%" height="100%" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <g clip-path="url(#clip0_18_13076)">
+    <path d="M10.5815 13.7179C11.782 13.276 12.9492 14.4432 12.5073 15.6437L9.88853 22.7581C9.63639 23.4431 8.75911 23.6359 8.24298 23.1197L3.10549 17.9822C2.58936 17.4661 2.78217 16.5888 3.46715 16.3367L10.5815 13.7179Z" fill="url(#paint0_linear_18_13076)" />
+    <path d="M10.5815 13.7179C11.782 13.276 12.9492 14.4432 12.5073 15.6437L9.88853 22.7581C9.63639 23.4431 8.75911 23.6359 8.24298 23.1197L3.10549 17.9822C2.58936 17.4661 2.78217 16.5888 3.46715 16.3367L10.5815 13.7179Z" fill="url(#paint1_radial_18_13076)" />
+    <path d="M10.5815 13.7179C11.782 13.276 12.9492 14.4432 12.5073 15.6437L9.88853 22.7581C9.63639 23.4431 8.75911 23.6359 8.24298 23.1197L3.10549 17.9822C2.58936 17.4661 2.78217 16.5888 3.46715 16.3367L10.5815 13.7179Z" fill="url(#paint2_linear_18_13076)" />
+    <path d="M16.5815 19.7179C17.782 19.276 18.9492 20.4432 18.5073 21.6437L15.8885 28.7581C15.6364 29.4431 14.7591 29.6359 14.243 29.1197L9.10549 23.9822C8.58936 23.4661 8.78217 22.5888 9.46715 22.3367L16.5815 19.7179Z" fill="url(#paint3_linear_18_13076)" />
+    <path d="M16.5815 19.7179C17.782 19.276 18.9492 20.4432 18.5073 21.6437L15.8885 28.7581C15.6364 29.4431 14.7591 29.6359 14.243 29.1197L9.10549 23.9822C8.58936 23.4661 8.78217 22.5888 9.46715 22.3367L16.5815 19.7179Z" fill="url(#paint4_radial_18_13076)" />
+    <path d="M16.5815 19.7179C17.782 19.276 18.9492 20.4432 18.5073 21.6437L15.8885 28.7581C15.6364 29.4431 14.7591 29.6359 14.243 29.1197L9.10549 23.9822C8.58936 23.4661 8.78217 22.5888 9.46715 22.3367L16.5815 19.7179Z" fill="url(#paint5_radial_18_13076)" />
+    <g filter="url(#filter0_i_18_13076)">
+      <path d="M22.3991 3.55093C22.455 3.52817 22.5189 3.54145 22.5615 3.58433L28.4474 9.51462C28.4897 9.55723 28.5026 9.62075 28.48 9.67635C27.0706 13.1358 25.1274 16.8158 22.5255 19.4178C19.9917 21.9515 15.706 24.1111 11.8363 25.6991L6.34463 20.2075C7.93265 16.3378 10.0922 12.0521 12.626 9.51827C15.2359 6.90839 18.9304 4.96134 22.3991 3.55093Z" fill="url(#paint6_linear_18_13076)" />
+      <path d="M22.3991 3.55093C22.455 3.52817 22.5189 3.54145 22.5615 3.58433L28.4474 9.51462C28.4897 9.55723 28.5026 9.62075 28.48 9.67635C27.0706 13.1358 25.1274 16.8158 22.5255 19.4178C19.9917 21.9515 15.706 24.1111 11.8363 25.6991L6.34463 20.2075C7.93265 16.3378 10.0922 12.0521 12.626 9.51827C15.2359 6.90839 18.9304 4.96134 22.3991 3.55093Z" fill="url(#paint7_radial_18_13076)" />
+      <path d="M22.3991 3.55093C22.455 3.52817 22.5189 3.54145 22.5615 3.58433L28.4474 9.51462C28.4897 9.55723 28.5026 9.62075 28.48 9.67635C27.0706 13.1358 25.1274 16.8158 22.5255 19.4178C19.9917 21.9515 15.706 24.1111 11.8363 25.6991L6.34463 20.2075C7.93265 16.3378 10.0922 12.0521 12.626 9.51827C15.2359 6.90839 18.9304 4.96134 22.3991 3.55093Z" fill="url(#paint8_radial_18_13076)" />
+      <path d="M22.3991 3.55093C22.455 3.52817 22.5189 3.54145 22.5615 3.58433L28.4474 9.51462C28.4897 9.55723 28.5026 9.62075 28.48 9.67635C27.0706 13.1358 25.1274 16.8158 22.5255 19.4178C19.9917 21.9515 15.706 24.1111 11.8363 25.6991L6.34463 20.2075C7.93265 16.3378 10.0922 12.0521 12.626 9.51827C15.2359 6.90839 18.9304 4.96134 22.3991 3.55093Z" fill="url(#paint9_radial_18_13076)" />
+      <path d="M22.3991 3.55093C22.455 3.52817 22.5189 3.54145 22.5615 3.58433L28.4474 9.51462C28.4897 9.55723 28.5026 9.62075 28.48 9.67635C27.0706 13.1358 25.1274 16.8158 22.5255 19.4178C19.9917 21.9515 15.706 24.1111 11.8363 25.6991L6.34463 20.2075C7.93265 16.3378 10.0922 12.0521 12.626 9.51827C15.2359 6.90839 18.9304 4.96134 22.3991 3.55093Z" fill="url(#paint10_radial_18_13076)" />
+    </g>
+    <g filter="url(#filter1_dii_18_13076)">
+      <path d="M24.5 11.0624C24.5 12.9177 22.996 14.4218 21.1406 14.4218C19.2853 14.4218 17.7813 12.9177 17.7813 11.0624C17.7813 9.20705 19.2853 7.703 21.1406 7.703C22.996 7.703 24.5 9.20705 24.5 11.0624Z" fill="url(#paint11_linear_18_13076)" />
+      <path d="M24.5 11.0624C24.5 12.9177 22.996 14.4218 21.1406 14.4218C19.2853 14.4218 17.7813 12.9177 17.7813 11.0624C17.7813 9.20705 19.2853 7.703 21.1406 7.703C22.996 7.703 24.5 9.20705 24.5 11.0624Z" fill="url(#paint12_radial_18_13076)" />
+    </g>
+    <path d="M23.4664 11.0624C23.4664 12.3469 22.4251 13.3881 21.1406 13.3881C19.8562 13.3881 18.8149 12.3469 18.8149 11.0624C18.8149 9.77796 19.8562 8.73669 21.1406 8.73669C22.4251 8.73669 23.4664 9.77796 23.4664 11.0624Z" fill="url(#paint13_radial_18_13076)" />
+    <g filter="url(#filter2_i_18_13076)">
+      <path d="M2.42345 29.5326C1.71634 28.8255 2.00002 23.9217 4.5 22.9217C4.5 22.9217 7 21.9217 8.61101 23.5223C10.222 25.1229 9.5 26.9217 9.5 26.9217C8.79291 29.043 5.78256 29.8862 5.42902 29.5327C5.23376 29.3374 5.58538 28.9819 5.42903 28.8256C5.27268 28.6692 5.03127 28.8477 4.36837 29.1791C3.89697 29.4148 2.70629 29.8155 2.42345 29.5326Z" fill="url(#paint14_radial_18_13076)" />
+      <path d="M2.42345 29.5326C1.71634 28.8255 2.00002 23.9217 4.5 22.9217C4.5 22.9217 7 21.9217 8.61101 23.5223C10.222 25.1229 9.5 26.9217 9.5 26.9217C8.79291 29.043 5.78256 29.8862 5.42902 29.5327C5.23376 29.3374 5.58538 28.9819 5.42903 28.8256C5.27268 28.6692 5.03127 28.8477 4.36837 29.1791C3.89697 29.4148 2.70629 29.8155 2.42345 29.5326Z" fill="url(#paint15_radial_18_13076)" />
+    </g>
+    <path d="M6.06065 20.9824C6.64644 20.3966 7.59619 20.3966 8.18198 20.9824L11.7175 24.5179C12.3033 25.1037 12.3033 26.0535 11.7175 26.6393C11.1317 27.2251 10.182 27.2251 9.59619 26.6393L6.06065 23.1037C5.47487 22.5179 5.47487 21.5682 6.06065 20.9824Z" fill="url(#paint16_linear_18_13076)" />
+    <path d="M6.06065 20.9824C6.64644 20.3966 7.59619 20.3966 8.18198 20.9824L11.7175 24.5179C12.3033 25.1037 12.3033 26.0535 11.7175 26.6393C11.1317 27.2251 10.182 27.2251 9.59619 26.6393L6.06065 23.1037C5.47487 22.5179 5.47487 21.5682 6.06065 20.9824Z" fill="url(#paint17_radial_18_13076)" />
+    <path d="M6.06065 20.9824C6.64644 20.3966 7.59619 20.3966 8.18198 20.9824L11.7175 24.5179C12.3033 25.1037 12.3033 26.0535 11.7175 26.6393C11.1317 27.2251 10.182 27.2251 9.59619 26.6393L6.06065 23.1037C5.47487 22.5179 5.47487 21.5682 6.06065 20.9824Z" fill="url(#paint18_radial_18_13076)" />
+    <path d="M29.1723 2.87149C28.2252 1.9244 26.5643 2.03161 25.3539 2.44724C24.4849 2.74565 23.5716 3.08036 22.6397 3.45385C22.5733 3.48044 22.5557 3.56611 22.6061 3.61684L28.4151 9.46571C28.4656 9.51662 28.5518 9.49925 28.5785 9.43266C28.9566 8.49085 29.2951 7.56777 29.5966 6.68988C30.0066 5.49569 30.3364 4.03561 29.1723 2.87149Z" fill="url(#paint19_linear_18_13076)" />
+    <path d="M29.1723 2.87149C28.2252 1.9244 26.5643 2.03161 25.3539 2.44724C24.4849 2.74565 23.5716 3.08036 22.6397 3.45385C22.5733 3.48044 22.5557 3.56611 22.6061 3.61684L28.4151 9.46571C28.4656 9.51662 28.5518 9.49925 28.5785 9.43266C28.9566 8.49085 29.2951 7.56777 29.5966 6.68988C30.0066 5.49569 30.3364 4.03561 29.1723 2.87149Z" fill="url(#paint20_radial_18_13076)" />
+    <path d="M29.1723 2.87149C28.2252 1.9244 26.5643 2.03161 25.3539 2.44724C24.4849 2.74565 23.5716 3.08036 22.6397 3.45385C22.5733 3.48044 22.5557 3.56611 22.6061 3.61684L28.4151 9.46571C28.4656 9.51662 28.5518 9.49925 28.5785 9.43266C28.9566 8.49085 29.2951 7.56777 29.5966 6.68988C30.0066 5.49569 30.3364 4.03561 29.1723 2.87149Z" fill="url(#paint21_linear_18_13076)" />
+    <path d="M13.5815 16.7179C14.782 16.276 15.9492 17.4432 15.5073 18.6437L12.8885 25.7581C12.6364 26.4431 11.7591 26.6359 11.243 26.1197L6.10549 20.9822C5.58936 20.4661 5.78217 19.5888 6.46715 19.3367L13.5815 16.7179Z" fill="url(#paint22_linear_18_13076)" />
+    <path d="M13.5815 16.7179C14.782 16.276 15.9492 17.4432 15.5073 18.6437L12.8885 25.7581C12.6364 26.4431 11.7591 26.6359 11.243 26.1197L6.10549 20.9822C5.58936 20.4661 5.78217 19.5888 6.46715 19.3367L13.5815 16.7179Z" fill="url(#paint23_radial_18_13076)" />
+    <path d="M13.5815 16.7179C14.782 16.276 15.9492 17.4432 15.5073 18.6437L12.8885 25.7581C12.6364 26.4431 11.7591 26.6359 11.243 26.1197L6.10549 20.9822C5.58936 20.4661 5.78217 19.5888 6.46715 19.3367L13.5815 16.7179Z" fill="url(#paint24_radial_18_13076)" />
+    <path d="M13.5815 16.7179C14.782 16.276 15.9492 17.4432 15.5073 18.6437L12.8885 25.7581C12.6364 26.4431 11.7591 26.6359 11.243 26.1197L6.10549 20.9822C5.58936 20.4661 5.78217 19.5888 6.46715 19.3367L13.5815 16.7179Z" fill="url(#paint25_radial_18_13076)" />
+    <g filter="url(#filter3_f_18_13076)">
+      <path d="M9.20465 22.0468L14.8297 17.6405L11.2047 24.078L9.20465 22.0468Z" fill="url(#paint26_linear_18_13076)" />
+    </g>
+  </g>
+  <defs>
+    <filter id="filter0_i_18_13076" x="6.09463" y="3.03992" width="22.3964" height="22.6592" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+      <feFlood flood-opacity="0" result="BackgroundImageFix" />
+      <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
+      <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
+      <feOffset dx="-0.25" dy="-0.5" />
+      <feGaussianBlur stdDeviation="0.75" />
+      <feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1" />
+      <feColorMatrix type="matrix" values="0 0 0 0 0.745098 0 0 0 0 0.772549 0 0 0 0 0.952941 0 0 0 1 0" />
+      <feBlend mode="normal" in2="shape" result="effect1_innerShadow_18_13076" />
+    </filter>
+    <filter id="filter1_dii_18_13076" x="16.7813" y="6.953" width="8.71875" height="8.71875" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+      <feFlood flood-opacity="0" result="BackgroundImageFix" />
+      <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
+      <feOffset dy="0.25" />
+      <feGaussianBlur stdDeviation="0.5" />
+      <feComposite in2="hardAlpha" operator="out" />
+      <feColorMatrix type="matrix" values="0 0 0 0 0.866667 0 0 0 0 0.764706 0 0 0 0 0.847059 0 0 0 1 0" />
+      <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_18_13076" />
+      <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_18_13076" result="shape" />
+      <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
+      <feOffset dx="-0.1" dy="0.1" />
+      <feGaussianBlur stdDeviation="0.05" />
+      <feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1" />
+      <feColorMatrix type="matrix" values="0 0 0 0 0.721569 0 0 0 0 0.690196 0 0 0 0 0.701961 0 0 0 1 0" />
+      <feBlend mode="normal" in2="shape" result="effect2_innerShadow_18_13076" />
+      <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
+      <feOffset dx="0.1" dy="-0.1" />
+      <feGaussianBlur stdDeviation="0.05" />
+      <feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1" />
+      <feColorMatrix type="matrix" values="0 0 0 0 0.615686 0 0 0 0 0.560784 0 0 0 0 0.65098 0 0 0 1 0" />
+      <feBlend mode="normal" in2="effect2_innerShadow_18_13076" result="effect3_innerShadow_18_13076" />
+    </filter>
+    <filter id="filter2_i_18_13076" x="2.08765" y="22.4132" width="7.57367" height="7.21672" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+      <feFlood flood-opacity="0" result="BackgroundImageFix" />
+      <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
+      <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
+      <feOffset dy="-0.2" />
+      <feGaussianBlur stdDeviation="0.2" />
+      <feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1" />
+      <feColorMatrix type="matrix" values="0 0 0 0 0.847059 0 0 0 0 0.505882 0 0 0 0 0.360784 0 0 0 1 0" />
+      <feBlend mode="normal" in2="shape" result="effect1_innerShadow_18_13076" />
+    </filter>
+    <filter id="filter3_f_18_13076" x="8.20465" y="16.6405" width="7.625" height="8.4375" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+      <feFlood flood-opacity="0" result="BackgroundImageFix" />
+      <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
+      <feGaussianBlur stdDeviation="0.5" result="effect1_foregroundBlur_18_13076" />
+    </filter>
+    <linearGradient id="paint0_linear_18_13076" x1="8.1109" y1="17.3079" x2="3.1109" y2="16.4843" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#EE2452" />
+      <stop offset="1" stop-color="#F63E7A" />
+    </linearGradient>
+    <radialGradient id="paint1_radial_18_13076" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(2.39755 17.0631) rotate(-19.9576) scale(8.00168 1.36045)">
+      <stop offset="0.163866" stop-color="#FF8DB0" />
+      <stop offset="1" stop-color="#FF8DB0" stop-opacity="0" />
+    </radialGradient>
+    <linearGradient id="paint2_linear_18_13076" x1="4.90476" y1="19.7332" x2="5.72003" y2="18.9383" gradientUnits="userSpaceOnUse">
+      <stop offset="0.491189" stop-color="#DD467C" />
+      <stop offset="1" stop-color="#DD467C" stop-opacity="0" />
+    </linearGradient>
+    <linearGradient id="paint3_linear_18_13076" x1="17.8921" y1="21.6718" x2="11.6742" y2="26.551" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#F83267" />
+      <stop offset="1" stop-color="#FF3190" />
+    </linearGradient>
+    <radialGradient id="paint4_radial_18_13076" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(14.5796 22.203) rotate(86.482) scale(7.63907 6.58606)">
+      <stop offset="0.756562" stop-color="#E76CBE" stop-opacity="0" />
+      <stop offset="0.951296" stop-color="#E76CBE" />
+    </radialGradient>
+    <radialGradient id="paint5_radial_18_13076" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(13.4546 26.2343) rotate(-57.3464) scale(5.27051 2.31507)">
+      <stop stop-color="#FF5898" />
+      <stop offset="1" stop-color="#FF5898" stop-opacity="0" />
+    </radialGradient>
+    <linearGradient id="paint6_linear_18_13076" x1="13.4859" y1="8.6717" x2="22.2984" y2="17.5467" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#CCBBC0" />
+      <stop offset="1" stop-color="#EAD2EC" />
+    </linearGradient>
+    <radialGradient id="paint7_radial_18_13076" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(23.9694 21.5771) rotate(-142.447) scale(16.6769 31.3483)">
+      <stop offset="0.811143" stop-color="#E7E5E5" stop-opacity="0" />
+      <stop offset="1" stop-color="#E7E5E5" />
+    </radialGradient>
+    <radialGradient id="paint8_radial_18_13076" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(9.18137 21.3096) rotate(-56.9293) scale(9.80381 4.6077)">
+      <stop offset="0.281006" stop-color="#B5A3A5" />
+      <stop offset="1" stop-color="#B5A3A5" stop-opacity="0" />
+    </radialGradient>
+    <radialGradient id="paint9_radial_18_13076" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(6.34463 20.091) rotate(-73.625) scale(8.69119 1.4727)">
+      <stop offset="0.207885" stop-color="#B28F96" />
+      <stop offset="1" stop-color="#B28F96" stop-opacity="0" />
+    </radialGradient>
+    <radialGradient id="paint10_radial_18_13076" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(27.1109 7.10921) rotate(137.284) scale(13.175 4.09069)">
+      <stop stop-color="#FAECF1" />
+      <stop offset="1" stop-color="#FAECF1" stop-opacity="0" />
+    </radialGradient>
+    <linearGradient id="paint11_linear_18_13076" x1="17.7813" y1="10.4913" x2="24.5" y2="11.0624" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#A796A0" />
+      <stop offset="1" stop-color="#A5959F" />
+    </linearGradient>
+    <radialGradient id="paint12_radial_18_13076" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(21.1406 11.0624) rotate(90) scale(3.35938)">
+      <stop offset="0.586538" stop-color="#93859B" />
+      <stop offset="1" stop-color="#93859B" stop-opacity="0" />
+    </radialGradient>
+    <radialGradient id="paint13_radial_18_13076" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(21.1406 13.3881) rotate(-90) scale(4.84559 4.45626)">
+      <stop stop-color="#72CDFF" />
+      <stop offset="0.738019" stop-color="#66ACFF" />
+      <stop offset="1" stop-color="#3B57F4" />
+    </radialGradient>
+    <radialGradient id="paint14_radial_18_13076" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(8.19114 24.2458) rotate(135) scale(5.80645 4.56401)">
+      <stop stop-color="#D46213" />
+      <stop offset="1" stop-color="#FF9542" />
+    </radialGradient>
+    <radialGradient id="paint15_radial_18_13076" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(8.30362 28.9703) rotate(-131.186) scale(7.17453 7.56076)">
+      <stop offset="0.870944" stop-color="#FFC484" stop-opacity="0" />
+      <stop offset="1" stop-color="#FFC484" />
+    </radialGradient>
+    <linearGradient id="paint16_linear_18_13076" x1="5.7984" y1="21.953" x2="11.2984" y2="27.3593" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#452860" />
+      <stop offset="1" stop-color="#51509F" />
+    </linearGradient>
+    <radialGradient id="paint17_radial_18_13076" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(6.82965 21.453) rotate(77.8285) scale(1.6304 1.4405)">
+      <stop stop-color="#8E839A" />
+      <stop offset="1" stop-color="#8E839A" stop-opacity="0" />
+    </radialGradient>
+    <radialGradient id="paint18_radial_18_13076" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(7.20687 22.4179) rotate(47.9357) scale(6.2123 3.25637)">
+      <stop offset="0.860492" stop-color="#6175B9" stop-opacity="0" />
+      <stop offset="1" stop-color="#6175B9" />
+    </radialGradient>
+    <linearGradient id="paint19_linear_18_13076" x1="29.1767" y1="2.87587" x2="25.5006" y2="6.55196" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#FF3745" />
+      <stop offset="1" stop-color="#ED224B" />
+    </linearGradient>
+    <radialGradient id="paint20_radial_18_13076" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(28.7385 4.34743) rotate(135) scale(8.24677 1.9797)">
+      <stop offset="0.189394" stop-color="#FF5971" />
+      <stop offset="1" stop-color="#FF5971" stop-opacity="0" />
+    </radialGradient>
+    <linearGradient id="paint21_linear_18_13076" x1="25.8218" y1="6.79677" x2="26.189" y2="6.41396" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#D2575E" />
+      <stop offset="1" stop-color="#F93251" stop-opacity="0" />
+    </linearGradient>
+    <linearGradient id="paint22_linear_18_13076" x1="15.1603" y1="17.0649" x2="8.67423" y2="23.551" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#FF2644" />
+      <stop offset="1" stop-color="#FF2982" />
+    </linearGradient>
+    <radialGradient id="paint23_radial_18_13076" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(6.2359 19.4218) rotate(-20.8651) scale(7.45782 1.95239)">
+      <stop stop-color="#FF95AF" />
+      <stop offset="1" stop-color="#FF95AF" stop-opacity="0" />
+    </radialGradient>
+    <radialGradient id="paint24_radial_18_13076" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(5.39755 20.3079) rotate(44.7044) scale(4.61021 1.36182)">
+      <stop offset="0.381871" stop-color="#E14678" />
+      <stop offset="1" stop-color="#E14678" stop-opacity="0" />
+    </radialGradient>
+    <radialGradient id="paint25_radial_18_13076" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(11.5796 19.1405) rotate(84.6743) scale(7.40698 7.89321)">
+      <stop offset="0.831791" stop-color="#E67BC7" stop-opacity="0" />
+      <stop offset="1" stop-color="#E67BC7" />
+    </radialGradient>
+    <linearGradient id="paint26_linear_18_13076" x1="13.9859" y1="18.1093" x2="9.8609" y2="22.4218" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#FF5970" />
+      <stop offset="1" stop-color="#FF5794" />
+    </linearGradient>
+    <clipPath id="clip0_18_13076">
+      <rect width="32" height="32" fill="white" />
+    </clipPath>
+  </defs>
+</svg>

examples/view/flip_view/demo.py

@@ -0,0 +1,84 @@
+# coding:utf-8
+import sys
+from pathlib import Path
+
+from PySide6.QtCore import QModelIndex, Qt, QRect, QSize
+from PySide6.QtGui import QIcon, QPainter, QFont, QColor
+from PySide6.QtWidgets import QApplication, QStyleOptionViewItem, QWidget, QHBoxLayout, QVBoxLayout
+
+from qfluentwidgets import (FlipImageDelegate, setTheme, Theme, HorizontalPipsPager, HorizontalFlipView,
+                            VerticalFlipView, getFont)
+
+
+class CustomFlipItemDelegate(FlipImageDelegate):
+    """ Custom flip item delegate """
+
+    def paint(self, painter: QPainter, option: QStyleOptionViewItem, index: QModelIndex):
+        super().paint(painter, option, index)
+        painter.save()
+
+        # draw mask
+        painter.setBrush(QColor(255, 255, 255, 200))
+        painter.setPen(Qt.NoPen)
+        rect = option.rect
+        rect = QRect(rect.x(), rect.y(), 200, rect.height())
+        painter.drawRect(rect)
+
+        # draw text
+        painter.setPen(Qt.black)
+        painter.setFont(getFont(16, QFont.Bold))
+        painter.drawText(rect, Qt.AlignCenter, '🥰\n硝子酱一级棒卡哇伊')
+
+        painter.restore()
+
+
+
+class Demo(QWidget):
+
+    def __init__(self):
+        super().__init__()
+        # setTheme(Theme.DARK)
+        # self.setStyleSheet('Demo{background:rgb(32,32,32)}')
+
+        self.flipView = HorizontalFlipView(self)
+        self.pager = HorizontalPipsPager(self)
+
+        # change aspect ratio mode
+        self.flipView.setAspectRatioMode(Qt.AspectRatioMode.KeepAspectRatio)
+
+        # adjust view size
+        # self.flipView.setItemSize(QSize(320, 180))
+        # self.flipView.setFixedSize(QSize(320, 180))
+
+        # NOTE: use custom delegate
+        # self.flipView.setItemDelegate(CustomFlipItemDelegate(self.flipView))
+
+        # add images
+        self.flipView.addImages([str(i) for i in Path('./resource').glob('*')])
+        self.pager.setPageNumber(self.flipView.count())
+
+        # adjust border radius
+        # self.flipView.setBorderRadius(15)
+        # self.flipView.setFixedSize(QSize(710, 270))
+        # self.flipView.setSpacing(15)
+
+        self.pager.currentIndexChanged.connect(self.flipView.setCurrentIndex)
+        self.flipView.currentIndexChanged.connect(self.pager.setCurrentIndex)
+
+        # self.flipView.setCurrentIndex(2)
+
+        self.setLayout(QVBoxLayout(self))
+        self.layout().addWidget(self.flipView, 0, Qt.AlignCenter)
+        self.layout().addWidget(self.pager, 0, Qt.AlignCenter)
+        self.layout().setAlignment(Qt.AlignCenter)
+        self.layout().setSpacing(20)
+        self.resize(600, 600)
+
+
+
+
+if __name__ == '__main__':
+    app = QApplication(sys.argv)
+    w = Demo()
+    w.show()
+    app.exec()

examples/view/list_view/demo.py

@@ -0,0 +1,52 @@
+# coding: utf-8
+import sys
+
+from PySide6.QtCore import Qt
+from PySide6.QtGui import QIcon
+from PySide6.QtWidgets import QApplication, QListWidgetItem, QListWidget, QWidget, QHBoxLayout
+
+from qfluentwidgets import ListView, setTheme, Theme, ListWidget
+
+
+
+class Demo(QWidget):
+
+    def __init__(self):
+        super().__init__()
+        # setTheme(Theme.DARK)
+
+        self.hBoxLayout = QHBoxLayout(self)
+        self.listWidget = ListWidget(self)
+
+        # self.listWidget.setAlternatingRowColors(True)
+
+        # self.listWidget.setSelectRightClickedRow(True)
+
+        stands = [
+            '白金之星', '绿色法皇', "天堂制造", "绯红之王",
+            '银色战车', '疯狂钻石', "壮烈成仁", "败者食尘",
+            "黑蚊子多", '杀手皇后', "金属制品", "石之自由",
+            "砸瓦鲁多", '钢链手指', "臭氧宝宝", "华丽挚爱",
+            "隐者之紫", "黄金体验", "虚无之王", "纸月之王",
+            "骇人恶兽", "男子领域", "20世纪男孩", "牙 Act 4",
+            "铁球破坏者", "性感手枪", 'D4C • 爱之列车', "天生完美",
+            "软又湿", "佩斯利公园", "奇迹于你", "行走的心",
+            "护霜旅行者", "十一月雨", "调情圣手", "片刻静候"
+        ]
+        for stand in stands:
+            item = QListWidgetItem(stand)
+            # item.setIcon(QIcon(':/qfluentwidgets/images/logo.png'))
+            # item.setCheckState(Qt.Unchecked)
+            self.listWidget.addItem(item)
+
+        self.setStyleSheet("Demo{background: rgb(249, 249, 249)} ")
+        self.hBoxLayout.setContentsMargins(0, 0, 0, 0)
+        self.hBoxLayout.addWidget(self.listWidget)
+        self.resize(300, 400)
+
+
+if __name__ == "__main__":
+    app = QApplication(sys.argv)
+    w = Demo()
+    w.show()
+    app.exec()

examples/view/table_view/demo.py

@@ -0,0 +1,102 @@
+# coding: utf-8
+import sys
+
+from PySide6.QtCore import QModelIndex, Qt
+from PySide6.QtGui import QPalette
+from PySide6.QtWidgets import QApplication, QStyleOptionViewItem, QTableWidget, QTableWidgetItem, QWidget, QHBoxLayout
+
+from qfluentwidgets import TableWidget, isDarkTheme, setTheme, Theme, TableView, TableItemDelegate, setCustomStyleSheet
+
+
+class CustomTableItemDelegate(TableItemDelegate):
+    """ Custom table item delegate """
+
+    def initStyleOption(self, option: QStyleOptionViewItem, index: QModelIndex):
+        super().initStyleOption(option, index)
+        if index.column() != 1:
+            return
+
+        if isDarkTheme():
+            option.palette.setColor(QPalette.Text, Qt.white)
+            option.palette.setColor(QPalette.HighlightedText, Qt.white)
+        else:
+            option.palette.setColor(QPalette.Text, Qt.red)
+            option.palette.setColor(QPalette.HighlightedText, Qt.red)
+
+
+class Demo(QWidget):
+
+    def __init__(self):
+        super().__init__()
+        # setTheme(Theme.DARK)
+
+        self.hBoxLayout = QHBoxLayout(self)
+        self.tableView = TableWidget(self)
+
+        # NOTE: use custom item delegate
+        # self.tableView.setItemDelegate(CustomTableItemDelegate(self.tableView))
+
+        # select row on right-click
+        # self.tableView.setSelectRightClickedRow(True)
+
+        # enable border
+        self.tableView.setBorderVisible(True)
+        self.tableView.setBorderRadius(8)
+
+        self.tableView.setWordWrap(False)
+        self.tableView.setRowCount(60)
+        self.tableView.setColumnCount(5)
+        songInfos = [
+            ['かばん', 'aiko', 'かばん', '2004', '5:04'],
+            ['爱你', '王心凌', '爱你', '2004', '3:39'],
+            ['星のない世界', 'aiko', '星のない世界/横顔', '2007', '5:30'],
+            ['横顔', 'aiko', '星のない世界/横顔', '2007', '5:06'],
+            ['秘密', 'aiko', '秘密', '2008', '6:27'],
+            ['シアワセ', 'aiko', '秘密', '2008', '5:25'],
+            ['二人', 'aiko', '二人', '2008', '5:00'],
+            ['スパークル', 'RADWIMPS', '君の名は。', '2016', '8:54'],
+            ['なんでもないや', 'RADWIMPS', '君の名は。', '2016', '3:16'],
+            ['前前前世', 'RADWIMPS', '人間開花', '2016', '4:35'],
+            ['恋をしたのは', 'aiko', '恋をしたのは', '2016', '6:02'],
+            ['夏バテ', 'aiko', '恋をしたのは', '2016', '4:41'],
+            ['もっと', 'aiko', 'もっと', '2016', '4:50'],
+            ['問題集', 'aiko', 'もっと', '2016', '4:18'],
+            ['半袖', 'aiko', 'もっと', '2016', '5:50'],
+            ['ひねくれ', '鎖那', 'Hush a by little girl', '2017', '3:54'],
+            ['シュテルン', '鎖那', 'Hush a by little girl', '2017', '3:16'],
+            ['愛は勝手', 'aiko', '湿った夏の始まり', '2018', '5:31'],
+            ['ドライブモード', 'aiko', '湿った夏の始まり', '2018', '3:37'],
+            ['うん。', 'aiko', '湿った夏の始まり', '2018', '5:48'],
+            ['キラキラ', 'aikoの詩。', '2019', '5:08', 'aiko'],
+            ['恋のスーパーボール', 'aiko', 'aikoの詩。', '2019', '4:31'],
+            ['磁石', 'aiko', 'どうしたって伝えられないから', '2021', '4:24'],
+            ['食べた愛', 'aiko', '食べた愛/あたしたち', '2021', '5:17'],
+            ['列車', 'aiko', '食べた愛/あたしたち', '2021', '4:18'],
+            ['花の塔', 'さユり', '花の塔', '2022', '4:35'],
+            ['夏恋のライフ', 'aiko', '夏恋のライフ', '2022', '5:03'],
+            ['あかときリロード', 'aiko', 'あかときリロード', '2023', '4:04'],
+            ['荒れた唇は恋を失くす', 'aiko', '今の二人をお互いが見てる', '2023', '4:07'],
+            ['ワンツースリー', 'aiko', '今の二人をお互いが見てる', '2023', '4:47'],
+        ]
+        songInfos += songInfos
+        for i, songInfo in enumerate(songInfos):
+            for j in range(5):
+                self.tableView.setItem(i, j, QTableWidgetItem(songInfo[j]))
+
+        self.tableView.verticalHeader().hide()
+        self.tableView.setHorizontalHeaderLabels(['Title', 'Artist', 'Album', 'Year', 'Duration'])
+        self.tableView.resizeColumnsToContents()
+        # self.tableView.horizontalHeader().setSectionResizeMode(QHeaderView.Stretch)
+        # self.tableView.setSortingEnabled(True)
+
+        self.setStyleSheet("Demo{background: rgb(255, 255, 255)} ")
+        self.hBoxLayout.setContentsMargins(50, 30, 50, 30)
+        self.hBoxLayout.addWidget(self.tableView)
+        self.resize(735, 760)
+
+
+if __name__ == "__main__":
+    app = QApplication(sys.argv)
+    w = Demo()
+    w.show()
+    app.exec()

examples/view/tree_view/demo.py

@@ -0,0 +1,34 @@
+# coding:utf-8
+import sys
+from PySide6.QtCore import Qt
+from PySide6.QtWidgets import QApplication, QWidget, QTreeWidgetItem, QFileSystemModel, QHBoxLayout
+
+from qfluentwidgets import TreeWidget, setTheme, Theme, TreeView
+
+
+class Demo(QWidget):
+
+    def __init__(self):
+        super().__init__()
+        self.hBoxLayout = QHBoxLayout(self)
+        self.setStyleSheet("Demo{background:rgb(255,255,255)}")
+        # setTheme(Theme.DARK)
+
+        self.view = TreeView(self)
+        model = QFileSystemModel()
+        model.setRootPath('.')
+        self.view.setModel(model)
+
+        self.view.setBorderVisible(True)
+        self.view.setBorderRadius(8)
+
+        self.hBoxLayout.addWidget(self.view)
+        self.hBoxLayout.setContentsMargins(50, 30, 50, 30)
+        self.resize(800, 660)
+
+
+if __name__ == '__main__':
+    app = QApplication(sys.argv)
+    w = Demo()
+    w.show()
+    sys.exit(app.exec())

examples/view/tree_widget/demo.py

@@ -0,0 +1,68 @@
+# coding:utf-8
+import sys
+from PySide6.QtCore import Qt
+from PySide6.QtWidgets import QApplication, QWidget, QTreeWidgetItem, QFileSystemModel, QHBoxLayout
+
+from qfluentwidgets import TreeWidget, setTheme, Theme, TreeView
+
+
+class Demo(QWidget):
+
+    def __init__(self, parent=None, enableCheck=False):
+        super().__init__(parent)
+
+        self.tree = TreeWidget(self)
+        self.hBoxLayout = QHBoxLayout(self)
+        self.hBoxLayout.setContentsMargins(0, 8, 0, 0)
+        self.hBoxLayout.addWidget(self.tree)
+
+        item1 = QTreeWidgetItem([self.tr('JoJo 1 - Phantom Blood')])
+        item1.addChildren([
+            QTreeWidgetItem([self.tr('Jonathan Joestar')]),
+            QTreeWidgetItem([self.tr('Dio Brando')]),
+            QTreeWidgetItem([self.tr('Will A. Zeppeli')]),
+        ])
+        self.tree.addTopLevelItem(item1)
+
+        item2 = QTreeWidgetItem([self.tr('JoJo 3 - Stardust Crusaders')])
+        item21 = QTreeWidgetItem([self.tr('Jotaro Kujo')])
+        item21.addChildren([
+            QTreeWidgetItem(['空条承太郎']),
+            QTreeWidgetItem(['空条蕉太狼']),
+            QTreeWidgetItem(['阿强']),
+            QTreeWidgetItem(['卖鱼强']),
+            QTreeWidgetItem(['那个无敌的男人']),
+        ]*10)
+        item22 = QTreeWidgetItem([self.tr('Jotaro Kujo')])
+        item22.addChildren([
+            QTreeWidgetItem(['空条承太郎']),
+            QTreeWidgetItem(['空条蕉太狼']),
+            QTreeWidgetItem(['阿强']),
+            QTreeWidgetItem(['卖鱼强']),
+            QTreeWidgetItem(['那个无敌的男人']),
+        ]*10)
+        item23 = QTreeWidgetItem([self.tr('Jotaro Kujo')])
+        item23.addChildren([
+            QTreeWidgetItem(['空条承太郎']),
+            QTreeWidgetItem(['空条蕉太狼']),
+            QTreeWidgetItem(['阿强']),
+            QTreeWidgetItem(['卖鱼强']),
+            QTreeWidgetItem(['那个无敌的男人']),
+        ]*10)
+        item2.addChild(item21)
+        item2.addChild(item22)
+        item2.addChild(item23)
+
+        self.tree.addTopLevelItem(item2)
+        self.tree.expandAll()
+        self.tree.setHeaderHidden(True)
+
+        self.resize(400, 500)
+
+
+
+if __name__ == '__main__':
+    app = QApplication(sys.argv)
+    w = Demo()
+    w.show()
+    sys.exit(app.exec())