mirror of
https://github.com/ArthurDanjou/ui.git
synced 2026-01-14 20:19:34 +01:00
docs: remove New badges from edge docs
This commit is contained in:
@@ -1,7 +1,5 @@
|
||||
---
|
||||
description: 'Learn how to customize the look and feel of the components.'
|
||||
navigation:
|
||||
badge: 'New'
|
||||
---
|
||||
|
||||
## Overview
|
||||
@@ -39,7 +37,7 @@ Likewise, you can't define a `primary` color in your `tailwind.config.ts` as it
|
||||
We'd advise you to use those colors in your components and pages, e.g. `text-primary-500 dark:text-primary-400`, `bg-gray-100 dark:bg-gray-900`, etc. so your app automatically adapts when changing your `app.config.ts`.
|
||||
::
|
||||
|
||||
The `primary` color also has a `DEFAULT` shade that changes based on the theme. It is `500` in light mode and `400` in dark mode. You can use as a shortcut in your components and pages, e.g. `text-primary`, `bg-primary`, `focus-visible:ring-primary`, etc. :u-badge{label="New" class="!rounded-full" variant="subtle"}
|
||||
The `primary` color also has a `DEFAULT` shade that changes based on the theme. It is `500` in light mode and `400` in dark mode. You can use as a shortcut in your components and pages, e.g. `text-primary`, `bg-primary`, `focus-visible:ring-primary`, etc.
|
||||
|
||||
### Smart Safelisting
|
||||
|
||||
@@ -109,7 +107,7 @@ Each component has a `ui` prop that allows you to customize everything specifica
|
||||
You can find the default classes for each component under the `Preset` section.
|
||||
::
|
||||
|
||||
Thanks to [tailwind-merge](https://github.com/dcastil/tailwind-merge), the `ui` prop is smartly merged with the config. This means you don't have to rewrite everything. :u-badge{label="New" class="!rounded-full" variant="subtle"}
|
||||
Thanks to [tailwind-merge](https://github.com/dcastil/tailwind-merge), the `ui` prop is smartly merged with the config. This means you don't have to rewrite everything.
|
||||
|
||||
For example, the default preset of the `FormGroup` component looks like this:
|
||||
|
||||
@@ -144,7 +142,7 @@ You can also use the `class` attribute to add classes to the component.
|
||||
</template>
|
||||
```
|
||||
|
||||
Again, with [tailwind-merge](https://github.com/dcastil/tailwind-merge), this will smartly merge the classes with the `ui` prop and the config. :u-badge{label="New" class="!rounded-full" variant="subtle"}
|
||||
Again, with [tailwind-merge](https://github.com/dcastil/tailwind-merge), this will smartly merge the classes with the `ui` prop and the config.
|
||||
|
||||
### Default values
|
||||
|
||||
|
||||
@@ -4,8 +4,6 @@ links:
|
||||
- label: GitHub
|
||||
icon: i-simple-icons-github
|
||||
to: https://github.com/nuxt/ui/blob/dev/src/runtime/components/elements/Avatar.vue
|
||||
navigation:
|
||||
badge: 'New'
|
||||
---
|
||||
|
||||
## Usage
|
||||
@@ -55,7 +53,7 @@ baseProps:
|
||||
|
||||
If there is an error loading the `src` of the avatar or `src` is null / false a background placeholder will be displayed, customizable in `ui.avatar.background`.
|
||||
|
||||
#### Icon :u-badge{label="New" class="ml-2 align-text-bottom !rounded-full" variant="subtle"}
|
||||
#### Icon
|
||||
|
||||
Use any icon from [Iconify](https://icones.js.org) by setting the `icon` prop by using this pattern: `i-{collection_name}-{icon_name}` or change it globally in `ui.avatar.default.icon` to display an icon on top of the background.
|
||||
|
||||
|
||||
@@ -4,8 +4,6 @@ links:
|
||||
- label: GitHub
|
||||
icon: i-simple-icons-github
|
||||
to: https://github.com/nuxt/ui/blob/dev/src/runtime/components/elements/Button.vue
|
||||
navigation:
|
||||
badge: 'New'
|
||||
---
|
||||
|
||||
## Usage
|
||||
@@ -278,7 +276,7 @@ excludedProps:
|
||||
To stack buttons as a group, use the `ButtonGroup` component.
|
||||
|
||||
- To size all the buttons equally, pass the `size` prop
|
||||
- To change the orientation of the buttons, set the `orientation` prop to `vertical` :u-badge{label="New" class="!rounded-full" variant="subtle"}
|
||||
- To change the orientation of the buttons, set the `orientation` prop to `vertical`
|
||||
- To adjust the rounded or the shadow around buttons, customize with `ui.buttonGroup.rounded` or `ui.buttonGroup.shadow`
|
||||
|
||||
::component-card{slug="ButtonGroup"}
|
||||
|
||||
@@ -4,8 +4,6 @@ links:
|
||||
- label: GitHub
|
||||
icon: i-simple-icons-github
|
||||
to: https://github.com/nuxt/ui/blob/dev/src/runtime/components/forms/Form.vue
|
||||
navigation:
|
||||
badge: 'New'
|
||||
---
|
||||
|
||||
## Usage
|
||||
@@ -234,7 +232,7 @@ async function submit (event: FormSubmitEvent<any>) {
|
||||
```
|
||||
::
|
||||
|
||||
### Valibot :u-badge{label="New" class="ml-2 align-text-bottom !rounded-full" variant="subtle"}
|
||||
### Valibot
|
||||
|
||||
::component-example
|
||||
#default
|
||||
|
||||
@@ -4,8 +4,6 @@ links:
|
||||
- label: GitHub
|
||||
icon: i-simple-icons-github
|
||||
to: https://github.com/nuxt/ui/blob/dev/src/runtime/components/navigation/Tabs.vue
|
||||
navigation:
|
||||
badge: 'New'
|
||||
---
|
||||
|
||||
## Usage
|
||||
@@ -87,7 +85,7 @@ const items = [...]
|
||||
This will have no effect if you are using a `v-model` to control the selected index.
|
||||
::
|
||||
|
||||
### Listen to changes :u-badge{label="New" class="ml-2 align-text-bottom !rounded-full" variant="subtle"}
|
||||
### Listen to changes
|
||||
|
||||
You can listen to changes by using the `@change` event. The event will emit the index of the selected item.
|
||||
|
||||
@@ -113,7 +111,7 @@ function onChange (index) {
|
||||
```
|
||||
::
|
||||
|
||||
### Control the selected index :u-badge{label="New" class="ml-2 align-text-bottom !rounded-full" variant="subtle"}
|
||||
### Control the selected index
|
||||
|
||||
Use a `v-model` to control the selected index.
|
||||
|
||||
|
||||
@@ -7,8 +7,6 @@ links:
|
||||
- label: 'Dialog'
|
||||
icon: i-simple-icons-headlessui
|
||||
to: 'https://headlessui.com/vue/dialog'
|
||||
navigation:
|
||||
badge: 'New'
|
||||
---
|
||||
|
||||
## Usage
|
||||
@@ -180,7 +178,7 @@ defineShortcuts({
|
||||
</script>
|
||||
```
|
||||
|
||||
### Fullscreen :u-badge{label="New" class="ml-2 align-text-bottom !rounded-full" variant="subtle"}
|
||||
### Fullscreen
|
||||
|
||||
Set the `fullscreen` prop to `true` to enable it.
|
||||
|
||||
|
||||
Reference in New Issue
Block a user