Comments (8)
The current implementation locks the sidenav at a fixed viewport width (greater than 850px, overridable through css/sass). When we have sass in the consuming app, you can just override $locked-breakpoint: 850px;
sass variable to something else.
The structure for a right sidebar would be identical to a left one:
You can have two sidebars, yes. Just add it before paper-content
with the md-sidenav-left
. The problem is that their state is bound to their parent paper-nav-container
component. So, if they're both inside the same paper-nav-container
their state will always be the same.
The sidenav is the only component not ported from angular material. The reason is that they use a really complicated media query evaluation system and angular ngAnimate
function, which isn't easy to port for ember.
The good news is that I think our sidenav implementation is really clever.
Hope it helped.
from ember-paper.
Thanks, your clarification helped, and yes, your sidenav implementation is really clever, so little lines of code compared to the angular one !
from ember-paper.
@pixelhandler nailed it at https://github.com/pixelhandler/ember-off-canvas-components
I just adapted it to our needs with locking, material animation (which isn't complete, btw #41), etc.
Sorry for always mentioning you, @pixelhandler.
from ember-paper.
@miguelcobain cool, I'll checkout your adaptation (no need to be sorry). at the day job we use the off canvas component and have a really nice theme. so I'm interested in adding themes at some point.
from ember-paper.
So I tried to keep the sidenavbar always open by overriding $locked-breakpoint. However It is not straightforward. If just importing ember-paper scss in the app style scss file, it is not possible to overwrite it. I assumed $locked-breakpoint is defined in the variables file, so if importing all components separately, I could just overwrite it after importing the variables files, but unfortunately $locked-breakpoint is defined in the paper-sidenav.scss, so I had to insert the whole paper-sidenav source, to make the overwrite effective.
Maybe I am missing something and there is an easier way of doing what I did, otherwise I suggest to put the $locked-breakpoint into the variables file.
from ember-paper.
Doing
@import 'ember-paper';
and after
$locked-breakpoint: your value;
doesn't work?
from ember-paper.
No, unfortunately not. Does it work for you ?
I have this npm dependencies:
"broccoli-autoprefixer": "^2.1.0",
"broccoli-sass": "0.3.3",
from ember-paper.
Please update ember-paper to 0.0.20 and use this in your sass file:
$locked-breakpoint: 450px;
@import 'ember-paper';
We need to assign values before importing ember-paper. Looks like this is the way to do it in sass.
from ember-paper.
Related Issues (20)
- Deprecations when upgrading to Ember >= v3.20.x, {{-in-element}} HOT 1
- Paper select errors when menu is closed on ember > 3.17 HOT 3
- Form elements that accept `required` don't set an A11y attribute on the child element
- PaperSelect with selected=0 HOT 1
- Tab Component lacks accessible role="tab"
- Paper Tabs Pagination Always Visible
- Select ARIA violation around not having an accessible name
- paper-menu.item.shouldRenderButton doesn't handle the case when click handler is installed differently HOT 2
- Paper chips component throws an 'focus' error with readOnly property as true
- paper-chips inside paper-form: form is sent and closed when adding new tag (press Enter)
- error when building app with ember-paper HOT 8
- Ghost basic-dropdown-content once paper-menu closed HOT 1
- Remove usage of liquid and any other confusing irrelevant library from the docs
- With this being deprecated, what should we replace it with? HOT 2
- Add support for `renderInPlace` to `PaperSelect`
- Does not install with Ember 4.1.0 HOT 4
- [Embroider:MacrosConfig] the given config from '.../ember-get-config' for packageName 'undefined' is not JSON serializable. HOT 5
- Quest: Ember 4 + Octane HOT 1
- Button HOT 1
- How does the docs site get deployed? HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from ember-paper.