Skip to content

Commit

Permalink
docs(Ripples): examples refactor (#6255)
Browse files Browse the repository at this point in the history
* docs(Ripples): examples refactor

* typo
  • Loading branch information
jacekkarczmarczyk committed Jan 25, 2019
1 parent 7429324 commit a0d8051
Show file tree
Hide file tree
Showing 17 changed files with 64 additions and 341 deletions.
8 changes: 2 additions & 6 deletions packages/docs/src/data/pages/directives/Ripples.json
Expand Up @@ -27,12 +27,8 @@
"type": "examples",
"value": [
"customColor",
"tabs",
"navigationDrawers",
"toolbars",
"expansionPanels",
"customRipple",
"htmlElement"
"center",
"rippleInComponents"
]
}
]
Expand Down
8 changes: 8 additions & 0 deletions packages/docs/src/examples/ripples/center.vue
@@ -0,0 +1,8 @@
<template>
<div
v-ripple="{ center: true }"
class="text-xs-center elevation-2 pa-5 headline"
>
HTML element with centered ripple
</div>
</template>
12 changes: 9 additions & 3 deletions packages/docs/src/examples/ripples/customColor.vue
@@ -1,5 +1,11 @@
<template>
<div class="text-xs-center">
<v-btn :ripple="{ class: 'error--text' }" dark>Colored Ripple</v-btn>
</div>
<v-list>
<v-list-tile
v-ripple="{ class: `${color}--text` }"
v-for="color in ['primary', 'secondary', 'info', 'success', 'warning', 'error']"
:key="color"
>
<v-list-tile-title>Item with "{{ color }}" class</v-list-tile-title>
</v-list-tile>
</v-list>
</template>
51 changes: 0 additions & 51 deletions packages/docs/src/examples/ripples/customRipple.vue

This file was deleted.

12 changes: 0 additions & 12 deletions packages/docs/src/examples/ripples/expansionPanels.vue

This file was deleted.

8 changes: 0 additions & 8 deletions packages/docs/src/examples/ripples/htmlElement.vue

This file was deleted.

18 changes: 0 additions & 18 deletions packages/docs/src/examples/ripples/navigationDrawers.vue

This file was deleted.

32 changes: 32 additions & 0 deletions packages/docs/src/examples/ripples/rippleInComponents.vue
@@ -0,0 +1,32 @@
<template>
<v-layout
row
justify-space-around
py-5
wrap
>
<v-btn
color="primary"
>
With ripple (default)
</v-btn>
<v-btn
:ripple="false"
color="primary"
>
Without ripple
</v-btn>
<v-btn
:ripple="{ center: true }"
color="primary"
>
With centered ripple
</v-btn>
<v-btn
:ripple="{ class: 'red--text' }"
flat
>
With red ripple
</v-btn>
</v-layout>
</template>
15 changes: 0 additions & 15 deletions packages/docs/src/examples/ripples/tabs.vue

This file was deleted.

7 changes: 0 additions & 7 deletions packages/docs/src/examples/ripples/toolbars.vue

This file was deleted.

8 changes: 5 additions & 3 deletions packages/docs/src/examples/ripples/usage.vue
@@ -1,6 +1,8 @@
<template>
<div class="text-xs-center">
<v-btn color="primary" dark ripple>Default Ripple</v-btn>
<v-btn :ripple="false" color="primary" dark>Ripple Disabled</v-btn>
<div
v-ripple
class="text-xs-center elevation-2 pa-5 headline"
>
HTML element with v-ripple
</div>
</template>
34 changes: 7 additions & 27 deletions packages/docs/src/lang/en/directives/Ripples.json
Expand Up @@ -3,42 +3,22 @@
"headerText": "The `v-ripple` directive is used to show action from a user. It can be applied to any block level element. Numerous components come with the ripple directive built in, such as the `v-btn`, `v-tabs-item` and many more.",
"examples": {
"usage": {
"desc": "Buttons by default have ripples enabled. This can be removed with the prop `:ripple=\"false\"`",
"desc": "Basic ripple functionality can be enabled just by using `v-ripple` directive on a component or an HTML element",
"uninverted": true
},
"customColor": {
"header": "### Custom color",
"desc": "Using a helper class, you can change the color of the ripple.",
"uninverted": true
},
"tabs": {
"header": "### Tabs",
"desc": "Tabs by default have ripples disabled. This can be enabled with the `ripple` prop.",
"center": {
"header": "### Centered ripple",
"desc": "When a `center` option is used ripple will always originate from the center of the target.",
"uninverted": true
},
"navigationDrawers": {
"header": "### Navigation drawers",
"desc": "List items by default have ripples disabled. This can be enabled with the `ripple` prop",
"uninverted": true
},
"toolbars": {
"header": "### Toolbars",
"desc": "Toolbar items by default have ripples disabled. This can be enabled with the `ripple` prop.",
"uninverted": true
},
"expansionPanels": {
"header": "### Expansion panels",
"desc": "Expansion panels by default have ripples disabled. This can be enabled with the `ripple` prop.",
"uninverted": true
},
"customRipple": {
"header": "### Components",
"desc": "Several other components have built-in support for ripples. Enable it with the `ripple` prop.",
"uninverted": true
},
"htmlElement": {
"header": "### Standard HTML element",
"desc": "Add the ripple effect to a standard HTML element. This can be enabled with the `v-ripple` directive.",
"rippleInComponents": {
"header": "### Ripple in components",
"desc": "Some components provide the `ripple` prop that allows you to controll the ripple effect. You can turn it off or customize the behaviour by using `class` or `center` options.",
"uninverted": true
}
},
Expand Down
55 changes: 1 addition & 54 deletions packages/docs/src/lang/es-MX/directives/Ripples.json
Expand Up @@ -6,64 +6,11 @@
],
"examples": [
{
"buttons": {
"header": "Default",
"desc": "Los botones por default tienen las ondulaciones (ripples) habilitadas. Esto puede quitarse con la propiedad `:ripple=\"false`.",
"uninverted": true
},
"customColor": {
"header": "Color personalizado",
"desc": "Usando una clase auxiliar, puedes cambiar el color del ripple.",
"uninverted": true
},
"tabs": {
"header": "Tabs",
"desc": "Las tabs tienen por default las ondulaciones deshabilitadas. Puedes habilitarlas con la propiedad `ripple`.",
"uninverted": true
},
"navigationDrawers": {
"header": "Cajones de Navegaciรณn (Navigation drawers)",
"desc": "Las listas tienen por default las ondulaciones deshabilitadas. Puedes habilitarlas con la propiedad `ripple`.",
"uninverted": true
},
"toolbars": {
"header": "Barras de herramientas",
"desc": "Los elementos de las barras de herramientas tienen por default las ondulaciones deshabilitadas. Puedes habilitarlas con la propiedad `ripple`.",
"uninverted": true
},
"expansionPanels": {
"header": "Paneles de expansiรณn",
"desc": "Los paneles de expansiรณn tienen por default las ondulaciones deshabilitadas. Puedes habilitarlas con la propiedad `ripple`.",
"uninverted": true
},
"customRipple": {
"header": "Componentes",
"desc": "Muchos otros componentes tienen soporte integrado para ondulaciones. Habilรญtalos con la propiedad `ripple`.",
"uninverted": true
},
"htmlElement": {
"header": "Elementos estรกndar de HTML",
"desc": "Agrega el efecto de ondulaciones a un elemento estรกndar de HTML. Puedes habilitarlo con la directiva `v-ripple`.",
"uninverted": true
}
}
],
"props": [
{
"v-ripple": [
{
"name": "class",
"type": "String",
"default": "undefined",
"desc": "Aplica una clase personalizada a la ondulaciรณn, se usa para cambiar el color"
},
{
"name": "center",
"type": "Boolean",
"default": "False",
"desc": "Obliga a la ondulaciรณn a originarse desde el centro del target"
}
]
}
]
}
}
21 changes: 0 additions & 21 deletions packages/docs/src/lang/ja/directives/Ripples.json
@@ -1,29 +1,8 @@
{
"headerText": "`v-ripple`ใƒ‡ใ‚ฃใƒฌใ‚ฏใƒ†ใ‚ฃใƒ–ใฏใƒฆใƒผใ‚ถใ‹ใ‚‰ใฎใ‚ขใ‚ฏใ‚ทใƒงใƒณใ‚’่กจ็คบใ™ใ‚‹้š›ใซๅˆฉ็”จใ—ใพใ™ใ€‚ใฉใฎใƒ–ใƒญใƒƒใ‚ฏใƒฌใƒ™ใƒซใฎ่ฆ็ด ใซๅฏพใ—ใฆใ‚‚่จญๅฎšใงใใพใ™ใ€‚`v-btn`ใ€`v-tabs-item`ใชใฉๅคšใใฎใ‚ณใƒณใƒใƒผใƒใƒณใƒˆใซrippleใƒ‡ใ‚ฃใƒฌใ‚ฏใƒ†ใ‚ฃใƒ–ใŒ็ต„ใฟ่พผใพใ‚Œใฆใ„ใพใ™ใ€‚",
"examples": {
"buttons": {
"desc": "Buttonใฏใƒ‡ใƒ•ใ‚ฉใƒซใƒˆใงrippleใŒๆœ‰ๅŠนใซใชใฃใฆใ„ใพใ™ใ€‚`:ripple=\"false\"`ใƒ—ใƒญใƒ‘ใƒ†ใ‚ฃใ‚’่จญๅฎšใ™ใ‚‹ใ“ใจใง็„กๅŠนใซใงใใพใ™ใ€‚"
},
"customColor": {
"desc": "Helperใ‚ฏใƒฉใ‚นใ‚’ๅˆฉ็”จใ™ใ‚Œใฐๆณข็ด‹ใฎ่‰ฒใ‚’ๅค‰ๆ›ดใงใใพใ™ใ€‚"
},
"tabs": {
"desc": "Tabใฏใƒ‡ใƒ•ใ‚ฉใƒซใƒˆใงใฏrippleใŒ็„กๅŠนใงใ™ใ€‚`ripple`ใƒ—ใƒญใƒ‘ใƒ†ใ‚ฃใ‚’่จญๅฎšใ™ใ‚‹ใ“ใจใงๆœ‰ๅŠนใซใชใ‚Šใพใ™ใ€‚"
},
"navigationDrawers": {
"desc": "Listใฏใƒ‡ใƒ•ใ‚ฉใƒซใƒˆใงใฏrippleใŒ็„กๅŠนใงใ™ใ€‚`ripple`ใƒ—ใƒญใƒ‘ใƒ†ใ‚ฃใ‚’่จญๅฎšใ™ใ‚‹ใ“ใจใงๆœ‰ๅŠนใซใชใ‚Šใพใ™ใ€‚"
},
"toolbars": {
"desc": "Toolbarใฏใƒ‡ใƒ•ใ‚ฉใƒซใƒˆใงใฏrippleใŒ็„กๅŠนใงใ™ใ€‚`ripple`ใƒ—ใƒญใƒ‘ใƒ†ใ‚ฃใ‚’่จญๅฎšใ™ใ‚‹ใ“ใจใงๆœ‰ๅŠนใซใชใ‚Šใพใ™ใ€‚"
},
"expansionPanels": {
"desc": "Exapansion panelใฏใƒ‡ใƒ•ใ‚ฉใƒซใƒˆใงใฏrippleใŒ็„กๅŠนใงใ™ใ€‚`ripple`ใƒ—ใƒญใƒ‘ใƒ†ใ‚ฃใ‚’่จญๅฎšใ™ใ‚‹ใ“ใจใงๆœ‰ๅŠนใซใชใ‚Šใพใ™ใ€‚"
},
"customRipple": {
"desc": "ใใฎไป–ใฎใ‚ณใƒณใƒใƒผใƒใƒณใƒˆใงใ‚‚rippleใ‚’ๅˆฉ็”จใงใใพใ™ใ€‚`ripple`ใƒ—ใƒญใƒ‘ใƒ†ใ‚ฃใ‚’่จญๅฎšใ™ใ‚‹ใ“ใจใงๆœ‰ๅŠนใซใชใ‚Šใพใ™ใ€‚"
},
"htmlElement": {
"desc": "้€šๅธธใฎHTML่ฆ็ด ใซrippleใ‚จใƒ•ใ‚งใ‚ฏใƒˆใ‚’่ฟฝๅŠ ใ™ใ‚‹ใซใฏใ€`v-ripple`ใƒ‡ใ‚ฃใƒฌใ‚ฏใƒ†ใ‚ฃใƒ–ใ‚’่จญๅฎšใ—ใพใ™ใ€‚"
}
}
}
35 changes: 0 additions & 35 deletions packages/docs/src/lang/ko/directives/Ripples.json
Expand Up @@ -3,45 +3,10 @@
"headerText": "`v-ripple` ๋””๋ ‰ํ‹ฐ๋ธŒ๋Š” ์‚ฌ์šฉ์ž์˜ ์•ก์…˜์„ ๋ณด์—ฌ์ฃผ๋Š”๋ฐ ์‚ฌ์šฉ๋ฉ๋‹ˆ๋‹ค. ์ด ๋””๋ ‰ํ‹ฐ๋ธŒ๋Š” ์–ด๋–ค ๋ธ”๋ก ๋ ˆ๋ฒจ ์š”์†Œ์—๋“  ์ ์šฉ๋  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ๋‹ค์–‘ํ•œ ์ปดํฌ๋„ŒํŠธ๋“ค์ด ๋ฆฌํ”Œ ๋””๋ ‰ํŠธ๋ธŒ์™€ ํ•จ๊ป˜ ์‚ฌ์šฉ๋  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์˜ˆ๋ฅด ๋“ค์–ด `v-btn`, `v-tabs-item` ๋“ฑ๊ณผ ๋” ๋งŽ์€ ๋‹ค์–‘ํ•œ ๋‚ด์žฅ ์ปดํฌ๋„ŒํŠธ๋“ค์ด ์žˆ์Šต๋‹ˆ๋‹ค.",
"components": ["v-ripple"],
"examples": {
"buttons": {
"header": "๊ธฐ๋ณธ๊ฐ’",
"desc": "๊ธฐ๋ณธ์ ์œผ๋กœ ๋ฒ„ํŠผ์€ ๋ฆฌํ”Œ์ด ํ™œ์„ฑํ™”๋˜์–ด ์žˆ์Šต๋‹ˆ๋‹ค. `:ripple=\"false\"` prop์œผ๋กœ ์ œ๊ฑฐํ•  ์ˆ˜๋„ ์žˆ์Šต๋‹ˆ๋‹ค.",
"uninverted": true
},
"customColor": {
"header": "์ปค์Šคํ…€ ์ƒ‰์ƒ (Custom color)",
"desc": "ํ—ฌํผ ํด๋ž˜์Šค๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ๋ฆฌํ”Œ์˜ ์ƒ‰์„ ๋ฐ”๊ฟ€ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.",
"uninverted": true
},
"tabs": {
"header": "ํƒญ (Tabs)",
"desc": "๊ธฐ๋ณธ์ ์œผ๋กœ ํƒญ์€ ๋ฆฌํ”Œ์ด ๋น„ํ™œ์„ฑํ™” ๋˜์–ด ์žˆ์Šต๋‹ˆ๋‹ค. `ripple` prop์œผ๋กœ ํ™œ์„ฑํ™”ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.",
"uninverted": true
},
"navigationDrawers": {
"header": "๋„ค๋น„๊ฒŒ์ด์…˜ ์„œ๋ž (Navigation drawers)",
"desc": "๊ธฐ๋ณธ์ ์œผ๋กœ ๋ฆฌ์ŠคํŠธ ์•„์ดํ…œ๋“ค์€ ๋ฆฌํ”Œ์ด ๋น„ํ™œ์„ฑํ™” ๋˜์–ด ์žˆ์Šต๋‹ˆ๋‹ค. `ripple` prop์œผ๋กœ ํ™œ์„ฑํ™”ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.",
"uninverted": true
},
"toolbars": {
"header": "ํˆด๋ฐ” (Toolbars)",
"desc": "ํˆด๋ฐ” ์•„์ดํ…œ๋“ค์€ ๊ธฐ๋ณธ์ ์œผ๋กœ ๋ฆฌํ”Œ์ด ๋น„ํ™œ์„ฑํ™” ๋˜์–ด ์žˆ์Šต๋‹ˆ๋‹ค. `ripple` prop์œผ๋กœ ํ™œ์„ฑํ™”ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.",
"uninverted": true
},
"expansionPanels": {
"header": "ํ™•์žฅํŒจ๋„ (Expansion panels)",
"desc": "ํ™•์žฅํŒจ๋„์€ ๊ธฐ๋ณธ์ ์œผ๋กœ ๋ฆฌํ”Œ์ด ๋น„ํ™œ์„ฑํ™” ๋˜์–ด ์žˆ์Šต๋‹ˆ๋‹ค. `ripple` prop์œผ๋กœ ํ™œ์„ฑํ™”ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.",
"uninverted": true
},
"customRipple": {
"header": "์ปดํฌ๋„ŒํŠธ (Components)",
"desc": "์—ฌ๋Ÿฌ ๋‹ค๋ฅธ ์ปดํฌ๋„ŒํŠธ๋“ค๋„ ๋ฆฌํ”Œ์„ ์ง€์›ํ•ฉ๋‹ˆ๋‹ค. `ripple` prop์œผ๋กœ ํ™œ์„ฑํ™”ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.",
"uninverted": true
},
"htmlElement": {
"header": "ํ‘œ์ค€ HTML ์š”์†Œ (Standard HTML element)",
"desc": "ํ‘œ์ค€ HTML ์š”์†Œ์— ๋ฆฌํ”Œํšจ๊ณผ๋ฅผ ์ถ”๊ฐ€ํ•˜์„ธ์š”. `v-lipple` ๋””๋ ‰ํ‹ฐ๋ธŒ๋กœ ํ™œ์„ฑํ™”ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.",
"uninverted": true
}
},
"options": {
Expand Down

0 comments on commit a0d8051

Please sign in to comment.