This is a migrated thread and some comments may be shown as answers.

Panel Bar How to Structure the Item to horizontal

1 Answer 38 Views
This is a migrated thread and some comments may be shown as answers.
Sio
Top achievements
Rank 1
Sio asked on 10 Dec 2018, 05:44 AM

https://demos.telerik.com/kendo-ui/html5-diagram-sample-app

i wanna to create something that like his page, the panel bar with horizontal item.

1 Answer, 1 is accepted

Sort by
0
Ivan Danchev
Telerik team
answered on 11 Dec 2018, 06:10 PM
Hello Sio,

See the following stackblitz example which demonstrates an approach you can consider using. The PanelBar has a template configured:
template: "# if (item.text != 'Root1' && item.text != 'Root2') { # <span class='shapeItem' data-shape='{'path':'M 60,0 L120,44 L97,114 L23,114 L0,44 z'}<span>#: item.text #</span> # } else { # <span>#: item.text #</span> # } #",

and the elements in the template can be further customized through CSS:
#panelbar {
  width: 300px;
}
 
#panelbar .shapeItem {
  display: inline-block;
}
 
#panelbar span {
  text-align: center;
  display: block;
}
 
#panelbar  .k-panel .k-item {
  display: inline-block;
  width: 50%;
}
 
.shapeItem {
  margin-top: 10px;
  display: inline-block;
  width: 60px;
  height: 60px;
  background-size: auto 100%;
}

I hope the example is helpful and points you in the right direction with regard to implementing the desired PanelBar appearance.

Regards,
Ivan Danchev
Progress Telerik
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Asked by
Sio
Top achievements
Rank 1
Answers by
Ivan Danchev
Telerik team
Share this question
or