arthur/ui
1
0
Fork 0
mirror of https://github.com/ArthurDanjou/ui.git synced 2026-01-14 20:19:34 +01:00
Code Issues Packages Projects Releases Wiki Activity

feat(module)!: use tailwind-merge for app.config & move config to components & type props (#692)

Browse Source 
Co-authored-by: Pooya Parsa <pooya@pi0.io>
This commit is contained in:
Benjamin Canac
2023-09-20 18:07:51 +02:00
committed by GitHub
parent 2c98628f98
commit 34d2f57801
59 changed files with 835 additions and 882 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
docs/content/1.getting-started/3.theming.md
View File

@@ -1,5 +1,7 @@
---
description: 'Learn how to customize the look and feel of the components.'
navigation:
badge: New
---
## Overview
@@ -79,7 +81,7 @@ This can also happen when you bind a dynamic color to a component: `<UBadge :col
### `app.config.ts`
Components are styled with Tailwind CSS but classes are all defined in the default [app.config.ts](https://github.com/nuxt/ui/blob/dev/src/runtime/app.config.ts) file. You can override those in your own `app.config.ts`.
Components are styled with Tailwind CSS but classes are all defined in the default [ui.config.ts](https://github.com/nuxt/ui/blob/dev/src/runtime/ui.config.ts) file. You can override those in your own `app.config.ts`.
```ts [app.config.ts]
export default defineAppConfig({
@@ -91,6 +93,25 @@ export default defineAppConfig({
})
```
Thanks to [tailwind-merge](https://github.com/dcastil/tailwind-merge), the `app.config.ts` is smartly merged with the default config. This means you don't have to rewrite everything.
You can change this behaviour by setting `strategy` to `override` in your `app.config.ts`: :u-badge{label="New" class="!rounded-full" variant="subtle"}
```ts [app.config.ts]
export default defineAppConfig({
ui: {
strategy: 'override',
button: {
color: {
white: {
solid: 'bg-white dark:bg-gray-900'
}
}
}
}
})
```
### `ui` prop
Each component has a `ui` prop that allows you to customize everything specifically.
@@ -113,25 +134,36 @@ For example, the default preset of the `FormGroup` component looks like this:
```json
{
...
"label": {
"base": "block font-medium text-gray-700 dark:text-gray-200",
...
"base": "block font-medium text-gray-700 dark:text-gray-200"
}
...
}
```
To change the font of the `label`, you only need to write:
```vue
<UFormGroup name="email" label="Email" :ui="{ label: { base: 'font-semibold' } }">
...
</UFormGroup>
<UFormGroup name="email" label="Email" :ui="{ label: { base: 'font-semibold' } }" />
```
This will smartly replace the `font-medium` by `font-semibold` and prevent any class duplication and any class priority issue.
You can change this behaviour by setting `strategy` to `override` inside the `ui` prop: :u-badge{label="New" class="!rounded-full" variant="subtle"}
```vue
<UButton
to="https://github.com/nuxt/ui"
:ui="{
strategy: 'override',
color: {
white: {
solid: 'bg-white dark:bg-gray-900'
}
}
}"
/>
```
### `class` attribute
You can also use the `class` attribute to add classes to the component.

6
docs/content/5.navigation/1.vertical-navigation.md
View File

@@ -125,8 +125,6 @@ const links = [{
to: 'https://github.com/benjamincanac',
target: '_blank'
}, ...]
const { ui } = useAppConfig()
</script>
<template>
@@ -134,8 +132,8 @@ const { ui } = useAppConfig()
<template #avatar="{ link }">
<UAvatar
v-if="link.avatar"
v-bind="{ size: ui.verticalNavigation.avatar.size, ...link.avatar }"
:class="[ui.verticalNavigation.avatar.base]"
v-bind="link.avatar"
size="3xs"
/>
<UIcon v-else name="i-heroicons-user-circle-20-solid" class="text-lg" />
</template>