### Install Django Cotton using pip Source: https://django-cotton.com/docs/quickstart This command installs the django-cotton package using pip. It's the first step in setting up Cotton in your Django project. ```bash pip install django-cotton ``` -------------------------------- ### Base Layout Example (HTML) Source: https://django-cotton.com/docs/layouts Defines a basic HTML structure for a layout, using `{{ slot }}` as a placeholder for content. This serves as the foundation for other layout variants. ```html ... {{ slot }} ``` -------------------------------- ### Example Component File Paths based on Naming Convention Source: https://django-cotton.com/docs/configuration Illustrates the expected file paths for a component named 'my-button' based on the COTTON_SNAKE_CASED_NAMES setting in Django's settings.py. ```text Component Usage: If COTTON_SNAKE_CASED_NAMES = True (default): Filepath: cotton/my_button.html If COTTON_SNAKE_CASED_NAMES = False: Filepath: cotton/my-button.html ``` -------------------------------- ### Example Usage of Alpine.js Tabs in HTML Source: https://django-cotton.com/docs/alpine-js Demonstrates how to use the `c-tabs` and `c-tab` components in standard HTML. The `c-tabs` component acts as a container, and each `c-tab` represents an individual tab with a `name` attribute and content. ```html

Tab 1 content

Tab 2 content

Tab 3 content

``` -------------------------------- ### Include Nested Components: HTML-like vs. Native Django Syntax Source: https://django-cotton.com/docs/usage-patterns Illustrates how to include nested components, particularly when using an 'index.html' file for default components within a folder. This example shows a 'card' component with a nested 'header'. ```html

...

``` ```django {% cotton card %} {% cotton card.header %}...{% endcotton %} {% endcotton %} ``` -------------------------------- ### Static Tab Component Prototype (HTML) Source: https://django-cotton.com/docs/alpine-js A static HTML and Tailwind CSS prototype for a tab component. This serves as a visual starting point before componentization and interactivity. ```html

Tab 1

Tab 2

Lorem ipsum ...

``` -------------------------------- ### Django Template After Componentization with Cotton Source: https://django-cotton.com/index Shows how Django Cotton simplifies template structure by using custom HTML-like tags for components. This approach decouples components, making them cleaner and reusable. It includes both HTML-like and native Django template syntax examples. ```html Description of the product ``` ```django {% cotton product img_url="icon.png" title="Item Title" price="$10" %} Description of the product {% endcotton %} ``` ```html

{{ slot }} {% if price %}

{% endif %}

``` -------------------------------- ### Use Input Component with Leading Icon (HTML) Source: https://django-cotton.com/docs/form-fields This HTML snippet demonstrates how to use the custom `` component and provide a leading icon using a slot. It shows examples for both a username and a password input field, each with a placeholder and a slot named `leading_icon` where an SVG icon can be placed. ```html

``` -------------------------------- ### Example Usage of Alpine.js Tabs in Django Templates Source: https://django-cotton.com/docs/alpine-js Shows how to implement the tab component using Django's template tags. The `{% cotton tabs %}` and `{% cotton tab %}` tags are used to structure the tabs and their content, similar to the HTML structure. ```django {% cotton tabs %} {% cotton tab name="Tab 1" %}Tab 1 content{% endcotton %} {% cotton tab name="Tab 2" %}Tab 2 content{% endcotton %} {% cotton tab name="Tab 3" %}Tab 3 content{% endcotton %} {% endcotton %} ``` -------------------------------- ### Component with Named Slots - HTML and Django Syntax Source: https://django-cotton.com/docs/components Explains the use of named slots (``) for passing HTML content into components. The `weather_card.html` example shows how to define and render named slots for `icon` and `label` in both HTML-like and native Django template syntax. -------------------------------- ### Use Cotton Icon Components in HTML and Django Templates Source: https://django-cotton.com/docs/icons Illustrates how to use pre-defined Cotton icon components within templates. It shows examples of applying CSS classes and overriding default attributes like `stroke_width` using both HTML-like and native Django template syntax. ```html

``` ```django {% cotton icons.plane class="size-20 text-red-500" %}{% endcotton %} {% cotton icons.plane class="size-20 text-teal-500" %}{% endcotton %} {% cotton icons.plane class="size-20 text-gray-500 animate-bounce" %}{% endcotton %} {% cotton icons.plane class="size-24 text-purple-500" stroke_width="10" %}{% endcotton %} ``` -------------------------------- ### Alpine.js Integration with Cotton Components Source: https://django-cotton.com/docs/components Cotton supports Alpine.js integration. `x-data` attributes are accessible as snake_case variables (e.g., `{{ x_data }}`) within the component. Shorthand `x-bind` (e.g., `:example`) requires escaping with `::` (e.g., `::example`) to avoid conflicts with Cotton's dynamic attributes. ```html

``` -------------------------------- ### Automatic Django Cotton Configuration Source: https://django-cotton.com/docs/quickstart This snippet shows how to automatically configure Django Cotton by adding 'django_cotton' to your INSTALLED_APPS in settings.py. This approach handles loader and templatetag setup automatically. ```python INSTALLED_APPS = [ 'django_cotton', ] ``` -------------------------------- ### Define Input Component with Icons (Django Native) Source: https://django-cotton.com/docs/form-fields This Django native template code achieves the same functionality as the HTML version, allowing input components to display leading and trailing icons. It uses the `{% cotton:vars %}` tag to define variables and conditionally renders the leading icon. The structure and styling remain consistent with the HTML example. ```django {% cotton:vars type="text" leading_icon trailing_icon %}

{% if leading_icon %}

{% endif %}

``` -------------------------------- ### Use Input Component with Leading Icon (Django Native) Source: https://django-cotton.com/docs/form-fields This Django native template code illustrates how to utilize the `{% cotton input %}` tag to create input fields with leading icons. It uses `{% cotton:slot %}` to define the content for the `leading_icon` slot, allowing for the inclusion of SVG icons or other HTML elements. Examples for username and password fields are provided. ```django {% cotton input name="text" name="username" placeholder="Username" %} {% cotton:slot leading_icon %} {% endcotton:slot %} {% endcotton %} {% cotton input type="password" name="password" name="password" placeholder="Password" %} {% cotton:slot leading_icon %} {% endcotton:slot %} {% endcotton %} ``` -------------------------------- ### Using Layouts: Login and Dashboard (HTML) Source: https://django-cotton.com/docs/layouts Illustrates how to apply the created layout variants ('guest' for login, 'app' for dashboard) to specific pages. It shows how to pass content and named slots. ```html

...

``` ```html

Dashboard ...

...

``` -------------------------------- ### Using Cotton Components in HTML Source: https://django-cotton.com/docs/components This demonstrates how to use Cotton components like `` and `` in HTML, including passing attributes and handling errors. ```html All good! Oh no! ``` ```html

``` -------------------------------- ### Using Layouts: Login and Dashboard (Django Native) Source: https://django-cotton.com/docs/layouts Provides the native Django template syntax for applying layouts and slots. This approach uses Cotton's template tags for including layouts and defining slot content. ```django {% cotton layouts.guest %}

...

{% endcotton %} ``` ```django {% cotton layouts.app %} {% cotton:slot sidebar %} Dashboard ... {% endcotton:slot %}

...

{% endcotton %} ``` -------------------------------- ### Layout Variants: Guest and App (HTML) Source: https://django-cotton.com/docs/layouts Demonstrates creating distinct layout variants, 'guest' and 'app', by extending a base layout. The 'app' layout includes additional sections for a sidebar. ```html {{ slot }} ``` ```html

``` -------------------------------- ### Setting Component State with `` Source: https://django-cotton.com/docs/components Explains how to set default values and manage component state using the `` tag. This is essential for controlling component behavior and appearance. ```html ``` -------------------------------- ### Include Cotton Components: HTML-like vs. Native Django Syntax Source: https://django-cotton.com/docs/usage-patterns Demonstrates how to include Cotton components using both HTML-like syntax and native Django template tags. The HTML-like syntax offers better IDE support, while native tags integrate directly with Django's templating engine. ```html Click me ``` ```django {% cotton button %} Click me {% endcotton %} ``` -------------------------------- ### Tabs Component Usage (HTML and Django Native) Source: https://django-cotton.com/docs/alpine-js Demonstrates how to use the `` and `` components in both HTML-like syntax and native Django template syntax. ```html

Content for tab 1

Content for tab 2

Content for tab 3

``` ```django {% cotton tabs %} {% cotton tab %}Content for tab 1{% endcotton %} {% cotton tab %}Content for tab 2{% endcotton %} {% cotton tab %}Content for tab 3{% endcotton %} {% endcotton %} ``` -------------------------------- ### Layout Variants: Guest and App (Django Native) Source: https://django-cotton.com/docs/layouts Shows the equivalent of creating layout variants using native Django template syntax with Cotton's template tags. This allows for dynamic content insertion. ```django {% cotton layouts.base %} {{ slot }} {% endcotton %} ``` ```django {% cotton layouts.base %}

{% endcotton %} ``` -------------------------------- ### Basic Component with Slot - HTML and Django Syntax Source: https://django-cotton.com/docs/components Demonstrates a basic Cotton component (`box.html`) that wraps its content using the `{{ slot }}` variable. This shows how to define a component and use it within a parent template in both HTML-like and native Django template syntax. ```html

``` ```html

Some content

``` ```django {% cotton box %}

Some content

{% endcotton %} ``` -------------------------------- ### Dynamic Component Loading with `:is` Source: https://django-cotton.com/docs/components Illustrates how to dynamically load components in Django Cotton using the `:is` attribute. This allows the component to be determined by a variable or template expression, enabling flexible UI rendering. ```html ``` -------------------------------- ### Django App Configuration for Cotton and Template Partials Source: https://django-cotton.com/docs/django-template-partials This snippet shows how to configure the INSTALLED_APPS setting in Django to include both django_cotton and django-template-partials using their respective SimpleAppConfig classes. This is crucial for older Django versions (< 6.0) when integrating these packages. ```python INSTALLED_APPS = [ "django_cotton.apps.SimpleAppConfig", "template_partials.apps.SimpleAppConfig", ] ``` -------------------------------- ### Django Template Before Componentization Source: https://django-cotton.com/index Demonstrates a traditional Django template structure with explicit blocks for content, image URL, title, and price, before adopting a component-based approach. This method is often verbose and tightly coupled. ```django {% extends "product_layout.html" %} {% block img_url %} icon.png {% endblock %} {% block title %} Item Title {% endblock %} {% block content %} Description of the product {% block price %} $10 {% endblock %} {% endblock %} ``` ```html

{% block content %}

{% block price %} {% endblock %}

{% endblock %}

``` -------------------------------- ### Django TEMPLATES Configuration for Cotton and Template Partials Loaders Source: https://django-cotton.com/docs/django-template-partials This configuration snippet demonstrates how to manually set up the TEMPLATES block in Django's settings. It specifies the necessary loaders for both django_cotton and django-template-partials, ensuring they work correctly with Django's cached loader system and filesystem loaders. This is required for Django versions < 6.0. ```python TEMPLATES = [ { "BACKEND": "django.template.backends.django.DjangoTemplates", "DIRS": [BASE_DIR / "templates"], "OPTIONS": { "loaders": [ ( "template_partials.loader.Loader", [ ( "django.template.loaders.cached.Loader", [ "django_cotton.cotton_loader.Loader", "django.template.loaders.filesystem.Loader", "django.template.loaders.app_directories.Loader", ], ) ], ) ], "context_processors": [ # no changes ], "builtins": [ "django_cotton.templatetags.cotton", "template_partials.templatetags.partials", ], }, }, ] ``` -------------------------------- ### Attribute Proxying with :attrs: HTML-like vs. Native Django Syntax Source: https://django-cotton.com/docs/usage-patterns Demonstrates the attribute proxying pattern using the ':attrs' dynamic attribute. This allows wrapper components to pass all attributes to an inner component, preserving their types. ```html Content passed to inner component ``` ```django {% cotton outer class="outer-class" :count="42" :enabled="False" %} Content passed to inner component {% endcotton %} ``` -------------------------------- ### Include Cotton Components with Attributes: HTML-like vs. Native Django Syntax Source: https://django-cotton.com/docs/usage-patterns Shows how to pass attributes to Cotton components using both HTML-like and native Django template syntax. This includes simple attributes like 'title' and more complex ones. ```html Click here ``` ```django {% cotton button title="Click me" %} Click here {% endcotton %} ``` -------------------------------- ### Attribute Rendering with `{{ attrs }}` Source: https://django-cotton.com/docs/components Shows how to render all passed attributes as HTML attributes using `{{ attrs }}`. This is useful for applying multiple attributes to an element efficiently. ```html

Content here

``` -------------------------------- ### Display SVG Icon in HTML and Django Templates Source: https://django-cotton.com/docs/icons Demonstrates how to render an SVG icon using Cotton's component syntax. It shows both the HTML-like syntax and the native Django template syntax for including icons and customizing their properties like stroke width. ```html ``` ```django {% cotton:vars stroke_width="30" %} ``` -------------------------------- ### Component with Attributes - HTML and Django Syntax Source: https://django-cotton.com/docs/components Illustrates how to add attributes to Cotton components for customization. The `weather.html` component uses `temperature` and `unit` attributes, passed as key-value pairs in both HTML-like and native Django template syntax. -------------------------------- ### Default Content Injection with `{{ slot }}` Source: https://django-cotton.com/docs/components Demonstrates the basic usage of `{{ slot }}` for injecting default content into a component. This is a fundamental concept for content customization in Django Cotton. ```html

``` -------------------------------- ### Dynamic Component Inclusion with `` (HTML) Source: https://django-cotton.com/docs/components The `` tag with an `is` attribute allows for dynamic component inclusion in HTML. The `is` attribute can be set using variables or expressions. ```html {% for icon in icons %} {% endfor %} ``` ```html

``` -------------------------------- ### Configure tabs.html for Alpine.js Tabs Source: https://django-cotton.com/docs/alpine-js Modifies the `tabs.html` component to integrate Alpine.js for tab functionality. It uses `x-data` to initialize the component's state, `$watch` to set the initial active tab, and `x-for` to dynamically render tab navigation items. The `:class` binding conditionally applies styling based on the `currentTab` state. ```html

``` ```html

``` -------------------------------- ### Pass Options Array to Select Component Source: https://django-cotton.com/docs/components Illustrates passing an array of options to a select component, enabling dynamic population of dropdown choices. The options are then iterated within the component's template. ```html ``` ```django {% cotton select :options="['no', 'yes', 'maybe']" %}{% endcotton %} ``` ```html ``` -------------------------------- ### Configure Component Naming Convention (Django Settings) Source: https://django-cotton.com/docs/configuration Demonstrates how to configure Django Cotton to use snake_cased or hyphenated filenames for components. The default is True, which enables snake_cased names. ```python settings.py: # Default behavior (snake_cased names) COTTON_SNAKE_CASED_NAMES = True # To allow hyphenated filenames COTTON_SNAKE_CASED_NAMES = False ``` -------------------------------- ### Create Reusable Form Input Field (HTML & Django) Source: https://django-cotton.com/docs/form-fields Demonstrates how to create a reusable form input component using Django Cotton. It shows the component definition in `cotton/input.html` and its usage in `form_view.html` for both HTML-like and native Django template syntax. ```html ``` ```html ``` ```html

``` ```django {% cotton input name="shoe_size" placeholder="Shoe Size" %}{% endcotton %} {% cotton input name="country" placeholder="Country" %}{% endcotton %} {% cotton input name="age" placeholder="Age" %}{% endcotton %} ``` -------------------------------- ### Dynamic Attributes (Quoteless) - HTML and Django Syntax Source: https://django-cotton.com/docs/components Demonstrates the quoteless syntax for dynamic attributes in Cotton components. This syntax is suitable for simple literals and variables without spaces, shown in both HTML-like and native Django template formats. -------------------------------- ### Pass All Attributes to Input Component using {{ attrs }} Source: https://django-cotton.com/docs/components Demonstrates how to pass all attributes from the parent to an HTML element within a Cotton component using the `{{ attrs }}` directive. This is powerful for form inputs. ```html

``` ```django {% cotton input name="first_name" placeholder="First name" %}{% endcotton %} {% cotton input name="last_name" placeholder="Last name" value="Smith" readonly %}{% endcotton %} ``` ```html ``` -------------------------------- ### Custom Django Cotton Configuration Source: https://django-cotton.com/docs/quickstart This snippet demonstrates a custom configuration for Django Cotton in settings.py. It uses SimpleAppConfig and explicitly defines loaders and builtins for more control over template loading and tags. ```python INSTALLED_APPS = [ 'django_cotton.apps.SimpleAppConfig', ] TEMPLATES = [ { "BACKEND": "django.template.backends.django.DjangoTemplates", ... "OPTIONS": { "loaders": [( "django.template.loaders.cached.Loader", [ "django_cotton.cotton_loader.Loader", "django.template.loaders.filesystem.Loader", "django.template.loaders.app_directories.Loader", ], )], "builtins": [ "django_cotton.templatetags.cotton" ], } } ] ``` -------------------------------- ### Dynamic Component Inclusion with `{% cotton component %}` (Django Template) Source: https://django-cotton.com/docs/components This demonstrates dynamic component inclusion in Django templates using the `{% cotton component %}` tag. The `is` attribute can be bound to variables or constructed using expressions. ```django {% for icon in icons %} {% cotton component is="icons.{{ icon }}" %}{% endcotton %} {% endfor %} ``` ```django {% cotton component :is="icon_name" %}{% endcotton %} {% cotton component is="icon_{{ icon_name }}" %}{% endcotton %} ``` -------------------------------- ### Pass Objects from Context to Cotton Component Source: https://django-cotton.com/docs/components Demonstrates how to pass an object from the parent's context to a child Cotton component. The child component can then access properties of the passed object. ```html ``` ```django {% cotton weather :today="today" %}{% endcotton %} ``` ```html

It's {{ today.temperature }}^o{{ today.unit }} and the condition is {{ today.condition }}.

``` -------------------------------- ### Pass Lists to Cotton Component Source: https://django-cotton.com/docs/components Demonstrates passing a Python list as a prop to a Cotton component. This allows components to receive collections of items for iteration or display. ```html ``` ```django {% cotton mycomp :items="['item1','item2','item3']" %}{% endcotton %} ``` -------------------------------- ### Include Card Component using Native Django Syntax Source: https://django-cotton.com/docs/quickstart This snippet shows how to include the 'card' component in a Django template using the native `{% cotton %}` tag. It passes attributes and content similarly to the HTML-like syntax. ```django {% cotton card title="Trees" url="trees" %} We have the best trees {% endcotton %} {% cotton card title="Spades" url="spades" %} The best spades in the land {% endcotton %} ``` -------------------------------- ### Using Cotton Components in Django Templates Source: https://django-cotton.com/docs/components This shows the equivalent usage of Cotton components in Django templates using the `{% cotton %}` tag, including attribute passing and conditional logic. ```django {% cotton alert %}All good!{% endcotton %} {% cotton alert type="danger" %}Oh no!{% endcotton %} ``` ```django {% cotton input-group label="First name" placeholder="First name" :errors="errors.first_name" %}{% endcotton %} {% cotton input-group label="Last name" placeholder="Last name" :errors="errors.last_name" %}{% endcotton %} ``` -------------------------------- ### Define Input Component with Icons (HTML) Source: https://django-cotton.com/docs/form-fields This HTML snippet defines a custom input component that supports leading and trailing icons. It uses a custom element `` to declare variables and conditionally renders the leading icon based on the `leading_icon` variable. The input field itself is styled with basic borders and shadows. ```html

{% if leading_icon %}

{% endif %}

``` -------------------------------- ### Register tab.html Component with Alpine.js Source: https://django-cotton.com/docs/alpine-js Modifies the `tab.html` component to ensure it is registered with Alpine.js whenever it's added to the DOM. It uses `x-data` for component initialization and `x-init` to call the `register` function with the tab's `name`. ```html

``` -------------------------------- ### Include Card Component using HTML-like Syntax Source: https://django-cotton.com/docs/quickstart This snippet demonstrates how to include the 'card' component in a Django template using an HTML-like custom tag ``. It passes attributes like 'title' and 'url' and provides content for the 'slot'. ```html We have the best trees The best spades in the land ``` -------------------------------- ### Dynamic Attributes (Colon Prefix) - HTML and Django Syntax Source: https://django-cotton.com/docs/components Illustrates the colon prefix syntax (`:attr="value"`) for dynamic attributes in Cotton components. This syntax is required for complex expressions, including those with spaces or quotes, presented in both HTML-like and native Django template formats. -------------------------------- ### Pass Dictionaries to Cotton Component Source: https://django-cotton.com/docs/components Shows how to pass a Python dictionary as a prop to a Cotton component. Dictionaries are useful for passing structured data with key-value pairs. ```html ``` ```django {% cotton mycomp :mydict="{'name': 'Thom', 'products': [1,2]}" %}{% endcotton %} ``` -------------------------------- ### Pass Template Expressions to Cotton Component Props Source: https://django-cotton.com/docs/components Demonstrates passing values generated by template expressions as props to a Cotton component. This allows for dynamic prop values based on template logic. ```html ``` ```django {% cotton mycomp :slides="['{{ image1 }}', '{{ image2 }}']" %}{% endcotton %} ``` -------------------------------- ### Define Local Variables with `` in HTML Source: https://django-cotton.com/docs/components The `` tag allows defining local variables within a component, providing default configurations and reducing repetitive attribute declarations. These variables are excluded from `{{ attrs }}`. ```html

``` ```html {{ label }} {% if errors %} {% for error in errors %} {{ error }} {% endfor %} {% endif %} ``` -------------------------------- ### Merge Attributes with :attrs in Cotton Component Source: https://django-cotton.com/docs/components Explains how to merge a dictionary of attributes into a Cotton component using the special `:attrs` prop. This is useful for applying collections of attributes dynamically. ```html ``` ```django context = { 'widget_attrs': { 'placeholder': 'Enter your name', 'data-validate': 'true', 'size': '40' } }

``` ```django context = { 'widget_attrs': { 'placeholder': 'Enter your name', 'data-validate': 'true', 'size': '40' } } {% cotton input :attrs="widget_attrs" required %}{% endcotton %} ``` -------------------------------- ### Inner Component Receiving Proxied Attributes Source: https://django-cotton.com/docs/usage-patterns Shows the inner component that receives attributes proxied from a wrapper component using the ':attrs' pattern. It demonstrates how to access these attributes within the inner component's template. ```html {{ slot }} ``` -------------------------------- ### Accessing Proxied Attributes in Inner Component Source: https://django-cotton.com/docs/usage-patterns Illustrates how attributes passed via ':attrs' are accessed within the inner component's template. This includes accessing class, count, enabled, and the slot content. ```django {{ class }} {{ count }} {{ enabled }} {{ slot }} ``` -------------------------------- ### Alpine.js Data Component for Tabs Source: https://django-cotton.com/docs/alpine-js An Alpine.js data component to manage tab state, including registering tabs, tracking the current tab, and checking if a tab is active. This script should be placed globally. ```javascript document.addEventListener('alpine:init', () => { Alpine.data('tabs', () => ({ tabs: [], currentTab: null, isCurrent(tab) { return this.currentTab === tab }, register(name) { this.tabs.push(name) } })) }) ``` -------------------------------- ### Cotton Tab Component Structure (HTML) Source: https://django-cotton.com/docs/alpine-js The HTML structure for the reusable `` component in Django Cotton. It acts as a wrapper for individual tab content. ```html

``` -------------------------------- ### Pass Python Integers and Floats to Cotton Component Source: https://django-cotton.com/docs/components Shows how to pass Python numeric types (integers and floats) as props to a Cotton component. This is useful for numerical configurations or values. ```html ``` ```django {% cotton mycomp :prop="1" %}{% endcotton %} ``` -------------------------------- ### Include Card Component in Django View Source: https://django-cotton.com/docs/quickstart This Python code snippet shows a basic Django view function that renders a template. It's a prerequisite for including components within that template. ```python def dashboard_view(request): return render(request, "dashboard.html") ``` -------------------------------- ### Pass None Type to Cotton Component Source: https://django-cotton.com/docs/components Illustrates passing the Python `None` type to a Cotton component. This is often used to represent the absence of a value or a default state. ```html ``` ```django {% cotton mycomp :prop="None" %}{% endcotton %} ``` -------------------------------- ### Cotton Tabs Component Structure (HTML) Source: https://django-cotton.com/docs/alpine-js The HTML structure for the reusable `` component in Django Cotton. It defines the main container and a slot for tab content. ```html

``` -------------------------------- ### Define Local Variables with `{% cotton:vars %}` in Django Templates Source: https://django-cotton.com/docs/components The `{% cotton:vars %}` template tag provides similar functionality to ``, allowing local variable definition within Django templates for component configuration. It also excludes these variables from `{{ attrs }}`. ```django {% cotton:vars type="success" %}

``` ```django {% cotton:vars label errors %} {{ label }} {% if errors %} {% for error in errors %} {{ error }} {% endfor %} {% endif %} ``` -------------------------------- ### Define a Card Component in Django Template Source: https://django-cotton.com/docs/quickstart This code defines a reusable 'card' component in a Django template file (templates/cotton/card.html). It uses template variables like 'title', 'slot', and 'url' to render dynamic content. ```html

``` -------------------------------- ### Handling Boolean Attributes in Cotton Components (HTML) Source: https://django-cotton.com/docs/components Cotton supports boolean attributes, where simply providing the attribute name without a value passes `True` to the component. This is demonstrated for an `` element. ```html {% if required is True %} * {% endif %} ``` -------------------------------- ### Pass Dynamic Boolean from Template Expression to Cotton Component Source: https://django-cotton.com/docs/components Shows how to pass a dynamically determined boolean value (e.g., from an `if` statement) to a Cotton component prop. This enables conditional component behavior. ```html ``` ```django {% cotton mycomp :is_highlighted="{% if important %}True{% endif %}" %}{% endcotton %} ``` -------------------------------- ### Handling Boolean Attributes in Cotton Components (Django Template) Source: https://django-cotton.com/docs/components This shows how to use boolean attributes with Cotton components in Django templates using the `{% cotton %}` tag, passing `required` as a boolean. ```django {% cotton input name="telephone" required %}{% endcotton %} ``` -------------------------------- ### Pass Parent Variable to Cotton Component Source: https://django-cotton.com/docs/components Illustrates passing a variable defined in the parent scope to a child Cotton component. This enables data sharing between components. ```html ``` ```django {% cotton mycomp :product="product" %}{% endcotton %} ``` -------------------------------- ### Add Validation State to Form Input (HTML & Django) Source: https://django-cotton.com/docs/form-fields Shows how to add validation error display to a reusable form input component in Django Cotton. It includes conditional styling for the input border and displays error messages if they exist, using both HTML-like and native Django template syntax. ```html {% if errors %}

{% endif %} ``` ```django {% cotton:vars type="text" errors %} {% if errors %}

{% endif %} ``` ```html ``` ```django {% cotton input name="surname" placeholder="Surname" :errors="form.surname.errors" %}{% endcotton %} ``` -------------------------------- ### Change Input Type with Django Cotton (HTML & Django) Source: https://django-cotton.com/docs/form-fields Illustrates how to change the input type for a reusable form field using Django Cotton's `` component. This allows setting a default type and excluding it from attributes, enabling different input types like email, password, and number. ```html ``` ```django {% cotton:vars type="text" %} ``` ```html

``` ```django {% cotton input name="some_text" placeholder="Just a text field" %}{% endcotton %} {% cotton input type="email" name="email" placeholder="Email" %}{% endcotton %} {% cotton input type="password" name="password" placeholder="Password" %}{% endcotton %} {% cotton input type="number" name="Count" placeholder="Password" %}{% endcotton %} ``` === COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.

{{ title }}

{% block title %} {% endblock %}

{{ title }}