更新代码

README.md

@@ -1,11 +1,10 @@
-#### 一、特别说明
+#### 一、特别说明
 1. 可以选择打开QWidgetDemo.pro一次性编译所有的，也可以到目录下打开pro编译。
 2. 如果发现有些子项目没有加载请打开对应目录下的.pro仔细看里面的注释。
 3. 编译好的可执行文件在源码同级目录下的bin目录。
 4. 亲测Qt4.6到Qt6.2所有版本，亲测win、linux、mac、uos等系统。
 5. 有少部分项目不支持部分Qt版本比如Qt6，会自动跳过。
-6. **本项目开源的是下面表格中描述的内容，并未开源左侧的树状导航菜单控件，只是方便演示效果图直接用的自定义控件大全的效果图，懒得重新截图。**
+6. **建议用git命令行下载，压缩包下载后重新解压文件可能会有问题，不知为何。**
-7. **建议用git命令行下载，压缩包下载后重新解压文件可能会有问题，不知为何。**
 8. **强烈推荐各位搭配Qt开发经验一起学习 [https://gitee.com/feiyangqingyun/qtkaifajingyan](https://gitee.com/feiyangqingyun/qtkaifajingyan)**
 
 #### 二、目录说明
@@ -126,9 +125,7 @@
 
 ##### 4.5、界面美化
 ![avatar](https://github.com/feiyangqingyun/QWidgetDemo/raw/master/ui/0snap/flatui.jpg)
-![avatar](https://github.com/feiyangqingyun/QWidgetDemo/raw/master/ui/0snap/styledemo1.jpg)
+![avatar](https://github.com/feiyangqingyun/QWidgetDemo/raw/master/ui/0snap/styledemo.jpg)
-![avatar](https://github.com/feiyangqingyun/QWidgetDemo/raw/master/ui/0snap/styledemo2.jpg)
-![avatar](https://github.com/feiyangqingyun/QWidgetDemo/raw/master/ui/0snap/styledemo3.jpg)
 ![avatar](https://github.com/feiyangqingyun/QWidgetDemo/raw/master/ui/0snap/uidemo01.jpg)
 ![avatar](https://github.com/feiyangqingyun/QWidgetDemo/raw/master/ui/0snap/uidemo08.jpg)
 ![avatar](https://github.com/feiyangqingyun/QWidgetDemo/raw/master/ui/0snap/uidemo09.jpg)

ui/styledemo/frmmain.cpp

@@ -13,36 +13,42 @@ frmMain::~frmMain()
     delete ui;
 }
 
-void frmMain::showEvent(QShowEvent *)
-{
-    int width = ui->tabConfig->width() / ui->tabConfig->count() - 20;
-    ui->tabConfig->setStyleSheet(QString("QTabBar::tab{min-width:%1px;}").arg(width));
-}
-
 void frmMain::initForm()
 {
-    this->initStyle();
-    this->initTranslator();
-    this->initTableWidget();
-    this->initTreeWidget();
-    this->initListWidget();
-    this->initOther();
-
     ui->rbtn1->setChecked(true);
     ui->ck2->setChecked(true);
     ui->ck3->setCheckState(Qt::PartiallyChecked);
-    ui->tabWidget->setCurrentIndex(0);
+
+    ui->textEdit->setText("QQ：517216493\nWX：feiyangqingyun");
+    ui->treeWidget->expandAll();
+
+    int rowHeight = 23;
+    ui->tableWidget->horizontalHeader()->setFixedHeight(rowHeight);
+    for (int i = 0; i < 5; ++i) {
+        ui->tableWidget->setRowHeight(i, rowHeight);
+    }
+
+    //加载鼠标右键菜单翻译文件
+    QTranslator *translator1 = new QTranslator(qApp);
+    if (translator1->load(":/qm/qt_zh_CN.qm")){
+        qApp->installTranslator(translator1);
+    }
+
+    //加载富文本框鼠标右键菜单翻译文件
+    QTranslator *translator2 = new QTranslator(qApp);
+    if (translator2->load(":/qm/widgets.qm")) {
+        qApp->installTranslator(translator2);
+    }
+
+    on_btnStyle1_clicked();
 }
 
-void frmMain::initStyle()
+void frmMain::loadStyle(const QString &qssFile)
 {
     //加载样式表
     QString qss;    
-    //QFile file(":/qss/psblack.css");
+    QFile file(qssFile);
-    //QFile file(":/qss/flatwhite.css");
-    QFile file(":/qss/lightblue.css");
     if (file.open(QFile::ReadOnly)) {
-#if 1
         //用QTextStream读取样式文件不用区分文件编码 带bom也行
         QStringList list;
         QTextStream in(&file);
@@ -53,132 +59,25 @@ void frmMain::initStyle()
             list << line;
         }
 
+        file.close();
         qss = list.join("\n");
-#else
-        //用readAll读取默认支持的是ANSI格式,如果不小心用creator打开编辑过了很可能打不开
-        qss = QLatin1String(file.readAll());
-#endif
         QString paletteColor = qss.mid(20, 7);
         qApp->setPalette(QPalette(paletteColor));
         qApp->setStyleSheet(qss);
-        file.close();
     }
 }
 
-void frmMain::initTranslator()
+void frmMain::on_btnStyle1_clicked()
 {
-    //加载鼠标右键菜单翻译文件
+    loadStyle(":/qss/lightblue.css");
-    QTranslator *translator1 = new QTranslator(qApp);
-    translator1->load(":/qm/qt_zh_CN.qm");
-    qApp->installTranslator(translator1);
-
-    //加载富文本框鼠标右键菜单翻译文件
-    QTranslator *translator2 = new QTranslator(qApp);
-    translator2->load(":/qm/widgets.qm");
-    qApp->installTranslator(translator2);
 }
 
-void frmMain::initTableWidget()
+void frmMain::on_btnStyle2_clicked()
 {
-    //设置列数和列宽
+    loadStyle(":/qss/flatwhite.css");
-    int width = 1920;
-    ui->tableWidget->setColumnCount(5);
-    ui->tableWidget->setColumnWidth(0, width * 0.06);
-    ui->tableWidget->setColumnWidth(1, width * 0.10);
-    ui->tableWidget->setColumnWidth(2, width * 0.06);
-    ui->tableWidget->setColumnWidth(3, width * 0.10);
-    ui->tableWidget->setColumnWidth(4, width * 0.15);
-    ui->tableWidget->verticalHeader()->setDefaultSectionSize(25);
-
-    QStringList headText;
-    headText << "设备编号" << "设备名称" << "设备地址" << "告警内容" << "告警时间";
-    ui->tableWidget->setHorizontalHeaderLabels(headText);
-    ui->tableWidget->setSelectionBehavior(QAbstractItemView::SelectRows);
-    ui->tableWidget->setEditTriggers(QAbstractItemView::NoEditTriggers);
-    ui->tableWidget->setSelectionMode(QAbstractItemView::SingleSelection);
-    ui->tableWidget->setAlternatingRowColors(true);
-    ui->tableWidget->verticalHeader()->setVisible(false);
-    ui->tableWidget->horizontalHeader()->setStretchLastSection(true);
-
-    //设置行高
-    ui->tableWidget->setRowCount(300);
-
-    for (int i = 0; i < 300; i++) {
-        ui->tableWidget->setRowHeight(i, 24);
-
-        QTableWidgetItem *itemDeviceID = new QTableWidgetItem(QString::number(i + 1));
-        QTableWidgetItem *itemDeviceName = new QTableWidgetItem(QString("测试设备%1").arg(i + 1));
-        QTableWidgetItem *itemDeviceAddr = new QTableWidgetItem(QString::number(i + 1));
-        QTableWidgetItem *itemContent = new QTableWidgetItem("防区告警");
-        QTableWidgetItem *itemTime = new QTableWidgetItem(QDateTime::currentDateTime().toString("yyyy-MM-dd hh:mm:ss"));
-
-        ui->tableWidget->setItem(i, 0, itemDeviceID);
-        ui->tableWidget->setItem(i, 1, itemDeviceName);
-        ui->tableWidget->setItem(i, 2, itemDeviceAddr);
-        ui->tableWidget->setItem(i, 3, itemContent);
-        ui->tableWidget->setItem(i, 4, itemTime);
-    }
 }
 
-void frmMain::initTreeWidget()
+void frmMain::on_btnStyle3_clicked()
 {
-    ui->treeWidget->clear();
+    loadStyle(":/qss/psblack.css");
-    ui->treeWidget->setHeaderLabel(" 树状列表控件");
-
-    QTreeWidgetItem *group1 = new QTreeWidgetItem(ui->treeWidget);
-    group1->setText(0, "父元素1");
-    group1->setFlags(Qt::ItemIsUserCheckable | Qt::ItemIsEnabled | Qt::ItemIsSelectable);
-    group1->setCheckState(0, Qt::PartiallyChecked);
-
-    QTreeWidgetItem *subItem11 = new QTreeWidgetItem(group1);
-    subItem11->setFlags(Qt::ItemIsUserCheckable | Qt::ItemIsEnabled | Qt::ItemIsSelectable);
-    subItem11->setText(0, "子元素1");
-    subItem11->setCheckState(0, Qt::Checked);
-
-    QTreeWidgetItem *subItem12 = new QTreeWidgetItem(group1);
-    subItem12->setFlags(Qt::ItemIsUserCheckable | Qt::ItemIsEnabled | Qt::ItemIsSelectable);
-    subItem12->setText(0, "子元素2");
-    subItem12->setCheckState(0, Qt::Unchecked);
-
-    QTreeWidgetItem *subItem13 = new QTreeWidgetItem(group1);
-    subItem13->setFlags(Qt::ItemIsUserCheckable | Qt::ItemIsEnabled | Qt::ItemIsSelectable);
-    subItem13->setText(0, "子元素3");
-    subItem13->setCheckState(0, Qt::Unchecked);
-
-    QTreeWidgetItem *group2 = new QTreeWidgetItem(ui->treeWidget);
-    group2->setText(0, "父元素2");
-    group2->setFlags(Qt::ItemIsUserCheckable | Qt::ItemIsEnabled | Qt::ItemIsSelectable);
-    group2->setCheckState(0, Qt::Unchecked);
-
-    QTreeWidgetItem *subItem21 = new QTreeWidgetItem(group2);
-    subItem21->setFlags(Qt::ItemIsUserCheckable | Qt::ItemIsEnabled | Qt::ItemIsSelectable);
-    subItem21->setText(0, "子元素1");
-    subItem21->setCheckState(0, Qt::Unchecked);
-
-    QTreeWidgetItem *subItem211 = new QTreeWidgetItem(subItem21);
-    subItem211->setFlags(Qt::ItemIsUserCheckable | Qt::ItemIsEnabled | Qt::ItemIsSelectable);
-    subItem211->setText(0, "子子元素1");
-    subItem211->setCheckState(0, Qt::Unchecked);
-
-    ui->treeWidget->expandAll();
-}
-
-void frmMain::initListWidget()
-{
-    QStringList items;
-    for (int i = 1; i <= 30; i++) {
-        items << QString("元素%1").arg(i);
-    }
-
-    ui->listWidget->addItems(items);
-    ui->cbox1->addItems(items);
-    ui->cbox2->addItems(items);
-}
-
-void frmMain::initOther()
-{
-    ui->horizontalSlider->setValue(88);
-    ui->widgetLeft->setProperty("nav", "left");
-    ui->widgetBottom->setProperty("form", "bottom");
-    ui->widgetTop->setProperty("nav", "top");    
 }

ui/styledemo/frmmain.h

@@ -15,20 +15,17 @@ public:
     explicit frmMain(QWidget *parent = 0);
     ~frmMain();
 
-protected:
-    void showEvent(QShowEvent *);
-
 private:
     Ui::frmMain *ui;
 
 private slots:
     void initForm();
-    void initStyle();
+    void loadStyle(const QString &qssFile);
-    void initTranslator();
+
-    void initTableWidget();
+private slots:
-    void initTreeWidget();
+    void on_btnStyle1_clicked();
-    void initListWidget();
+    void on_btnStyle2_clicked();
-    void initOther();
+    void on_btnStyle3_clicked();
 };
 
 #endif // FRMMAIN_H

ui/styledemo/qrc/qss/flatwhite.css

@@ -170,36 +170,36 @@ QRadioButton::indicator::checked:disabled{
 image:url(:/qss/flatwhite/radiobutton_checked_disable.png);
 }
 
-QGroupBox::indicator,QTreeWidget::indicator,QListWidget::indicator{
+QGroupBox::indicator,QTreeView::indicator,QListView::indicator,QTableView::indicator{
-padding:0px -3px 0px 0px;
+padding:0px 0px 0px 0px;
 }
 
-QCheckBox::indicator,QGroupBox::indicator,QTreeWidget::indicator,QListWidget::indicator{
+QCheckBox::indicator,QGroupBox::indicator,QTreeView::indicator,QListView::indicator,QTableView::indicator{
 width:13px;
 height:13px;
 }
 
-QCheckBox::indicator:unchecked,QGroupBox::indicator:unchecked,QTreeWidget::indicator:unchecked,QListWidget::indicator:unchecked{
+QCheckBox::indicator:unchecked,QGroupBox::indicator:unchecked,QTreeView::indicator:unchecked,QListView::indicator:unchecked,QTableView::indicator:unchecked{
 image:url(:/qss/flatwhite/checkbox_unchecked.png);
 }
 
-QCheckBox::indicator:unchecked:disabled,QGroupBox::indicator:unchecked:disabled,QTreeWidget::indicator:unchecked:disabled,QListWidget::indicator:disabled{
+QCheckBox::indicator:unchecked:disabled,QGroupBox::indicator:unchecked:disabled,QTreeView::indicator:unchecked:disabled,QListView::indicator:unchecked:disabled,QTableView::indicator:unchecked:disabled{
 image:url(:/qss/flatwhite/checkbox_unchecked_disable.png);
 }
 
-QCheckBox::indicator:checked,QGroupBox::indicator:checked,QTreeWidget::indicator:checked,QListWidget::indicator:checked{
+QCheckBox::indicator:checked,QGroupBox::indicator:checked,QTreeView::indicator:checked,QListView::indicator:checked,QTableView::indicator:checked{
 image:url(:/qss/flatwhite/checkbox_checked.png);
 }
 
-QCheckBox::indicator:checked:disabled,QGroupBox::indicator:checked:disabled,QTreeWidget::indicator:checked:disabled,QListWidget::indicator:checked:disabled{
+QCheckBox::indicator:checked:disabled,QGroupBox::indicator:checked:disabled,QTreeView::indicator:checked:disabled,QListView::indicator:checked:disabled,QTableView::indicator:checked:disabled{
 image:url(:/qss/flatwhite/checkbox_checked_disable.png);
 }
 
-QCheckBox::indicator:indeterminate,QGroupBox::indicator:indeterminate,QTreeWidget::indicator:indeterminate,QListWidget::indicator:indeterminate{
+QCheckBox::indicator:indeterminate,QGroupBox::indicator:indeterminate,QTreeView::indicator:indeterminate,QListView::indicator:indeterminate,QTableView::indicator:indeterminate{
 image:url(:/qss/flatwhite/checkbox_parcial.png);
 }
 
-QCheckBox::indicator:indeterminate:disabled,QGroupBox::indicator:indeterminate:disabled,QTreeWidget::indicator:indeterminate:disabled,QListWidget::indicator:indeterminate:disabled{
+QCheckBox::indicator:indeterminate:disabled,QGroupBox::indicator:indeterminate:disabled,QTreeView::indicator:indeterminate:disabled,QListView::indicator:indeterminate:disabled,QTableView::indicator:indeterminate:disabled{
 image:url(:/qss/flatwhite/checkbox_parcial_disable.png);
 }
 
@@ -470,6 +470,7 @@ background:qlineargradient(spread:pad,x1:0,y1:0,x2:0,y2:1,stop:0 #F6F6F6,stop:1
 QTableView::item,QListView::item,QTreeView::item{
 padding:1px;
 margin:0px;
+border:0px;
 }
 
 QHeaderView::section,QTableCornerButton:section{
@@ -618,11 +619,6 @@ border-width:1px 1px 0px 1px;
 background:qlineargradient(spread:pad,x1:0,y1:0,x2:0,y2:1,stop:0 #E4E4E4,stop:1 #E4E4E4);
 }
 
-QComboBox QAbstractItemView::item{
-min-height:20px;
-min-width:10px;
-}
-
 QTableView[model="true"]::item{
 padding:0px;
 margin:0px;

ui/styledemo/qrc/qss/lightblue.css

@@ -170,36 +170,36 @@ QRadioButton::indicator::checked:disabled{
 image:url(:/qss/lightblue/radiobutton_checked_disable.png);
 }
 
-QGroupBox::indicator,QTreeWidget::indicator,QListWidget::indicator{
+QGroupBox::indicator,QTreeView::indicator,QListView::indicator,QTableView::indicator{
-padding:0px -3px 0px 0px;
+padding:0px 0px 0px 0px;
 }
 
-QCheckBox::indicator,QGroupBox::indicator,QTreeWidget::indicator,QListWidget::indicator{
+QCheckBox::indicator,QGroupBox::indicator,QTreeView::indicator,QListView::indicator,QTableView::indicator{
 width:13px;
 height:13px;
 }
 
-QCheckBox::indicator:unchecked,QGroupBox::indicator:unchecked,QTreeWidget::indicator:unchecked,QListWidget::indicator:unchecked{
+QCheckBox::indicator:unchecked,QGroupBox::indicator:unchecked,QTreeView::indicator:unchecked,QListView::indicator:unchecked,QTableView::indicator:unchecked{
 image:url(:/qss/lightblue/checkbox_unchecked.png);
 }
 
-QCheckBox::indicator:unchecked:disabled,QGroupBox::indicator:unchecked:disabled,QTreeWidget::indicator:unchecked:disabled,QListWidget::indicator:disabled{
+QCheckBox::indicator:unchecked:disabled,QGroupBox::indicator:unchecked:disabled,QTreeView::indicator:unchecked:disabled,QListView::indicator:unchecked:disabled,QTableView::indicator:unchecked:disabled{
 image:url(:/qss/lightblue/checkbox_unchecked_disable.png);
 }
 
-QCheckBox::indicator:checked,QGroupBox::indicator:checked,QTreeWidget::indicator:checked,QListWidget::indicator:checked{
+QCheckBox::indicator:checked,QGroupBox::indicator:checked,QTreeView::indicator:checked,QListView::indicator:checked,QTableView::indicator:checked{
 image:url(:/qss/lightblue/checkbox_checked.png);
 }
 
-QCheckBox::indicator:checked:disabled,QGroupBox::indicator:checked:disabled,QTreeWidget::indicator:checked:disabled,QListWidget::indicator:checked:disabled{
+QCheckBox::indicator:checked:disabled,QGroupBox::indicator:checked:disabled,QTreeView::indicator:checked:disabled,QListView::indicator:checked:disabled,QTableView::indicator:checked:disabled{
 image:url(:/qss/lightblue/checkbox_checked_disable.png);
 }
 
-QCheckBox::indicator:indeterminate,QGroupBox::indicator:indeterminate,QTreeWidget::indicator:indeterminate,QListWidget::indicator:indeterminate{
+QCheckBox::indicator:indeterminate,QGroupBox::indicator:indeterminate,QTreeView::indicator:indeterminate,QListView::indicator:indeterminate,QTableView::indicator:indeterminate{
 image:url(:/qss/lightblue/checkbox_parcial.png);
 }
 
-QCheckBox::indicator:indeterminate:disabled,QGroupBox::indicator:indeterminate:disabled,QTreeWidget::indicator:indeterminate:disabled,QListWidget::indicator:indeterminate:disabled{
+QCheckBox::indicator:indeterminate:disabled,QGroupBox::indicator:indeterminate:disabled,QTreeView::indicator:indeterminate:disabled,QListView::indicator:indeterminate:disabled,QTableView::indicator:indeterminate:disabled{
 image:url(:/qss/lightblue/checkbox_parcial_disable.png);
 }
 
@@ -470,6 +470,7 @@ background:qlineargradient(spread:pad,x1:0,y1:0,x2:0,y2:1,stop:0 #F2F9FF,stop:1
 QTableView::item,QListView::item,QTreeView::item{
 padding:1px;
 margin:0px;
+border:0px;
 }
 
 QHeaderView::section,QTableCornerButton:section{
@@ -618,11 +619,6 @@ border-width:1px 1px 0px 1px;
 background:qlineargradient(spread:pad,x1:0,y1:0,x2:0,y2:1,stop:0 #DEF0FE,stop:1 #C0DEF6);
 }
 
-QComboBox QAbstractItemView::item{
-min-height:120px;
-min-width:10px;
-}
-
 QTableView[model="true"]::item{
 padding:0px;
 margin:0px;

ui/styledemo/qrc/qss/psblack.css

@@ -170,36 +170,36 @@ QRadioButton::indicator::checked:disabled{
 image:url(:/qss/psblack/radiobutton_checked_disable.png);
 }
 
-QGroupBox::indicator,QTreeWidget::indicator,QListWidget::indicator{
+QGroupBox::indicator,QTreeView::indicator,QListView::indicator,QTableView::indicator{
-padding:0px -3px 0px 0px;
+padding:0px 0px 0px 0px;
 }
 
-QCheckBox::indicator,QGroupBox::indicator,QTreeWidget::indicator,QListWidget::indicator{
+QCheckBox::indicator,QGroupBox::indicator,QTreeView::indicator,QListView::indicator,QTableView::indicator{
 width:13px;
 height:13px;
 }
 
-QCheckBox::indicator:unchecked,QGroupBox::indicator:unchecked,QTreeWidget::indicator:unchecked,QListWidget::indicator:unchecked{
+QCheckBox::indicator:unchecked,QGroupBox::indicator:unchecked,QTreeView::indicator:unchecked,QListView::indicator:unchecked,QTableView::indicator:unchecked{
 image:url(:/qss/psblack/checkbox_unchecked.png);
 }
 
-QCheckBox::indicator:unchecked:disabled,QGroupBox::indicator:unchecked:disabled,QTreeWidget::indicator:unchecked:disabled,QListWidget::indicator:disabled{
+QCheckBox::indicator:unchecked:disabled,QGroupBox::indicator:unchecked:disabled,QTreeView::indicator:unchecked:disabled,QListView::indicator:unchecked:disabled,QTableView::indicator:unchecked:disabled{
 image:url(:/qss/psblack/checkbox_unchecked_disable.png);
 }
 
-QCheckBox::indicator:checked,QGroupBox::indicator:checked,QTreeWidget::indicator:checked,QListWidget::indicator:checked{
+QCheckBox::indicator:checked,QGroupBox::indicator:checked,QTreeView::indicator:checked,QListView::indicator:checked,QTableView::indicator:checked{
 image:url(:/qss/psblack/checkbox_checked.png);
 }
 
-QCheckBox::indicator:checked:disabled,QGroupBox::indicator:checked:disabled,QTreeWidget::indicator:checked:disabled,QListWidget::indicator:checked:disabled{
+QCheckBox::indicator:checked:disabled,QGroupBox::indicator:checked:disabled,QTreeView::indicator:checked:disabled,QListView::indicator:checked:disabled,QTableView::indicator:checked:disabled{
 image:url(:/qss/psblack/checkbox_checked_disable.png);
 }
 
-QCheckBox::indicator:indeterminate,QGroupBox::indicator:indeterminate,QTreeWidget::indicator:indeterminate,QListWidget::indicator:indeterminate{
+QCheckBox::indicator:indeterminate,QGroupBox::indicator:indeterminate,QTreeView::indicator:indeterminate,QListView::indicator:indeterminate,QTableView::indicator:indeterminate{
 image:url(:/qss/psblack/checkbox_parcial.png);
 }
 
-QCheckBox::indicator:indeterminate:disabled,QGroupBox::indicator:indeterminate:disabled,QTreeWidget::indicator:indeterminate:disabled,QListWidget::indicator:indeterminate:disabled{
+QCheckBox::indicator:indeterminate:disabled,QGroupBox::indicator:indeterminate:disabled,QTreeView::indicator:indeterminate:disabled,QListView::indicator:indeterminate:disabled,QTableView::indicator:indeterminate:disabled{
 image:url(:/qss/psblack/checkbox_parcial_disable.png);
 }
 
@@ -470,6 +470,7 @@ background:qlineargradient(spread:pad,x1:0,y1:0,x2:0,y2:1,stop:0 #646464,stop:1
 QTableView::item,QListView::item,QTreeView::item{
 padding:1px;
 margin:0px;
+border:0px;
 }
 
 QHeaderView::section,QTableCornerButton:section{
@@ -618,11 +619,6 @@ border-width:1px 1px 0px 1px;
 background:qlineargradient(spread:pad,x1:0,y1:0,x2:0,y2:1,stop:0 #484848,stop:1 #383838);
 }
 
-QComboBox QAbstractItemView::item{
-min-height:20px;
-min-width:10px;
-}
-
 QTableView[model="true"]::item{
 padding:0px;
 margin:0px;