Skip to content

Update documentation on icon slot for boxes #1123

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
marvinchin merged 3 commits into from
Mar 21, 2020
Merged

Update documentation on icon slot for boxes #1123

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
ad380b1
Update documentation on icon slot for boxes
le0tan Mar 14, 2020
13eefec
Update the examples for using icon slot for boxes.
le0tan Mar 19, 2020
574ff07
Resolve comments.
le0tan Mar 21, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
49 changes: 49 additions & 0 deletions docs/userGuide/components/advanced.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -71,6 +71,55 @@ Using the normal syntax, you are only able to use markdown formatting on heading
</tip-box>
<br>

**Box Slot Options:**

Slot name | Default class |
--- | --- |
icon | depends on box's `type` attribute |

{{ icon_example }} Override the default icon for a certain type of box.

```html
<box type="info">
<span slot="icon" class="text-danger"><md>:fas-home:</md></span>
info
</box>
```

<box type="info">
<span slot="icon" class="text-danger"><md>:fas-home:</md></span>
info
</box>

{{ icon_example }} Use pictures (or even gifs) as the icon for a box.

```html
<box type="info" seamless>
<img slot="icon" src="https://icons8.com/vue-static/landings/animated-icons/icons/cloud/cloud.gif"></img>
some very useful info
</box>
```

<box type="info" seamless>
<img slot="icon" width="75%" src="https://icons8.com/vue-static/landings/animated-icons/icons/cloud/cloud.gif"></img>
some very useful info
</box>

{{ icon_example }} Use [thumbnail]({{ baseUrl }}/userGuide/usingComponents.html#thumbnails) as the icon.


```html
<box type="info" light>
<thumbnail circle slot="icon" text=":book:" background="#dff5ff" size="50"/>
use thumbnail as the icon
</box>
```

<box type="info" light>
<thumbnail circle slot="icon" text=":book:" background="#dff5ff" size="50"/>
use thumbnail as the icon
</box>

Copy link
Contributor

@damithc damithc Mar 20, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can post a screenshot? I can't see the final look from the PR preview.

Copy link
Contributor Author

@le0tan le0tan Mar 20, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

63a0b9f4-8658-4f6d-9077-d8102c6152b2

Copy link
Contributor

@damithc damithc Mar 20, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

For the animated gif, can find one without background (or make the box background white) so that it blends in nicely? We should try to make the examples as good looking as possible.

Can also add an example using a thumbnail as an icon (i.e., using MarkBind thumbnails feature), possibly a thumbnail of a letter or a number?

**Panel Slot Options:**
Slot name | Default class | Notes
--- | --- | ---
Expand Down
2 changes: 1 addition & 1 deletion src/lib/markbind/src/parsers/componentParser.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -356,7 +356,7 @@ function _parseBoxAttributes(node) {
_warnConflictingAttributes(node, 'no-icon', ['icon']);
_warnDeprecatedAttributes(node, { heading: 'header' });

_parseAttributeWithoutOverride(node, 'icon', true, '_icon');
_parseAttributeWithoutOverride(node, 'icon', true, 'icon');
_parseAttributeWithoutOverride(node, 'header', false, '_header');

_parseAttributeWithoutOverride(node, 'heading', false, '_header');
Expand Down
6 changes: 3 additions & 3 deletions test/unit/utils/componentParserData.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -241,13 +241,13 @@ module.exports.PARSE_TAB_GROUP_HEADER_EXPECTED = `

module.exports.PARSE_BOX_ICON = `
<box icon=":rocket:">
Icon attribute should be inserted as internal _icon slot and deleted.
Icon attribute should be inserted as internal icon slot and deleted.
</box>
`;

module.exports.PARSE_BOX_ICON_EXPECTED = `
<box><template slot="_icon">🚀</template>
Icon attribute should be inserted as internal _icon slot and deleted.
<box><template slot="icon">🚀</template>
Icon attribute should be inserted as internal icon slot and deleted.
</box>
`;

Expand Down