Hopiu/vue-material
1
0
Fork 0
mirror of https://github.com/Hopiu/vue-material.git synced 2026-05-16 19:21:07 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

aligning icons in table and content in general

Browse source
This commit is contained in:
Pablo Henrique Penha Silva 2017-05-29 10:46:35 -03:00
parent d49b4530d2
commit 2dc303ae56
3 changed files with 28 additions and 27 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

36
docs/src/pages/components/Table.vue
View file

@ -17,13 +17,13 @@
</md-table-header>
<md-table-body>
<md-table-row :mdItem="{}">
<md-table-row>
<md-table-cell>md-sort</md-table-cell>
<md-table-cell><code>String</code></md-table-cell>
<md-table-cell>Property name to match for sorting.</md-table-cell>
</md-table-row>
<md-table-row :mdItem="{}">
<md-table-row>
<md-table-cell>md-sort-type</md-table-cell>
<md-table-cell><code>String</code></md-table-cell>
<md-table-cell>The order to apply on the sort: <br>Values: <code>asc</code> | <code>desc</code></md-table-cell>
@ -41,13 +41,13 @@
</md-table-header>
<md-table-body>
<md-table-row :mdItem="{}">
<md-table-row>
<md-table-cell>sort</md-table-cell>
<md-table-cell>Receive the sort object. Example: <br><code>{ name: 'calories', type: 'asc' }</code></md-table-cell>
<md-table-cell>Triggered when a column is sorted.</md-table-cell>
</md-table-row>
<md-table-row :mdItem="{}">
<md-table-row>
<md-table-cell>select</md-table-cell>
<md-table-cell>Receive the all the selected rows as a <code>Object</code></md-table-cell>
<md-table-cell>Triggered every time a row is selected.</md-table-cell>
@ -83,19 +83,19 @@
</md-table-header>
<md-table-body>
<md-table-row :mdItem="{}">
<md-table-row>
<md-table-cell>md-selection</md-table-cell>
<md-table-cell><code>Boolean</code></md-table-cell>
<md-table-cell>Enable selection inside a particular row. Only works inside <code>md-table-body</code>. Default <code>false</code></md-table-cell>
</md-table-row>
<md-table-row :mdItem="{}">
<md-table-row>
<md-table-cell>md-auto-select</md-table-cell>
<md-table-cell><code>Boolean</code></md-table-cell>
<md-table-cell>Click in any area of the row to select it. Only works inside <code>md-table-body</code>. Default <code>false</code></md-table-cell>
</md-table-row>
<md-table-row :mdItem="{}">
<md-table-row>
<md-table-cell>md-item</md-table-cell>
<md-table-cell><code>Object</code></md-table-cell>
<md-table-cell>The single item to be returned when the row is selected. Only works inside <code>md-table-body</code>.</md-table-cell>
@ -116,19 +116,19 @@
</md-table-header>
<md-table-body>
<md-table-row :mdItem="{}">
<md-table-row>
<md-table-cell>md-numeric</md-table-cell>
<md-table-cell><code>Boolean</code></md-table-cell>
<md-table-cell>Align the header content to the right. Default <code>false</code></md-table-cell>
</md-table-row>
<md-table-row :mdItem="{}">
<md-table-row>
<md-table-cell>md-sort-by</md-table-cell>
<md-table-cell><code>String</code></md-table-cell>
<md-table-cell>The property name to be returned after applying the sort order on that particular column.</md-table-cell>
</md-table-row>
<md-table-row :mdItem="{}">
<md-table-row>
<md-table-cell>md-tooltip</md-table-cell>
<md-table-cell><code>String</code></md-table-cell>
<md-table-cell>Text displayed inside a tooltip to provide definitions to column headers.</md-table-cell>
@ -149,7 +149,7 @@
</md-table-header>
<md-table-body>
<md-table-row :mdItem="{}">
<md-table-row>
<md-table-cell>md-numeric</md-table-cell>
<md-table-cell><code>Boolean</code></md-table-cell>
<md-table-cell>Align the cell content to the right. Default <code>false</code></md-table-cell>
@ -170,37 +170,37 @@
</md-table-header>
<md-table-body>
<md-table-row :mdItem="{}">
<md-table-row>
<md-table-cell>md-size</md-table-cell>
<md-table-cell><code>Number</code></md-table-cell>
<md-table-cell>Set the amount of rows displayed. Required. Default <code>10</code></md-table-cell>
</md-table-row>
<md-table-row :mdItem="{}">
<md-table-row>
<md-table-cell>md-page-options</md-table-cell>
<md-table-cell><code>Array | Boolean</code></md-table-cell>
<md-table-cell>Set the values inside the page amout selector. Default <code>[10, 25, 50, 100]</code> <br>When false this flag will hide the page selector.</md-table-cell>
</md-table-row>
<md-table-row :mdItem="{}">
<md-table-row>
<md-table-cell>md-page</md-table-cell>
<md-table-cell><code>Number</code></md-table-cell>
<md-table-cell>Current page of the table pagination. Required. Default <code>1</code></md-table-cell>
</md-table-row>
<md-table-row :mdItem="{}">
<md-table-row>
<md-table-cell>md-total</md-table-cell>
<md-table-cell><code>Number</code></md-table-cell>
<md-table-cell>Total of items in the collection. This will be used to calculate the amount of pages left. Default <code>Many</code></md-table-cell>
</md-table-row>
<md-table-row :mdItem="{}">
<md-table-row>
<md-table-cell>md-label</md-table-cell>
<md-table-cell><code>String</code></md-table-cell>
<md-table-cell>Text to be shown on the left of the page selector. Default <code>Rows per page</code></md-table-cell>
</md-table-row>
<md-table-row :mdItem="{}">
<md-table-row>
<md-table-cell>md-separator</md-table-cell>
<md-table-cell><code>String</code></md-table-cell>
<md-table-cell>Text to be shown on the left of the page selector. Default <code>of</code></md-table-cell>
@ -220,7 +220,7 @@
</md-table-header>
<md-table-body>
<md-table-row :mdItem="{}">
<md-table-row>
<md-table-cell>md-selected-label</md-table-cell>
<md-table-cell><code>String</code></md-table-cell>
<md-table-cell>The text to be shown after the amount of items selected.</md-table-cell>

15
src/components/mdTable/mdTable.scss
View file

@ -160,8 +160,9 @@
justify-content: center;
align-items: center;
.md-icon {
margin: 0;
.md-icon,
.md-button .md-icon {
margin: auto;
}
}
}
@ -404,8 +405,8 @@
}
}
.md-table .md-table-cell.md-has-action .md-table-cell-container {
display: flex;
justify-content: center;
align-items: center;
}
// .md-table .md-table-cell.md-has-action .md-table-cell-container {
// display: flex;
// justify-content: center;
// align-items: center;
// }

4
src/components/mdTable/mdTableRow.vue
View file

@ -109,8 +109,8 @@
if (this.$el.parentNode.tagName.toLowerCase() === 'thead') {
this.headRow = true;
} else {
if (!this.mdItem) {
throw new Error('You should set the md-item property.');
if (!this.mdItem && this.mdSelection) {
throw new Error('You should set the md-item property when using mdSelection. Example: <md-table-row md-selection :md-item="ITEM" ...>');
}
if (this.mdSelection) {