Add example of Table with MenuButtons. (#10554)
This commit is contained in:
parent
1cf8277e1b
commit
76d1a463b8
|
@ -5,3 +5,7 @@
|
|||
margin-left: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
.kuiMenuButtonGroup--alignRight {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
|
|
@ -8,10 +8,6 @@ $tableCellPadding: 7px 8px 8px;
|
|||
font-weight: 400;
|
||||
text-align: left;
|
||||
max-width: 20px; /* 1 */
|
||||
|
||||
&:last-child {
|
||||
padding-right: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
10
ui_framework/dist/ui_framework.css
vendored
10
ui_framework/dist/ui_framework.css
vendored
|
@ -1121,6 +1121,12 @@ body {
|
|||
.kuiMenuButtonGroup .kuiMenuButton + .kuiMenuButton {
|
||||
margin-left: 4px; }
|
||||
|
||||
.kuiMenuButtonGroup--alignRight {
|
||||
-webkit-box-pack: end;
|
||||
-webkit-justify-content: flex-end;
|
||||
-ms-flex-pack: end;
|
||||
justify-content: flex-end; }
|
||||
|
||||
.kuiMicroButton {
|
||||
display: inline-block;
|
||||
/* 1 */
|
||||
|
@ -1395,8 +1401,6 @@ body {
|
|||
padding: 7px 8px 8px;
|
||||
line-height: 1.5;
|
||||
color: #a7a7a7; }
|
||||
.kuiTableHeaderCell:last-child {
|
||||
padding-right: 16px; }
|
||||
|
||||
/**
|
||||
* 1. Prevent rapid clicking from selecting text.
|
||||
|
@ -1431,8 +1435,6 @@ body {
|
|||
/* 1 */
|
||||
color: #191E23;
|
||||
border-top: 1px solid #E4E4E4; }
|
||||
.kuiTableRowCell:last-child {
|
||||
padding-right: 16px; }
|
||||
|
||||
/**
|
||||
* 1. Vertically align all children.
|
||||
|
|
|
@ -1,10 +1,10 @@
|
|||
<table class="kuiTable kuiTable--fluid">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="kuiTableHeaderCell kuiTableHeaderCell--sortable" data-demo-sortable-column>
|
||||
<th class="kuiTableHeaderCell">
|
||||
System
|
||||
</th>
|
||||
<th class="kuiTableHeaderCell kuiTableHeaderCell--sortable" data-demo-sortable-column>
|
||||
<th class="kuiTableHeaderCell">
|
||||
Action
|
||||
</th>
|
||||
</tr>
|
||||
|
|
|
@ -15,6 +15,7 @@ import {
|
|||
const tableHtml = require('./table.html');
|
||||
const tableJs = require('raw!./table.js');
|
||||
const fluidTableHtml = require('./fluid_table.html');
|
||||
const tableWithMenuButtonsHtml = require('./table_with_menu_buttons.html');
|
||||
const controlledTableHtml = require('./controlled_table.html');
|
||||
const controlledTableWithLoadingItemsHtml = require('./controlled_table_loading_items.html');
|
||||
const controlledTableWithNoItemsHtml = require('./controlled_table_no_items.html');
|
||||
|
@ -54,6 +55,18 @@ export default props => (
|
|||
/>
|
||||
</GuideSection>
|
||||
|
||||
<GuideSection
|
||||
title="Table with MenuButtons"
|
||||
source={[{
|
||||
type: GuideSectionTypes.HTML,
|
||||
code: tableWithMenuButtonsHtml,
|
||||
}]}
|
||||
>
|
||||
<GuideDemo
|
||||
html={tableWithMenuButtonsHtml}
|
||||
/>
|
||||
</GuideSection>
|
||||
|
||||
<GuideSection
|
||||
title="ControlledTable"
|
||||
source={[{
|
||||
|
|
|
@ -0,0 +1,99 @@
|
|||
<table class="kuiTable">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="kuiTableHeaderCell">
|
||||
Reminder
|
||||
</th>
|
||||
<th class="kuiTableHeaderCell">
|
||||
A
|
||||
</th>
|
||||
<th class="kuiTableHeaderCell">
|
||||
B
|
||||
</th>
|
||||
<th class="kuiTableHeaderCell">
|
||||
C
|
||||
</th>
|
||||
<th class="kuiTableHeaderCell kuiTableHeaderCell--alignRight">
|
||||
Actions
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody>
|
||||
<tr class="kuiTableRow">
|
||||
<td class="kuiTableRowCell">
|
||||
<div class="kuiTableRowCell__liner">
|
||||
Core temperature critical
|
||||
</div>
|
||||
</td>
|
||||
<td class="kuiTableRowCell">
|
||||
<div class="kuiTableRowCell__liner">
|
||||
A
|
||||
</div>
|
||||
</td>
|
||||
<td class="kuiTableRowCell">
|
||||
<div class="kuiTableRowCell__liner">
|
||||
B
|
||||
</div>
|
||||
</td>
|
||||
<td class="kuiTableRowCell">
|
||||
<div class="kuiTableRowCell__liner">
|
||||
C
|
||||
</div>
|
||||
</td>
|
||||
<td class="kuiTableRowCell kuiTableRowCell--alignRight">
|
||||
<div class="kuiTableRowCell__liner">
|
||||
<div class="kuiMenuButtonGroup kuiMenuButtonGroup--alignRight">
|
||||
<button class="kuiMenuButton kuiMenuButton--basic">
|
||||
Acknowledge
|
||||
</button>
|
||||
<button class="kuiMenuButton kuiMenuButton--basic">
|
||||
Silence
|
||||
</button>
|
||||
<button class="kuiMenuButton kuiMenuButton--danger">
|
||||
Delete
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr class="kuiTableRow">
|
||||
<td class="kuiTableRowCell">
|
||||
<div class="kuiTableRowCell__liner">
|
||||
Time for your snack
|
||||
</div>
|
||||
</td>
|
||||
<td class="kuiTableRowCell">
|
||||
<div class="kuiTableRowCell__liner">
|
||||
A
|
||||
</div>
|
||||
</td>
|
||||
<td class="kuiTableRowCell">
|
||||
<div class="kuiTableRowCell__liner">
|
||||
B
|
||||
</div>
|
||||
</td>
|
||||
<td class="kuiTableRowCell">
|
||||
<div class="kuiTableRowCell__liner">
|
||||
C
|
||||
</div>
|
||||
</td>
|
||||
<td class="kuiTableRowCell kuiTableRowCell--alignRight">
|
||||
<div class="kuiTableRowCell__liner">
|
||||
<div class="kuiMenuButtonGroup kuiMenuButtonGroup--alignRight">
|
||||
<button class="kuiMenuButton kuiMenuButton--basic">
|
||||
Acknowledge
|
||||
</button>
|
||||
<button class="kuiMenuButton kuiMenuButton--basic">
|
||||
Silence
|
||||
</button>
|
||||
<button class="kuiMenuButton kuiMenuButton--danger">
|
||||
Delete
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
Loading…
Reference in a new issue