0
我想在我的材料設計使用此表angularjs應用:http://ng-table.com/#/在AngularJS使用NG-表材料
的問題是它需要引導。有兩個CSS框架可能不是一個好主意。
是否有可能以某種方式提取ng-table所需的CSS並將其隔離爲一個ID?所以它不會影響我的應用程序中的其他任何內容。
很傷心沒有人爲材質製作出體面的表格(md-table不夠)。
我想在我的材料設計使用此表angularjs應用:http://ng-table.com/#/在AngularJS使用NG-表材料
的問題是它需要引導。有兩個CSS框架可能不是一個好主意。
是否有可能以某種方式提取ng-table所需的CSS並將其隔離爲一個ID?所以它不會影響我的應用程序中的其他任何內容。
很傷心沒有人爲材質製作出體面的表格(md-table不夠)。
當然可以。這裏庫所使用的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
.s2
等代碼的所有塊,改造他們在my-ng-table .s1
等等等等(爲了保證這會影響你的表內唯一的類。
您可能需要在包同樣的方法也類filter
,但我不認爲如果你離開它以這種方式會造成任何衝突。
它應該只是工作爲您的表不發生任何衝突。
我希望它能幫助
那只是ng-table的css。 Ng表也需要引導。 – Per
唯一需要的引導類似乎是:'btn-group','pagination'和'form-control'。它似乎不過是這些。只需從開發人員選項卡中複製這些元素的引導CSS源代碼,然後在CSS中導入此代碼即可 – quirimmo