This commit is contained in:
zhuzihcu 2023-03-28 17:53:46 +08:00
parent 96ad06c2e4
commit 6a2a93561a
40 changed files with 264 additions and 78 deletions

View File

@ -8,6 +8,10 @@ FluContentPage {
title:"Awesome" title:"Awesome"
leftPadding:10
rightPadding:10
bottomPadding:20
FluTextBox{ FluTextBox{
id:text_box id:text_box
placeholderText: "请输入关键字" placeholderText: "请输入关键字"

View File

@ -9,6 +9,9 @@ FluScrollablePage{
title:"Badge" title:"Badge"
leftPadding:10
rightPadding:10
bottomPadding:20
FluArea{ FluArea{
width: parent.width width: parent.width

View File

@ -9,6 +9,10 @@ FluScrollablePage{
spacing: 20 spacing: 20
leftPadding:10
rightPadding:10
bottomPadding:20
FluText{ FluText{
Layout.topMargin: 20 Layout.topMargin: 20
text:"支持Tab键切换焦点空格键执行点击事件" text:"支持Tab键切换焦点空格键执行点击事件"

View File

@ -7,6 +7,9 @@ import FluentUI 1.0
FluScrollablePage{ FluScrollablePage{
title:"CalendarPicker" title:"CalendarPicker"
leftPadding:10
rightPadding:10
bottomPadding:20
FluArea{ FluArea{
width: parent.width width: parent.width

View File

@ -8,6 +8,9 @@ import FluentUI 1.0
FluScrollablePage{ FluScrollablePage{
title:"Carousel" title:"Carousel"
leftPadding:10
rightPadding:10
bottomPadding:20
FluArea{ FluArea{
width: parent.width width: parent.width

View File

@ -8,6 +8,9 @@ import FluentUI 1.0
FluScrollablePage{ FluScrollablePage{
title:"ColorPicker" title:"ColorPicker"
leftPadding:10
rightPadding:10
bottomPadding:20
FluArea{ FluArea{
width: parent.width width: parent.width

View File

@ -7,7 +7,9 @@ import FluentUI 1.0
FluScrollablePage{ FluScrollablePage{
title:"TimePicker" title:"TimePicker"
leftPadding:10
rightPadding:10
bottomPadding:20
FluArea{ FluArea{
width: parent.width width: parent.width

View File

@ -6,7 +6,11 @@ import QtGraphicalEffects 1.15
import FluentUI 1.0 import FluentUI 1.0
FluScrollablePage{ FluScrollablePage{
title:"Dialog" title:"Dialog"
leftPadding:10
rightPadding:10
bottomPadding:20
FluContentDialog{ FluContentDialog{
id:dialog id:dialog

View File

@ -6,7 +6,11 @@ import QtGraphicalEffects 1.15
import FluentUI 1.0 import FluentUI 1.0
FluScrollablePage{ FluScrollablePage{
title:"Expander" title:"Expander"
leftPadding:10
rightPadding:10
bottomPadding:20
FluExpander{ FluExpander{
headerText:"打开一个单选框" headerText:"打开一个单选框"

View File

@ -6,7 +6,11 @@ import QtGraphicalEffects 1.15
import FluentUI 1.0 import FluentUI 1.0
FluScrollablePage{ FluScrollablePage{
title:"InfoBar" title:"InfoBar"
leftPadding:10
rightPadding:10
bottomPadding:20
FluButton{ FluButton{
text:"Info" text:"Info"

View File

@ -8,6 +8,9 @@ import FluentUI 1.0
FluScrollablePage{ FluScrollablePage{
title:"MediaPlayer" title:"MediaPlayer"
leftPadding:10
rightPadding:10
bottomPadding:20
onVisibleChanged: { onVisibleChanged: {
if(visible){ if(visible){

View File

@ -8,11 +8,13 @@ import FluentUI 1.0
FluScrollablePage{ FluScrollablePage{
title:"Menu" title:"Menu"
leftPadding:10
rightPadding:10
bottomPadding:20
FluButton{ FluButton{
text:"左击菜单" text:"左击菜单"
Layout.topMargin: 20 Layout.topMargin: 20
Layout.leftMargin: 15
onClicked:{ onClicked:{
menu.popup() menu.popup()
} }
@ -22,7 +24,6 @@ FluScrollablePage{
FluButton{ FluButton{
text:"右击菜单" text:"右击菜单"
Layout.topMargin: 20 Layout.topMargin: 20
Layout.leftMargin: 15
onClicked: { onClicked: {
showSuccess("请按鼠标右击") showSuccess("请按鼠标右击")
} }

View File

@ -7,6 +7,9 @@ import FluentUI 1.0
FluScrollablePage{ FluScrollablePage{
title:"MultiWindow" title:"MultiWindow"
leftPadding:10
rightPadding:10
bottomPadding:20
property string password: "" property string password: ""

View File

@ -6,7 +6,11 @@ import QtGraphicalEffects 1.15
import FluentUI 1.0 import FluentUI 1.0
FluScrollablePage{ FluScrollablePage{
title:"Progress" title:"Progress"
leftPadding:10
rightPadding:10
bottomPadding:20
FluProgressBar{ FluProgressBar{
Layout.topMargin: 20 Layout.topMargin: 20

View File

@ -6,7 +6,11 @@ import QtGraphicalEffects 1.15
import FluentUI 1.0 import FluentUI 1.0
FluScrollablePage{ FluScrollablePage{
title:"Rectangle" title:"Rectangle"
leftPadding:10
rightPadding:10
bottomPadding:20
RowLayout{ RowLayout{
Layout.topMargin: 20 Layout.topMargin: 20

View File

@ -8,16 +8,20 @@ import FluentUI 1.0
FluScrollablePage{ FluScrollablePage{
title:"Slider" title:"Slider"
leftPadding:10
rightPadding:10
bottomPadding:20
FluSlider{ FluSlider{
Layout.topMargin: 20 Layout.topMargin: 20
Layout.leftMargin: 15
value: 50 value: 50
Layout.leftMargin: 10
} }
FluSlider{ FluSlider{
orientation:FluSlider.Vertical orientation:FluSlider.Vertical
Layout.topMargin: 20 Layout.topMargin: 20
Layout.leftMargin: 15 Layout.leftMargin: 10
Layout.bottomMargin: 20
value: 50 value: 50
} }
} }

View File

@ -7,6 +7,9 @@ import FluentUI 1.0
FluScrollablePage{ FluScrollablePage{
title:"TabView" title:"TabView"
leftPadding:10
rightPadding:10
bottomPadding:20
Component{ Component{
id:com_page id:com_page

View File

@ -8,6 +8,9 @@ import FluentUI 1.0
FluScrollablePage{ FluScrollablePage{
title:"TextBox" title:"TextBox"
leftPadding:10
rightPadding:10
bottomPadding:20
FluTextBox{ FluTextBox{
Layout.topMargin: 20 Layout.topMargin: 20

View File

@ -8,6 +8,9 @@ import FluentUI 1.0
FluScrollablePage{ FluScrollablePage{
title:"Theme" title:"Theme"
leftPadding:10
rightPadding:10
bottomPadding:20
RowLayout{ RowLayout{
Layout.topMargin: 20 Layout.topMargin: 20

View File

@ -7,7 +7,9 @@ import FluentUI 1.0
FluScrollablePage{ FluScrollablePage{
title:"TimePicker" title:"TimePicker"
leftPadding:10
rightPadding:10
bottomPadding:20
FluArea{ FluArea{
width: parent.width width: parent.width

View File

@ -8,6 +8,9 @@ import FluentUI 1.0
FluScrollablePage{ FluScrollablePage{
title:"ToggleSwitch" title:"ToggleSwitch"
leftPadding:10
rightPadding:10
bottomPadding:20
FluToggleSwitch{ FluToggleSwitch{
Layout.topMargin: 20 Layout.topMargin: 20

View File

@ -8,6 +8,9 @@ import FluentUI 1.0
FluScrollablePage{ FluScrollablePage{
title:"Tooltip" title:"Tooltip"
leftPadding:10
rightPadding:10
bottomPadding:20
FluText{ FluText{
Layout.topMargin: 20 Layout.topMargin: 20

View File

@ -7,6 +7,9 @@ import FluentUI 1.0
FluContentPage { FluContentPage {
title:"TreeView" title:"TreeView"
leftPadding:10
rightPadding:10
bottomPadding:20
function randomName() { function randomName() {
var names = ["张三", "李四", "王五", "赵六", "钱七", "孙八", "周九", "吴十"] var names = ["张三", "李四", "王五", "赵六", "钱七", "孙八", "周九", "吴十"]

View File

@ -7,6 +7,9 @@ FluContentPage {
title: "Typography" title: "Typography"
property int textSize: 13 property int textSize: 13
leftPadding:10
rightPadding:10
bottomPadding:20
Component.onCompleted: { Component.onCompleted: {
slider.seek(31) slider.seek(31)

Binary file not shown.

Before

Width:  |  Height:  |  Size: 272 KiB

After

Width:  |  Height:  |  Size: 116 KiB

View File

@ -9,14 +9,14 @@ import FluentUI 1.0
FluWindow { FluWindow {
id:rootwindow id:rootwindow
width: 860 width: 860
height: 600 height: 640
title: "FluentUI" title: "FluentUI"
minimumWidth: 520 minimumWidth: 520
minimumHeight: 400 minimumHeight: 400
FluAppBar{ FluAppBar{
id:appbar id:appbar
title: "FluentUI" z:10
} }
FluObject{ FluObject{
@ -237,47 +237,13 @@ FluWindow {
} }
} }
FluNavigationView{ FluNavigationView{
id:nav_view id:nav_view
anchors{ anchors.fill: parent
top: appbar.bottom
left: parent.left
right: parent.right
bottom: parent.bottom
}
items: original_items items: original_items
footerItems:footer_items footerItems:footer_items
logo: "qrc:/res/image/favicon.ico"
actions:[ z: 11
Image {
width: 30
height: 30
Layout.preferredWidth: 30
Layout.preferredHeight: 30
sourceSize: Qt.size(60,60)
source: "qrc:/res/image/logo_openai.png"
Layout.rightMargin: 5
MouseArea{
anchors.fill: parent
cursorShape: Qt.PointingHandCursor
onClicked: {
FluApp.navigate("/chat")
}
}
},
FluText{
text:"夜间模式"
fontStyle: FluText.Body
},
FluToggleSwitch{
selected: FluTheme.isDark
clickFunc:function(){
FluTheme.isDark = !FluTheme.isDark
}
}
]
Component.onCompleted: { Component.onCompleted: {
nav_view.setCurrentIndex(1) nav_view.setCurrentIndex(1)
nav_view.push("qrc:/T_Buttons.qml") nav_view.push("qrc:/T_Buttons.qml")

View File

@ -46,5 +46,6 @@
<file>T_Carousel.qml</file> <file>T_Carousel.qml</file>
<file>T_MediaPlayer.qml</file> <file>T_MediaPlayer.qml</file>
<file>T_TabView.qml</file> <file>T_TabView.qml</file>
<file>res/image/favicon.ico</file>
</qresource> </qresource>
</RCC> </RCC>

Binary file not shown.

After

Width:  |  Height:  |  Size: 116 KiB

View File

@ -16,7 +16,7 @@ FluTheme::FluTheme(QObject *parent)
: QObject{parent} : QObject{parent}
{ {
primaryColor(FluColors::getInstance()->Blue()); primaryColor(FluColors::getInstance()->Blue());
textSize(13); textSize(14);
isNativeText(false); isNativeText(false);
isFrameless(true); isFrameless(true);
isDark(false); isDark(false);

View File

@ -6,7 +6,7 @@ import FluentUI 1.0
Rectangle{ Rectangle{
property string title: "标题" property string title: ""
property color textColor: FluTheme.isDark ? "#FFFFFF" : "#000000" property color textColor: FluTheme.isDark ? "#FFFFFF" : "#000000"
property bool showDark: false property bool showDark: false
property bool showFps: false property bool showFps: false
@ -94,7 +94,19 @@ Rectangle{
text:"最小化" text:"最小化"
radius: 0 radius: 0
textColor: root.textColor textColor: root.textColor
color:hovered ? "#20000000" : "#00000000" color:{
if(FluTheme.isDark){
if(hovered){
return Qt.rgba(1,1,1,0.06)
}
return Qt.rgba(0,0,0,0)
}else{
if(hovered){
return Qt.rgba(0,0,0,0.06)
}
return Qt.rgba(0,0,0,0)
}
}
onClicked: { onClicked: {
window.showMinimized() window.showMinimized()
} }
@ -108,7 +120,19 @@ Rectangle{
return Window.Maximized === window.visibility return Window.Maximized === window.visibility
} }
iconSource : isRestore ? FluentIcons.ChromeRestore : FluentIcons.ChromeMaximize iconSource : isRestore ? FluentIcons.ChromeRestore : FluentIcons.ChromeMaximize
color:hovered ? "#20000000" : "#00000000" color:{
if(FluTheme.isDark){
if(hovered){
return Qt.rgba(1,1,1,0.06)
}
return Qt.rgba(0,0,0,0)
}else{
if(hovered){
return Qt.rgba(0,0,0,0.06)
}
return Qt.rgba(0,0,0,0)
}
}
Layout.alignment: Qt.AlignVCenter Layout.alignment: Qt.AlignVCenter
visible: resizable visible: resizable
radius: 0 radius: 0

View File

@ -63,6 +63,8 @@ Rectangle {
id:popup id:popup
height: container.height height: container.height
width: container.width width: container.width
modal: true
dim:false
background: FluCalendarView{ background: FluCalendarView{
id:container id:container
onDateClicked: onDateClicked:

View File

@ -29,6 +29,8 @@ Button{
} }
Popup{ Popup{
id:popup id:popup
modal: true
dim:false
height: container.height height: container.height
width: container.width width: container.width
background: FluColorView{ background: FluColorView{

View File

@ -8,22 +8,38 @@ Item {
property alias title: text_title.text property alias title: text_title.text
default property alias content: container.data default property alias content: container.data
property int leftPadding: 0
property int topPadding: 0
property int rightPadding: 0
property int bottomPadding: 0
id:root id:control
FluText{ FluText{
id:text_title id:text_title
fontStyle: FluText.TitleLarge fontStyle: FluText.TitleLarge
anchors{
top: parent.top
topMargin: control.topPadding
left: parent.left
right: parent.right
leftMargin: control.leftPadding
rightMargin: control.rightPadding
}
} }
Item{ Item{
clip: true clip: true
id:container id:container
anchors{ anchors{
left: parent.left
right: parent.right
top: text_title.bottom top: text_title.bottom
bottom: parent.bottom bottom: parent.bottom
leftMargin: control.leftPadding
rightMargin: control.rightPadding
bottomMargin: control.bottomPadding
} }
width: parent.width
} }
} }

View File

@ -102,6 +102,8 @@ Rectangle {
width: container.width width: container.width
height: container.height height: container.height
contentItem: Item{} contentItem: Item{}
modal: true
dim:false
background: Rectangle{ background: Rectangle{
id:container id:container
width: 300 width: 300

View File

@ -5,4 +5,10 @@ Rectangle {
color: FluTheme.isDark ? Qt.rgba(45/255,45/255,45/255,1) : Qt.rgba(226/255,230/255,234/255,1) color: FluTheme.isDark ? Qt.rgba(45/255,45/255,45/255,1) : Qt.rgba(226/255,230/255,234/255,1)
Behavior on color{
ColorAnimation {
duration: 300
}
}
} }

View File

@ -9,6 +9,9 @@ Menu {
id: popup id: popup
width: 140 width: 140
height: container.height height: container.height
modal: true
dim:false
contentItem: Item{}
background: Item { background: Item {
Rectangle{ Rectangle{

View File

@ -6,18 +6,18 @@ import FluentUI 1.0
Item { Item {
property alias logo : image_logo.source
property FluObject items property FluObject items
property FluObject footerItems property FluObject footerItems
property int displayMode: width<=700 ? FluNavigationView.Minimal : FluNavigationView.Open property int displayMode: width<=700 ? FluNavigationView.Minimal : FluNavigationView.Open
property bool displaMinimalNav : false property bool displaMinimalMenu : false
property alias actions: layout_actions.data
id:root id:root
onDisplayModeChanged: { onDisplayModeChanged: {
if(displayMode === FluNavigationView.Minimal){ if(displayMode === FluNavigationView.Minimal){
anim_navi.enabled = false anim_navi.enabled = false
displaMinimalNav = false displaMinimalMenu = false
timer_anim_enable.restart() timer_anim_enable.restart()
} }
} }
@ -85,6 +85,16 @@ Item {
leftMargin: 6 leftMargin: 6
rightMargin: 6 rightMargin: 6
} }
Rectangle{
width: 3
height: 18
radius: 1.5
color: FluTheme.primaryColor.dark
visible: nav_list.currentIndex === position && type===0
anchors{
verticalCenter: parent.verticalCenter
}
}
MouseArea{ MouseArea{
id:item_mouse id:item_mouse
hoverEnabled: true hoverEnabled: true
@ -99,6 +109,7 @@ Item {
}else{ }else{
model.tap() model.tap()
} }
displaMinimalMenu = false
} }
} }
color: { color: {
@ -136,7 +147,7 @@ Item {
Item { Item {
id:nav_app_bar id:nav_app_bar
width: parent.width width: parent.width
height: 38 height: 50
z:999 z:999
RowLayout{ RowLayout{
height:parent.height height:parent.height
@ -144,6 +155,8 @@ Item {
FluIconButton{ FluIconButton{
iconSource: FluentIcons.ChromeBack iconSource: FluentIcons.ChromeBack
Layout.leftMargin: 5 Layout.leftMargin: 5
Layout.preferredWidth: 40
Layout.preferredHeight: 40
Layout.alignment: Qt.AlignVCenter Layout.alignment: Qt.AlignVCenter
disabled: nav_swipe.depth === 1 disabled: nav_swipe.depth === 1
iconSize: 13 iconSize: 13
@ -157,37 +170,45 @@ Item {
} }
} }
FluIconButton{ FluIconButton{
id:btn_nav
iconSource: FluentIcons.GlobalNavButton iconSource: FluentIcons.GlobalNavButton
Layout.leftMargin: 5
iconSize: 15 iconSize: 15
Layout.preferredWidth: 40
Layout.preferredHeight: 40
visible: displayMode === FluNavigationView.Minimal visible: displayMode === FluNavigationView.Minimal
Layout.alignment: Qt.AlignVCenter Layout.alignment: Qt.AlignVCenter
onClicked: { onClicked: {
displaMinimalNav = !displaMinimalNav displaMinimalMenu = !displaMinimalMenu
}
} }
} }
RowLayout{ Image{
id:layout_actions id:image_logo
anchors{ Layout.preferredHeight: 20
right: parent.right Layout.preferredWidth: 20
rightMargin: 14 Layout.leftMargin: {
verticalCenter: parent.verticalCenter if(btn_nav.visible){
return 12
}
return 5
}
Layout.alignment: Qt.AlignVCenter
}
FluText{
Layout.alignment: Qt.AlignVCenter
text:"FluentUI"
Layout.leftMargin: 12
fontStyle: FluText.Body
} }
spacing: 5
} }
} }
Item{ Item{
anchors{ anchors{
left: displayMode === FluNavigationView.Minimal ? parent.left : layout_list.right left: displayMode === FluNavigationView.Minimal ? parent.left : layout_list.right
leftMargin: 10
top: nav_app_bar.bottom top: nav_app_bar.bottom
right: parent.right right: parent.right
rightMargin: 10
bottom: parent.bottom bottom: parent.bottom
bottomMargin: 20
} }
StackView{ StackView{
@ -209,9 +230,9 @@ Item {
MouseArea{ MouseArea{
anchors.fill: parent anchors.fill: parent
enabled: (displayMode === FluNavigationView.Minimal && displaMinimalNav) enabled: (displayMode === FluNavigationView.Minimal && displaMinimalMenu)
onClicked: { onClicked: {
displaMinimalNav = false displaMinimalMenu = false
} }
} }
@ -225,7 +246,7 @@ Item {
x: { x: {
if(displayMode !== FluNavigationView.Minimal) if(displayMode !== FluNavigationView.Minimal)
return 0 return 0
return (displayMode === FluNavigationView.Minimal && displaMinimalNav) ? 0 : -width return (displayMode === FluNavigationView.Minimal && displaMinimalMenu) ? 0 : -width
} }
Behavior on x{ Behavior on x{
id:anim_navi id:anim_navi
@ -233,6 +254,7 @@ Item {
duration: 150 duration: 150
} }
} }
color: { color: {
if(displayMode === FluNavigationView.Minimal){ if(displayMode === FluNavigationView.Minimal){
return FluTheme.isDark ? Qt.rgba(61/255,61/255,61/255,1) : Qt.rgba(243/255,243/255,243/255,1) return FluTheme.isDark ? Qt.rgba(61/255,61/255,61/255,1) : Qt.rgba(243/255,243/255,243/255,1)
@ -248,13 +270,17 @@ Item {
} }
} }
border.color: FluTheme.isDark ? Qt.rgba(45/255,45/255,45/255,1) : Qt.rgba(226/255,230/255,234/255,1)
border.width: displayMode === FluNavigationView.Minimal ? 1 : 0
Item{ Item{
id:layout_header id:layout_header
width: layout_list.width width: layout_list.width
y:nav_app_bar.height y:nav_app_bar.height
height: 50 height: textbox_search.height
FluAutoSuggestBox{ FluAutoSuggestBox{
id:textbox_search
width: 280 width: 280
anchors.centerIn: parent anchors.centerIn: parent
iconSource: FluentIcons.Zoom iconSource: FluentIcons.Zoom

View File

@ -1,7 +1,39 @@
import QtQuick 2.15 import QtQuick 2.15
import QtQuick.Controls 2.15 import QtQuick.Controls 2.15
import QtQuick.Controls.impl 2.15
import QtQuick.Templates 2.15 as T
import FluentUI 1.0 import FluentUI 1.0
ScrollBar { T.ScrollBar {
id: control
property color handleNormalColor: Qt.rgba(134/255,134/255,134/255,1)
property color handleHoverColor: Qt.lighter(handleNormalColor)
property color handlePressColor: Qt.darker(handleNormalColor)
implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
implicitContentWidth + leftPadding + rightPadding)
implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
implicitContentHeight + topPadding + bottomPadding)
padding: 4
visible: control.policy !== T.ScrollBar.AlwaysOff
minimumSize: 0.3
contentItem: Rectangle {
implicitWidth: hovered || pressed ? 6 : 2
implicitHeight: hovered || pressed ? 6 : 2
radius: width / 2
layer.samples: 4
layer.enabled: true
layer.smooth: true
color: control.pressed?handlePressColor:control.hovered?handleHoverColor:handleNormalColor
opacity:(control.policy === T.ScrollBar.AlwaysOn || control.size < 1.0)?1.0:0.0
}
Behavior on implicitWidth {
NumberAnimation{
duration: 150
}
}
} }

View File

@ -9,28 +9,56 @@ Item {
property alias title: text_title.text property alias title: text_title.text
default property alias content: container.data default property alias content: container.data
property int spacing : 5 property int spacing : 5
property int leftPadding: 0
property int topPadding: 0
property int rightPadding: 0
property int bottomPadding: 0
id:root id:control
FluText{ FluText{
id:text_title id:text_title
fontStyle: FluText.TitleLarge fontStyle: FluText.TitleLarge
anchors{
top: parent.top
topMargin: control.topPadding
left: parent.left
right: parent.right
leftMargin: control.leftPadding
rightMargin: control.rightPadding
}
} }
Flickable{ Flickable{
id:flickview
clip: true clip: true
width: parent.width anchors{
left: parent.left
right: parent.right
top: text_title.bottom
bottom: parent.bottom
bottomMargin: control.bottomPadding
}
contentWidth: parent.width contentWidth: parent.width
contentHeight: container.height contentHeight: container.height
boundsBehavior: Flickable.StopAtBounds boundsBehavior: Flickable.StopAtBounds
ScrollBar.vertical: ScrollBar { } ScrollBar.vertical: FluScrollBar {
}
anchors{ anchors{
top: text_title.bottom top: text_title.bottom
bottom: parent.bottom bottom: parent.bottom
} }
ColumnLayout{ ColumnLayout{
id:container id:container
spacing: root.spacing spacing: control.spacing
clip: true
anchors{
left: parent.left
right: parent.right
top: parent.top
leftMargin: control.leftPadding
rightMargin: control.rightPadding
}
width: parent.width width: parent.width
} }
} }

View File

@ -104,6 +104,8 @@ Rectangle {
width: container.width width: container.width
height: container.height height: container.height
contentItem: Item{} contentItem: Item{}
modal: true
dim:false
background: Rectangle{ background: Rectangle{
id:container id:container
width: 300 width: 300