Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/yeungkc/unocss-preset-safe-area
Use safe area with UnoCSS.
https://github.com/yeungkc/unocss-preset-safe-area
keyboard-inset safe-area titlebar-area unocss-preset unocsss
Last synced: 9 days ago
JSON representation
Use safe area with UnoCSS.
- Host: GitHub
- URL: https://github.com/yeungkc/unocss-preset-safe-area
- Owner: YeungKC
- License: mit
- Created: 2024-03-15T05:06:27.000Z (8 months ago)
- Default Branch: main
- Last Pushed: 2024-05-24T07:57:37.000Z (6 months ago)
- Last Synced: 2024-06-19T10:30:44.467Z (5 months ago)
- Topics: keyboard-inset, safe-area, titlebar-area, unocss-preset, unocsss
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/@yeungkc/unocss-preset-safe-area
- Size: 95.7 KB
- Stars: 4
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# unocss-preset-safe-area
Use safe area with [UnoCSS](https://github.com/unocss/unocss).
## Usage
### Setup
To ensure the correct functioning of env styles, make sure to include the `viewport-fit=cover` in viewport `meta` tag:
```diff
```
### Installation
```bash
npm install unocss @yeungkc/unocss-preset-safe-area
```
```bash
yarn add unocss @yeungkc/unocss-preset-safe-area
```
```bash
pnpm add unocss @yeungkc/unocss-preset-safe-area
```
### Import
```ts
import presetSafeArea from '@yeungkc/unocss-preset-safe-area'
export default defineConfig({
...
presets: [...presetSafeArea()...]
...
})
```
## Rule
This preset supports `safe-area-inset-*`, `titlebar-area-*` and `keyboard-inset-*`.
Basic usage:
- `pt-safe-1` : `padding-top:env(safe-area-inset-top, 0.25rem);`
- for addition, use `+`, example: `pt+safe-1` : `padding-top:calc(env(safe-area-inset-top) + 0.25rem);`.
- To specify env properties, like `titlebar-x`, `keyboard-t`, use `w-titlebar-x-1`:`width:env(titlebar-area-x, 0.25rem);`.
Currently supports `p`, `m`, `w`, `h`, `max-w`, `min-w`, `max-h`, `min-h`, `left`, `top`, `right`, `bottom`, where:
- `safe` represents `safe-area-inset-`
- `titlebar` represents `titlebar-area-`
- `keyboard` represents `keyboard-inset-`
For all usage examples, it's all [Autocomplete](https://unocss.dev/tools/autocomplete):
```text
(top|left|right|bottom)(+|-)(safe|keyboard)-
(top|left|right|bottom)(+|-)safe-(r|l|t|b)-
(top|left|right|bottom)(+|-)titlebar-(x|y|w|h)-
(top|left|right|bottom)(+|-)keyboard-(r|l|t|b|w|h)-
(w|h)(+|-)safe-(r|l|t|b)-
(min|max)-(w|h)(+|-)safe-(r|l|t|b)-
(w|h)(+|-)(titlebar|keyboard)-
(w|h)(+|-)titlebar-(x|y|w|h)-
(min|max)-(w|h)(+|-)(titlebar|keyboard)-
(min|max)-(w|h)(+|-)titlebar-(x|y|w|h)-
(w|h)(+|-)keyboard-(r|l|t|b|w|h)-
(min|max)-(w|h)(+|-)keyboard-(r|l|t|b|w|h)-
(m|p)(r|l|t|b)(+|-)(safe|keyboard)-
(m|p)(r|l|t|b)(+|-)safe-(r|l|t|b)-
(m|p)(r|l|t|b)(+|-)titlebar-(x|y|w|h)-
(m|p)(r|l|t|b)(+|-)keyboard-(r|l|t|b|w|h)-
```
If you need more clarification, you can refer to this [CSS example](test/output/targets.css).
## License
MIT License © 2024-PRESENT [YeungKC](https://github.com/YeungKC)