マテリアルデザインのタブ

祖先 - パネル (PRIM_PANL) コンテナ (PRIM_CPST) コントロール (PRIM_CTRL) オブジェクト (PRIM_OBJT)

詳細

Prim_MD.Tab はタブ アイテムを含むようデザインされたパネルです。
 
一般的にタブは、Web アプリケーションの上部にあるアプリケーション バーのすぐ下に位置しています。
 
タブにより、ビュー、ダイアログ、タブ シート間のナビゲーションが簡単になります。

例

以下は、様々なパーツがやり取りする様子を簡単に示したものです。

Begin_Com Role(*EXTENDS #PRIM_WEB) Theme(#SYS_THEME) Layoutmanager(#LayoutPageLayout)
 
    Define_Com Class(#PRIM_TBLO) Name(#LayoutPageLayout)
    Define_Com Class(#PRIM_TBLO.Row) Name(#LayoutPageRow1) Displayposition(2) Parent(#LayoutPageLayout) Height(64) Units(Pixels)
    Define_Com Class(#PRIM_TBLO.Row) Name(#LayoutPageRow2) Displayposition(3) Parent(#LayoutPageLayout)
    Define_Com Class(#PRIM_TBLO.Column) Name(#LayoutPageColumn1) Displayposition(1) Parent(#LayoutPageLayout)
    Define_Com Class(#PRIM_TBLO.Row) Name(#LayoutPageLayoutRow1) Displayposition(1) Parent(#LayoutPageLayout) Height(48) Units(Pixels)
    Define_Com Class(#PRIM_TBLO.Item) Name(#LayoutPageLayoutItem1) Manage(#Tab) Parent(#LayoutPageLayout) Row(#LayoutPageRow1) Column(#LayoutPageColumn1)
    Define_Com Class(#PRIM_TBLO.Item) Name(#LayoutPageLayoutItem2) Manage(#ViewContainer) Parent(#LayoutPageLayout) Row(#LayoutPageRow2) Column(#LayoutPageColumn1)
    Define_Com Class(#PRIM_TBLO.Item) Name(#LayoutPageLayoutItem3) Column(#LayoutPageColumn1) Manage(#Appbar) Parent(#LayoutPageLayout) Row(#LayoutPageLayoutRow1)
    Define_Com Class(#PRIM_TBLO) Name(#LayoutTab)
    Define_Com Class(#PRIM_TBLO.Column) Name(#LayoutTabColum) Parent(#LayoutTab) Displayposition(1)
    Define_Com Class(#PRIM_TBLO.Row) Name(#LayoutTabRow1) Parent(#LayoutTab) Displayposition(1)
    Define_Com Class(#PRIM_TBLO.Item) Name(#LayoutTabItem1) Manage(#TabItem1) Parent(#LayoutTab) Row(#LayoutTabRow1) Column(#LayoutTabColum) Flow(CenterHorizontal) Sizing(FitToHeight)
    Define_Com Class(#PRIM_TBLO.Item) Name(#LayoutTabItem2) Manage(#TabItem2) Parent(#LayoutTab) Row(#LayoutTabRow1) Column(#LayoutTabColum) Flow(CenterHorizontal) Sizing(FitToHeight)
    Define_Com Class(#PRIM_TBLO.Item) Name(#LayoutTabItem3) Manage(#TabItem3) Parent(#LayoutTab) Row(#LayoutTabRow1) Column(#LayoutTabColum) Flow(CenterHorizontal) Sizing(FitToHeight)
    Define_Com Class(#PRIM_TBLO.Item) Name(#LayoutTabItem4) Column(#LayoutTabColum) Parent(#LayoutTab) Row(#LayoutTabRow1) Sizing(FitToHeight) Flow(CenterHorizontal)
    Define_Com Class(#PRIM_TBLO.Item) Name(#LayoutTabItem5) Column(#LayoutTabColum) Manage(#TabItem4) Parent(#LayoutTab) Row(#LayoutTabRow1) Sizing(None) Flow(CenterHorizontal)
 
    Define_Com Class(#PRIM_MD.AppBar) Name(#Appbar) Caption('Title') Displayposition(3) Icon('menu') Parent(#COM_OWNER) Tabposition(3) Themedrawstyle('Heading2') Height(48) Width(1200)
 
    Define_Com Class(#PRIM_MD.Tab) Name(#Tab) Displayposition(1) Height(64) Parent(#COM_OWNER) Tabposition(1) Themedrawstyle('DarkTitle') Width(1200) Layoutmanager(#LayoutTab) Top(48)
    Define_Com Class(#prim_md.TabItem) Name(#TabItem1) Parent(#Tab) Displayposition(1) Height(64) Tabposition(1) Caption('Show View 1') Left(430) Top(0) View(#View1) Width(85) Icon('search') Iconalignment(AboveCaption) Iconheight(32) Themedrawstyle('DarkTitle')
    Define_Com Class(#prim_md.TabItem) Name(#TabItem2) Parent(#Tab) Displayposition(2) Height(64) Left(515) Tabposition(2) Top(0) Caption('Show View 2') View(#View2) Width(85) Icon('view_week') Iconalignment(AboveCaption) Iconheight(32) Themedrawstyle('DarkTitle')
    Define_Com Class(#prim_md.TabItem) Name(#TabItem3) Parent(#Tab) Displayposition(3) Height(64) Left(600) Tabposition(3) Top(0) Caption('Show View 3') View(#View3) Width(85) Icon('watch') Iconalignment(AboveCaption) Iconheight(32) Themedrawstyle('DarkTitle')
    Define_Com Class(#PRIM_MD.TabItem) Name(#TabItem4) Caption('Show Dialog') Displayposition(4) Height(64) Left(685) Parent(#Tab) Tabposition(4) Top(0) Width(85) Icon('settings') Iconalignment(AboveCaption) Iconheight(32) Themedrawstyle('DarkTitle') Dialog(#Dialog)
 
    Define_Com Class(#prim_md.ViewContainer) Name(#ViewContainer) Parent(#COM_OWNER) Displayposition(2) Tabposition(2) Height(688) Top(112) Width(1200)
    Define_Com Class(#PRIM_view) Name(#View1) Parent(#ViewContainer) Displayposition(1) Tabposition(1) Height(688) Left(400) Width(1200)
    Define_Com Class(#PRIM_view) Name(#View2) Parent(#ViewContainer) Displayposition(3) Tabposition(3) Height(688) Width(1200) Top(226)
    Define_Com Class(#PRIM_view) Name(#View3) Parent(#ViewContainer) Displayposition(2) Tabposition(2) Height(688) Left(800) Width(1200)
 
    Define_Com Class(#PRIM_DLG) Name(#Dialog) Height(400) Autoclose(True)
 
    Define_Com Class(#prim_md.Label) Name(#Label1) Parent(#View1) Displayposition(1) Tabposition(1) Caption('View 1') Height(120) Left(0) Themedrawstyle('Title') Top(0) Width(360)
    Define_Com Class(#prim_md.Label) Name(#Label2) Parent(#View2) Displayposition(1) Tabposition(1) Caption('View 2') Height(120) Left(0) Themedrawstyle('Title') Top(0) Width(360)
    Define_Com Class(#prim_md.Label) Name(#Label3) Parent(#View3) Displayposition(1) Tabposition(1) Caption('View 3') Height(120) Left(0) Themedrawstyle('Title') Top(0) Width(360)
    Define_Com Class(#prim_md.Label) Name(#Label4) Parent(#Dialog) Displayposition(1) Tabposition(1) Caption('Dialog') Height(120) Left(0) Themedrawstyle('Title') Top(0) Width(360)
 
End_Com

ﾌﾟﾛﾊﾟﾃｨ

イベント

ﾒｿｯﾄﾞ

参照

すべてのコンポーネント クラス

テクニカルリファレンス

EPC142030 February 2019