Sheet

import { FrButtonModule } from '@frame-ui-ng/components/button';
import { FrInputModule } from '@frame-ui-ng/components/input';
import { FrSheetModule } from '@frame-ui-ng/components/sheet';

<button frButton type="button" [frSheetTrigger]="sheet">
  <span frButtonLabel>Open sheet</span>
</button>

<ng-template #sheet="frSheetContent" frSheetContent aria-label="Workspace settings">
  <div frSheetPanel>
    <div frSheetHeader>
      <h2 frSheetTitle>Workspace settings</h2>
      <p frSheetDescription>Keep related controls close without leaving the page.</p>
    </div>

    <div frSheetBody>
      <label>
        <span>Workspace name</span>
        <input frInput value="Component library" />
      </label>
    </div>

    <div frSheetFooter>
      <button frButton appearance="outline" type="button" frSheetClose>
        <span frButtonLabel>Cancel</span>
      </button>
      <button frButton type="button" [frSheetClose]="'saved'">
        <span frButtonLabel>Save changes</span>
      </button>
    </div>
  </div>
</ng-template>