CSS Parts API Reference
tap-avatar
Name | Description |
---|---|
avatar | The container that wraps the avatar component. |
placeholder | The container that wraps the avatar's placeholder. |
image | The avatar image. Only shown when the image is present. |
css
tap-avatar::part(avatar) { /* ... */ }
tap-avatar::part(placeholder) { /* ... */ }
tap-avatar::part(image) { /* ... */ }
tap-badge
Name | Description |
---|---|
badge | The main badge element. |
icon | The icon inside the badge. |
css
tap-badge::part(badge) { /* ... */ }
tap-badge::part(icon) { /* ... */ }
tap-badge-wrapper
Name | Description |
---|---|
wrapper | The container that wraps the main content and the badge. |
badge | The container that positions the badge. |
css
tap-badge-wrapper::part(wrapper) { /* ... */ }
tap-badge-wrapper::part(badge) { /* ... */ }
tap-banner
Name | Description |
---|---|
banner | The main banner element. |
content | The content container inside the banner. |
action | The action container inside the banner. |
extra | The extra slot container inside the hero variant. |
css
tap-banner::part(banner) { /* ... */ }
tap-banner::part(content) { /* ... */ }
tap-banner::part(action) { /* ... */ }
tap-banner::part(extra) { /* ... */ }
tap-bottom-navigation
Name | Description |
---|---|
bottom-navigation | The main container for the bottom navigation bar. |
css
tap-bottom-navigation::part(bottom-navigation) { /* ... */ }
tap-bottom-navigation-item
Name | Description |
---|---|
bottom-navigation-item | The main container for the bottom navigation item. |
css
tap-bottom-navigation-item::part(bottom-navigation-item) { /* ... */ }
tap-bottom-sheet
Name | Description |
---|---|
dimmer | The dimmer element darkens the background and is clickable to close the bottom sheet. |
header | The header of the bottom sheet component, containing the title and dismiss button. |
body | The container that wraps the bottom sheet's content. |
css
tap-bottom-sheet::part(dimmer) { /* ... */ }
tap-bottom-sheet::part(header) { /* ... */ }
tap-bottom-sheet::part(body) { /* ... */ }
tap-button
Name | Description |
---|---|
button | The button element. |
css
tap-button::part(button) { /* ... */ }
tap-checkbox
Name | Description |
---|---|
checkbox | The main container for the checkbox. |
css
tap-checkbox::part(checkbox) { /* ... */ }
tap-chip
Name | Description |
---|---|
chip | The button element representing the chip. |
css
tap-chip::part(chip) { /* ... */ }
tap-chip-group
Name | Description |
---|---|
chip-group | The main container for the chip group. |
css
tap-chip-group::part(chip-group) { /* ... */ }
tap-divider
Name | Description |
---|---|
divider | The main container for the divider. |
css
tap-divider::part(divider) { /* ... */ }
tap-empty-state
Name | Description |
---|---|
container | The root container of the empty state component a div . |
icon | The container of the icon slot, a span . |
content | The wrapper around heading and description, a div . |
heading | The heading element, a span . |
description | The description element, a p . |
actions | The container of the actions slot, a div . |
css
tap-empty-state::part(container) { /* ... */ }
tap-empty-state::part(icon) { /* ... */ }
tap-empty-state::part(content) { /* ... */ }
tap-empty-state::part(heading) { /* ... */ }
tap-empty-state::part(description) { /* ... */ }
tap-empty-state::part(actions) { /* ... */ }
tap-icon-button
Name | Description |
---|---|
button | The button element. |
css
tap-icon-button::part(button) { /* ... */ }
tap-modal
Name | Description |
---|---|
overlay | The overlay background when the modal is open. |
dialog | The main container for the modal dialog. |
image-container | The container of the image element, a div . |
image | The image element, a img . |
icon | The container of the icon slot, a div . |
content | The wrapper around title and description, a div . |
title | The title element, a span . |
description | The description element, a p . |
actions | The container of the actions slot, a div . |
css
tap-modal::part(overlay) { /* ... */ }
tap-modal::part(dialog) { /* ... */ }
tap-modal::part(image-container) { /* ... */ }
tap-modal::part(image) { /* ... */ }
tap-modal::part(icon) { /* ... */ }
tap-modal::part(content) { /* ... */ }
tap-modal::part(title) { /* ... */ }
tap-modal::part(description) { /* ... */ }
tap-modal::part(actions) { /* ... */ }
tap-notice
Name | Description |
---|---|
notice | The root container of the notice component a div . |
icon | The container of the icon, a span . |
content-root | The wrapper around title, message and actions, a div . |
message | The message element, a p . |
title | The title element, a p . |
actions | The actions slot, a slot . |
dismiss | The dismiss button, a button . |
css
tap-notice::part(notice) { /* ... */ }
tap-notice::part(icon) { /* ... */ }
tap-notice::part(content-root) { /* ... */ }
tap-notice::part(message) { /* ... */ }
tap-notice::part(title) { /* ... */ }
tap-notice::part(actions) { /* ... */ }
tap-notice::part(dismiss) { /* ... */ }
tap-pinwheel
Name | Description |
---|---|
pinwheel | The container that wraps the pinwheel component. |
pinwheel-item | The item that rendered in pinwheel. |
css
tap-pinwheel::part(pinwheel) { /* ... */ }
tap-pinwheel::part(pinwheel-item) { /* ... */ }
tap-pinwheel-group
Name | Description |
---|---|
pinwheel-group | The container that wraps the pinwheels. |
pinwheel-selector-indicator | The selector indicator that wraps selected row. |
css
tap-pinwheel-group::part(pinwheel-group) { /* ... */ }
tap-pinwheel-group::part(pinwheel-selector-indicator) { /* ... */ }
tap-progress-indicator
Name | Description |
---|---|
progressbar | The container for the progress bar. |
step | Each individual step in the progress bar. |
css
tap-progress-indicator::part(progressbar) { /* ... */ }
tap-progress-indicator::part(step) { /* ... */ }
tap-radio
Name | Description |
---|---|
radio | The main container for the radio button. |
css
tap-radio::part(radio) { /* ... */ }
tap-radio-group
Name | Description |
---|---|
radio-group | The main container for the radio group. |
css
tap-radio-group::part(radio-group) { /* ... */ }
tap-row
Name | Description |
---|---|
row | The main container for the row. |
leading | The container for the leading slot. |
content | The container for the content slot. |
trailing | The container for the trailing slot. |
navigable | The container for the navigable icon. |
css
tap-row::part(row) { /* ... */ }
tap-row::part(leading) { /* ... */ }
tap-row::part(content) { /* ... */ }
tap-row::part(trailing) { /* ... */ }
tap-row::part(navigable) { /* ... */ }
tap-segmented-button
Name | Description |
---|---|
button | The main container for the button. |
css
tap-segmented-button::part(button) { /* ... */ }
tap-segmented-button-group
Name | Description |
---|---|
button-group | The main container for the button group. |
css
tap-segmented-button-group::part(button-group) { /* ... */ }
tap-skeleton
Name | Description |
---|---|
skeleton | The skeleton element |
css
tap-skeleton::part(skeleton) { /* ... */ }
tap-spinner
Name | Description |
---|---|
svg | The svg tag that represents spinner component. |
css
tap-spinner::part(`svg`) { /* ... */ }
tap-step-indicator
Name | Description |
---|---|
steps | The container for the steps. |
step | Each individual step. |
css
tap-step-indicator::part(steps) { /* ... */ }
tap-step-indicator::part(step) { /* ... */ }
tap-stepper
Name | Description |
---|---|
stepper | The container that wraps the stepper component. |
decrease-button | The button that contains minus icon and decrease the value. |
increase-button | The button that contains plus icon and increases the value. |
value | The p tag that shows the value . |
unit | The p tag that shows the unit and will be hidden if unit not exists. |
css
tap-stepper::part(stepper) { /* ... */ }
tap-stepper::part(decrease-button) { /* ... */ }
tap-stepper::part(increase-button) { /* ... */ }
tap-stepper::part(value) { /* ... */ }
tap-stepper::part(unit) { /* ... */ }
tap-switch
Name | Description |
---|---|
switch | The container that wraps the switch component. |
input | The input element that represents the switch's toggle functionality. |
slider | The slider element that visually represents the switch's state. |
css
tap-switch::part(switch) { /* ... */ }
tap-switch::part(input) { /* ... */ }
tap-switch::part(slider) { /* ... */ }
tap-text-field
Name | Description |
---|---|
field | The main container for the text field. |
label | The label for the text field. |
container | The container for the input and any leading/trailing elements. |
input | The input element. |
caption | The caption for the text field. |
leading | The leading for the text field. |
trailing | The trailing for the text field. |
css
tap-text-field::part(field) { /* ... */ }
tap-text-field::part(label) { /* ... */ }
tap-text-field::part(container) { /* ... */ }
tap-text-field::part(input) { /* ... */ }
tap-text-field::part(caption) { /* ... */ }
tap-text-field::part(leading) { /* ... */ }
tap-text-field::part(trailing) { /* ... */ }
tap-textarea
Name | Description |
---|---|
field | The main container for the textarea. |
label | The label for the input. |
container | The container for the input. |
input | The input element. |
caption | The caption for the textarea. |
css
tap-textarea::part(field) { /* ... */ }
tap-textarea::part(label) { /* ... */ }
tap-textarea::part(container) { /* ... */ }
tap-textarea::part(input) { /* ... */ }
tap-textarea::part(caption) { /* ... */ }
tap-toast
Name | Description |
---|---|
toast | The main container for the toast notification. |
icon | The container for the icon. |
message | The container for the message. |
dismiss | The container for the dismiss button. |
css
tap-toast::part(toast) { /* ... */ }
tap-toast::part(icon) { /* ... */ }
tap-toast::part(message) { /* ... */ }
tap-toast::part(dismiss) { /* ... */ }