ソースを参照

Added Semantic UI theme.

zhixin 7 年 前
コミット
5e07fc738e

+ 2 - 2
.gitignore

@@ -7,8 +7,8 @@ _gh_pages
 # use scss instead
 src/bootstrap-table.css
 src/bootstrap-table.css.map
-src/themes/*.css
-src/themes/*.css.map
+src/themes/**/*.css
+src/themes/**/*.css.map
 .sass-cache
 
 # old docs

+ 43 - 0
src/themes/semantic/bootstrap-table-semantic.js

@@ -0,0 +1,43 @@
+/**
+ * @author zhixin wen <wenzhixin2010@gmail.com>
+ * theme: https://github.com/Semantic-Org/Semantic-UI
+ */
+
+($ => {
+  $.extend($.fn.bootstrapTable.defaults, {
+    classes: 'ui selectable celled table',
+    buttonsPrefix: '',
+    buttonsClass: 'ui button'
+  })
+
+  $.BootstrapTable = class extends $.BootstrapTable {
+    initConstants () {
+      super.initConstants()
+
+      this.constants.theme = 'semantic'
+
+      this.constants.classes.buttonsGroup = 'ui buttons'
+      this.constants.classes.buttonsDropdown = 'ui button dropdown'
+      this.constants.classes.input = 'ui input'
+      this.constants.classes.paginationDropdown = 'ui dropdown'
+
+      this.constants.html.toobarDropdow = ['<div class="menu">', '</div>']
+      this.constants.html.toobarDropdowItem = '<label class="item">%s</label>'
+      this.constants.html.pageDropdown = ['<div class="menu">', '</div>']
+      this.constants.html.pageDropdownItem = '<a class="item %s" href="#">%s</a>'
+      this.constants.html.dropdownCaret = '<i class="dropdown icon"></i>'
+      this.constants.html.pagination = ['<div class="ui pagination menu%s">', '</div>'],
+      this.constants.html.paginationItem = '<a class="page-item item%s" href="#">%s</a>'
+    }
+
+    initToolbar () {
+      super.initToolbar()
+      this.$toolbar.find('.button.dropdown').dropdown()
+    }
+
+    initPagination () {
+      super.initPagination()
+      this.$pagination.find('.dropdown').dropdown()
+    }
+  }
+})(jQuery)

+ 58 - 0
src/themes/semantic/bootstrap-table-semantic.scss

@@ -0,0 +1,58 @@
+/**
+ * @author zhixin wen <wenzhixin2010@gmail.com>
+ * theme: https://github.com/Semantic-Org/Semantic-UI
+ */
+
+ @import './variables.scss';
+ @import '../bootstrap-table.scss';
+
+.bootstrap-table {
+  .fixed-table-container.fixed-height:not(.has-footer),
+  .fixed-table-body {
+    border-bottom-left-radius: .28571429rem;
+    border-bottom-right-radius: .28571429rem;
+  }
+
+  .float-left {
+    float: left;
+  }
+
+  .float-right {
+    float: right;
+  }
+
+  .fixed-table-toolbar {
+    .search input {
+      padding-top: 0.60714286rem;
+      padding-bottom: 0.60714286rem;
+    }
+
+    .keep-open.button.dropdown {
+      padding: 0;
+
+      .button {
+        border-top-left-radius: 0;
+        border-bottom-left-radius: 0;
+      }
+    }
+
+    .ui.buttons .button:last-child .button {
+      border-top-right-radius: 0.285714rem;
+      border-bottom-right-radius: .28571429rem;
+    }
+  }
+
+  .fixed-table-header .table {
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+    border-bottom: none;
+  }
+
+  .table {
+    background: transparent;
+
+    thead th[data-not-first-th] {
+      border-left: 1px solid $border-color!important;
+    }
+  }
+}

+ 3 - 0
src/themes/semantic/variables.scss

@@ -0,0 +1,3 @@
+$border-color: rgba(34,36,38,0.1);
+$hover-bg: rgba(0,0,0,.075);
+$dark-border-color: #32383e;