Wrappers

Wrapper components are used to provide consistent structural patterns for different types of content and UI elements. They typically don't have visible output themselves but provide the structural foundation for other components. These components work in conjunction with their content counterparts - for example, accordion_wrapper works with accordion components.

Accordion Wrapper

The accordion_wrapper component provides the structural container for accordion elements. It establishes the base styling and behavior for accordion groups, ensuring consistent appearance and interaction patterns across different themes. This wrapper works in conjunction with the accordion component to create collapsible content sections.

Parameter	Type	Default	Description
content	string	-	The content to be wrapped, typically consisting of multiple accordion components.

Relationship

The accordion_wrapper component is designed to work with accordion components. While the accordion component defines the individual collapsible sections, the wrapper provides the container that holds multiple accordions together.

Usage Example

<!-- Basic accordion wrapper -->
{% call ui.util.call(ui.accordion_wrapper) %}
    {{ ui.accordion("First section content", title="First Section") }}
    {{ ui.accordion("Second section content", title="Second Section") }}
{% endcall %}

Account Navigation Wrapper

The account_nav_wrapper component creates a consistent container for account-related navigation elements. It ensures that user account navigation maintains a uniform appearance and structure across different themes and pages. This component typically wraps account_nav_item elements to provide proper spacing and styling.

Usage Example

<!-- Basic account navigation wrapper -->
{% call ui.util.call(ui.account_nav_wrapper) %}
    {{ ui.account_nav_item("Profile", href="/profile") }}
    {{ ui.account_nav_item("Settings", href="/settings") }}
{% endcall %}

Activity Wrapper

The [activity_list][activity-list] component provides a structural container for activity stream content. It ensures that activity entries are properly formatted and styled consistently. This wrapper works with the activity component to display user actions and system events in a structured format.

Usage Example

<!-- Basic activity wrapper -->
{% call ui.util.call(ui.activity_list) %}
    {{ ui.activity("User created a dataset", activity=activity_data) }}
    {{ ui.activity("User updated profile", activity=activity_data2) }}
{% endcall %}

Breadcrumb Wrapper

The breadcrumb_wrapper component creates a container for breadcrumb navigation elements. It ensures proper spacing and styling for breadcrumb trails, working in conjunction with breadcrumb component to create a cohesive navigation experience.

Usage Example

<!-- Basic breadcrumb wrapper -->
{% call ui.util.call(ui.breadcrumb_wrapper) %}
    {{ ui.breadcrumb("Home", href="/", initial=True) }}
    {{ ui.breadcrumb("Datasets", href="/datasets") }}
    {{ ui.breadcrumb("Dataset", href="/dataset") }}
{% endcall %}

Content Action Wrapper

The content_action_wrapper component provides a container for content-specific action buttons and links. It ensures that actions related to specific content items (like edit, delete, or share buttons) are consistently positioned and styled. This component typically wraps content_action elements.

Usage Example

<!-- Basic content action wrapper -->
{% call ui.util.call(ui.content_action_wrapper) %}
    {{ ui.content_action("Edit", href="/edit") }}
    {{ ui.content_action("Delete", href="/delete") }}
{% endcall %}

Content Navigation Wrapper

The content_nav_wrapper component creates a container for navigation elements related to specific content. It provides consistent styling and positioning for content navigation, typically wrapping content_nav_item components to maintain a uniform appearance.

Usage Example

<!-- Basic content navigation wrapper -->
{% call ui.util.call(ui.content_nav_wrapper) %}
    {{ ui.content_nav_item("Info", href="/info") }}
    {{ ui.content_nav_item("Resources", href="/resources") }}
{% endcall %}

Facet Wrapper

The [facet_list][facet-list] component creates a container for facet filter elements, which are crucial for search and filtering functionality in CKAN. It works with facet and facet_section components to provide a consistent interface for filtering datasets and other content.

Relationship

The [facet_list][facet-list] component is closely related to facet and facet_section components. While the wrapper provides the container structure, the facet components provide the actual filter controls and display elements.

Usage Example

<!-- Basic facet wrapper -->
{% call ui.util.call(ui.facet_list) %}
    {{ ui.facet("Government", key="org", value="gov", count=15) }}
    {{ ui.facet("CSV", key="format", value="csv", count=8, active=true) }}
{% endcall %}

Group Wrapper

The [group_list][group-list] component provides a structural container for group-related content. It ensures that group information, listings, and related elements maintain consistent styling and layout. This wrapper works with group components to display organizational structures within CKAN.

Usage Example

<!-- Basic group wrapper -->
{% call ui.util.call(ui.group_list) %}
    {{ ui.group(group={"name": "test-group", "title": "Test Group", "description": "A test group", "type": "group"}) }}
{% endcall %}

Main Navigation Wrapper

The main_nav_wrapper component creates a container for the primary site navigation. It ensures that the main navigation maintains consistent styling and behavior across different pages and themes. This component typically wraps main_nav_item elements.

Usage Example

<!-- Basic main navigation wrapper -->
{% call ui.util.call(ui.main_nav_wrapper) %}
    {{ ui.main_nav_item("Datasets", href="/datasets") }}
    {{ ui.main_nav_item("Organizations", href="/organizations") }}
{% endcall %}

Navigation Wrapper

The nav_wrapper component serves as a general container for navigation elements. It provides the structural foundation for various navigation patterns and works with different navigation item components to ensure consistency.

Usage Example

<!-- Basic navigation wrapper -->
{% call ui.util.call(ui.nav_wrapper) %}
    {{ ui.nav_item("Home", href="/") }}
    {{ ui.nav_item("About", href="/about") }}
{% endcall %}

Organization Wrapper

The [organization_list][organization-list] component creates a container for organization-related content. It works with organization components to provide consistent display of organizational information, members, and related content within CKAN.

Usage Example

<!-- Basic organization wrapper -->
{% call ui.util.call(ui.organization_list) %}
    {{ ui.organization(organization={"name": "test-organization", "title": "Test Organization", "description": "A test organization", "type": "organization"}) }}
{% endcall %}

Package Wrapper

The [package_list][package-list] component provides a structural container for package (dataset) related content. It ensures that dataset information, resources, and related elements maintain consistent styling and layout. This wrapper works with package components to display dataset information effectively.

Usage Example

<!-- Basic package wrapper -->
{% call ui.util.call(ui.package_list) %}
    {{ ui.package(package={"name": "test-dataset", "title": "Test Dataset", "description": "A test dataset", "type": "dataset"}) }}
{% endcall %}

Page Action Wrapper

The page_action_wrapper component creates a container for page-specific action elements. It ensures that actions like "Add Dataset" or "Create Group" are consistently positioned and styled across different pages. This component typically wraps page_action elements.

Usage Example

<!-- Basic page action wrapper -->
{% call ui.util.call(ui.page_action_wrapper) %}
    {{ ui.page_action("Add Dataset", href="/dataset/new") }}
{% endcall %}

Resource Wrapper

The [resource_list][resource-list] component creates a container for resource-related content. It ensures that resource information, download links, and related elements maintain consistent styling and layout. This wrapper works with resource components to display resource information effectively.

Usage Example

<!-- Basic resource wrapper -->
{% call ui.util.call(ui.resource_list) %}
    {{ ui.resource(resource={"name": "test-group", "id": "test-resource", "description": "A test group", "package_id": "test-package"}) }}
{% endcall %}

Tab Wrapper

The tab_wrapper component provides the structural container for tab-based interfaces. It works with tab components to create consistent tab navigation and content switching experiences across different themes.

Relationship

The tab_wrapper component is designed to work with tab components. The wrapper provides the container structure, while the handles provide the interactive elements for switching between tabs.

Usage Example

<!-- Basic tab wrapper -->
{% call ui.util.call(ui.tab_wrapper) %}
    {{ ui.tab("Tab 1", href="/tab1") }}
    {{ ui.tab("Tab 2", href="/tab2", active=True) }}
{% endcall %}

User Wrapper

The [user_list][user-list] component creates a container for user-related content. It ensures that user profiles, activity, and related information maintain consistent styling and layout. This wrapper works with user components to display user information effectively.

Usage Example

<!-- Basic user wrapper -->
{% call ui.util.call(ui.user_list) %}
    {{ ui.user(user={"name": "test-user", "fullname": "Test User", "id": "test-user"}) }}
{% endcall %}