Package Exports

@material/notched-outline
@material/notched-outline/dist/mdc.notched-outline.css
@material/notched-outline/dist/mdc.notchedOutline
@material/notched-outline/dist/mdc.notchedOutline.js
@material/notched-outline/foundation
@material/notched-outline/foundation.js
@material/notched-outline/index

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@material/notched-outline) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Notched Outline

The outline is a border around all sides of either a text field or select component. This is used for the Outlined variant of either a Text Field or Select.

Design & API Documentation

Material Design guidelines: Text Field Variations

Usage

HTML Structure

<div class="mdc-notched-outline">
  <svg>
    <path class="mdc-notched-outline__path"/>
  </svg>
</div>
<div class="mdc-notched-outline__idle"></div>

For usage within a text field see here.

CSS Classes

CSS Class	Description
`mdc-notched-outline`	Mandatory. Container for the SVG of the notched outline path.
`mdc-notched-outline--notched`	Class to open notch outline.
`mdc-notched-outline__path`	Mandatory. The path of the SVG of the notched outline.
`mdc-notched-outline__idle`	Mandatory. The full outline when the notch is hidden.

Sass Mixins

Mixin	Description
`mdc-notched-outline-color($color)`	Customizes the border color of the notched outlined.
`mdc-notched-outline-idle-color($color)`	Customizes the border color of the idle outline.
`mdc-notched-outline-stroke-width($width)`	Changes notched outline width to a specified pixel value.
`mdc-notched-outline-corner-radius($radius)`	Sets the corner radius of the notched outline element to the given number.
`mdc-notched-outline-idle-corner-radius($radius)`	Sets the corner radius of the notched outline element in idle state.

NOTE: Because notched-outline has sibling elements, you need to call the "idle" Sass mixins with parent selectors. Consider the following example HTML:
<div class="foo-line-ripple-parent">
  <div class="mdc-notched-outline foo-line-ripple">
    <svg>
      <path class="mdc-notched-outline__path"/>
    </svg>
  </div>
  <div class="mdc-notched-outline__idle"></div>
</div>
In order to customize any "non-idle" part of notched-outline, use the .foo-line-ripple CSS selector:
.foo-line-ripple {
  @include mdc-notched-outline-color($fooColor);
}
But in order to customize any "idle" part of the notched-outline, you must use the .foo-line-ripple-parent CSS selector:
.foo-line-ripple-parent {
  @include mdc-notched-outline-idle-color($fooColor);
}

`MDCNotchedOutline`

Method Signature	Description
`notch(notchWidth: number, isRtl: boolean) => void`	Updates outline to open notch in outline path.
`closeNotch() => void`	Updates the outline to close notch in outline path.

`MDCNotchedOutlineAdapter`

Method Signature	Description
`getWidth() => number`	Returns the width of the outline element.
`getHeight() => number`	Returns the height of the outline element.
`addClass(className: string) => void`	Adds a class to the notched outline element.
`removeClass(className: string) => void`	Removes a class from the notched outline element.
`setOutlinePathAttr(value: string) => void`	Sets the "d" attribute of the outline element's SVG path.
`getIdleOutlineStyleValue(propertyName: string) => string`	Returns the idle outline element's computed style value of a given css `propertyName`.

`MDCNotchedOutlineFoundation`

Method Signature	Description
`notch(notchWidth: number, isRtl: boolean) => void`	Adds the outline notched selector and updates the notched outline path based off notchWidth and isRtl.
`closeNotch() => void`	Removes the outline notched selector.
`updateSvgPath(notchWidth: number, isRtl: boolean) => void`	Updates the SVG path of the focus outline element calculated based off of the notchWidth. The notch will appear left justified, unless isRtl is true.