patternfly-elements/elements/pf-label-group/demo/label-group-add-label-auto.html at cffdff2ebd99bb0cd444695265b7360211519927 · patternfly/patternfly-elements · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<pf-label-group id="label-group" closeable>
  <h2 slot="category">group name</h2>
  <pf-label color="red" icon="info-circle" removable>label-1</pf-label>
  <pf-label color="green" icon="info-circle" removable>label-2</pf-label>
  <pf-label color="blue" icon="info-circle" removable>label-3</pf-label>

   <pf-label id="add-button" color="blue" variant="outline" dismissible="false" >
    Add label </pf-label>
</pf-label-group>


<script type="module">
  import '@patternfly/elements/pf-label-group/pf-label-group.js';
  import '@patternfly/elements/pf-label/pf-label.js';
  import '@patternfly/elements/pf-button/pf-button.js';
  import '@patternfly/elements/pf-modal/pf-modal.js';
  import '@patternfly/elements/pf-dropdown/pf-dropdown.js';
  document.getElementById('add-button').addEventListener('click', () => {
    const labelGroup = document.getElementById('label-group');
    const newLabel = document.createElement('pf-label');
    newLabel.setAttribute('color', 'grey');
    newLabel.setAttribute('icon', 'info-circle');
    newLabel.setAttribute('removable', 'true');
    newLabel.textContent = `new-label`;
    const firstLabel = labelGroup.querySelector('pf-label:not([slot])');
    if (firstLabel) labelGroup.insertBefore(newLabel, firstLabel);
    else labelGroup.appendChild(newLabel);
  });
</script>
<style>
  #add-button {
cursor: pointer;
  align-items: center;
  gap: 4px;
  transition: border 0.2s ease;
  border-radius: 0.99rem;
  }
</style>