Nuxt•3w ago

What is base, padding and constrained in Container props?

In the docs I cannot understand what are the meaning of these props? How can I change them? If I set padding 0, I still have a default padding

5 Replies

kapa.ai•3w ago

Hi @Wander. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Based on the knowledge sources provided, I can answer your question about the Container component props in Nuxt UI. The Container component has three main props related to styling: base, padding, and constrained. These are part of the UI configuration for the Container component. Here's what they mean: 1. base: This prop sets the base CSS classes for the container. By default, it's set to 'mx-auto', which centers the container horizontally. 2. padding: This prop adds padding to the container. The default value is 'px-4 sm:px-6 lg:px-8', which means it has horizontal padding of 16px (1rem) on all screen sizes, 24px (1.5rem) on small screens and above, and 32px (2rem) on large screens and above. 3. constrained: This prop sets a maximum width for the container. The default value is 'max-w-7xl', which limits the container's width to 80rem (1280px). These default values are defined in the Container component's configuration, as shown in the Container documentation (https://ui.nuxt.com/components/container#config):

{
  base: 'mx-auto',
  padding: 'px-4 sm:px-6 lg:px-8',
  constrained: 'max-w-7xl'
}

{
  base: 'mx-auto',
  padding: 'px-4 sm:px-6 lg:px-8',
  constrained: 'max-w-7xl'
}

To change these props, you can pass new values when using the Container component. For example:

<UContainer :ui="{ base: 'mx-0', padding: 'p-0', constrained: 'max-w-full' }">
  <!-- Your content here -->
</UContainer>

<UContainer :ui="{ base: 'mx-0', padding: 'p-0', constrained: 'max-w-full' }">
  <!-- Your content here -->
</UContainer>

However, it's important to note that if you're still seeing padding after setting it to 0, it might be because the default configuration is being applied. To completely override the default padding, you may need to use the ui prop to set a new configuration:

<UContainer :ui="{ padding: 'p-0' }">
  <!-- Your content here -->
</UContainer>

<UContainer :ui="{ padding: 'p-0' }">
  <!-- Your content here -->
</UContainer>

This should remove all padding from the container. If you're still experiencing issues, you might want to check if there are any global styles or other components affecting the layout. Remember that these UI configurations use Tailwind CSS classes, so you can use any valid Tailwind class to customize the container's appearance. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•3w ago

<@280249146542129153> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

WanderOP•3w ago

@kapa.ai thanks!

kapa.ai•3w ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- You're welcome! I'm glad I could help you understand the Container component props in Nuxt UI. If you have any more questions about Nuxt, feel free to ask. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•3w ago

<@280249146542129153> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Gaming

Programming

What is base, padding and constrained in Container props?