Skip to content
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

Jump to bottom

chore: update documentation to refere to DruxtWrapper as DruxtTheme #358

Open
wants to merge 1 commit into
base: develop
Choose a base branch
from
Open

chore: update documentation to refere to DruxtWrapper as DruxtTheme #358

Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
16 changes: 8 additions & 8 deletions docs/content/guide/theming.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,24 +6,24 @@ weight: -6
# Theming

Druxt components can be themed using two primary methods:
- [Druxt wrapper components](#druxtwrapper)
- [Druxt theme components](#druxttheme)
- [Default template injection](#default-template)

* * *

## DruxtWrapper
## DruxtTheme

Druxt modules use a DruxtWrapper component system to render a Vue component with the available data, slots, props and $attrs to be used for theming.
Druxt uses a component system to render a Vue component with the available data, slots, props and $attrs to be used for theming.

The specific component rendered is determined by list of available component options, made from properties and data provided by the module, and using the first registered option.

e.g., A DruxtEntity component might render a `DruxtEntityNodeArticleDefault.vue` wrapper component.
e.g., A DruxtEntity component might render a `DruxtEntityNodeArticleDefault.vue` theme component.

![Example DruxtWrapper in Vue dev tools](/images/theming-druxt-wrapper.png)
![Example DruxtTheme in Vue dev tools](/images/theming-druxt-wrapper.png)

Component options can be seen via the `component.options` data of the relevant Druxt module component.

If there are no matching component names, a default `DruxtWrapper` component will be used to render the default output of the module.
If there are no matching component names, a default `DruxtTheme` component will be used to render the default output of the module.
Copy link
Member

Choose a reason for hiding this comment

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

This is wrong, the default component is still a DruxtWrapper component.


- For more details, see the [DruxtModule API documentation](/api/packages/druxt/components/DruxtModule).

Expand Down Expand Up @@ -63,12 +63,12 @@ The available data provided to the template scope is determined by the relevant
</DruxtEntity>
```

By default, a component using the default template will not be wrapped by a DruxtWrapper component. It is possible to enable the DruxtWrapper system by setting the `wrapper` property to `true`:
Copy link
Member

Choose a reason for hiding this comment

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

This is also wrong, the DruxtWrapper is the placeholder component, this hasn't changed.

By default, a component using the default template will not be wrapped by a DruxtTheme component. It is possible to enable the wrapper system by setting the `wrapper` property to `true`:

```vue
<DruxtBlock v-bind="props" :wrapper="true">
<template #default="{ block }">
// This will be wrapped by a DruxtBlock Wrapper component.
</template>
</DruxtBlock>
````
````