AngularJS सामग्री वेबसाइट

Question

में की तरह एक मेनू बनाएँ मैं एक मेनू AngularJS सामग्री वेबसाइट (https://material.angularjs.org)

में एक तरह लग रहा है बनाना चाहते हैं, दुर्भाग्य से प्रलेखन या डेमो ऐसा करने के लिए नहीं है।

कोई विचार?

धन्यवाद

Answer 1

आप अपने निर्देशों के साथ अपने स्वयं के साइड मेनू menuToggle और menuItem, और उनके menu service, जो उनकी स्रोत फ़ाइलों में पाए जाते हैं, के साथ अपना स्वयं का साइड मेनू बना सकते हैं। मैंने कई परियोजनाओं में इस मेनू का उपयोग किया है, इसलिए मुझे पता है कि यह काम करता है। आपको बस इतना करना है कि इसे उसी तरह कार्यान्वित करें। मैं एक ब्लॉग पोस्ट है कि इस माध्यम से चला जाता यहां पाया लिखा है:

How to create an Angular Material Side Menu

Answer 2

आप angularui से अकॉर्डियन पर एक नज़र हो सकता था। http://angular-ui.github.io/bootstrap/

Answer 3

विस्तार/पतन नियंत्रण का समर्थन करने के लिए आपको mdListItem के लिए प्रतीक्षा करनी होगी। यह 0.9.0 के लिए क्रमशः निर्धारित है।

https://github.com/angular/material/issues/985

Answer 4

@Splaktar कहते हैं देखें, तो आप मील का पत्थर 0.9.0 में आधिकारिक mdListiItem के लिए प्रतीक्षा कर सकते हैं।

और आप पूरे angular-material प्रोजेक्ट स्रोत कोड को भी चेकआउट कर सकते हैं और दस्तावेज़ बनाने के लिए https://github.com/angular/material#building या README.md यहां देख सकते हैं।

पहले स्थापित या अपने स्थानीय परियोजना के NPM उपकरण अद्यतन:

# First install all the NPM tools: 
npm install 
# Or update 
npm update 

फिर घूंट कार्यों चलाएँ:

# To build `angular-material.js/.css` and `Theme` files in the `/dist` directory 
gulp build 
# To build the Angular Material Docs and Demos in `/dist/docs` directory 
gulp docs 

तो फिर तुम कोड आप 'docs.js' में की जरूरत है देखना चाहिए, ' आउटपुट फ़ोल्डर 'dist/docs' में css/docs.css 'और' index.html '।

'dist/docs' में 'docs.js' मूल 'दस्तावेज़' फ़ोल्डर में 'docs.js' से अलग है। जब आप अपनी ज़रूरत वाले दस्तावेज़ों का निर्माण करते हैं तो कई कोड जेनरेट और एकत्रित होते हैं।

दस्तावेज़ बनाने के बाद, आपको आवश्यक कोड प्राप्त करने का सबसे तेज़ तरीका 'menuToggle' या 'menuLink' निर्देश या 'dist/docs/docs.js' में 'मेनू' फैक्ट्री खोजना है।

उम्मीद है कि यह आपकी मदद कर सकता है।

Answer 5

कम से कम कुछ पहले से बने इस के लिए निर्देशों रहे हैं ...उदाहरण के एक जोड़े:

• angular-material-sidenav
• angular-material-sidemenu

Answer 6

बस यहाँ जवाब की जाँच: https://stackoverflow.com/a/38258961/1904479,

http://demo.sodhanalibrary.com/angular/material-ui/accordion/accordion.html अकॉर्डियन या विस्तार योग्य सूची दृश्य का एक अच्छा कार्यान्वयन है।

Answer 7

यदि आप एक समान यूएक्स और उपस्थिति चाहते हैं, तो आपको इनमें से कोई भी आवश्यकता नहीं है, मुझे लगता है कि सेवा आयात करने के लिए कोई कारण नहीं है। लेकिन, अगर आप चाहते हैं कि ढहने योग्यता आप इसे आयात किए बिना एनजी-क्लास निर्देश के साथ हल कर सकते हैं; निर्भर करता है कि कैसे आप अपने दायरे सेटअप आप एक अलग चर प्रत्येक खुलने और बंधनेवाला क्षेत्र के लिए, कुछ इस तरह की जरूरत हो सकती:

<div data-ng-click="collapsableA = !collapsableA;">Toggle Click zone</div> 
<div data-ng-class="{collapsed: 'collapsableA}" class="collapsable"> 
    Stuff that gets hidden 
    <div>More stuff to hide</div> 
</div> 

की तरह अपने सीएसएस कुछ में अपने नियंत्रक $ गुंजाइश घोषणाओं में

$scope.collapsedA = true //if you want it to start collapsed 

और उसके बाद

.collapsable{ 
    transition: all .2s ease-in-out; 
    min-height: 20px; 
    overflow: hidden; 
} 
.collapsable.collapsed{ 
    height: 0; 
    min-height: 0; 
}