tabsheetpackage.web-types.lit.json Maven / Gradle / Ivy

Go to download

Show more of this group Show more artifacts with this name
Show all versions of vaadin-webcomponents Show documentation

Mvnpm composite: Vaadin webcomponents

The newest version!

{
  "$schema": "https://json.schemastore.org/web-types",
  "name": "@vaadin/tabsheet",
  "version": "24.5.3",
  "description-markup": "markdown",
  "framework": "lit",
  "framework-config": {
    "enable-when": {
      "node-packages": [
        "lit"
      ]
    }
  },
  "contributions": {
    "html": {
      "elements": [
        {
          "name": "vaadin-tabsheet",
          "description": "`` is a Web Component for organizing and grouping content\ninto scrollable panels. The panels can be switched between by using tabs.\n\n```\n \n   Prefix
\n   Suffix
\n\n   \n     Tab 1\n     Tab 2\n     Tab 3\n   \n\n   Panel 1
\n   Panel 2
\n   Panel 3
\n \n```\n\n### Styling\n\nThe following shadow DOM parts are exposed for styling:\n\nPart name | Description\n--------- | ---------------\n`tabs-container`    | The container for the slotted prefix, tabs and suffix\n`content`    | The container for the slotted panels\n\nThe following state attributes are available for styling:\n\nAttribute         | Description\n------------------|-------------\n`loading` | Set when a tab without associated content is selected\n`overflow`   | Set to `top`, `bottom`, `start`, `end`, all of them, or none.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
          "extension": true,
          "attributes": [
            {
              "name": ".selected",
              "description": "The index of the selected tab.",
              "value": {
                "kind": "expression"
              }
            },
            {
              "name": "@items-changed",
              "description": "Fired when the `items` property changes.",
              "value": {
                "kind": "expression"
              }
            },
            {
              "name": "@selected-changed",
              "description": "Fired when the `selected` property changes.",
              "value": {
                "kind": "expression"
              }
            }
          ]
        }
      ]
    }
  }
}