feat: add optional hint/admonition icons (#383)
BREAKING CHANGE: The types of the `hint` short code have been renamed to `[note|tip|important|caution|warning]` the old types `[info|ok|warning|danger]` are still working, but should be considered as deprecated. BREAKING CHANGE: The `hint` short code is using named arguments now. You have to change, e.g. `{{< hint warning >}}` to `{{< hint type=warning >}}`.
This commit is contained in:
parent
1563cd228b
commit
f6966b8513
24 changed files with 310 additions and 35 deletions
|
@ -3,11 +3,20 @@ title: Hints
|
|||
---
|
||||
|
||||
Hint shortcode can be used as hint/alerts/notification block.
|
||||
There are four colors to choose: `info`, `ok`, `warning` and `danger`.
|
||||
|
||||
Attributes:
|
||||
|
||||
| Name | Usage | default |
|
||||
| ---------------- | --------------------------------------------------------------------------------- | --------------------- |
|
||||
| type | color types to choose from | note |
|
||||
| icon (optional) | custom icon to use | undefined (type name) |
|
||||
| title (optional) | custom icon to use, need to be an icon from an [SVG sprite](/features/icon-sets/) | undefined (type name) |
|
||||
|
||||
Syntax:
|
||||
|
||||
<!-- prettier-ignore-start -->
|
||||
```tpl
|
||||
{{</* hint [info|ok|warning|danger] */>}}
|
||||
{{</* hint type=[note|tip|important|caution|warning] (icon=gdoc_github) (title=GitHub) */>}}
|
||||
**Markdown content**\
|
||||
Dolor sit, sumo unique argument um no. Gracie nominal id xiv. Romanesque acclimates investiture.
|
||||
Ornateness bland it ex enc, est yeti am bongo detract re.
|
||||
|
@ -17,26 +26,44 @@ Dolor sit, sumo unique argument um no. Gracie nominal id xiv. Romanesque acclima
|
|||
|
||||
## Example
|
||||
|
||||
{{< hint info >}}
|
||||
{{< hint type=note >}}
|
||||
**Markdown content**\
|
||||
Dolor sit, sumo unique argument um no. Gracie nominal id xiv. Romanesque acclimates investiture.
|
||||
Ornateness bland it ex enc, est yeti am bongo detract re.
|
||||
{{< /hint >}}
|
||||
|
||||
{{< hint ok >}}
|
||||
{{< hint type=tip >}}
|
||||
**Markdown content**\
|
||||
Dolor sit, sumo unique argument um no. Gracie nominal id xiv. Romanesque acclimates investiture.
|
||||
Ornateness bland it ex enc, est yeti am bongo detract re.
|
||||
{{< /hint >}}
|
||||
|
||||
{{< hint warning >}}
|
||||
{{< hint type=important >}}
|
||||
**Markdown content**\
|
||||
Dolor sit, sumo unique argument um no. Gracie nominal id xiv. Romanesque acclimates investiture.
|
||||
Ornateness bland it ex enc, est yeti am bongo detract re.
|
||||
{{< /hint >}}
|
||||
|
||||
{{< hint danger >}}
|
||||
{{< hint type=caution >}}
|
||||
**Markdown content**\
|
||||
Dolor sit, sumo unique argument um no. Gracie nominal id xiv. Romanesque acclimates investiture.
|
||||
Ornateness bland it ex enc, est yeti am bongo detract re.
|
||||
{{< /hint >}}
|
||||
|
||||
{{< hint type=warning >}}
|
||||
**Markdown content**\
|
||||
Dolor sit, sumo unique argument um no. Gracie nominal id xiv. Romanesque acclimates investiture.
|
||||
Ornateness bland it ex enc, est yeti am bongo detract re.
|
||||
{{< /hint >}}
|
||||
|
||||
Example with a custom icon and title:
|
||||
|
||||
<!-- prettier-ignore-start -->
|
||||
<!-- spellchecker-disable -->
|
||||
{{< hint type=note icon=gdoc_github title=GitHub >}}
|
||||
**Markdown content**\
|
||||
Dolor sit, sumo unique argument um no. Gracie nominal id xiv. Romanesque acclimates investiture.
|
||||
Ornateness bland it ex enc, est yeti am bongo detract re.
|
||||
{{< /hint >}}
|
||||
<!-- spellchecker-enable -->
|
||||
<!-- prettier-ignore-end -->
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue