src/dev-app/focus-trap/focus-trap-demo.html - main - githubmirror/components

src/dev-app/focus-trap/focus-trap-demo.html
138 строк6 KB
Kristiyan Kostadinov
refactor(multiple): switch button selectors
14 мар 2025, 09:04
14 мар 2025, 09:04103ac7c
<div>
  <mat-card class="demo-mat-card">
    <mat-toolbar color="primary">Basic</mat-toolbar>
    <mat-card-content class="demo-mat-card-content">
      <button matButton="elevated" (click)="toggleFocus(basicFocusTrap)">
        {{basicFocusTrap && basicFocusTrap.enabled ? "Disable" : "Enable"}} FocusTrap
      </button>
      <div
        class="demo-focus-trap-region"
        cdkTrapFocus
        #basicFocusTrap="cdkTrapFocus"
        [class.demo-focus-trap-enabled]="basicFocusTrap && basicFocusTrap.enabled">
        <textarea class="demo-focus-trap-element" placeholder="One"></textarea>
        <textarea class="demo-focus-trap-element" placeholder="Two"></textarea>
      </div>
    </mat-card-content>
  </mat-card>

  <mat-card class="demo-mat-card">
    <mat-toolbar color="primary">Nested</mat-toolbar>
    <mat-card-content class="demo-mat-card-content">
      <button matButton="elevated" (click)="toggleFocus(nestedOuterFocusTrap)">
        {{nestedOuterFocusTrap && nestedOuterFocusTrap.enabled ? "Disable" : "Enable"}} outer FocusTrap
      </button>
      <div class="demo-focus-trap-region"
        cdkTrapFocus
        #nestedOuterFocusTrap="cdkTrapFocus"
        [class.demo-focus-trap-enabled]="nestedOuterFocusTrap && nestedOuterFocusTrap.enabled">
        <textarea class="demo-focus-trap-element" placeholder="One"></textarea>
        <textarea class="demo-focus-trap-element" placeholder="Two"></textarea>
        <button matButton="elevated" class="demo-focus-trap-element"
          (click)="toggleFocus(nestedInnerFocusTrap)">
          {{nestedInnerFocusTrap && nestedInnerFocusTrap.enabled ? "Disable" : "Enable"}} inner FocusTrap
        </button>
        <div class="demo-focus-trap-region"
          cdkTrapFocus
          #nestedInnerFocusTrap="cdkTrapFocus"
          [class.demo-focus-trap-enabled]="nestedInnerFocusTrap && nestedInnerFocusTrap.enabled">
          <textarea class="demo-focus-trap-element" placeholder="Three"></textarea>
          <textarea class="demo-focus-trap-element" placeholder="Four"></textarea>
        </div>
      </div>
    </mat-card-content>
  </mat-card>

  <mat-card class="demo-mat-card">
    <mat-toolbar color="primary">Tabindex > 0</mat-toolbar>
      <mat-card-content class="demo-mat-card-content">
      <button matButton="elevated" (click)="toggleFocus(tabIndexFocusTrap)">
        {{tabIndexFocusTrap && tabIndexFocusTrap.enabled ? "Disable" : "Enable"}} FocusTrap
       </button>
      <div class="demo-focus-trap-region"
        cdkTrapFocus
        #tabIndexFocusTrap="cdkTrapFocus"
        [class.demo-focus-trap-enabled]="tabIndexFocusTrap && tabIndexFocusTrap.enabled">
        <textarea class="demo-focus-trap-element" tabindex="1"
          placeholder="I have tabindex 1"></textarea>
        <textarea class="demo-focus-trap-element" placeholder="One"></textarea>
        <textarea class="demo-focus-trap-element" placeholder="Two"></textarea>
      </div>
      <textarea class="demo-focus-trap-element" tabindex="1"
        placeholder="I have tabindex 1"></textarea>
    </mat-card-content>
  </mat-card>

  <mat-card class="demo-mat-card">
    <mat-toolbar color="primary">Shadow DOMs</mat-toolbar>
    <mat-card-content class="demo-mat-card-content">
      @if (_supportsShadowDom) {
        <button matButton="elevated" (click)="toggleFocus(shadowDomFocusTrap)">
          {{shadowDomFocusTrap && shadowDomFocusTrap.enabled ? "Disable" : "Enable"}} FocusTrap
        </button>
        <div class="demo-focus-trap-region"
             cdkTrapFocus
             #shadowDomFocusTrap="cdkTrapFocus"
             [class.demo-focus-trap-enabled]="shadowDomFocusTrap && shadowDomFocusTrap.enabled">
          <shadow-dom-demo>
            <textarea placeholder="I am in a shadow DOM"></textarea>
          </shadow-dom-demo>
          <textarea class="demo-focus-trap-element" placeholder="One"></textarea>
          <textarea class="demo-focus-trap-element" placeholder="Two"></textarea>
        </div>
        <shadow-dom-demo>
          <textarea class="demo-focus-trap-element" placeholder="I am in a shadow DOM"></textarea>
        </shadow-dom-demo>
      } @else {
        Shadow DOM not supported
      }
</mat-card-content>
  </mat-card>

  <mat-card class="demo-mat-card">
    <mat-toolbar color="primary">iframes</mat-toolbar>
    <mat-card-content class="demo-mat-card-content">
      <button matButton="elevated" (click)="toggleFocus(iframeFocusTrap)">
        {{iframeFocusTrap && iframeFocusTrap.enabled ? "Disable" : "Enable"}} FocusTrap
      </button>
      <div class="demo-focus-trap-region"
           cdkTrapFocus
           #iframeFocusTrap="cdkTrapFocus"
           [class.demo-focus-trap-enabled]="iframeFocusTrap && iframeFocusTrap.enabled">
        <iframe class="demo-focus-trap-element"
          srcdoc="<textarea placeholder='I am in an iframe'></textarea>">
        </iframe>
        <textarea class="demo-focus-trap-element" placeholder="One"></textarea>
        <textarea class="demo-focus-trap-element" placeholder="Two"></textarea>
      </div>
      <iframe srcdoc="<textarea placeholder='I am in an iframe'></textarea>"></iframe>
    </mat-card-content>
  </mat-card>

  <mat-card class="demo-mat-card">
    <mat-toolbar color="primary">Dynamic page content</mat-toolbar>
    <mat-card-content class="demo-mat-card-content">
      <button matButton="elevated" (click)="toggleFocus(dynamicFocusTrap)">
        {{dynamicFocusTrap && dynamicFocusTrap.enabled ? "Disable" : "Enable"}} FocusTrap
      </button>
      <div class="demo-focus-trap-region"
           cdkTrapFocus
           #dynamicFocusTrap="cdkTrapFocus"
           [class.demo-focus-trap-enabled]="dynamicFocusTrap && dynamicFocusTrap.enabled">
        <textarea class="demo-focus-trap-element" placeholder="One"></textarea>
        <textarea class="demo-focus-trap-element" placeholder="Two"></textarea>
        <button matButton="elevated" class="demo-focus-trap-element" (click)="addNewElement()">
          Click to add more focusable elements to the page
        </button>
      </div>
      <div #newElements></div>
    </mat-card-content>
  </mat-card>

  <mat-card class="demo-mat-card">
    <mat-toolbar color="primary">Dialog-on-dialog</mat-toolbar>
    <mat-card-content class="demo-mat-card-content">
      <button matButton="elevated" (click)="openDialog()">Open dialog</button>
    </mat-card-content>
  </mat-card>
</div>