forked from mbk-lab/rui_orig
Updated tabs styles
This commit is contained in:
anoshenko
parent
59acf03260
commit
3e93ea4bb9
19
README-ru.md
19
README-ru.md
|
|
@ -2488,26 +2488,15 @@ Cвойства "tab-close-button" может быть задано как дл
|
|||
Что позволяет легко реализовать вкладки с помощью ListView. Именно в этом случаи и применяется значение HiddenTabs.
|
||||
|
||||
При отображении текущей (выбранной) вкладки типа TopTabs, BottomTabs, LeftListTabs и RightListTabs используется
|
||||
стиль "ruiActiveTab", а для вкладки типа LeftTabs и RightTabs используется стиль "ruiActiveVerticalTab".
|
||||
стиль "ruiCurrentTab", а для вкладки типа LeftTabs и RightTabs используется стиль "ruiCurrentVerticalTab".
|
||||
Если вы хотите кастомизировать отображение вкладок, то вы можите либо переопределить данные стили, либо
|
||||
назначить свой стиль с помощью свойства "current-tab-style" (константа CurrentTabStyle).
|
||||
|
||||
Соответственно, для неактивной вкладки используются стили "ruiInactiveTab" и "ruiInactiveVerticalTab", а
|
||||
Соответственно, для неактивной вкладки используются стили "ruiTab" и "ruiVerticalTab", а
|
||||
назначить свой стиль можно с помощью свойства "tab-style" (константа TabStyle).
|
||||
|
||||
Также при отображении вкладок используется следующие константы и стили:
|
||||
|
||||
* "ruiTabHeight" - SizeUnit константа задает высоту панели вкладок;
|
||||
|
||||
* "ruiTabSpace" - SizeUnit константа задает расстояние между вкладками;
|
||||
|
||||
* "ruiTabsPadding" - SizeUnit или BoundsProperty константа задает отступ от внутри панели вкладок;
|
||||
|
||||
* "ruiTabsBackgroundColor" - цвет фона панели закладок;
|
||||
|
||||
* "ruiTabCloseButton" - стиль кнопки закрытия вкладки.
|
||||
|
||||
Вы можете переопределять данные константы и стили для кастимизации панели вкладок
|
||||
Для отображения панели вкладок используется стиль "ruiTabBar", а
|
||||
назначить свой стиль можно с помощью свойства "tab-bar-style" (константа TabBarStyle).
|
||||
|
||||
## AbsoluteLayout
|
||||
|
||||
|
|
|
|||
21
README.md
21
README.md
|
|
@ -2455,27 +2455,16 @@ the "tabs" integer property (the Tabs constant). This property can take on the f
|
|||
Why do I need the value HiddenTabs. The point is that TabsLayout implements the ListAdapter interface.
|
||||
Which makes it easy to implement tabs with a ListView. This is where the HiddenTabs value comes in.
|
||||
|
||||
When displaying the current (selected) tabs of type TopTabs, BottomTabs, LeftListTabs and RightListTabs,
|
||||
the style is "ruiActiveTab", and for tabs of type LeftTabs and RightTabs, the style is "ruiActiveVerticalTab".
|
||||
For displaying the current (selected) tab of type TopTabs, BottomTabs, LeftListTabs and RightListTabs,
|
||||
the "ruiCurrentTab" style is used, and for tab of type LeftTabs and RightTabs, the "ruiCurrentVerticalTab" style is used.
|
||||
If you want to customize the display of tabs, you can either override these styles, or assign your own style using
|
||||
the "current-tab-style" property (constant CurrentTabStyle).
|
||||
|
||||
Accordingly, for an inactive tab, the "ruiInactiveTab" and "ruiInactiveVerticalTab" styles are used,
|
||||
Accordingly, for an inactive tab, the "ruiTab" and "ruiVerticalTab" styles are used,
|
||||
and you can assign your own style using the "tab-style" property (constant TabStyle).
|
||||
|
||||
Also, when displaying tabs, the following constants and styles are used:
|
||||
|
||||
* "ruiTabHeight" - the SizeUnit constant sets the height of the tab bar;
|
||||
|
||||
* "ruiTabSpace" - the SizeUnit constant sets the distance between tabs;
|
||||
|
||||
* "ruiTabsPadding" - the SizeUnit or BoundsProperty constant sets the indentation from the inside of the tab bar;
|
||||
|
||||
* "ruiTabsBackgroundColor" - background color of the tabs bar;
|
||||
|
||||
* "ruiTabCloseButton" - style of the button for closing the tab.
|
||||
|
||||
You can override these constants and styles to customize the tab bar
|
||||
The "ruiTabBar" style is used to display the tab bar, and you can assign your own style
|
||||
using the "tab-bar-style" property (constant TabBarStyle).
|
||||
|
||||
## AbsoluteLayout
|
||||
|
||||
|
|
|
|||
|
|
@ -17,11 +17,11 @@ theme {
|
|||
ruiPopupTitleColor = #FF0000FF,
|
||||
ruiPopupTitleTextColor = #FFFFFFFF,
|
||||
|
||||
ruiTabsBackgroundColor = #FFEEEEEE,
|
||||
ruiInactiveTabColor = #FFD0D0D0,
|
||||
ruiInactiveTabTextColor = #FF202020,
|
||||
ruiActiveTabColor = #FFFFFFFF,
|
||||
ruiActiveTabTextColor = #FF000000,
|
||||
ruiTabBarBackgroundColor = #FFEEEEEE,
|
||||
ruiTabColor = #FFD0D0D0,
|
||||
ruiTabTextColor = #FF202020,
|
||||
ruiCurrentTabColor = #FFFFFFFF,
|
||||
ruiCurrentTabTextColor = #FF000000,
|
||||
},
|
||||
colors:dark = _{
|
||||
ruiTextColor = #FFE0E0E0,
|
||||
|
|
@ -34,11 +34,11 @@ theme {
|
|||
ruiHighlightColor = #FF1A74E8,
|
||||
ruiHighlightTextColor = #FFFFFFFF,
|
||||
|
||||
ruiTabsBackgroundColor = #FF303030,
|
||||
ruiInactiveTabColor = #FF606060,
|
||||
ruiInactiveTabTextColor = #FFE0E0E0,
|
||||
ruiActiveTabColor = #FF000000,
|
||||
ruiActiveTabTextColor = #FFFFFFFF,
|
||||
ruiTabBarBackgroundColor = #FF303030,
|
||||
ruiTabColor = #FF606060,
|
||||
ruiTabTextColor = #FFE0E0E0,
|
||||
ruiCurrentTabColor = #FF000000,
|
||||
ruiCurrentTabTextColor = #FFFFFFFF,
|
||||
},
|
||||
constants = _{
|
||||
ruiButtonHorizontalPadding = 16px,
|
||||
|
|
@ -53,9 +53,9 @@ theme {
|
|||
ruiPopupTitleHeight = 32px,
|
||||
ruiPopupTitlePadding = 8px,
|
||||
ruiPopupButtonGap = 4px,
|
||||
ruiTabSpace = 2px,
|
||||
ruiTabMargin = 1px,
|
||||
ruiTabHeight = 32px,
|
||||
ruiTabsPadding = 2px,
|
||||
ruiTabBarPadding = 2px,
|
||||
ruiTabRadius = 2px,
|
||||
},
|
||||
constants:touch = _{
|
||||
|
|
@ -118,32 +118,43 @@ theme {
|
|||
background-color=@ruiHighlightColor,
|
||||
text-color=@ruiHighlightTextColor,
|
||||
},
|
||||
ruiActiveTab {
|
||||
background-color = @ruiActiveTabColor,
|
||||
text-color = @ruiActiveTabTextColor,
|
||||
ruiTabBar {
|
||||
background-color = @ruiTabBarBackgroundColor,
|
||||
}
|
||||
ruiCurrentTab {
|
||||
min-height = @ruiTabHeight,
|
||||
background-color = @ruiCurrentTabColor,
|
||||
text-color = @ruiCurrentTabTextColor,
|
||||
padding-left = 4px,
|
||||
padding-right = 4px,
|
||||
margin = @ruiTabMargin,
|
||||
radius = @ruiTabRadius,
|
||||
},
|
||||
ruiInactiveTab {
|
||||
background-color = @ruiInactiveTabColor,
|
||||
text-color = @ruiInactiveTabTextColor,
|
||||
ruiTab {
|
||||
min-height = @ruiTabHeight,
|
||||
background-color = @ruiTabColor,
|
||||
text-color = @ruiTabTextColor,
|
||||
padding-left = 4px,
|
||||
padding-right = 4px,
|
||||
margin = @ruiTabMargin,
|
||||
radius = @ruiTabRadius,
|
||||
},
|
||||
ruiActiveVerticalTab {
|
||||
background-color = @ruiActiveTabColor,
|
||||
text-color = @ruiActiveTabTextColor,
|
||||
ruiCurrentVerticalTab {
|
||||
min-width = @ruiTabHeight,
|
||||
background-color = @ruiCurrentTabColor,
|
||||
text-color = @ruiCurrentTabTextColor,
|
||||
padding-top = 4px,
|
||||
padding-bottom = 4px,
|
||||
margin = @ruiTabMargin,
|
||||
radius = @ruiTabRadius,
|
||||
},
|
||||
ruiInactiveVerticalTab {
|
||||
background-color = @ruiInactiveTabColor,
|
||||
text-color = @ruiInactiveTabTextColor,
|
||||
ruiVerticalTab {
|
||||
min-width = @ruiTabHeight,
|
||||
background-color = @ruiTabColor,
|
||||
text-color = @ruiTabTextColor,
|
||||
padding-top = 4px,
|
||||
padding-bottom = 4px,
|
||||
margin = @ruiTabMargin,
|
||||
radius = @ruiTabRadius,
|
||||
},
|
||||
ruiTabCloseButton {
|
||||
|
|
@ -155,7 +166,7 @@ theme {
|
|||
text-size = 16px,
|
||||
},
|
||||
ruiTabCloseButton:hover {
|
||||
background-color = @ruiTabsBackgroundColor,
|
||||
background-color = @ruiTabBarBackgroundColor,
|
||||
radius = 3px,
|
||||
},
|
||||
ruiPopup {
|
||||
|
|
|
|||
|
|
@ -395,12 +395,6 @@ const (
|
|||
Anchor = "anchor"
|
||||
// Gap is the constant for the "gap" property tag.
|
||||
Gap = "gap"
|
||||
// Tabs is the constant for the "tabs" property tag.
|
||||
Tabs = "tabs"
|
||||
// TabStyle is the constant for the "tab-style" property tag.
|
||||
TabStyle = "tab-style"
|
||||
// CurrentTabStyle is the constant for the "current-tab-style" property tag.
|
||||
CurrentTabStyle = "current-tab-style"
|
||||
// Text is the constant for the "text" property tag.
|
||||
Text = "text"
|
||||
// VerticalAlign is the constant for the "vertical-align" property tag.
|
||||
|
|
|
|||
101
tabsLayout.go
101
tabsLayout.go
|
|
@ -27,6 +27,26 @@ const (
|
|||
// The main listener format: func(TabsLayout, int), where the second argument is the index of the tab.
|
||||
TabCloseEvent = "tab-close-event"
|
||||
|
||||
// Tabs is the constant for the "tabs" property tag.
|
||||
// The "tabs" is the int property that sets where the tabs are located.
|
||||
// Valid values: TopTabs (0), BottomTabs (1), LeftTabs (2), RightTabs (3), LeftListTabs (4), RightListTabs (5), and HiddenTabs (6).
|
||||
Tabs = "tabs"
|
||||
|
||||
// TabBarStyle is the constant for the "tab-bar-style" property tag.
|
||||
// The "tab-bar-style" is the string property that sets the style for the display of the tab bar.
|
||||
// The default value is "ruiTabBar".
|
||||
TabBarStyle = "tab-bar-style"
|
||||
|
||||
// TabStyle is the constant for the "tab-style" property tag.
|
||||
// The "tab-style" is the string property that sets the style for the display of the tab.
|
||||
// The default value is "ruiTab" or "ruiVerticalTab".
|
||||
TabStyle = "tab-style"
|
||||
|
||||
// CurrentTabStyle is the constant for the "current-tab-style" property tag.
|
||||
// The "current-tab-style" is the string property that sets the style for the display of the current (selected) tab.
|
||||
// The default value is "ruiCurrentTab" or "ruiCurrentVerticalTab".
|
||||
CurrentTabStyle = "current-tab-style"
|
||||
|
||||
// TopTabs - tabs of TabsLayout are on the top
|
||||
TopTabs = 0
|
||||
// BottomTabs - tabs of TabsLayout are on the bottom
|
||||
|
|
@ -463,15 +483,22 @@ func (tabsLayout *tabsLayoutData) tabsLocation() int {
|
|||
return tabs
|
||||
}
|
||||
|
||||
func (tabsLayout *tabsLayoutData) tabBarStyle() string {
|
||||
if style, ok := stringProperty(tabsLayout, TabBarStyle, tabsLayout.session); ok {
|
||||
return style
|
||||
}
|
||||
return "ruiTabBar"
|
||||
}
|
||||
|
||||
func (tabsLayout *tabsLayoutData) inactiveTabStyle() string {
|
||||
if style, ok := stringProperty(tabsLayout, TabStyle, tabsLayout.session); ok {
|
||||
return style
|
||||
}
|
||||
switch tabsLayout.tabsLocation() {
|
||||
case LeftTabs, RightTabs:
|
||||
return "ruiInactiveVerticalTab"
|
||||
return "ruiVerticalTab"
|
||||
}
|
||||
return "ruiInactiveTab"
|
||||
return "ruiTab"
|
||||
}
|
||||
|
||||
func (tabsLayout *tabsLayoutData) activeTabStyle() string {
|
||||
|
|
@ -480,9 +507,9 @@ func (tabsLayout *tabsLayoutData) activeTabStyle() string {
|
|||
}
|
||||
switch tabsLayout.tabsLocation() {
|
||||
case LeftTabs, RightTabs:
|
||||
return "ruiActiveVerticalTab"
|
||||
return "ruiCurrentVerticalTab"
|
||||
}
|
||||
return "ruiActiveTab"
|
||||
return "ruiCurrentTab"
|
||||
}
|
||||
|
||||
func (tabsLayout *tabsLayoutData) ListSize() int {
|
||||
|
|
@ -685,10 +712,10 @@ func (tabsLayout *tabsLayoutData) htmlSubviews(self View, buffer *strings.Builde
|
|||
tabsLayoutID := tabsLayout.htmlID()
|
||||
|
||||
if location != HiddenTabs {
|
||||
tabsHeight, _ := sizeConstant(tabsLayout.session, "ruiTabHeight")
|
||||
tabsSpace, _ := sizeConstant(tabsLayout.session, "ruiTabSpace")
|
||||
rowLayout := false
|
||||
buffer.WriteString(`<div style="display: flex;`)
|
||||
|
||||
buffer.WriteString(`<div class="`)
|
||||
buffer.WriteString(tabsLayout.tabBarStyle())
|
||||
buffer.WriteString(`" style="display: flex;`)
|
||||
|
||||
switch location {
|
||||
case LeftTabs, LeftListTabs, TopTabs:
|
||||
|
|
@ -708,40 +735,6 @@ func (tabsLayout *tabsLayoutData) htmlSubviews(self View, buffer *strings.Builde
|
|||
|
||||
default:
|
||||
buffer.WriteString(`row nowrap; justify-content: flex-start; align-items: stretch;`)
|
||||
if tabsHeight.Type != Auto {
|
||||
buffer.WriteString(` height: `)
|
||||
buffer.WriteString(tabsHeight.cssString(""))
|
||||
buffer.WriteByte(';')
|
||||
}
|
||||
rowLayout = true
|
||||
}
|
||||
|
||||
switch location {
|
||||
case LeftTabs, RightTabs:
|
||||
if tabsHeight.Type != Auto {
|
||||
buffer.WriteString(` width: `)
|
||||
buffer.WriteString(tabsHeight.cssString(""))
|
||||
buffer.WriteByte(';')
|
||||
}
|
||||
}
|
||||
|
||||
var tabsPadding Bounds
|
||||
if value, ok := tabsLayout.session.Constant("ruiTabsPadding"); ok {
|
||||
if tabsPadding.parse(value, tabsLayout.session) {
|
||||
if !tabsPadding.allFieldsAuto() {
|
||||
buffer.WriteByte(' ')
|
||||
buffer.WriteString(Padding)
|
||||
buffer.WriteString(`: `)
|
||||
tabsPadding.writeCSSString(buffer, "0")
|
||||
buffer.WriteByte(';')
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if tabsBackground, ok := tabsLayout.session.Color("ruiTabsBackgroundColor"); ok {
|
||||
buffer.WriteString(` background-color: `)
|
||||
buffer.WriteString(tabsBackground.cssString())
|
||||
buffer.WriteByte(';')
|
||||
}
|
||||
|
||||
buffer.WriteString(`">`)
|
||||
|
|
@ -752,34 +745,18 @@ func (tabsLayout *tabsLayoutData) htmlSubviews(self View, buffer *strings.Builde
|
|||
notTranslate := GetNotTranslate(tabsLayout, "")
|
||||
closeButton, _ := boolProperty(tabsLayout, TabCloseButton, tabsLayout.session)
|
||||
|
||||
tabMargin := ""
|
||||
if tabsSpace.Type != Auto && tabsSpace.Value > 0 {
|
||||
if rowLayout {
|
||||
tabMargin = ` margin-right: ` + tabsSpace.cssString("") + ";"
|
||||
} else {
|
||||
tabMargin = ` margin-bottom: ` + tabsSpace.cssString("") + ";"
|
||||
}
|
||||
}
|
||||
|
||||
var tabStyle, titleDiv string
|
||||
switch location {
|
||||
case LeftTabs, RightTabs:
|
||||
tabStyle = `display: grid; grid-template-rows: auto 1fr auto; align-items: center; justify-items: center; grid-row-gap: 8px;`
|
||||
|
||||
case LeftListTabs, RightListTabs:
|
||||
tabStyle = `display: grid; grid-template-columns: auto 1fr auto; align-items: start; justify-items: center; grid-column-gap: 8px;`
|
||||
tabStyle = `display: grid; grid-template-columns: auto 1fr auto; align-items: center; justify-items: start; grid-column-gap: 8px;`
|
||||
|
||||
default:
|
||||
tabStyle = `display: grid; grid-template-columns: auto 1fr auto; align-items: center; justify-items: center; grid-column-gap: 8px;`
|
||||
}
|
||||
|
||||
switch location {
|
||||
case LeftListTabs, RightListTabs:
|
||||
if tabsHeight.Type != Auto {
|
||||
tabStyle += ` height: ` + tabsHeight.cssString("") + ";"
|
||||
}
|
||||
}
|
||||
|
||||
switch location {
|
||||
case LeftTabs:
|
||||
titleDiv = `<div style="writing-mode: vertical-lr; transform: rotate(180deg); grid-row-start: 2; grid-row-end: 3; grid-column-start: 1; grid-column-end: 2;">`
|
||||
|
|
@ -791,7 +768,6 @@ func (tabsLayout *tabsLayoutData) htmlSubviews(self View, buffer *strings.Builde
|
|||
titleDiv = `<div style="grid-row-start: 1; grid-row-end: 2; grid-column-start: 2; grid-column-end: 3;">`
|
||||
}
|
||||
|
||||
last := len(tabsLayout.views) - 1
|
||||
for n, view := range tabsLayout.views {
|
||||
icon, _ := stringProperty(view, Icon, tabsLayout.session)
|
||||
title, _ := stringProperty(view, Title, tabsLayout.session)
|
||||
|
|
@ -819,11 +795,6 @@ func (tabsLayout *tabsLayoutData) htmlSubviews(self View, buffer *strings.Builde
|
|||
buffer.WriteString(strconv.Itoa(n))
|
||||
buffer.WriteString(`, event)" style="`)
|
||||
buffer.WriteString(tabStyle)
|
||||
|
||||
if n != last {
|
||||
buffer.WriteString(tabMargin)
|
||||
}
|
||||
|
||||
buffer.WriteString(`" data-container="`)
|
||||
buffer.WriteString(tabsLayoutID)
|
||||
buffer.WriteString(`" data-view="`)
|
||||
|
|
|
|||
Loading…
Reference in New Issue