src/dev-app/system-classes-demo/system-classes-demo.html - main - githubmirror/components

src/dev-app/system-classes-demo/system-classes-demo.html
146 строк7 KB
Andrew Seguin
fix(material/core): rename corner extra-small to xs (#32101)
17 окт 2025, 23:17
17 окт 2025, 23:1718cedc7
<h1>Utility Classes</h1>

<section>
  <h2>Color</h2>
  <h3>Primary</h3>
  <div class="demo-section-container demo-grid">
    <div class="mat-border mat-corner-sm mat-bg-surface mat-text-primary demo-box">
      .mat-bg-surface <br/> .mat-text-primary
    </div>
    <div class="mat-border mat-corner-sm mat-bg-primary mat-text-on-primary demo-box">
      .mat-bg-primary <br/> .mat-text-on-primary
    </div>
    <div class="mat-border mat-corner-sm mat-bg-primary-container mat-text-on-primary-container demo-box">
      .mat-bg-primary-container <br/> .mat-text-on-primary-container
    </div>
  </div>
  <h3>Secondary</h3>
  <div class="demo-section-container demo-grid">
    <div class="mat-border mat-corner-sm mat-bg-surface mat-text-secondary demo-box">
      .mat-bg-surface <br/> .mat-text-secondary
    </div>
    <div class="mat-border mat-corner-sm mat-bg-secondary mat-text-on-secondary demo-box">
      .mat-bg-secondary <br/> .mat-text-on-secondary
    </div>
    <div class="mat-border mat-corner-sm mat-bg-secondary-container mat-text-on-secondary-container demo-box">
      .mat-bg-secondary-container <br/> .mat-text-on-secondary-container
    </div>
  </div>
  <h3>Error</h3>
  <div class="demo-section-container demo-grid">
    <div class="mat-border mat-corner-sm mat-bg-surface mat-text-error demo-box">
      .mat-bg-surface <br/> .mat-text-error
    </div>
    <div class="mat-border mat-corner-sm mat-bg-error mat-text-on-error demo-box">
      .mat-bg-error <br/> .mat-text-on-error
    </div>
    <div class="mat-border mat-corner-sm mat-bg-error-container mat-text-on-error-container demo-box">
      .mat-bg-error-container <br/> .mat-text-on-error-container
    </div>
  </div>
  <h3>Surface</h3>
  <div class="demo-section-container demo-grid">
    <div class="mat-border mat-corner-sm mat-bg-surface mat-text-on-surface demo-box">
      .mat-bg-surface <br/> .mat-text-on-surface
    </div>
    <div class="mat-border mat-corner-sm mat-bg-surface mat-text-on-surface-variant demo-box">
      .mat-bg-surface <br/> .mat-text-on-surface-variant
    </div>
    <div class="mat-border mat-corner-sm mat-bg-surface-variant mat-text-on-surface demo-box">
      .mat-bg-surface-variant <br/> .mat-text-on-surface
    </div>
    <div class="mat-border mat-corner-sm mat-bg-surface-container-highest mat-text-on-surface demo-box">
      .mat-bg-surface-container-highest <br/> .mat-text-on-surface
    </div>
    <div class="mat-border mat-corner-sm mat-bg-surface-container-high mat-text-on-surface demo-box">
      .mat-bg-surface-container-high <br/> .mat-text-on-surface
    </div>
    <div class="mat-border mat-corner-sm mat-bg-surface-container mat-text-on-surface demo-box">
      .mat-bg-surface-container <br/> .mat-text-on-surface
    </div>
    <div class="mat-border mat-corner-sm mat-bg-surface-container-low mat-text-on-surface demo-box">
      .mat-bg-surface-container-low <br/> .mat-text-on-surface
    </div>
    <div class="mat-border mat-corner-sm mat-bg-surface-container-lowest mat-text-on-surface demo-box">
      .mat-bg-surface-container-lowest <br/> .mat-text-on-surface
    </div>
    <div class="mat-border mat-corner-sm mat-bg-inverse-surface mat-text-inverse-on-surface demo-box">
      .mat-bg-inverse-surface <br/> .mat-text-inverse-on-surface
    </div>
  </div>
  <h3>Disabled</h3>
  <div class="demo-section-container demo-grid">
    <div class="mat-border mat-corner-sm mat-bg-surface mat-text-disabled demo-box">
      .mat-bg-surface <br/> .mat-text-disabled
    </div>
    <div class="mat-border mat-corner-sm mat-bg-disabled mat-text-disabled demo-box">
      .mat-bg-disabled <br/> .mat-text-disabled
    </div>
  </div>

<section>
  <h2>Typography</h2>
  <h3> Display </h3>
  <div class="demo-section-container demo-typography">
    <div class="mat-font-display-lg">mat-font-display-lg (Display Large)</div>
    <div class="mat-font-display-md">mat-font-display-md (Display Medium)</div>
    <div class="mat-font-display-sm">mat-font-display-sm (Display Small)</div>
  </div>
  <h3> Headline </h3>
  <div class="demo-section-container demo-typography">
    <div class="mat-font-headline-lg">mat-font-headline-lg (Headline Large)</div>
    <div class="mat-font-headline-md">mat-font-headline-md (Headline Medium)</div>
    <div class="mat-font-headline-sm">mat-font-headline-sm (Headline Small)</div>
  </div>
  <h3> Title </h3>
  <div class="demo-section-container demo-typography">
    <div class="mat-font-title-lg">mat-font-title-lg (Title Large)</div>
    <div class="mat-font-title-md">mat-font-title-md (Title Medium)</div>
    <div class="mat-font-title-sm">mat-font-title-sm (Title Small)</div>
  </div>
  <h3> Headline </h3>
  <div class="demo-section-container demo-typography">
    <div class="mat-font-body-lg">mat-font-body-lg (Body Large)</div>
    <div class="mat-font-body-md">mat-font-body-md (Body Medium)</div>
    <div class="mat-font-body-sm">mat-font-body-sm (Body Small)</div>
  </div>
  <h3> Label </h3>
  <div class="demo-section-container demo-typography">
    <div class="mat-font-label-lg">mat-font-label-lg (Label Large)</div>
    <div class="mat-font-label-md">mat-font-label-md (Label Medium)</div>
    <div class="mat-font-label-sm">mat-font-label-sm (Label Small)</div>
  </div>
</section>

<section>
  <h2>Shape</h2>
  <div class="demo-section-container demo-grid">
    <div class="mat-border mat-corner-xs demo-box mat-bg-primary-container">mat-corner-xs</div>
    <div class="mat-border mat-corner-sm demo-box mat-bg-primary-container">mat-corner-sm</div>
    <div class="mat-border mat-corner-md demo-box mat-bg-primary-container">mat-corner-md</div>
    <div class="mat-border mat-corner-lg demo-box mat-bg-primary-container">mat-corner-lg</div>
    <div class="mat-border mat-corner-xl demo-box mat-bg-primary-container">
      mat-corner-xl
    </div>
    <div class="mat-border mat-corner-full demo-box mat-bg-primary-container">mat-corner-full</div>
  </div>
</section>

<section>
  <h2>Elevation</h2>
  <div class="demo-section-container demo-grid">
    <div class="mat-border-subtle mat-shadow-1 demo-box mat-bg-surface">mat-shadow-1</div>
    <div class="mat-border-subtle mat-shadow-2 demo-box mat-bg-surface">mat-shadow-2</div>
    <div class="mat-border-subtle mat-shadow-3 demo-box mat-bg-surface">mat-shadow-3</div>
    <div class="mat-border-subtle mat-shadow-4 demo-box mat-bg-surface">mat-shadow-4</div>
    <div class="mat-border-subtle mat-shadow-5 demo-box mat-bg-surface">mat-shadow-5</div>
  </div>
</section>

<section>
  <h2>Outline</h2>
  <div class="demo-section-container demo-grid">
    <div class="mat-border demo-box">mat-border</div>
    <div class="mat-border-subtle demo-box">mat-border-subtle</div>
  </div>
</section>