14.0.0 • Published 5 months ago

@material/notched-outline v14.0.0

Weekly downloads
64,454
License
MIT
Repository
github
Last release
5 months ago

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

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 ClassDescription
mdc-notched-outlineMandatory. Container for the SVG of the notched outline path.
mdc-notched-outline--notchedClass to open notch outline.
mdc-notched-outline__pathMandatory. The path of the SVG of the notched outline.
mdc-notched-outline__idleMandatory. The full outline when the notch is hidden.

Sass Mixins

MixinDescription
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 SignatureDescription
notch(notchWidth: number, isRtl: boolean) => voidUpdates outline to open notch in outline path.
closeNotch() => voidUpdates the outline to close notch in outline path.

MDCNotchedOutlineAdapter

Method SignatureDescription
getWidth() => numberReturns the width of the outline element.
getHeight() => numberReturns the height of the outline element.
addClass(className: string) => voidAdds a class to the notched outline element.
removeClass(className: string) => voidRemoves a class from the notched outline element.
setOutlinePathAttr(value: string) => voidSets the "d" attribute of the outline element's SVG path.
getIdleOutlineStyleValue(propertyName: string) => stringReturns the idle outline element's computed style value of a given css propertyName.

MDCNotchedOutlineFoundation

Method SignatureDescription
notch(notchWidth: number, isRtl: boolean) => voidAdds the outline notched selector and updates the notched outline path based off notchWidth and isRtl.
closeNotch() => voidRemoves the outline notched selector.
updateSvgPath(notchWidth: number, isRtl: boolean) => voidUpdates the SVG path of the focus outline element calculated based off of the notchWidth. The notch will appear left justified, unless isRtl is true.
14.0.0

2 years ago

13.0.0

3 years ago

12.0.0

3 years ago

11.0.0

3 years ago

10.0.0

3 years ago

9.0.0

3 years ago

8.0.0

3 years ago

7.0.0

4 years ago

6.0.0

4 years ago

5.1.0

4 years ago

5.0.0

4 years ago

4.0.0

4 years ago

3.2.0

5 years ago

4.0.0-canary.1

5 years ago

4.0.0-canary.0

5 years ago

4.0.0-alpha.0

5 years ago

3.1.0

5 years ago

3.1.0-alpha.0

5 years ago

3.0.0

5 years ago

3.0.0-alpha.1

5 years ago

3.0.0-alpha.0

5 years ago

2.3.0

5 years ago

1.1.1

5 years ago

1.1.0

5 years ago

1.0.0

5 years ago

1.0.0-1

5 years ago

1.0.0-0

5 years ago

0.44.1

5 years ago

0.44.0

5 years ago

0.43.0

5 years ago

0.42.1

5 years ago

0.42.0

5 years ago

0.41.0

5 years ago

0.40.1

6 years ago

0.40.0

6 years ago

0.39.1

6 years ago

0.39.0

6 years ago

0.39.0-0

6 years ago

0.38.0

6 years ago

0.37.1

6 years ago

0.35.0

6 years ago

0.34.0

6 years ago

0.33.0

6 years ago