mirror of
https://github.com/tenrok/vue-select.git
synced 2026-06-22 10:30:34 +03:00
update splash page
This commit is contained in:
Jeff
@@ -135,20 +135,14 @@ code {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.overlay {
|
.content {
|
||||||
display: flex;
|
transition: opacity .25s;
|
||||||
justify-content: center;
|
}
|
||||||
align-items: center;
|
|
||||||
z-index: 999;
|
.hidden {
|
||||||
position: fixed;
|
opacity: 0;
|
||||||
width: 100%;
|
}
|
||||||
height: 100vh;
|
|
||||||
top: 0;
|
.dropdown-action {
|
||||||
left: 0;
|
margin-top: 5em;
|
||||||
background: rgba($code-black, .8);
|
|
||||||
transform: translateY(200vh);
|
|
||||||
transition: .25s transform;
|
|
||||||
&.active {
|
|
||||||
transform: translateY(0);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
+41
-71
@@ -30,46 +30,6 @@
|
|||||||
<body>
|
<body>
|
||||||
<div id="app">
|
<div id="app">
|
||||||
|
|
||||||
<div class="overlay" :class="{ active: loading }" v-cloak v-show="loading">
|
|
||||||
<!-- By Sam Herbert (@sherb), for everyone. More @ http://goo.gl/7AJzbL -->
|
|
||||||
<svg width="44" height="44" viewBox="0 0 44 44" xmlns="http://www.w3.org/2000/svg" stroke="#fff">
|
|
||||||
<g fill="none" fill-rule="evenodd" stroke-width="2">
|
|
||||||
<circle cx="22" cy="22" r="1">
|
|
||||||
<animate attributeName="r"
|
|
||||||
begin="0s" dur="1.8s"
|
|
||||||
values="1; 20"
|
|
||||||
calcMode="spline"
|
|
||||||
keyTimes="0; 1"
|
|
||||||
keySplines="0.165, 0.84, 0.44, 1"
|
|
||||||
repeatCount="indefinite" />
|
|
||||||
<animate attributeName="stroke-opacity"
|
|
||||||
begin="0s" dur="1.8s"
|
|
||||||
values="1; 0"
|
|
||||||
calcMode="spline"
|
|
||||||
keyTimes="0; 1"
|
|
||||||
keySplines="0.3, 0.61, 0.355, 1"
|
|
||||||
repeatCount="indefinite" />
|
|
||||||
</circle>
|
|
||||||
<circle cx="22" cy="22" r="1">
|
|
||||||
<animate attributeName="r"
|
|
||||||
begin="-0.9s" dur="1.8s"
|
|
||||||
values="1; 20"
|
|
||||||
calcMode="spline"
|
|
||||||
keyTimes="0; 1"
|
|
||||||
keySplines="0.165, 0.84, 0.44, 1"
|
|
||||||
repeatCount="indefinite" />
|
|
||||||
<animate attributeName="stroke-opacity"
|
|
||||||
begin="-0.9s" dur="1.8s"
|
|
||||||
values="1; 0"
|
|
||||||
calcMode="spline"
|
|
||||||
keyTimes="0; 1"
|
|
||||||
keySplines="0.3, 0.61, 0.355, 1"
|
|
||||||
repeatCount="indefinite" />
|
|
||||||
</circle>
|
|
||||||
</g>
|
|
||||||
</svg>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<h1>Vue Select</h1>
|
<h1>Vue Select</h1>
|
||||||
|
|
||||||
<p class="accolades lead">
|
<p class="accolades lead">
|
||||||
@@ -98,46 +58,56 @@
|
|||||||
to Select2/Chosen without the overhead of jQuery.
|
to Select2/Chosen without the overhead of jQuery.
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<v-select @input="onInput" id="v-select" :options="options" label="title">
|
<v-select id="v-select" :options="options" v-model="selected" label="title">
|
||||||
<template slot="option" slot-scope="option">
|
<template slot="option" slot-scope="option">
|
||||||
<span class="octicon" :class="option.icon"></span>
|
<span class="octicon" :class="option.icon"></span>
|
||||||
{{ option.title }}
|
{{ option.title }}
|
||||||
</template>
|
</template>
|
||||||
</v-select>
|
</v-select>
|
||||||
|
|
||||||
<div class="feature-list">
|
<div v-cloak v-if="!! selected" class="dropdown-action">
|
||||||
<ul class="list-vue">
|
<a class="btn btn-primary btn-outline btn-lg" :href="selected.url">
|
||||||
<li>Supports Vuex</li>
|
<span class="octicon" :class="selected.icon"></span>
|
||||||
<li>Tagging Support</li>
|
{{ selected.title }}
|
||||||
<li>Custom Templating</li>
|
|
||||||
<li>Zero JS/CSS dependencies</li>
|
|
||||||
<li>Custom Filtering Algoirthms</li>
|
|
||||||
</ul>
|
|
||||||
|
|
||||||
<ul class="list-vue">
|
|
||||||
<li>+95% Test Coverage</li>
|
|
||||||
<li>Select Single/Multiple</li>
|
|
||||||
<li>Typeahead Suggestions</li>
|
|
||||||
<li>Supports RTL & Translations</li>
|
|
||||||
<li>Plays nice with CSS Frameworks</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<p>
|
|
||||||
And so much more! Get started with: <br>
|
|
||||||
<code>yarn add vue-select</code>
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<div class="cta">
|
|
||||||
<a class="btn btn-primary btn-outline btn-lg" href="https://github.com/sagalbot/vue-select">
|
|
||||||
<span class="octicon octicon-mark-github"></span> View on GitHub
|
|
||||||
</a>
|
|
||||||
|
|
||||||
<a class="btn btn-primary btn-outline btn-lg" href="https://github.com/sagalbot/vue-select/docs/">
|
|
||||||
<span class="octicon octicon-book"></span> Read the Docs
|
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<section class="content" :class="{ hidden: selected }">
|
||||||
|
|
||||||
|
<div class="feature-list">
|
||||||
|
<ul class="list-vue">
|
||||||
|
<li>Supports Vuex</li>
|
||||||
|
<li>Tagging Support</li>
|
||||||
|
<li>Custom Templating</li>
|
||||||
|
<li>Zero JS/CSS dependencies</li>
|
||||||
|
<li>Custom Filtering Algoirthms</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<ul class="list-vue">
|
||||||
|
<li>+95% Test Coverage</li>
|
||||||
|
<li>Select Single/Multiple</li>
|
||||||
|
<li>Typeahead Suggestions</li>
|
||||||
|
<li>Supports RTL & Translations</li>
|
||||||
|
<li>Plays nice with CSS Frameworks</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p>
|
||||||
|
And so much more! Get started with: <br>
|
||||||
|
<code>yarn add vue-select</code>
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div class="cta">
|
||||||
|
<a class="btn btn-primary btn-outline btn-lg" href="https://github.com/sagalbot/vue-select">
|
||||||
|
<span class="octicon octicon-mark-github"></span> View on GitHub
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<a class="btn btn-primary btn-outline btn-lg" href="/docs/">
|
||||||
|
<span class="octicon octicon-book"></span> Read the Docs
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
<script>
|
<script>
|
||||||
(function (i, s, o, g, r, a, m) {
|
(function (i, s, o, g, r, a, m) {
|
||||||
|
|||||||
+5
-13
@@ -11,21 +11,22 @@ new Vue({
|
|||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
loading: false,
|
loading: false,
|
||||||
|
selected: null,
|
||||||
options: [
|
options: [
|
||||||
{
|
{
|
||||||
title: 'Read the Docs',
|
title: 'Read the Docs',
|
||||||
icon: 'octicon-book',
|
icon: 'octicon-book',
|
||||||
url: 'https://codeclimate.com/github/sagalbot/vue-select'
|
url: '/docs/'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: 'View on GitHub',
|
title: 'View on GitHub',
|
||||||
icon: 'octicon-mark-github',
|
icon: 'octicon-mark-github',
|
||||||
url: 'https://codeclimate.com/github/sagalbot/vue-select'
|
url: 'https://github.com/sagalbot/vue-select'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: 'View on NPM',
|
title: 'View on NPM',
|
||||||
icon: 'octicon-database',
|
icon: 'octicon-database',
|
||||||
url: 'https://codeclimate.com/github/sagalbot/vue-select'
|
url: 'https://www.npmjs.com/package/vue-select'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: 'View Code Climate Analysis',
|
title: 'View Code Climate Analysis',
|
||||||
@@ -35,18 +36,9 @@ new Vue({
|
|||||||
{
|
{
|
||||||
title: 'View Codepen Examples',
|
title: 'View Codepen Examples',
|
||||||
icon: 'octicon-pencil',
|
icon: 'octicon-pencil',
|
||||||
url: 'https://codeclimate.com/github/sagalbot/vue-select'
|
url: 'https://codepen.io/collection/nrkgxV/'
|
||||||
},
|
},
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
onInput(option) {
|
|
||||||
this.loading = true;
|
|
||||||
this.go(option.url);
|
|
||||||
},
|
|
||||||
go(url) {
|
|
||||||
window.location = url;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|||||||
Reference in New Issue
Block a user