Resonance Style & Themable Components

Button Example 

<div class="btn-group btn-group-sm" role="group" aria-label="Solid button group">
    <button type="button" class="btn btn-translucent-primary">left</button>
    <button type="button" class="btn btn-translucent-primary">middle</button>
    <button type="button" class="btn btn-translucent-primary">right</button>
</div>
<div class="btn-group " role="group" aria-label="Solid button group">
    <button type="button" class="btn btn-translucent-primary">left</button>
    <button type="button" class="btn btn-translucent-primary">middle</button>
    <button type="button" class="btn btn-translucent-primary">right</button>
</div>
<div class="btn-group btn-group-lg" role="group" aria-label="Solid button group">
    <button type="button" class="btn btn-translucent-primary">left</button>
    <button type="button" class="btn btn-translucent-primary">middle</button>
    <button type="button" class="btn btn-translucent-primary">right</button>
</div>
<div class="btn-group btn-group-sm" role="group" aria-label="Solid button group">
    <button type="button" class="btn btn-outline-primary">left</button>
    <button type="button" class="btn btn-outline-primary">middle</button>
    <button type="button" class="btn btn-outline-primary">right</button>
</div>
<div class="btn-group " role="group" aria-label="Solid button group">
    <button type="button" class="btn btn-outline-primary">left</button>
    <button type="button" class="btn btn-outline-primary">middle</button>
    <button type="button" class="btn btn-outline-primary">right</button>
</div>
<div class="btn-group btn-group-lg" role="group" aria-label="Solid button group">
    <button type="button" class="btn btn-outline-primary">left</button>
    <button type="button" class="btn btn-outline-primary">middle</button>
    <button type="button" class="btn btn-outline-primary">right</button>
</div>

<h3>Button Toolbar</h3>
<!-- Toolbar example -->
<div class="btn-toolbar" role="toolbar" aria-label="Settings toolbar">
    <div class="btn-group me-2 mb-2" role="group" aria-label="Settings group">
        <button type="button" class="btn btn-dark btn-icon">
            <i class="ai-settings"></i>
        </button>
        <button type="button" class="btn btn-secondary btn-icon">A</button>
        <button type="button" class="btn btn-secondary btn-icon">
            <i class="ai-list"></i>
        </button>
        <button type="button" class="btn btn-secondary btn-icon">
            <i class="ai-maximize-2"></i>
        </button>
    </div>
    <div class="btn-group me-2 mb-2" role="group" aria-label="Apply settings">
        <button type="button" class="btn btn-success">
            <i class="ai-check me-2"></i>
            Apply
        </button>
    </div>
    <div class="btn-group mb-2" role="group" aria-label="Delete settings">
        <button type="button" class="btn btn-translucent-danger btn-icon">
            <i class="ai-trash-2"></i>
        </button>
    </div>
</div>

<!-- Pagination example -->
<div class="btn-toolbar" role="toolbar" aria-label="Pagination">
    <div class="btn-group me-2 mb-2" role="group" aria-label="First group">
        <button type="button" class="btn btn-outline-secondary">1</button>
        <button type="button" class="btn btn-outline-secondary">2</button>
        <button type="button" class="btn btn-outline-secondary">3</button>
    </div>
    <div class="btn-group me-2 mb-2" role="group" aria-label="Second group">
        <button type="button" class="btn btn-outline-secondary">4</button>
        <button type="button" class="btn btn-outline-secondary">5</button>
    </div>
    <div class="btn-group mb-2" role="group" aria-label="Third group">
        <button type="button" class="btn btn-outline-secondary">6</button>
    </div>
</div>
 
{{#each group}}
<div class="btn-group {{size}}" role="group" aria-label="Solid button group">
  {{#each listItems}}
  <button type="button" class="btn {{class}}">{{name}}</button>
  {{/each}}
</div>
{{/each}}

<h3>Button Toolbar</h3>
<!-- Toolbar example -->
<div class="btn-toolbar" role="toolbar" aria-label="Settings toolbar">
  <div class="btn-group me-2 mb-2" role="group" aria-label="Settings group">
    <button type="button" class="btn btn-dark btn-icon">
      <i class="ai-settings"></i>
    </button>
    <button type="button" class="btn btn-secondary btn-icon">A</button>
    <button type="button" class="btn btn-secondary btn-icon">
      <i class="ai-list"></i>
    </button>
    <button type="button" class="btn btn-secondary btn-icon">
      <i class="ai-maximize-2"></i>
    </button>
  </div>
  <div class="btn-group me-2 mb-2" role="group" aria-label="Apply settings">
    <button type="button" class="btn btn-success">
      <i class="ai-check me-2"></i>
      Apply
    </button>
  </div>
  <div class="btn-group mb-2" role="group" aria-label="Delete settings">
    <button type="button" class="btn btn-translucent-danger btn-icon">
      <i class="ai-trash-2"></i>
    </button>
  </div>
</div>

<!-- Pagination example -->
<div class="btn-toolbar" role="toolbar" aria-label="Pagination">
  <div class="btn-group me-2 mb-2" role="group" aria-label="First group">
    <button type="button" class="btn btn-outline-secondary">1</button>
    <button type="button" class="btn btn-outline-secondary">2</button>
    <button type="button" class="btn btn-outline-secondary">3</button>
  </div>
  <div class="btn-group me-2 mb-2" role="group" aria-label="Second group">
    <button type="button" class="btn btn-outline-secondary">4</button>
    <button type="button" class="btn btn-outline-secondary">5</button>
  </div>
  <div class="btn-group mb-2" role="group" aria-label="Third group">
    <button type="button" class="btn btn-outline-secondary">6</button>
  </div>
</div>
 
{
  "group": [
    {
      "id": 1,
      "size": "btn-group-sm",
      "listItems": [
        {
          "id": 1,
          "name": "left",
          "class": "btn-translucent-primary"
        },
        {
          "id": 2,
          "name": "middle",
          "class": "btn-translucent-primary"
        },
        {
          "id": 3,
          "name": "right",
          "class": "btn-translucent-primary"
        }
      ]
    },
    {
      "id": 2,
      "size": null,
      "listItems": [
        {
          "id": 1,
          "name": "left",
          "class": "btn-translucent-primary"
        },
        {
          "id": 2,
          "name": "middle",
          "class": "btn-translucent-primary"
        },
        {
          "id": 3,
          "name": "right",
          "class": "btn-translucent-primary"
        }
      ]
    },
    {
      "id": 3,
      "size": "btn-group-lg",
      "listItems": [
        {
          "id": 1,
          "name": "left",
          "class": "btn-translucent-primary"
        },
        {
          "id": 2,
          "name": "middle",
          "class": "btn-translucent-primary"
        },
        {
          "id": 3,
          "name": "right",
          "class": "btn-translucent-primary"
        }
      ]
    },
    {
      "id": 4,
      "size": "btn-group-sm",
      "listItems": [
        {
          "id": 1,
          "name": "left",
          "class": "btn-outline-primary"
        },
        {
          "id": 2,
          "name": "middle",
          "class": "btn-outline-primary"
        },
        {
          "id": 3,
          "name": "right",
          "class": "btn-outline-primary"
        }
      ]
    },
    {
      "id": 5,
      "size": null,
      "listItems": [
        {
          "id": 1,
          "name": "left",
          "class": "btn-outline-primary"
        },
        {
          "id": 2,
          "name": "middle",
          "class": "btn-outline-primary"
        },
        {
          "id": 3,
          "name": "right",
          "class": "btn-outline-primary"
        }
      ]
    },
    {
      "id": 6,
      "size": "btn-group-lg",
      "listItems": [
        {
          "id": 1,
          "name": "left",
          "class": "btn-outline-primary"
        },
        {
          "id": 2,
          "name": "middle",
          "class": "btn-outline-primary"
        },
        {
          "id": 3,
          "name": "right",
          "class": "btn-outline-primary"
        }
      ]
    }
  ]
}

No notes defined.