Add segmented control component (#2087)

* Add segmented control component and update related files

* Implement segmented navigation component and update related styles

* Create grumpy-flowers-act.md

* Refactor .gitignore and move playground pages to preview directory

* Enhance segmented navigation with hover state and class support

* Refactor segmented control layout for improved responsiveness and alignment

preview/pages/_includes/layout/page-header.html

@@ -3,7 +3,7 @@
 {% assign actions = page-header-actions | default: layout.page-header-actions %}
 {% assign pretitle = page-header-pretitle | default: layout.page-header-pretitle %}
 {% assign class = page-header-class | default: layout.page-header-class %}
-{% assign icon = page-header-icon | default: layout.page-header-icon %}
+{% assign page-icon = page-header-icon | default: layout.page-header-icon %}
 
 {% if page-header-file %}
 	{% include "layout/headers/{{ page-header-file }}.html" %}
@@ -20,8 +20,8 @@
 				</div>
 				{% endif %}
 				<h2 class="page-title">
-					{% if icon %}
-						{% include "ui/icon.html" icon=icon %}
+					{% if page-icon %}
+						{% include "ui/icon.html" icon=page-icon %}
 					{% endif %}
 					{{ page-header }}
 				</h2>

preview/pages/_includes/ui/icon.html

@@ -23,7 +23,7 @@
 
 {% if site.useIconfont %}
 	<i class="icon ti ti-{{ icon-name }}{% if include.color %} {{ include.color }}{% endif %}{% if include.class %} {{ include.class }}{% endif %}"></i>
-{% else %}
+{% elsif icons[icon-name] %}
 	<!-- Download SVG icon from http://tabler.io/icons/icon/{{ icon-name }} -->
 	{% assign svg-icon = icons[icon-name].svg[icon-type] | default: '' %}
 	{% assign svg-icon = svg-icon | replace: '<path stroke="none" d="M0 0h24v24H0z" fill="none"/>', '' %}

preview/pages/_includes/ui/nav-segmented.html

@@ -0,0 +1,28 @@
+{% assign segmented-items = include.items | default: "" | split: "," %}
+{% assign segmented-icons = include.icons | default: "" | split: "," %}
+{% assign segmented-disabled = include.disabled | default: "" | split: "," %}
+{% assign segmented-hover = include.hover | default: "" %}
+
+{% assign segmented-items-count = segmented-items | size %}
+{% assign segmented-icons-count = segmented-icons | size %}
+{% assign segmented-all-count = segmented-items-count %}
+
+{% if segmented-icons-count > segmented-all-count %}{% assign segmented-all-count = segmented-icons-count %}{% endif %}
+
+<nav class="nav nav-segmented{% if include.vertical %} nav-segmented-vertical{% endif %}{% if include.size %} nav-{{ include.size }}{% endif %}{% if include.full-width %} w-100{% endif %}{% if include.class %} {{ include.class }}{% endif %}" role="tablist">
+	{% for i in (1..segmented-all-count) %}
+		{% assign index = forloop.index | append: "" %}
+		{% assign disabled = segmented-disabled | contains: index %}
+
+		{% if include.name %}<input type="radio" class="nav-link-input" name="segmented" id="segmented-{{include.name }}-{{ index }}" {% if forloop.index == 1 %}checked{% endif %} />{% endif %}
+
+		<{% if include.name %}label for="segmented-{{include.name }}-{{ index }}"{% else %}button{% endif %} class="nav-link{% if forloop.index == 1 %}{% unless include.name %} active{% endunless %}{% endif %}{% if disabled %} disabled{% endif %}{% if segmented-hover == index %} hover{% endif %}" role="tab"{% unless include.name %} data-bs-toggle="tab"{% endunless %} aria-selected="{% if forloop.index == 1 %}true{% else %}false{% endif %}" {% if disabled %} aria-disabled="true"{% endif %}{% if forloop.index == 1 %} aria-current="page"{% endif %}>
+			{% if segmented-icons[forloop.index0] %}
+				{% include "ui/icon.html" icon=segmented-icons[forloop.index0] class="nav-link-icon" %}
+			{% endif %}
+			{% if segmented-items[forloop.index0] %}
+				{{ segmented-items[forloop.index0] }}
+			{% endif %}
+		</{% if include.name %}label{% else %}button{% endif %}>
+	{% endfor %}
+</nav>

preview/pages/_includes/ui/trending.html

@@ -1,15 +1,15 @@
 {% assign value = include.value | default: 25 %}
 {% if value > 0 %}
-   {% assign color = 'green' %}
-   {% assign icon = 'trending-up' %}
+   {% assign trending-color = 'green' %}
+   {% assign trending-icon = 'trending-up' %}
 {% elsif value == 0 %}
-   {% assign color = 'yellow' %}
-   {% assign icon = 'minus' %}
+   {% assign trending-color = 'yellow' %}
+   {% assign trending-icon = 'minus' %}
 {% else %}
-   {% assign color = 'red' %}
-   {% assign icon = 'trending-down' %}
+   {% assign trending-color = 'red' %}
+   {% assign trending-icon = 'trending-down' %}
 {% endif %}
 
-<span class="text-{{ color }} d-inline-flex align-items-center lh-1{% if include.class %} {{ include.class }}{% endif %}">
-   {{ value }}% {% include "ui/icon.html" icon=icon class="ms-1" %}
+<span class="text-{{ trending-color }} d-inline-flex align-items-center lh-1{% if include.class %} {{ include.class }}{% endif %}">
+   {{ value }}% {% include "ui/icon.html" icon=trending-icon class="ms-1" %}
 </span>