kotovalexarian-likes-gitlab
/
gitlab-org--gitlab-foss
1
0
Fork 0
Code Releases Activity

Adds entry about kebab case props in documentation

This commit is contained in:
Filipa Lacerda 2017-03-27 22:36:58 +00:00 committed by Alfredo Sumaran
parent a9b1a85bed
commit 8913d27cf8
1 changed files with 11 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
doc/development/fe_guide/style_guide_js.md
View File

@ -200,7 +200,6 @@ See [our current .eslintrc][eslintrc] for specific rules and patterns.
#### Naming #### Naming
- **Extensions**: Use `.vue` extension for Vue components. - **Extensions**: Use `.vue` extension for Vue components.
- **Reference Naming**: Use PascalCase for Vue components and camelCase for their instances: - **Reference Naming**: Use PascalCase for Vue components and camelCase for their instances:
```javascript ```javascript
// bad // bad
import cardBoard from 'cardBoard'; import cardBoard from 'cardBoard';
@ -218,15 +217,23 @@ See [our current .eslintrc][eslintrc] for specific rules and patterns.
cardBoard: CardBoard 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 ```javascript
// bad // bad
<component class="btn"> <component class="btn">
// good // good
<component cssClass="btn"> <component css-class="btn">
```
// bad
<component myProp="prop" />
// good
<component my-prop="prop" />
```
#### Alignment #### Alignment
- Follow these alignment styles for the template method: - Follow these alignment styles for the template method: