在 AngularJS Material 中使用 ng-table

Question

我想在我的材料设计 angularjs 应用程序中使用此表： http://ng-table.com/#/

问题是它需要引导。拥有两个CSS框架可能不是一个好主意。

是否可以以某种方式提取 ng 表所需的 CSS 并将其隔离到 id？因此，它不会影响我的应用程序中的任何其他内容。

非常遗憾的是，没有人为材料制作一个像样的表格(md表格是不够的(。

Answer 1

当然可以。这里是库使用的CSS代码：

.ng-table th {
text-align: center;
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none
}
.ng-table th.sortable {
cursor: pointer
}
.ng-table th.sortable .sort-indicator {
padding-right: 18px;
position: relative
}
.ng-table th.sortable .sort-indicator:after,
.ng-table th.sortable .sort-indicator:before {
content: "";
border-width: 0 4px 4px;
border-style: solid;
border-color: #000 transparent;
visibility: visible;
right: 5px;
top: 50%;
position: absolute;
opacity: .3;
margin-top: -4px
}
.ng-table th.sortable .sort-indicator:before {
margin-top: 2px;
border-bottom: none;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-top: 4px solid #000
}
.ng-table th.sortable .sort-indicator:hover:after,
.ng-table th.sortable .sort-indicator:hover:before {
opacity: 1;
visibility: visible
}
.ng-table th.sortable.sort-asc,
.ng-table th.sortable.sort-desc {
background-color: rgba(141, 192, 219, .25);
text-shadow: 0 1px 1px hsla(0, 0%, 100%, .75)
}
.ng-table th.sortable.sort-asc .sort-indicator:after,
.ng-table th.sortable.sort-desc .sort-indicator:after {
margin-top: -2px
}
.ng-table th.sortable.sort-asc .sort-indicator:before,
.ng-table th.sortable.sort-desc .sort-indicator:before {
visibility: hidden
}
.ng-table th.sortable.sort-asc .sort-indicator:after,
.ng-table th.sortable.sort-asc .sort-indicator:hover:after,
.ng-table th.sortable.sort-desc .sort-indicator:after {
visibility: visible;
filter: alpha(opacity=60);
-khtml-opacity: .6;
-moz-opacity: .6;
opacity: .6
}
.ng-table th.sortable.sort-desc .sort-indicator:after {
border-bottom: none;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-top: 4px solid #000;
box-shadow: none
}
.ng-table th.filter .input-filter {
margin: 0;
display: block;
width: 100%;
min-height: 30px;
box-sizing: border-box
}
.ng-table .ng-table-group-header th {
text-align: left
}
.ng-table .ng-table-group-selector {
display: block
}
.ng-table .ng-table-group-close,
.ng-table .ng-table-group-toggle {
float: right
}
.ng-table .ng-table-group-toggle {
margin-right: 5px
}
@media only screen and (max-width: 800px) {
.ng-table-responsive {
border-bottom: 1px solid #999
}
.ng-table-responsive tr {
border-top: 1px solid #999;
border-left: 1px solid #999;
border-right: 1px solid #999
}
.ng-table-responsive td:before {
position: absolute;
padding: 8px;
left: 0;
top: 0;
width: 50%;
white-space: nowrap;
text-align: left;
font-weight: 700
}
.ng-table-responsive thead tr th {
text-align: left
}
.ng-table-responsive thead tr.ng-table-filters th {
padding: 0
}
.ng-table-responsive thead tr.ng-table-filters th form>div {
padding: 8px
}
.ng-table-responsive td {
border: none;
border-bottom: 1px solid #eee;
position: relative;
padding-left: 50%;
white-space: normal;
text-align: left
}
.ng-table-responsive td:before {
content: attr(data-title-text)
}
.ng-table-responsive,
.ng-table-responsive tbody,
.ng-table-responsive td,
.ng-table-responsive th,
.ng-table-responsive thead,
.ng-table-responsive tr {
display: block
}
}
.ng-table-pagination {
margin-top: 0
}
.filter:after,
.filter:before,
.ng-table-group-selector:after,
.ng-table-group-selector:before {
display: table;
content: " "
}
.filter:after,
.ng-table-group-selector:after {
clear: both
}
.filter>.filter-cell {
float: left;
box-sizing: border-box
}
.filter-horizontal>.filter-cell {
padding: 0 2px
}
.filter-horizontal>.filter-cell:first-child {
padding-left: 0
}
.filter-horizontal>.filter-cell.last,
.filter-horizontal>.filter-cell:last-child {
padding-right: 0
}
.s12 {
width: 100%
}
.s11 {
width: 91.66666666666666%
}
.s10 {
width: 83.33333333333334%
}
.s9 {
width: 75%
}
.s8 {
width: 66.66666666666666%
}
.s7 {
width: 58.333333333333336%
}
.s6 {
width: 50%
}
.s5 {
width: 41.66666666666667%
}
.s4 {
width: 33.33333333333333%
}
.s3 {
width: 25%
}
.s2 {
width: 16.666666666666664%
}
.s1 {
width: 8.333333333333332%
}
@media all and (max-width: 468px) {
.s1,
.s2,
.s3,
.s4,
.s5,
.s6,
.s7,
.s8,
.s9,
.s10,
.s11,
.s12 {
width: 100%
}
.filter>.filter-cell {
padding: 0
}
}

当您包含表的 HTML 时放置一个自定义类(例如：my-ng-table(，并在 CSS 代码中查找并替换所有出现的.ng-table与my-ng-table。

然后，您看到的所有代码块.s1.s2etc，将它们转换为my-ng-table .s1etc 等(以确保这只会影响表中的类。

您可能还需要以相同的方式包装类filter，但我认为如果您以这种方式保留它，它不会产生任何冲突。

它应该只适用于您的桌子，没有任何冲突。

我希望它有所帮助