diff options
| author | Julian <julian@vantage-design.com> | 2020-05-11 16:37:41 +0300 |
|---|---|---|
| committer | Julian <julian@vantage-design.com> | 2020-05-11 16:37:41 +0300 |
| commit | b4ca49226691f53b7c0090277c1f44fe7c1cc810 (patch) | |
| tree | bfe20da4d781265bc0bc4736a90170fbe7b2289c | |
| parent | 32817329e3806e5127105af428afec579a7299bc (diff) | |
Added table shortcode for styled tables
| -rw-r--r-- | exampleSite/content/shortcodes/table.md | 34 | ||||
| -rw-r--r-- | layouts/shortcodes/table.html | 4 |
2 files changed, 38 insertions, 0 deletions
diff --git a/exampleSite/content/shortcodes/table.md b/exampleSite/content/shortcodes/table.md new file mode 100644 index 0000000..232c324 --- /dev/null +++ b/exampleSite/content/shortcodes/table.md @@ -0,0 +1,34 @@ ++++ +title = "Table" +description = "" ++++ + +The table shortcode allows you to wrap your tables in a <code>table</code> class, providing styling to the table such as borders, stripes and hover effects. + +{{< table >}} +| Tables | are | cool | +| ------------- |:-------------:| -----:| +| col 3 is | right-aligned | $1600 | +| col 2 is | centered | $12 | +| zebra stripes | are neat | $1 | +{{< /table >}} + +## Usage +Place the following shortcode on the page +{{< code lang="html" >}} +{{</* table style="STYLE" */>}} +| Tables | are | cool | +| ------------- |:-------------:| -----:| +| col 3 is | right-aligned | $1600 | +| col 2 is | centered | $12 | +| zebra stripes | are neat | $1 | +{{</* /table */>}} +{{< /code >}} + +### Parameters +#### Style +The style parameter is directly applied to the table as a class in the format *"{STYLE}"*. Bootstrap comes with several styles that can be used with this: +- table-striped +- table-dark +- table-bordered +- table-hover diff --git a/layouts/shortcodes/table.html b/layouts/shortcodes/table.html new file mode 100644 index 0000000..5413020 --- /dev/null +++ b/layouts/shortcodes/table.html @@ -0,0 +1,4 @@ +{{ $style := .Get "style" }} +<div class="table {{ $style }}" role="alert"> + {{ print .Inner | markdownify }} +</div> |