mirrors/vue-select
2
0
Fork 0
mirror of https://github.com/tenrok/vue-select.git synced 2026-06-22 10:30:34 +03:00
Code Activity

more homepage styling

Browse Source
This commit is contained in:
Jeff
2018-01-13 17:00:50 -08:00
parent 0d62251558
commit b862761cbf
4 changed files with 184 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/homepage/home.html
+65 -16
View File
@@ -30,6 +30,46 @@
<body>
<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>
<p class="accolades lead">
@@ -54,40 +94,49 @@
</p>
<p class="lead">
A Vue.js select component that provides similar functionality to Select2/Chosen without the overhead of jQuery.
A Vue.js select component that provides similar functionality
to Select2/Chosen without the overhead of jQuery.
</p>
<v-select
id="v-select"
:placeholder="placeholder"
:options="options"
multiple
>
<v-select @input="onInput" id="v-select" :options="options" label="title">
<template slot="option" slot-scope="option">
<span class="octicon" :class="option.icon"></span>
{{ option.title }}
</template>
</v-select>
<div class="feature-list">
<ul class="list-vue">
<li>Custom Templating</li>
<li>Supports Vuex</li>
<li>Tagging Support</li>
<li>Works with Vuex</li>
<li>Zero dependencies</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>
<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>
<p>
And so much more! Get started with: <br>
<code>yarn add vue-select</code>
</p>
<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>
<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>
</div>
</div>
<script>