kopia lustrzana https://github.com/miklobit/TiddlyWiki5
Refactor vertical tabs for reusability
In practice, if you look at TabsMacro you’ll see that the width of the tab content is wrong, and will usually overflow the container. Next step is to fix that by using flexbox…print-window-tiddler
rodzic
e60fc9f81f
commit
b3032d452f
|
@ -8,8 +8,9 @@ title: $:/core/ui/PageMacros
|
||||||
<<colour $name$>>
|
<<colour $name$>>
|
||||||
\end
|
\end
|
||||||
|
|
||||||
\define tabs(tabsList,default,state:"$:/state/tab")
|
\define tabs(tabsList,default,state:"$:/state/tab",class)
|
||||||
<div class="tw-tab-buttons">
|
<div class="tw-tab-set $class$">
|
||||||
|
<div class="tw-tab-buttons $class$">
|
||||||
<$list filter="$tabsList$" variable="currentTab">
|
<$list filter="$tabsList$" variable="currentTab">
|
||||||
<$button set=<<qualify "$state$">> setTo=<<currentTab>> default="$default$" selectedClass="tw-tab-selected">
|
<$button set=<<qualify "$state$">> setTo=<<currentTab>> default="$default$" selectedClass="tw-tab-selected">
|
||||||
<$transclude tiddler=<<currentTab>> field="caption">
|
<$transclude tiddler=<<currentTab>> field="caption">
|
||||||
|
@ -17,15 +18,14 @@ title: $:/core/ui/PageMacros
|
||||||
</$transclude>
|
</$transclude>
|
||||||
</$button>
|
</$button>
|
||||||
</$list>
|
</$list>
|
||||||
</div>
|
</div><div class="tw-tab-divider $class$"/><div class="tw-tab-content $class$">
|
||||||
<div class="tw-tab-divider"/>
|
|
||||||
<div class="tw-tab-content">
|
|
||||||
<$list filter="$tabsList$" variable="currentTab">
|
<$list filter="$tabsList$" variable="currentTab">
|
||||||
<$reveal type="match" state=<<qualify "$state$">> text=<<currentTab>> default="$default$">
|
<$reveal type="match" state=<<qualify "$state$">> text=<<currentTab>> default="$default$">
|
||||||
<$transclude tiddler=<<currentTab>> mode="block"/>
|
<$transclude tiddler=<<currentTab>> mode="block"/>
|
||||||
</$reveal>
|
</$reveal>
|
||||||
</$list>
|
</$list>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
\end
|
\end
|
||||||
|
|
||||||
\define wikitext-example(src)
|
\define wikitext-example(src)
|
||||||
|
|
|
@ -3,5 +3,5 @@ tags: $:/tags/SideBar
|
||||||
caption: {{$:/language/SideBar/More/Caption}}
|
caption: {{$:/language/SideBar/More/Caption}}
|
||||||
|
|
||||||
<div class="tw-more-sidebar">
|
<div class="tw-more-sidebar">
|
||||||
<<tabs "[all[shadows+tiddlers]tag[$:/tags/MoreSideBar]!has[draft.of]]" "$:/core/ui/MoreSideBar/Tags" "$:/state/tab/moresidebar">>
|
<<tabs "[all[shadows+tiddlers]tag[$:/tags/MoreSideBar]!has[draft.of]]" "$:/core/ui/MoreSideBar/Tags" "$:/state/tab/moresidebar" "tw-vertical">>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -1,17 +1,20 @@
|
||||||
created: 20131228162203521
|
created: 20131228162203521
|
||||||
modified: 20140225223527667
|
modified: 20140509223527667
|
||||||
tags: macros
|
tags: macros
|
||||||
title: TabsMacro
|
title: TabsMacro
|
||||||
type: text/vnd.tiddlywiki
|
type: text/vnd.tiddlywiki
|
||||||
|
|
||||||
The tabs macro displays a list of tiddlers as a tab control. The user can switch between tabs by clicking on them. The tabs are labelled with the title of the corresponding tiddler, unless there is a `caption` field present in which case it is used instead.
|
The tabs macro displays a list of tiddlers as a tab control. The user can switch between tabs by clicking on them. The tabs are labelled with the title of the corresponding tiddler, unless there is a `caption` field present in which case it is used instead.
|
||||||
|
|
||||||
|
By default the tab control arranges the tabs horizontally with the content underneath. You can also choose to have the tabs arranged vertically by passing the class `tw-vertical`.
|
||||||
|
|
||||||
! Parameters
|
! Parameters
|
||||||
|
|
||||||
|!Position |!Name |!Description |!Default |
|
|!Position |!Name |!Description |!Default |
|
||||||
|1st |tabsList |Filter giving the tiddlers to be displayed | |
|
|1st |tabsList |Filter giving the tiddlers to be displayed | |
|
||||||
|2nd |default |Name of the tiddler containing the default tab | |
|
|2nd |default |Name of the tiddler containing the default tab | |
|
||||||
|3rd |state |String to distinguish multiple tabs within the same tiddler (use of the system tiddler prefix is recommended) |''$:/state/tab'' |
|
|3rd |state |String to distinguish multiple tabs within the same tiddler (use of the system tiddler prefix is recommended) |''$:/state/tab'' |
|
||||||
|
|4th |class |Additional CSS classes for the three wrappers DIV of the tab | |
|
||||||
|
|
||||||
! Examples
|
! Examples
|
||||||
|
|
||||||
|
@ -23,5 +26,4 @@ Here is an example of the tabs macro:
|
||||||
|
|
||||||
<<tabs "Docs WikiText Features RoadMap" "WikiText" "$:/state/tab1">>
|
<<tabs "Docs WikiText Features RoadMap" "WikiText" "$:/state/tab1">>
|
||||||
|
|
||||||
<<tabs "[tag[tips]]" "GoogleChromeTips" "$:/state/tab1">>
|
<<tabs "[tag[tips]]" "GoogleChromeTips" "$:/state/tab1" "tw-vertical">>
|
||||||
|
|
||||||
|
|
|
@ -959,7 +959,8 @@ canvas.tw-edit-bitmapeditor {
|
||||||
** Tabs
|
** Tabs
|
||||||
*/
|
*/
|
||||||
|
|
||||||
.tw-tab-set {
|
.tw-tab-set.tw-vertical {
|
||||||
|
white-space: nowrap;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tw-tab-buttons {
|
.tw-tab-buttons {
|
||||||
|
@ -968,6 +969,15 @@ canvas.tw-edit-bitmapeditor {
|
||||||
margin-bottom: -1px;
|
margin-bottom: -1px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.tw-tab-buttons.tw-vertical {
|
||||||
|
display: inline-block;
|
||||||
|
padding-top: inherit;
|
||||||
|
vertical-align: top;
|
||||||
|
text-align: right;
|
||||||
|
margin-bottom: inherit;
|
||||||
|
margin-right: -1px;
|
||||||
|
}
|
||||||
|
|
||||||
.tw-tab-buttons button.tw-tab-selected {
|
.tw-tab-buttons button.tw-tab-selected {
|
||||||
color: <<colour tab-foreground-selected>>;
|
color: <<colour tab-foreground-selected>>;
|
||||||
background-color: <<colour tab-background-selected>>;
|
background-color: <<colour tab-background-selected>>;
|
||||||
|
@ -978,9 +988,6 @@ canvas.tw-edit-bitmapeditor {
|
||||||
|
|
||||||
.tw-tab-buttons button {
|
.tw-tab-buttons button {
|
||||||
color: <<colour tab-foreground>>;
|
color: <<colour tab-foreground>>;
|
||||||
padding: 2px 4px 4px 4px;
|
|
||||||
margin-left: 2px;
|
|
||||||
margin-right: 2px;
|
|
||||||
font-weight: 300;
|
font-weight: 300;
|
||||||
border: none;
|
border: none;
|
||||||
background: inherit;
|
background: inherit;
|
||||||
|
@ -990,16 +997,40 @@ canvas.tw-edit-bitmapeditor {
|
||||||
border-right: 1px solid <<colour tab-border>>;
|
border-right: 1px solid <<colour tab-border>>;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.tw-tab-buttons.tw-vertical button {
|
||||||
|
display: block;
|
||||||
|
width: 100%;
|
||||||
|
margin-top: 3px;
|
||||||
|
text-align: right;
|
||||||
|
background-color: <<colour tab-background>>;
|
||||||
|
border-left: 1px solid <<colour tab-border>>;
|
||||||
|
border-bottom: 1px solid <<colour tab-border>>;
|
||||||
|
border-right: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tw-tab-buttons.tw-vertical button.tw-tab-selected {
|
||||||
|
background-color: <<colour tab-background-selected>>;
|
||||||
|
border-right: 1px solid <<colour tab-background-selected>>;
|
||||||
|
}
|
||||||
|
|
||||||
.tw-tab-divider {
|
.tw-tab-divider {
|
||||||
border-top: 1px solid <<colour tab-divider>>;
|
border-top: 1px solid <<colour tab-divider>>;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.tw-tab-divider.tw-vertical {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
.tw-tab-content {
|
.tw-tab-content {
|
||||||
padding-top: 14px;
|
padding-top: 14px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tw-sidebar-lists .tw-tab-buttons {
|
.tw-tab-content.tw-vertical {
|
||||||
padding-top: 15px;
|
white-space: normal;
|
||||||
|
display: inline-block;
|
||||||
|
vertical-align: top;
|
||||||
|
padding-left: 14px;
|
||||||
|
border-left: 1px solid <<colour tab-border>>;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tw-sidebar-lists .tw-tab-buttons button.tw-tab-selected {
|
.tw-sidebar-lists .tw-tab-buttons button.tw-tab-selected {
|
||||||
|
@ -1022,47 +1053,13 @@ canvas.tw-edit-bitmapeditor {
|
||||||
border-top: 1px solid <<colour sidebar-tab-divider>>;
|
border-top: 1px solid <<colour sidebar-tab-divider>>;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tw-more-sidebar {
|
|
||||||
white-space: nowrap;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (min-width: 770px) {
|
|
||||||
.tw-more-sidebar {
|
|
||||||
margin-left: -14px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.tw-more-sidebar .tw-tab-buttons {
|
|
||||||
display: inline-block;
|
|
||||||
vertical-align: top;
|
|
||||||
text-align: right;
|
|
||||||
padding-top: 0;
|
|
||||||
padding-left: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tw-more-sidebar .tw-tab-buttons button {
|
|
||||||
display: block;
|
|
||||||
width: 100%;
|
|
||||||
text-align: right;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tw-sidebar-lists .tw-more-sidebar .tw-tab-divider {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tw-more-sidebar .tw-tab-content {
|
|
||||||
display: inline-block;
|
|
||||||
vertical-align: top;
|
|
||||||
padding-top: 0;
|
|
||||||
padding-left: 14px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tw-more-sidebar .tw-tab-buttons button {
|
.tw-more-sidebar .tw-tab-buttons button {
|
||||||
background-color: <<colour sidebar-tab-background>>;
|
background-color: <<colour sidebar-tab-background>>;
|
||||||
border-top: none;
|
border-top: none;
|
||||||
border-left: none;
|
border-left: none;
|
||||||
border-bottom: none;
|
border-bottom: none;
|
||||||
border-right: 1px solid #ccc;
|
border-right: 1px solid #ccc;
|
||||||
|
margin-bottom: inherit;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tw-more-sidebar .tw-tab-buttons button.tw-tab-selected {
|
.tw-more-sidebar .tw-tab-buttons button.tw-tab-selected {
|
||||||
|
|
Ładowanie…
Reference in New Issue