mirror of
https://github.com/ArthurDanjou/ui.git
synced 2026-01-24 00:40:34 +01:00
docs: minor improvements
This commit is contained in:
@@ -5,15 +5,13 @@ description: 'Components library as a Nuxt module using TailwindCSS and Headless
|
||||
|
||||
This module has been developed by the [NuxtLabs](https://nuxtlabs.com/) team for [Volta](https://volta.net) and [Nuxt Studio](https://nuxt.studio/), its goal is to provide everything related to UI when building a Nuxt app. This includes components, icons, colors, dark mode but also keyboard shortcuts.
|
||||
|
||||
Components are built on top of [TailwindCSS](https://tailwindcss.com/) and [HeadlessUI](https://headlessui.com/) to provide a set of fully customizable components with dark mode support.
|
||||
|
||||
::alert{icon="i-heroicons-light-bulb"}
|
||||
[Volta](https://volta.net/) entire UI is built with this module alongside the 50+ keyboard shortcuts defined.
|
||||
::
|
||||
|
||||
## Features
|
||||
|
||||
- Fully customizable components
|
||||
- Fully styled and customizable components
|
||||
- HMR support through Nuxt App Config
|
||||
- Dark mode support
|
||||
- Keyboard shortcuts
|
||||
@@ -29,7 +27,6 @@ Components are built on top of [TailwindCSS](https://tailwindcss.com/) and [Head
|
||||
- [tailwindlabs/headlessui](https://github.com/tailwindlabs/headlessui)
|
||||
- [vueuse/vueuse](https://github.com/vueuse/vueuse)
|
||||
- [egoist/tailwindcss-icons](https://github.com/egoist/tailwindcss-icons)
|
||||
- [krisk/fuse](https://github.com/krisk/Fuse)
|
||||
|
||||
::alert{icon="i-heroicons-exclamation-triangle"}
|
||||
This documentation is still a work in progress and will be updated regularly.
|
||||
|
||||
@@ -77,7 +77,7 @@ export default defineAppConfig({
|
||||
|
||||
You can use any icon (100,000+) from [Iconify](https://iconify.design/).
|
||||
|
||||
Most of the components have an `icon` prop that allows you to add an icon to the component.
|
||||
Some components have an `icon` prop that allows you to add an icon to the component.
|
||||
|
||||
```vue
|
||||
<template>
|
||||
|
||||
@@ -25,9 +25,7 @@ Shortcuts are displayed and styled through the [Kbd](/elements/kbd) component.
|
||||
You will have a preview of how shortcuts are rendered in each component page.
|
||||
::
|
||||
|
||||
## Composables
|
||||
|
||||
### `defineShortcuts`
|
||||
## `defineShortcuts`
|
||||
|
||||
This module provides a `defineShortcuts` composable that allows you to define keyboard shortcuts in your app really easily.
|
||||
|
||||
@@ -50,7 +48,7 @@ defineShortcuts({
|
||||
</script>
|
||||
```
|
||||
|
||||
### `useShortcuts`
|
||||
## `useShortcuts`
|
||||
|
||||
To display shortcuts in your app according to the user's OS, you can use the `useShortcuts` composable.
|
||||
|
||||
|
||||
Reference in New Issue
Block a user