Skip to content

Commit

Permalink
Update the Readme and Demo
Browse files Browse the repository at this point in the history
  • Loading branch information
@danieldiekmeier
danieldiekmeier committed Jul 19, 2019
1 parent aa478e8 commit 994c218
Show file tree
Hide file tree
Showing 2 changed files with 138 additions and 124 deletions.
23 changes: 14 additions & 9 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,6 @@ Like jQuery's [`slideUp`](http://api.jquery.com/slideup/) / [`slideDown`](http:/

Demo: https://codepen.io/danieldiekmeier/pen/YapGWq


## Installation

```sh
Expand All @@ -24,22 +23,27 @@ Vue.component('slide-up-down', SlideUpDown)
Or use the UMD build directly in your browser (the component is provided as `window.VueSlideUpDown`).

```html
<script type="text/javascript" src="node_modules/vuejs/dist/vue.min.js"></script>
<script type="text/javascript" src="node_modules/vue-slide-up-down/dist/vue-slide-up-down.umd.js"></script>
<script
type="text/javascript"
src="node_modules/vuejs/dist/vue.min.js"
></script>
<script
type="text/javascript"
src="node_modules/vue-slide-up-down/dist/vue-slide-up-down.umd.js"
></script>
<script type="text/javascript">
Vue.component('slide-up-down', VueSlideUpDown);
Vue.component('slide-up-down', VueSlideUpDown)
</script>
```


## Usage

The component takes four props:

- `active` (Boolean, required): Whether to show the component (`true`) or not (`false`)
- `duration` (Number, optional): How long the animation is supposed to be, in milliseconds. Defaults to `500`.
- `tag` (String, optional): Which HTML tag to use for the wrapper element. Defaults to `div`.
- `use-hidden` (Boolean, optional): Use the "hidden" attribute when closed. Defaults to `true`. Setting to `false` creates accessibility issues. See `demo/index.html` for more detail.
- `use-hidden` (Boolean, optional): Whether to apply the "hidden" attribute to the element when closed. Defaults to `true`. This hides the component from the screen and from assistive devices. The internal elements of the component are completely invisible, and cannot be focused on (by a keyboard or assistive device). (This is probably what you want!) If you need, set this property to `false` to not use the `hidden` attribute. This could be used if you wanted to have a min-height requirement on your component. **⚠️ Note that this can create accessibility issues**, specifically for users with a keyboard or screen reader. Even though the component may _appear_ hidden, focusable elements within the component are still able to be accessed through keyboard navigation.

```html
<div class="MyContent">
Expand All @@ -51,7 +55,7 @@ The component takes four props:
</div>
```

The component emits four Vue events:
The component emits four Vue events:

- `open-start`
- `open-end`
Expand All @@ -69,11 +73,12 @@ If you want to use a different timing function, add some CSS for your `<slide-up
```html
<style>
.wobbly-accordion {
transition-timing-function: cubic-bezier(0.195, 1.650, 0.435, -0.600);
transition-timing-function: cubic-bezier(0.195, 1.65, 0.435, -0.6);
}
</style>

<slide-up-down class="wobbly-accordion">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta omnis velit ab culpa, officia, unde nesciunt temporibus cum reiciendis distinctio.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta omnis velit
ab culpa, officia, unde nesciunt temporibus cum reiciendis distinctio.
</slide-up-down>
```
239 changes: 124 additions & 115 deletions demo/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -132,39 +132,44 @@
margin-bottom: 0;
}

.options {
.OptionsWrapper {
padding: 1em;
background-color: #eee;
}

.Options {
padding: 20px 0;
}

.options h1 {
.Options h1 {
margin-top: 20px;
font-size: 18px;
}

.options h1:first-child {
.Options h1:first-child {
margin-top: 0;
}

.options h2 {
.Options h2 {
margin-top: 20px;
margin-bottom: 6px;
font-size: 14px;
}

.options span,
.options p,
.options ul,
.options label {
.Options span,
.Options p,
.Options ul,
.Options label {
font-size: 0.8em;
}

.options p,
.options ul {
.Options p,
.Options ul {
margin-bottom: 10px;
margin-top: 6px;
}

.options ul {
.Options ul {
margin-left: 20px;
}

Expand All @@ -176,114 +181,118 @@

<body>
<div id="app">
<button @click="toggleShowOptions" class="Button small">
Toggle Options
</button>
<slide-up-down :active="showOptions">
<div class="options">
<h1>Vue props</h1>
<h2>active</h2>
<p class="properties">Boolean. Required.</p>
<p>Whether to show the component (true) or not (false).</p>

<h2>duration</h2>
<p class="properties">Number. Optional. Default to "500"</p>
<label for="duration"
>How long the animation is supposed to be, in milliseconds.</label
>
<div>
<div class="OptionsWrapper">
<button @click="toggleShowOptions" class="Button small">
Toggle Options
</button>
<slide-up-down :active="showOptions">
<div class="Options">
<h1>Vue props</h1>
<h2>active</h2>
<p class="properties">Boolean. Required.</p>
<p>Whether to show the component (true) or not (false).</p>

<h2>duration</h2>
<p class="properties">Number. Optional. Default to "500"</p>
<label for="duration">
How long the animation is supposed to be, in milliseconds.
</label>
<div>
<input
type="range"
min="0"
max="5000"
step="50"
id="duration"
v-model="duration"
/>
<span>{{ this.duration }}ms</span>
</div>

<h2>tag</h2>
<p class="properties">String. Optional. Default to "div".</p>
<p>Which HTML tag to use for the wrapper element.</p>

<h2>use-hidden</h2>
<p class="properties">Boolean. Optional. Default to "true".</p>
<p>
Whether to apply the "hidden" attribute to the element when
closed.
</p>
<p>
By default, when closed, the "hidden" attribute is applied to the
component. This hides the component from the screen and from
assistive devices. The internal elements of the component are
completely invisible, and cannot be focused on (by a keyboard or
assistive device).
</p>
<p>
If you need, set this property to "false" to not use the "hidden"
attribute. This could be used if you wanted to have a min-height
requirement on your component.
<strong>Note that this can create accessibility issues</strong>,
specifically for users with a keyboard or screen reader. Even
though the component may appear hidden, focusable elements within
the component are still able to be accessed through keyboard
navigation.
</p>
<input
type="range"
min="0"
max="10000"
step="500"
id="duration"
v-model="duration"
type="checkbox"
value="1"
id="applyHiddenToElement"
name="useHidden"
v-model="useHidden"
/>
<span>{{ this.duration }}ms</span>
</div>
<label for="applyHiddenToElement">
Apply "hidden" attribute to element?
</label>

<h2>tag</h2>
<p class="properties">String. Optional. Default to "div".</p>
<p>Which HTML tag to use for the wrapper element.</p>

<h2>use-hidden</h2>
<p class="properties">Boolean. Optional. Default to "true".</p>
<p>
Whether to apply the "hidden" attribute to the element when closed.
</p>
<p>
By default, when closed, the "hidden" attribute is applied to the
component. This hides the component from the screen and from
assistive devices. The internal elements of the component are
completely invisible, and cannot be focused on (by a keyboard or
assistive device).
</p>
<p>
If you need, set this property to "false" to not use the "hidden"
attribute. This could be used if you wanted to have a min-height
requirement on your component.
<strong>Note that this can create accessibility issues</strong>,
specifically for users with a keyboard or screen reader. Even though
the component may appear hidden, focusable elements within the
component are still able to be accessed through keyboard navigation.
</p>
<input
type="checkbox"
value="1"
id="applyHiddenToElement"
name="useHidden"
v-model="useHidden"
/>
<label for="applyHiddenToElement"
>Apply "hidden" attribute to element?</label
>

<h1>Customisation</h1>
<h2>CSS custom timing</h2>
<p>By default, the timing of the animation is linear.</p>
<p>
You can define your own custom timing functions too using the CSS
transition timing function property.
</p>
<p>
Check out the source code to see the easeOutCubic and customTiming
example code.
</p>
<div>
<input
type="radio"
name="timing"
value=""
id="radio-default"
v-model="timing"
/>
<label for="radio-default">Default</label>
</div>
<div>
<input
type="radio"
name="timing"
value="easeInOutCirc"
id="radio-ease-out"
v-model="timing"
/>
<label for="radio-ease-out">Use easeInOutCirc</label>
</div>
<div>
<input
type="radio"
name="timing"
value="customTiming"
id="radio-custom"
v-model="timing"
/>
<label for="radio-custom">Use custom timing</label>
<h1>Customisation</h1>
<h2>CSS custom timing</h2>
<p>By default, the timing of the animation is linear.</p>
<p>
You can define your own custom timing functions too using the CSS
transition timing function property.
</p>
<p>
Check out the source code to see the easeOutCubic and customTiming
example code.
</p>
<div>
<input
type="radio"
name="timing"
value=""
id="radio-default"
v-model="timing"
/>
<label for="radio-default">Default</label>
</div>
<div>
<input
type="radio"
name="timing"
value="easeInOutCirc"
id="radio-ease-out"
v-model="timing"
/>
<label for="radio-ease-out">Use easeInOutCirc</label>
</div>
<div>
<input
type="radio"
name="timing"
value="customTiming"
id="radio-custom"
v-model="timing"
/>
<label for="radio-custom">Use custom timing</label>
</div>
</div>
</div>
</slide-up-down>
</slide-up-down>
</div>

<div class="options">
<div class="Options">
<h1>Current configuration</h1>
<p>
These are the current configuration options being passed to the
Expand Down Expand Up @@ -323,7 +332,7 @@ <h1>Current configuration</h1>
<button class="Button" @click="addContent">Add Content</button>
</div>

<button class="Button" @click="toggleShow">Toggle Destruction</button>
<button class="Button" @click="toggleShow">Toggle if element exists</button>
</div>
</body>
</html>

0 comments on commit 994c218

Please sign in to comment.