I'm using semantic-ui-vue
for a project.But there is problem in sidebar height.. here is my code.. how to set sidebar height for screen size.
<sui-sidebar-pushable class="ui attached segmant" >
<sui-sidebar animation="overlay" class="inverted" :visible="visible" >
<a class="item">1</a>
<a class="item">2</a>
<a class="item">3</a>
</sui-sidebar>
<sui-sidebar-pusher :dimmed="visible" #click="visible = false">
<div class="ui container">
<div>
<button class="ui button" #click.stop="visible = true">Menu</button>
</div>
<!-- site content -->
Content Goes here <br>
</div>
</sui-sidebar-pusher>
</sui-sidebar-pushable>
enter image description here
Related
how can I get my active tab & segment to display on the initial page load - my tabs load remotely using ajax and all work when you click on them, but on first page load the tab segment is empty :
<div class="ui tabular menu grid">
<div class="ui container">
<a class="item active tabby" data-tab="home"><i class="large home icon">
</i>Home</a>
<a class="item tabby" data-tab="two"><i class="large chart bar icon"></i>Two</a>
<a class="item tabby" data-tab="three"><i class="large calendar icon"</i>Three</a>
<a class="item tabby" data-tab="four"><i class="large clock icon"></i>Four</a>
</div>
</div>
<div class="ui center aligned grid">
<div class="ui container">
<div class="ui tab active segment " data-tab="home"></div>
<div class="ui tab segment" data-tab="two"></div>
<div class="ui tab segment" data-tab="three"></div>
<div class="ui tab segment" data-tab="four"></div>
</div>
</div>
To initialise:
$('.tabular.menu .item')
.tab({
cache: false,
evaluateScripts : true,
auto : true,
path : '/dashboard',
ignoreFirstLoad: false,
alwaysRefresh: true
});
I encountered the same issue, when the page loads the first or 'active' tab will open and display the contents defined by the html source, but it does not auto-load. However, clicking on the tab causes the auto-load to occur.
I have just read an article which suggests that jQuery does not fire the activate event on the first tab when it is created. If this is true then it might explain why this happens. jQuery bug report
My solution is to programatically activate the tab. The semantic ui documentation mentions doing this, but the information is a bit vague: find it in 'Tabs - Usage': where it refers to 'Initialising Tabs ... without Menus'. Semantic UI - Tabs - usage
Tabs can be activated with jQuery:
$.tab('change tab','tab-name');
where 'tab-name' is the 'path' you specified in 'data-tab="tab-name"'. At first I found that this just opened and closed the tab without auto-load, until I used a jQuery selector which selected the MENU item, not the TAB item, then the auto-load worked.
So, I activate the tab just after initializing the tabs in the Document.Ready function:-
$('#infotabs .menu .item')
.tab({
auto: true,
path: '/pathto/'
})
$('#infotabs .menu .item').tab('change tab','tab1.php')
;
This is the corresponding HTML:
<div id="infotabs">
<div class="ui top attached tabular menu">
<a class="active item" data-tab="tab1.php">tab1</a>
<a class="item" data-tab="tab2.php">tab2</a>
<a class="item" data-tab="tab3.php">tab3</a>
</div>
<div class="ui active bottom attached tab segment" data-tab="tab1.php">
1
</div>
<div class="ui bottom attached tab segment" data-tab="tab2.php">
2
</div>
<div class="ui bottom attached tab segment" data-tab="tab3.php">
3
</div>
</div>
I want to create the same design like chrome settings page
https://www.pcworld.com/article/3162716/software/how-to-switch-to-chromes-material-design-settings-page-for-an-easier-experience.html
I do not manage to put the md-switch at the right and in static position like chrome settings
I do manage to put the md-switch in right to the title but I need it always in the middle of the card stick to right.
Image of my result: (current design)
<md-card md-theme="{{ showDarkTheme ? 'dark-purple' : 'default' }}" md-theme-watch>
<div class="option-item">
<div class="option-item-header">
<div class="option-item-header-title">
title
</div>
</div>
<div class="clear"></div>
<div class="option-body">
<p>text</p>
</div>
</div>
<div class="option-switch">
<md-switch ng-model="vm.model" aria-label="active" ng-change="function()">
</md-switch>
</div>
</md-card>
I am trying to make the latitude and longitude to go below datakey in a column format when going smaller screen. I Played around with material design xs and and is not working for me. Below i have the code,right now i am hiding the lat and long since they are cutting off when going to like an iPhone-5 screen size
div layout layout-align="space-between center">
<div class="md-inline-edit-input " class="dkey-inline">
<strong id="dkey-label">Data Key:</strong>
<inline-edit identifier="'asset-name'" value="$ctrl.asset" display="$ctrl.asset.dataKey" value-name="'data key'" on-update="$ctrl.updateDataKey"></inline-edit>
</div>
<div ng-if="$ctrl.asset.latitude && $ctrl.asset.longitude" class="ng-animate-disabled" layout layout-align="space-between center">
<div style="padding-right:15px;"><strong class="lat-long-label">{{'LABELS.LAT'|translate}}:</strong><span>{{$ctrl.asset.latitude}}</span></div>
<div><strong class="lat-long-label">{{'LABELS.LONG'|translate}}:</strong><span>{{$ctrl.asset.longitude}}</span></div>
</div>
<div layout layout-xs="column" layout-align='space-between center' layout-align-xs='center start'>
<div class="md-inline-edit-input " class="dkey-inline">
<strong id="dkey-label">Data Key</strong>
<inline-edit identifier="'asset-name'" value="$ctrl.asset" display="$ctrl.asset.dataKey" value-name="'data key'" on-update="$ctrl.updateDataKey"></inline-edit>
</div>
<div>
<div ng-if="$ctrl.asset.latitude && $ctrl.asset.longitude" class="ng-animate-disabled" layout>
<span layout layout-padding>
<strong translate="LABELS.LAT"></strong>
<label>{{$ctrl.asset.latitude | number: 2}}</label>
</span>
<span layout layout-padding>
<strong translate="LABELS.LONG"></strong>
<label>{{$ctrl.asset.longitude | number: 2}}</label>
</span>
</div>
<div ng-if="!$ctrl.asset.latitude || !$ctrl.asset.longitude" class="ng-animate-disabled">
<label>No Location Information Available</label>
</div>
</div>
</div>
had to rewrite the whole section using material breaks.
<button class="ui button" #click="beforeAdd">添加</button>
<div class="ui modal">
<div class="header">Header</div>
<div class="content">
<div class="description">
<p>Description</p>
</div>
</div>
<div class="actions">
<div class="ui negative right labeled icon button">
取消
<i class="remove icon"></i>
</div>
<div class="ui positive right labeled icon button">
提交
<i class="checkmark icon"></i>
</div>
</div>
</div>
view methods:
beforeAdd(){
const modal = $(this.$el).find('.ui.modal')
console.log(modal)
modal.modal('show')
}
first click,modal show, second click nothing happened, I found semantic change modal to root for div class='ui dimmer modals page transition hidden',how can solve it
Semantic is removing it from your $(this.$el) so next time it does not find it.
It works when you use with global $ and an id:
show(){
const showModal = $('#mymodal')
console.log(showModal)
showModal.modal('show')
}
See Updated fiddle.
If you also want to use Vue variables in your modal, it is necessary to clone the modal and only show the cloned version.
With this approach Vue will still be able to keep track of the original modal, because Semantic doesn't remove it from the DOM.
beforeAdd(){
const modal = $(this.$el).find('.ui.modal').clone()
console.log(modal)
modal.modal('show')
}
I want to center the title and navigation links in my paper-toolbar. I am using the properties "justify" and "bottomJustify" to accomplish this, but the content remains on the left side.
<paper-toolbar class="medium-tall" justify="center" bottomJustify="center">
<div class="title">Titel</div>
<div class="bottom">
<a data-route="contact" href="contact">
<span>Contact</span>
</a>
</div>
</paper-toolbar>
It does not matter which "tallness" I choose. It never works. Does anyone has an idea how to solve this?
Update:
This code works:
<paper-toolbar class="medium-tall" justify="center" bottom-justify="center">
<div class="top">
Title
</div>
<div class="bottom">
<a data-route="contact" href="contact">
<span>Contact</span>
</a>
</div>
</paper-toolbar>
I had to:
change the bottomJustify to bottom-justify
remove the "title" class and instead use the "top" class
In your code you should use bottom-justify instead of bottomJustify to set the attribute!