diff options
| author | Alfredo Sumaran <alfredo@gitlab.com> | 2017-03-27 22:36:58 +0000 |
|---|---|---|
| committer | Alfredo Sumaran <alfredo@gitlab.com> | 2017-03-27 22:36:58 +0000 |
| commit | bfa659bb5506c8d7ad65f312031d82519624db9c (patch) | |
| tree | 66c4d14a71419a55554d260fe3a4008c44f44a90 | |
| parent | a9b1a85bedb16298009a64aaf7bd321fb3da9be1 (diff) | |
| parent | 8913d27cf85f075881eede30198e8a4decb47c76 (diff) | |
| download | gitlab-ce-bfa659bb5506c8d7ad65f312031d82519624db9c.tar.gz | |
Merge branch '29973-kebab-case-documentation' into 'master'
Adds entry about kebab case props in documentation
Closes #29973
See merge request !10208
| -rw-r--r-- | doc/development/fe_guide/style_guide_js.md | 15 |
1 files changed, 11 insertions, 4 deletions
diff --git a/doc/development/fe_guide/style_guide_js.md b/doc/development/fe_guide/style_guide_js.md index 034cfe73d33..abd241c0bc8 100644 --- a/doc/development/fe_guide/style_guide_js.md +++ b/doc/development/fe_guide/style_guide_js.md @@ -200,7 +200,6 @@ See [our current .eslintrc][eslintrc] for specific rules and patterns. #### Naming - **Extensions**: Use `.vue` extension for Vue components. - **Reference Naming**: Use PascalCase for Vue components and camelCase for their instances: - ```javascript // bad import cardBoard from 'cardBoard'; @@ -218,15 +217,23 @@ See [our current .eslintrc][eslintrc] for specific rules and patterns. cardBoard: CardBoard }; ``` -- **Props Naming**: Avoid using DOM component prop names. +- **Props Naming:** +- Avoid using DOM component prop names. +- Use kebab-case instead of camelCase to provide props in templates. ```javascript // bad <component class="btn"> // good - <component cssClass="btn"> - ``` + <component css-class="btn"> + + // bad + <component myProp="prop" /> + + // good + <component my-prop="prop" /> +``` #### Alignment - Follow these alignment styles for the template method: |