mirror of
https://github.com/mdbootstrap/mdb-ui-kit.git
synced 2024-09-21 03:19:09 +03:00
list-groups complete
This commit is contained in:
Kevin Ross
parent
d6c33cae76
commit
0a47e82749
|
|
@ -1,12 +1,12 @@
|
|||
# Contributing to bootsrap-material-design
|
||||
# Contributing to bootstrap-material-design
|
||||
|
||||
Looking to contribute something to bootsrap-material-design? **Here's how you can help.**
|
||||
|
||||
Please take a moment to review this document in order to make the contribution
|
||||
process easy and effective for everyone involved.
|
||||
|
||||
Following these guidelines helps to communicate that you respect the time of
|
||||
the developers managing and developing this open source project. In return,
|
||||
Following these guidelines helps to communicate that you **respect the time of
|
||||
the developers** managing and developing this open source project. In return,
|
||||
they should reciprocate that respect in addressing your issue or assessing
|
||||
patches and features.
|
||||
|
||||
|
|
|
|||
|
|
@ -5,6 +5,9 @@ class Application {
|
|||
|
||||
constructor() {
|
||||
|
||||
}
|
||||
|
||||
initializeDemos() {
|
||||
// Tooltip and popover demos
|
||||
$('.tooltip-demo').tooltip({
|
||||
selector: '[data-toggle="tooltip"]',
|
||||
|
|
@ -26,8 +29,9 @@ class Application {
|
|||
})
|
||||
}
|
||||
|
||||
// Add dynamic display of font properties to the existing documentation
|
||||
displayTypographyProperties() {
|
||||
// headers
|
||||
// headings
|
||||
Style.displayFontSizeWeightColor($('.bd-example-type td > *:not(.type-info)'), ($element, $text) => {
|
||||
let $target = $element.closest('tr').find('td.type-info')
|
||||
$target.text('')
|
||||
|
|
@ -61,11 +65,11 @@ class Application {
|
|||
let $row = $(`<div class='row'></div>`)
|
||||
$parent.append($row)
|
||||
|
||||
let $col = $(`<div class='col-sm-9'></div>`)
|
||||
let $col = $(`<div class='col-sm-8'></div>`)
|
||||
$col.append($p)
|
||||
$row.append($col)
|
||||
|
||||
$col = $(`<div class='col-sm-3'></div>`)
|
||||
$col = $(`<div class='col-sm-4'></div>`)
|
||||
$col.append($text)
|
||||
$row.append($col)
|
||||
}, false, true)
|
||||
|
|
@ -107,25 +111,18 @@ class Application {
|
|||
.tooltip('_fixTitle')
|
||||
})
|
||||
}
|
||||
|
||||
manipulateSearchBox() {
|
||||
//let $search = $('#search-input')
|
||||
//$search.wrap(`<div class='mdb-form-group'></div>`)
|
||||
//$search.before(`<label class='mdb-label-placeholder'>${$search.prop('placeholder')}</label>`)
|
||||
//$search.removeAttr('placeholder')
|
||||
}
|
||||
}
|
||||
|
||||
$(() => {
|
||||
let app = new Application()
|
||||
app.displayTypographyProperties()
|
||||
app.initializeClipboard()
|
||||
app.manipulateSearchBox()
|
||||
|
||||
$('.btn-clipboard').mdbRipples()
|
||||
|
||||
// FIXME: file inputs seems to be in flux, delete the offending one for now.
|
||||
$('#exampleInputFile').closest('.form-group').detach()
|
||||
|
||||
$('body').bootstrapMaterialDesign()
|
||||
|
||||
app.initializeClipboard()
|
||||
app.initializeDemos()
|
||||
})
|
||||
|
|
|
|||
|
|
@ -1,3 +1,6 @@
|
|||
/**
|
||||
* Dynamically display style properties i.e. font
|
||||
*/
|
||||
const Style = (($) => {
|
||||
|
||||
/**
|
||||
|
|
@ -27,7 +30,7 @@ const Style = (($) => {
|
|||
}
|
||||
|
||||
// Function to display font properties dynamically discovered
|
||||
static displayFontSizeWeightColor($elements, writeFn, bg = false, wrapWithMark = false) {
|
||||
static displayFontSizeWeightColor($elements, writeFn, bg = false, wrapWithCode = false) {
|
||||
return $elements.each((index, element) => {
|
||||
let $element = $(element)
|
||||
|
||||
|
|
@ -39,8 +42,8 @@ const Style = (($) => {
|
|||
|
||||
let text = ''
|
||||
|
||||
if (wrapWithMark) {
|
||||
text += `<mark style='font-size: 10px; font-weight: 500; letter-spacing: normal'>`
|
||||
if (wrapWithCode) {
|
||||
text += `<code style='font-size: 10px; font-weight: 500; letter-spacing: normal'>`
|
||||
}
|
||||
|
||||
// text += `${$element.css('font-size')} ${$element.css('font-weight')} ${hexColor}`
|
||||
|
|
@ -50,21 +53,13 @@ const Style = (($) => {
|
|||
text += ` bg: ${rgbaBgColor} `
|
||||
}
|
||||
|
||||
if (wrapWithMark) {
|
||||
text += `</mark>`
|
||||
if (wrapWithCode) {
|
||||
text += `</code>`
|
||||
}
|
||||
|
||||
writeFn($element, $(text))
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
// ------------------------------------------------------------------------
|
||||
// private
|
||||
|
||||
|
||||
// ------------------------------------------------------------------------
|
||||
// static
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -144,7 +144,3 @@ Using `btn-fab-sm` on the button, or using `btn-group-sm` on the enclosing eleme
|
|||
<button type="button" class="btn btn-raised">Default button</button>
|
||||
<button type="button" class="btn btn-raised btn-sm">Small button</button>
|
||||
{% endexample %}
|
||||
|
||||
## x
|
||||
{% example html %}
|
||||
{% endexample %}
|
||||
|
|
|
|||
|
|
@ -20,10 +20,10 @@ The material classes introduced are:
|
|||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
{% markdown %}`.mdb-list-group-item`{% endmarkdown %}
|
||||
<code>.mdb-list-group-item</code>
|
||||
</td>
|
||||
<td class="text-nowrap">
|
||||
{% markdown %}`.list-group-item`{% endmarkdown %}
|
||||
<code>.list-group-item</code>
|
||||
</td>
|
||||
<td>
|
||||
{% markdown %}Flexbox layout, including conveniences for icon and label layout.{% endmarkdown %}
|
||||
|
|
@ -31,18 +31,18 @@ The material classes introduced are:
|
|||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
{% markdown %}`.mdb-list-group-col`{% endmarkdown %}
|
||||
<code>.mdb-list-group-col</code>
|
||||
</td>
|
||||
<td class="text-nowrap">
|
||||
{% markdown %}None{% endmarkdown %}
|
||||
</td>
|
||||
<td>
|
||||
{% markdown %}Flexbox column - additional class to use within a `.list-group-item` for layout, such as a multi-line content section.{% endmarkdown %}
|
||||
{% markdown %}Flexbox column - additional class to use within an `.mdb-list-group-item` for layout, such as a multi-line content section.{% endmarkdown %}
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
{% markdown %}`.right`{% endmarkdown %}
|
||||
<code>.right</code>
|
||||
</td>
|
||||
<td class="text-nowrap">
|
||||
{% markdown %}None{% endmarkdown %}
|
||||
|
|
@ -53,7 +53,7 @@ The material classes introduced are:
|
|||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
{% markdown %}`.mdb-list-group-sm`{% endmarkdown %}
|
||||
<code>.mdb-list-group-sm</code>
|
||||
</td>
|
||||
<td class="text-nowrap">
|
||||
{% markdown %}None{% endmarkdown %}
|
||||
|
|
@ -78,9 +78,10 @@ The material classes introduced are:
|
|||
|
||||
{% example html %}
|
||||
<ul class="list-group">
|
||||
<li class="mdb-list-group-item">Inbox</li>
|
||||
<li class="mdb-list-group-item">Text only</li>
|
||||
<a href="#" class="mdb-list-group-item">Link item</a>
|
||||
<button type="button" class="mdb-list-group-item">Button item</button>
|
||||
<a href="#" class="mdb-list-group-item active">Active link item</a>
|
||||
<a href="#" class="mdb-list-group-item disabled">Disabled item</a>
|
||||
</ul>
|
||||
{% endexample %}
|
||||
|
|
@ -89,9 +90,10 @@ The material classes introduced are:
|
|||
|
||||
{% example html %}
|
||||
<ul class="list-group mdb-list-group-sm">
|
||||
<li class="mdb-list-group-item">Inbox</li>
|
||||
<li class="mdb-list-group-item">Text</li>
|
||||
<a href="#" class="mdb-list-group-item">Link item</a>
|
||||
<button type="button" class="mdb-list-group-item">Button item</button>
|
||||
<a href="#" class="mdb-list-group-item active">Active link item</a>
|
||||
<a href="#" class="mdb-list-group-item disabled">Disabled item</a>
|
||||
</ul>
|
||||
{% endexample %}
|
||||
|
|
@ -100,45 +102,45 @@ The material classes introduced are:
|
|||
|
||||
{% example html %}
|
||||
<ul class="list-group">
|
||||
<li class="mdb-list-group-item">
|
||||
<a class="mdb-list-group-item">
|
||||
<i class="material-icons">inbox</i>
|
||||
Icon left
|
||||
</li>
|
||||
<li class="mdb-list-group-item">
|
||||
</a>
|
||||
<a class="mdb-list-group-item">
|
||||
<span class="label label-default label-pill">14</span>
|
||||
Label pill left
|
||||
</li>
|
||||
</a>
|
||||
|
||||
<li class="mdb-list-group-item">
|
||||
<a class="mdb-list-group-item">
|
||||
<i class="material-icons">inbox</i>
|
||||
Icons left and right
|
||||
<i class="material-icons">face</i>
|
||||
</li>
|
||||
<li class="mdb-list-group-item">
|
||||
</a>
|
||||
<a class="mdb-list-group-item">
|
||||
<span class="label label-default label-pill">14</span>
|
||||
Label pill left and right
|
||||
<span class="label label-default label-pill">14</span>
|
||||
</li>
|
||||
</a>
|
||||
|
||||
<li class="mdb-list-group-item">
|
||||
<a class="mdb-list-group-item">
|
||||
Icon <code>.right</code>
|
||||
<i class="material-icons right">face</i>
|
||||
</li>
|
||||
<li class="mdb-list-group-item">
|
||||
</a>
|
||||
<a class="mdb-list-group-item">
|
||||
Label pill <code>.right</code>
|
||||
<span class="label label-default label-pill right">14</span>
|
||||
</li>
|
||||
</a>
|
||||
|
||||
<li class="mdb-list-group-item">
|
||||
<a class="mdb-list-group-item">
|
||||
<span class="label label-default label-pill">14</span>
|
||||
Label pill and icon
|
||||
<i class="material-icons">inbox</i>
|
||||
</li>
|
||||
<li class="mdb-list-group-item">
|
||||
</a>
|
||||
<a class="mdb-list-group-item">
|
||||
<i class="material-icons">inbox</i>
|
||||
Icon and label pill
|
||||
<span class="label label-default label-pill">14</span>
|
||||
</li>
|
||||
</a>
|
||||
</ul>
|
||||
{% endexample %}
|
||||
|
||||
|
|
@ -150,24 +152,24 @@ The material classes introduced are:
|
|||
|
||||
{% example html %}
|
||||
<ul class="list-group">
|
||||
<li class="mdb-list-group-item">
|
||||
<a class="mdb-list-group-item">
|
||||
<div class="mdb-list-group-col">
|
||||
<p class="list-group-item-heading">List group item heading</p>
|
||||
<p class="list-group-item-text">Some text</p>
|
||||
</div>
|
||||
</li>
|
||||
<li class="mdb-list-group-item">
|
||||
</a>
|
||||
<a class="mdb-list-group-item">
|
||||
<div class="mdb-list-group-col">
|
||||
<p class="list-group-item-heading">List group item heading</p>
|
||||
<p class="list-group-item-text">Some text</p>
|
||||
</div>
|
||||
</li>
|
||||
<li class="mdb-list-group-item">
|
||||
</a>
|
||||
<a class="mdb-list-group-item">
|
||||
<div class="mdb-list-group-col">
|
||||
<p class="list-group-item-heading">List group item heading</p>
|
||||
<p class="list-group-item-text">Some text</p>
|
||||
</div>
|
||||
</li>
|
||||
</a>
|
||||
</ul>
|
||||
{% endexample %}
|
||||
|
||||
|
|
@ -175,24 +177,24 @@ The material classes introduced are:
|
|||
|
||||
{% example html %}
|
||||
<ul class="list-group mdb-list-group-sm">
|
||||
<li class="mdb-list-group-item">
|
||||
<a class="mdb-list-group-item">
|
||||
<div class="mdb-list-group-col">
|
||||
<p class="list-group-item-heading">List group item heading</p>
|
||||
<p class="list-group-item-text">Some text</p>
|
||||
</div>
|
||||
</li>
|
||||
<li class="mdb-list-group-item">
|
||||
</a>
|
||||
<a class="mdb-list-group-item">
|
||||
<div class="mdb-list-group-col">
|
||||
<p class="list-group-item-heading">List group item heading</p>
|
||||
<p class="list-group-item-text">Some text</p>
|
||||
</div>
|
||||
</li>
|
||||
<li class="mdb-list-group-item">
|
||||
</a>
|
||||
<a class="mdb-list-group-item">
|
||||
<div class="mdb-list-group-col">
|
||||
<p class="list-group-item-heading">List group item heading</p>
|
||||
<p class="list-group-item-text">Some text</p>
|
||||
</div>
|
||||
</li>
|
||||
</a>
|
||||
</ul>
|
||||
{% endexample %}
|
||||
|
||||
|
|
@ -200,46 +202,46 @@ The material classes introduced are:
|
|||
|
||||
{% example html %}
|
||||
<ul class="list-group">
|
||||
<li class="mdb-list-group-item">
|
||||
<a class="mdb-list-group-item">
|
||||
<i class="material-icons">inbox</i>
|
||||
<div class="mdb-list-group-col">
|
||||
<p class="list-group-item-heading">List group item heading</p>
|
||||
<p class="list-group-item-text">Icon left</p>
|
||||
</div>
|
||||
</li>
|
||||
</a>
|
||||
|
||||
<li class="mdb-list-group-item">
|
||||
<a class="mdb-list-group-item">
|
||||
<span class="label label-default label-pill">14</span>
|
||||
<div class="mdb-list-group-col">
|
||||
<p class="list-group-item-heading">List group item heading</p>
|
||||
<p class="list-group-item-text">Icon left</p>
|
||||
</div>
|
||||
</li>
|
||||
</a>
|
||||
|
||||
<li class="mdb-list-group-item">
|
||||
<a class="mdb-list-group-item">
|
||||
<i class="material-icons">inbox</i>
|
||||
<div class="mdb-list-group-col">
|
||||
<p class="list-group-item-heading">List group item heading</p>
|
||||
<p class="list-group-item-text">Icons left and right</p>
|
||||
</div>
|
||||
<i class="material-icons">face</i>
|
||||
</li>
|
||||
</a>
|
||||
|
||||
<li class="mdb-list-group-item">
|
||||
<a class="mdb-list-group-item">
|
||||
<div class="mdb-list-group-col">
|
||||
<p class="list-group-item-heading">List group item heading</p>
|
||||
<p class="list-group-item-text">Icon right</p>
|
||||
</div>
|
||||
<i class="material-icons right">face</i>
|
||||
</li>
|
||||
</a>
|
||||
|
||||
<li class="mdb-list-group-item">
|
||||
<a class="mdb-list-group-item">
|
||||
<div class="mdb-list-group-col">
|
||||
<p class="list-group-item-heading">List group item heading</p>
|
||||
<p class="list-group-item-text">Label pill to the right</p>
|
||||
</div>
|
||||
<span class="label label-default label-pill right">14</span>
|
||||
</li>
|
||||
</a>
|
||||
</ul>
|
||||
{% endexample %}
|
||||
|
||||
|
|
@ -249,15 +251,15 @@ The material classes introduced are:
|
|||
|
||||
{% example html %}
|
||||
<ul class="list-group">
|
||||
<li class="mdb-list-group-item">
|
||||
<a class="mdb-list-group-item">
|
||||
<div class="mdb-list-group-col">
|
||||
<p class="list-group-item-heading">List group item heading</p>
|
||||
<p class="list-group-item-heading">Linked list group item heading</p>
|
||||
<p class="list-group-item-text">This disallows more than two lines. Hopefully an ellipsis ends this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ut malesuada elit. Proin tristique, lorem eu vehicula congue, lectus ipsum porta quam, eget rutrum sapien turpis et libero.</p>
|
||||
</div>
|
||||
</li>
|
||||
</a>
|
||||
<li class="mdb-list-group-item">
|
||||
<div class="mdb-list-group-col">
|
||||
<p class="list-group-item-heading">List group item heading</p>
|
||||
<p class="list-group-item-heading">Text list group item heading</p>
|
||||
<p class="list-group-item-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ut malesuada elit. Proin tristique, lorem eu vehicula congue, lectus ipsum porta quam, eget rutrum sapien turpis et libero.</p>
|
||||
</div>
|
||||
</li>
|
||||
|
|
|
|||
|
|
@ -33,7 +33,7 @@
|
|||
.mdb-list-group-item {
|
||||
@extend .list-group-item;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
//flex-direction: row;
|
||||
flex-flow: row wrap;
|
||||
//flex-shrink: 0;
|
||||
//flex-shrink: 1;
|
||||
|
|
@ -45,7 +45,8 @@
|
|||
//flex-flow: row wrap;
|
||||
min-width: 0;
|
||||
max-height: 2.188rem; // 88dp tile total height
|
||||
//flex: 0 1 auto; // important http://stackoverflow.com/questions/12022288/how-to-keep-a-flex-item-from-overflowing-due-to-its-text
|
||||
// FIXME: text overflow with ellipsis is not working
|
||||
//flex: 0 1 auto; // http://stackoverflow.com/questions/12022288/how-to-keep-a-flex-item-from-overflowing-due-to-its-text
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user