fix: better styling
This commit is contained in:
Nolan Lawson
parent
f8f277448c
commit
c44f3b66ae
46
README.md
46
README.md
|
|
@ -1,15 +1,16 @@
|
|||
emoji-picker-element
|
||||
====
|
||||
|
||||
A small, performant, accessible emoji picker, distributed as a custom element.
|
||||
A lightweight emoji picker, distributed as a custom element.
|
||||
|
||||
It's built on top of IndexedDB, so it consumes far less memory than other emoji pickers. It also uses [Svelte](https://svelte.dev), so it has a minimal runtime footprint.
|
||||
It's built on top of IndexedDB, so it consumes far less memory than other emoji pickers.
|
||||
It also uses [Svelte](https://svelte.dev), so it has a minimal runtime footprint.
|
||||
|
||||
Design goals:
|
||||
|
||||
- Store emoji data in IndexedDB, not memory
|
||||
- Render native emoji, no spritesheets
|
||||
- Accessible by default
|
||||
- Accessible
|
||||
- Drop-in as a vanilla web component
|
||||
|
||||
## Install
|
||||
|
|
@ -26,17 +27,12 @@ Design goals:
|
|||
import 'emoji-picker-element';
|
||||
```
|
||||
|
||||
`emoji-picker-element` will expand to fit whatever container you give it. Here is a good default:
|
||||
or via [unpkg](https://unpkg.com):
|
||||
|
||||
```css
|
||||
emoji-picker {
|
||||
width: 400px;
|
||||
height: 300px;
|
||||
}
|
||||
```js
|
||||
import 'https://unpkg.com/emoji-picker-element'
|
||||
```
|
||||
|
||||
`emoji-picker-element` uses Shadow DOM, so its inner styling is not accessible except via the API.
|
||||
|
||||
## API
|
||||
|
||||
### Picker
|
||||
|
|
@ -59,7 +55,7 @@ These values can also be set at runtime, e.g.:
|
|||
|
||||
```js
|
||||
const picker = new Picker();
|
||||
picker.numColumns = 6;
|
||||
picker.dataSource = '/my-emoji.json';
|
||||
```
|
||||
|
||||
#### i18n structure
|
||||
|
|
@ -88,9 +84,33 @@ Note that some of these values are only visible to users of screen readers (but
|
|||
|
||||
#### Styling
|
||||
|
||||
`emoji-picker-element` uses Shadow DOM, so its inner styling is not accessible except via the API described below.
|
||||
|
||||
##### Size
|
||||
|
||||
`emoji-picker-element` has a default size, but you can change it to be whatever you want:
|
||||
|
||||
```css
|
||||
emoji-picker {
|
||||
width: 400px;
|
||||
height: 300px;
|
||||
}
|
||||
```
|
||||
|
||||
For instance, to make it expand to fit whatever container you give it:
|
||||
|
||||
```css
|
||||
emoji-picker {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
```
|
||||
|
||||
##### Dark mode
|
||||
|
||||
By default, `emoji-picker-element` will automatically switch to dark mode based on [`prefers-color-scheme`](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme). For more fine-grained, control, add the class `dark` or `light` to force dark/light mode:
|
||||
By default, `emoji-picker-element` will automatically switch to dark mode based on
|
||||
[`prefers-color-scheme`](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme).
|
||||
For more fine-grained, control, add the class `dark` or `light` to force dark/light mode:
|
||||
|
||||
```html
|
||||
<emoji-picker class="dark"></emoji-picker>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
{
|
||||
"name": "emoji-picker-element",
|
||||
"version": "1.0.0",
|
||||
"description": "Lightweight emoji picker based on IndexedDB",
|
||||
"description": "A lightweight emoji picker, distributed as a custom element",
|
||||
"main": "index.js",
|
||||
"module": "index.js",
|
||||
"type": "module",
|
||||
|
|
|
|||
|
|
@ -12,6 +12,12 @@
|
|||
outline-offset: calc(-1 * var(--outline-size)); // fix focus ring getting cropped
|
||||
}
|
||||
|
||||
:host {
|
||||
display: flex;
|
||||
width: fit-content;
|
||||
height: 400px;
|
||||
}
|
||||
|
||||
.picker {
|
||||
contain: content;
|
||||
display: flex;
|
||||
|
|
|
|||
25
test.html
25
test.html
|
|
@ -1,22 +1,17 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Ad-hoc emoji-picker-element test</title>
|
||||
<style>
|
||||
.container {
|
||||
height: 300px;
|
||||
width: 400px;
|
||||
}
|
||||
</style>
|
||||
<meta charset="UTF-8">
|
||||
<title>Ad-hoc emoji-picker-element test</title>
|
||||
<meta name="viewport" content="width=device-width">
|
||||
</head>
|
||||
<body>
|
||||
<h1>Ad-hoc emoji-picker-element test</h1>
|
||||
<div class="container">
|
||||
<emoji-picker></emoji-picker>
|
||||
</div>
|
||||
<script type="module">
|
||||
import './index.js'
|
||||
</script>
|
||||
<h1>Ad-hoc emoji-picker-element test</h1>
|
||||
<div class="container">
|
||||
<emoji-picker></emoji-picker>
|
||||
</div>
|
||||
<script type="module">
|
||||
import './index.js'
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
Loading…
Reference in New Issue