gaiety/portfolio
gaiety/portfolio
1
1
Fork 0
Code Activity
portfolio/_site/repos/ember-select-light/index.html
Ava Gaiety Wroten 3ac60346d4 More progress
2021-02-02 22:37:07 -06:00

185 lines
9.7 KiB
HTML
Raw Blame History

<!doctype html>
<html>
<head>
<title>Wroten - ember-select-light</title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
</head>
<body class="bg-gray-100">
<header>
<nav class="bg-white shadow">
<div class="max-w-7xl mx-auto px-2 sm:px-6 lg:px-8">
<div class="relative flex justify-between h-16">
<div class="absolute inset-y-0 left-0 flex items-center sm:hidden">
<!-- Mobile menu button -->
<button class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500" aria-expanded="false">
<span class="sr-only">Open main menu</span>
<!-- Icon when menu is closed. -->
<!--
Heroicon name: menu
Menu open: "hidden", Menu closed: "block"
-->
<svg class="block h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
</svg>
<!-- Icon when menu is open. -->
<!--
Heroicon name: x
Menu open: "block", Menu closed: "hidden"
-->
<svg class="hidden h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</div>
<div class="flex-1 flex items-center justify-center sm:items-stretch sm:justify-start">
<div class="flex-shrink-0 flex items-center">
<img class="h-12 w-12 rounded-full w-auto" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="">
</div>
<div class="hidden sm:ml-6 sm:flex sm:space-x-8"><a
href="/"
class="border-transparent text-gray-500 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium"
>
Welcome
</a><a
href="/repos/"
class="border-transparent text-gray-500 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium"
>
Repos
</a><a
href="/work-history/"
class="border-transparent text-gray-500 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium"
>
Work
</a><a
href="/volunteering/"
class="border-transparent text-gray-500 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium"
>
Volunteering
</a><a
href="/uses/"
class="border-transparent text-gray-500 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium"
>
About | Uses
</a></div>
</div>
</div>
</div>
<!--
Mobile menu, toggle classes based on menu state.
Menu open: "block", Menu closed: "hidden"
-->
<div class="hidden sm:hidden">
<div class="pt-2 pb-4 space-y-1">
<!-- Current: "bg-indigo-50 border-indigo-500 text-indigo-700", Default: "border-transparent text-gray-500 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-700" -->
<a href="#" class="bg-indigo-50 border-indigo-500 text-indigo-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">Dashboard</a>
<a href="#" class="border-transparent text-gray-500 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">Team</a>
<a href="#" class="border-transparent text-gray-500 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">Projects</a>
<a href="#" class="border-transparent text-gray-500 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">Calendar</a>
</div>
</div>
</nav>
</header>
<main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="max-w-3x1 mx-auto mb-5">
<div class="-ml-2 mt-8 flex flex-wrap items-baseline">
<h1 class="ml-8 mt-2 text-lg font-medium text-gray-900">
ember-select-light
</h1>
<p class="ml-2 mt-1 text-sm text-gray-500 truncate">in Repos</p>
</div>
</div>
<div class="bg-white overflow-hidden shadow sm:rounded-lg">
<div class="px-4 py-5 sm:p-6">
<p><a href="https://github.com/ember-a11y/ember-select-light">Fork from Github</a></p>
<h1>Ember-Select-Light</h1>
<p><img src="https://github.com/ember-a11y/ember-select-light/workflows/CI/badge.svg?branch=main" alt="CI"> <img src="https://camo.githubusercontent.com/d4e0f63e9613ee474a7dfdc23c240b9795712c96/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f5052732d77656c636f6d652d627269676874677265656e2e737667" alt="PRs Welcome"> <img src="https://camo.githubusercontent.com/890acbdcb87868b382af9a4b1fac507b9659d9bf/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f6c6963656e73652d4d49542d626c75652e737667" alt="License: MIT"> <a href="https://badge.fury.io/js/ember-select-light"><img src="https://d25lcipzij17d.cloudfront.net/badge.svg?id=js&amp;type=6&amp;v=2.0.0&amp;x2=0" alt="npm package"></a> <a href="https://emberobserver.com/addons/ember-select-light"><img src="https://emberobserver.com/badges/ember-select-light.svg" alt="Ember Observer"></a></p>
<p>Ember-Select-Light is an Ember Addon focused on simplicity. Just powerful enough to offer expected baseline functionality while being easy to implement, style, and make accessible.</p>
<p>This addon is <a href="https://emberjs.com/editions/octane/">Octane ready</a> and follows <a href="https://emberjs-1.gitbook.io/ember-component-patterns/form-components/select-element">ember-component-pattern's for how to best write a Select Element</a>.</p>
<h2>Getting Started</h2>
<pre><code class="language-bash">ember install ember-select-light
</code></pre>
<h3>Example Usage</h3>
<pre><code class="language-handlebars">&lt;SelectLight
@value=&quot;turtle&quot;
@options=(array &quot;turtle&quot; &quot;tortoise&quot;)
@change= /&gt;
</code></pre>
<h4>With an array of objects...</h4>
<pre><code class="language-handlebars">&lt;SelectLight
@options=(array
(hash value=&quot;shortfin&quot; label=&quot;Shortfin Shark&quot;)
(hash value=&quot;mako&quot; label=&quot;Mako Shark&quot;)
) /&gt;
</code></pre>
<p><code>value</code> and <code>label</code> will be the default object keys used unless <code>@valueKey=&quot;...</code> and/or <code>@displayKey=&quot;...</code> are used respectively, like so...</p>
<pre><code class="language-handlebars">&lt;SelectLight
@options=(array
(hash myValue=&quot;shortfin&quot; myLabel=&quot;Shortfin Shark&quot;)
(hash myValue=&quot;mako&quot; myLabel=&quot;Mako Shark&quot;)
)
@valueKey=&quot;myValue&quot;
@displayKey=&quot;myLabel&quot; /&gt;
</code></pre>
<h4>As a Yield</h4>
<pre><code class="language-handlebars">&lt;SelectLight&gt;
&lt;option value=&quot;clown&quot;&gt;Clown Fish&lt;/option&gt;
&lt;option value=&quot;cat&quot;&gt;Cat Fish&lt;/option&gt;
&lt;/SelectLight&gt;
</code></pre>
<h3>Other arguments</h3>
<p>Other arguments are spread onto the <code>&lt;select ...attributes</code> as you'd expect, allowing you to use common attributes such as <code>disabled</code>, <code>tabindex</code> and of course <code>class</code>.</p>
<pre><code class="language-handlebars">&lt;SelectLight class=&quot;my-select&quot; disabled=&quot;true&quot; /&gt;
</code></pre>
<hr>
<h2>Upgrading</h2>
<p>See <a href="./UPGRADE.md">the upgrading guide for how to upgrade from previous versions</a>.</p>
<hr>
<h2>Running</h2>
<ul>
<li><code>ember serve</code></li>
<li>Visit your app at <a href="http://localhost:4200">http://localhost:4200</a>.</li>
</ul>
<h3>Linting</h3>
<ul>
<li><code>npm run lint:hbs</code></li>
<li><code>npm run lint:js</code></li>
<li><code>npm run lint:js -- --fix</code></li>
</ul>
<h2>Contributing</h2>
<p>We love pull requests from everyone. By participating in this project, you agree to abide by the <a href="./code-of-conduct.md">code of conduct</a> and is subject to the <a href="./LICENSE.md">project license</a>.</p>
<p>Clone this repo, make your changes with test coverage, push up a fork and <a href="https://github.com/sharpshark28/ember-select-light/compare">submit a pull request</a>.</p>
<p>Soon after some primary contributors will review your code and submit feedback and hopefully click the fancy green approve button. Any test and linting failures should be caught during the pull request continuous integration environment and human eyes here after.</p>
<h2>Running Tests</h2>
<ul>
<li><code>npm run test</code> (Runs <code>ember try:each</code> to test your addon against multiple Ember versions)</li>
<li>or <code>ember test</code></li>
</ul>
</div>
</div>
</main>
<footer class="mt-12 max-w-7xl mx-auto py-12 px-4 sm:px-6 md:flex md:items-center md:justify-between lg:px-8">
<div class="text-gray-500">
Built in <a href="https://www.11ty.dev/">Eleventy</a> with <a href="https://tailwindui.com/">Tailwind UI</a>
</div>
</footer>
</body>
</html>
View git blame Copy permalink