-
Notifications
You must be signed in to change notification settings - Fork 224
Editing Living Documentation
Viljami Salminen edited this page Feb 23, 2018
·
4 revisions
System’s components are documented based on the comments in your source code and readme files that live inside /docs/
. Each Element
, Pattern
and Template
can also include a custom block called <docs/>
, which is used to provide an example of the markup. Like this:
<docs>
```jsx
<wrapper>I’m an example that will be shown in docs.</wrapper>
```
</docs>
In addition, you can include JSDoc style comment blocks inside your <script/>
which will be shown in the documentation. An example:
<script>
/**
* A wrapper element is used to wrap elements and patterns.
*/
export default {
name: "Wrapper",
version: "prototype",
props: {
/**
* The html element name used for the wrapper.
*/
type: {
type: String,
default: "div"
}
}
}
</script>
Finally, the wrapper Element
with all the documentation added:
<template>
<component :is="type" class="wrapper">
<slot/>
</component>
</template>
<script>
/**
* A wrapper element is used to wrap elements and patterns.
*/
export default {
name: "Wrapper",
version: "prototype",
props: {
/**
* The html element name used for the wrapper.
*/
type: {
type: String,
default: "div"
}
}
}
</script>
<style lang="scss" scoped>
.wrapper {
@include reset;
width: 100%;
padding: $space-large;
}
</style>
<docs>
```jsx
<wrapper>I’m an example that will be shown in docs.</wrapper>
```
</docs>
To learn more about the documentation format and what you can do with it, Please refer to Vue Styleguidist’s official docs on GitHub.
- Getting Started: How to install and run Vue Design System.
- Terminology: Introduction to the system concepts and its hierarchy.
- Naming of Things: Naming is hard, so it’s good to have clear guidelines.
- Directory Structure: What goes where and why.
-
Working with the System: Concrete examples on how to work with
Tokens
,Elements
,Patterns
andTemplates
. - Editing Living Documentation: How to customize the living system documentation.
- Spacing: A framework for creating a predictable and harmonious spacing.
- Component Status: Clear labels that reflect the state of completion.
- Component QA: How to review new components and keep the quality high.
- Contributing: A set of guidelines for contributing to the system.
- Code of Conduct: By participating you agree to abide by its terms.
- Frequently Asked Questions: How to use icons, how to use font-face, etc.
- Changelog: See releases pafge for the full changelog.