Mercedes Pattern Library

Filter Container 

<div class="m-filter-container m-filter-container--active">

    <div class="m-filter-container__wrapper">

        <div class="m-filter-container__col">

            <div class="m-filter-container__child m-filter-container__child-title">
                Col 1
            </div>

            <div class="m-filter-container__child">

                <label class="a-checkbox " for="field-id-5680">
    <input type="checkbox"   id="field-id-5680">
    <span></span>
    
    	<div class="ty-body">
    		label
    	</div>
    
</label>

            </div>

            <div class="m-filter-container__child">

                <label class="a-checkbox " for="field-id-4205">
    <input type="checkbox"   id="field-id-4205">
    <span></span>
    
    	<div class="ty-body">
    		label
    	</div>
    
</label>

            </div>

            <div class="m-filter-container__child">

                <label class="a-checkbox " for="field-id-5048">
    <input type="checkbox"   id="field-id-5048">
    <span></span>
    
    	<div class="ty-body">
    		label
    	</div>
    
</label>

            </div>

        </div>

        <div class="m-filter-container__col">

            <div class="m-filter-container__child m-filter-container__child-title">
                Col 2
            </div>

            <div class="m-filter-container__child">

                <label class="a-checkbox " for="field-id-3198">
    <input type="checkbox"   id="field-id-3198">
    <span></span>
    
    	<div class="ty-body">
    		label
    	</div>
    
</label>

            </div>

            <div class="m-filter-container__child">

                <label class="a-checkbox " for="field-id-8468">
    <input type="checkbox"   id="field-id-8468">
    <span></span>
    
    	<div class="ty-body">
    		label
    	</div>
    
</label>

            </div>

            <div class="m-filter-container__child">

                <label class="a-checkbox " for="field-id-6843">
    <input type="checkbox"   id="field-id-6843">
    <span></span>
    
    	<div class="ty-body">
    		label
    	</div>
    
</label>

            </div>

        </div>

        <div class="m-filter-container__col">

            <div class="m-filter-container__child m-filter-container__child-title">
                Col 3
            </div>

            <div class="m-filter-container__child">

                <label class="a-checkbox " for="field-id-7100">
    <input type="checkbox"   id="field-id-7100">
    <span></span>
    
    	<div class="ty-body">
    		label
    	</div>
    
</label>

            </div>

            <div class="m-filter-container__child">

                <label class="a-checkbox " for="field-id-9938">
    <input type="checkbox"   id="field-id-9938">
    <span></span>
    
    	<div class="ty-body">
    		label
    	</div>
    
</label>

            </div>

            <div class="m-filter-container__child">

                <label class="a-checkbox " for="field-id-544">
    <input type="checkbox"   id="field-id-544">
    <span></span>
    
    	<div class="ty-body">
    		label
    	</div>
    
</label>

            </div>

        </div>

        <div class="m-filter-container__col">

            <div class="m-filter-container__child m-filter-container__child-title">
                Col 4
            </div>

            <div class="m-filter-container__child">

                <label class="a-checkbox " for="field-id-8684">
    <input type="checkbox"   id="field-id-8684">
    <span></span>
    
    	<div class="ty-body">
    		label
    	</div>
    
</label>

            </div>

            <div class="m-filter-container__child">

                <label class="a-checkbox " for="field-id-568">
    <input type="checkbox"   id="field-id-568">
    <span></span>
    
    	<div class="ty-body">
    		label
    	</div>
    
</label>

            </div>

        </div>

    </div>

    <div class="m-filter-container__controls">
        <div class="m-footer-controls">

            <div class="m-footer-controls__child">

                <div class="a-button">
                    Azzera
                </div>

                <div class="a-button  a-button--azure">
                    Conferma
                </div>

            </div>

        </div>

    </div>

</div>
 
<div class="m-filter-container {% if state == "active" %}m-filter-container--active{% endif %}">

    <div class="m-filter-container__wrapper">
        {% for column in columns %}
            <div class="m-filter-container__col">
                {% if column.title %}
                <div class="m-filter-container__child m-filter-container__child-title">
                    {{ column.title }}
                </div>
                {% endif %}
                {% for item in column.atoms %}
                    <div class="m-filter-container__child">
                        {% render "@" + item.atom, item %}
                    </div>
                {% endfor %}
            </div>
        {% endfor %}
    </div>

    <div class="m-filter-container__controls">
        {% render '@footer-controls',  {
            "right": [
                {
                    "atom": "buttons",
                    "value": "Azzera"
                },
                {
                    "atom": "buttons--azure",
                    "value": "Conferma"
                }
            ]
        } %}
    </div>

</div>
 
{
  "state": "active",
  "columns": [
    {
      "title": "Col 1",
      "atoms": [
        {
          "atom": "checkbox",
          "label": "label"
        },
        {
          "atom": "checkbox",
          "label": "label"
        },
        {
          "atom": "checkbox",
          "label": "label"
        }
      ]
    },
    {
      "title": "Col 2",
      "atoms": [
        {
          "atom": "checkbox",
          "label": "label"
        },
        {
          "atom": "checkbox",
          "label": "label"
        },
        {
          "atom": "checkbox",
          "label": "label"
        }
      ]
    },
    {
      "title": "Col 3",
      "atoms": [
        {
          "atom": "checkbox",
          "label": "label"
        },
        {
          "atom": "checkbox",
          "label": "label"
        },
        {
          "atom": "checkbox",
          "label": "label"
        }
      ]
    },
    {
      "title": "Col 4",
      "atoms": [
        {
          "atom": "checkbox",
          "label": "label"
        },
        {
          "atom": "checkbox",
          "label": "label"
        }
      ]
    }
  ]
}

There are no notes for this item.