honeymoose
/
angular-cn
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

drop down update

This commit is contained in:
Alex Wolfe 2015-03-04 05:27:48 -08:00
parent 2a020cf129
commit c77e4850f1
3 changed files with 39 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
public/_includes/_version-dropdown.jade
View File

@ -33,7 +33,7 @@ if language == 'dart'
<!-- DROPDOWN BUTTON --> <!-- DROPDOWN BUTTON -->
nav.hero-subtitle.text-subhead.dropdown nav.hero-subtitle.text-subhead.dropdown
button(md-button class="dropdown-button" ng-click="toggleVersionMenu($event)") #{title} <span class="icon-arrow-drop-down"></span> button(md-button class="dropdown-button" ng-click="toggleVersionMenu($event)") #{title} <span class="icon icon-arrow-drop-down"></span>
div(class="overlay ng-hide" ng-click="toggleVersionMenu($event)" ng-show="showMenu") div(class="overlay ng-hide" ng-click="toggleVersionMenu($event)" ng-show="showMenu")
<!-- DROPDOWN MENU --> <!-- DROPDOWN MENU -->

52
public/docs/js/latest/quickstart.jade
View File

@ -6,10 +6,10 @@ p.
// STEP 1 - Create a project ########################## // STEP 1 - Create a project ##########################
.l-main-section .l-main-section
h2#section-create-project 1. Create a project h2#section-create-project 1. Create a project
p. p.
The goal of this quickstart is to create a component that renders "Hello Alice" to the page. The goal of this quickstart is to create a component that renders "Hello Alice" to the page.
To get started, create a new directory. To get started, create a new directory.
pre.prettyprint pre.prettyprint
code. code.
@ -19,9 +19,9 @@ p.
// STEP 2 - Add the es6-shim ########################## // STEP 2 - Add the es6-shim ##########################
.l-main-section .l-main-section
h2#section-add-es6-shim 2. Add the es6-shim h2#section-add-es6-shim 2. Add the es6-shim
p. Within your project, clone the es6-shim repository: p. Within your project, clone the es6-shim repository:
pre.prettyprint pre.prettyprint
code git clone https://github.com/davideast/conscious.git es6-shim code git clone https://github.com/davideast/conscious.git es6-shim
@ -32,23 +32,23 @@ p.
.l-sub-section .l-sub-section
h3 ES6, AtScript, and the es6-shim h3 ES6, AtScript, and the es6-shim
h4 AtScript h4 AtScript
p. p.
Angular is built with <strong>AtScript</strong>. AtScript is an extension of ES6 (ECMAScript 6), the new specification Angular is built with <strong>AtScript</strong>. AtScript is an extension of ES6 (ECMAScript 6), the new specification
of the JavaScript language. This quickstart will be written in AtScript, but it is not required in Angular. of the JavaScript language. This quickstart will be written in AtScript, but it is not required in Angular.
h4 ES6 h4 ES6
p. p.
AtScript compiles to <strong>ES6</strong>. ES6 is not widely supported in all browsers today. AtScript compiles to <strong>ES6</strong>. ES6 is not widely supported in all browsers today.
The es6-shim repository allows you to use ES6 or AtScript in the browser. The es6-shim repository allows you to use ES6 or AtScript in the browser.
h4 es6-shim h4 es6-shim
p. p.
The <strong>es6-shim</strong> package includes Angular and dependencies needed to compile The <strong>es6-shim</strong> package includes Angular and dependencies needed to compile
ES6 in the browser, such as Traceur. Traceur is an ES6 compiler that transpiles ES6 to ES5 code. ES6 in the browser, such as Traceur. Traceur is an ES6 compiler that transpiles ES6 to ES5 code.
Think of the es6-shim repository as package rather than a project. Think of the es6-shim repository as package rather than a project.
// STEP 2 - Import Angular ########################## // STEP 2 - Import Angular ##########################
@ -59,7 +59,7 @@ p.
Create two files for this quickstart, an <code>index.html</code> and a Create two files for this quickstart, an <code>index.html</code> and a
<code>app.es6</code>. Both of these files will be at the root of the project. <code>app.es6</code>. Both of these files will be at the root of the project.
The <code>.es6</code> extension signifies that the file uses ES6 syntax. The <code>.es6</code> extension signifies that the file uses ES6 syntax.
pre.prettyprint.linenums pre.prettyprint.linenums
code touch index.html code touch index.html
| touch app.es6 | touch app.es6
@ -78,12 +78,12 @@ p.
h2#section-angular-create-account 3. Define a component h2#section-angular-create-account 3. Define a component
p. p.
Components structure and represent the UI. This quickstart demonstrates the process of creating a component. Components structure and represent the UI. This quickstart demonstrates the process of creating a component.
The component will have an HTML tag named app, The component will have an HTML tag named app,
<strong><code>&lt;my-app&gt;&lt;/my-app&gt;</code></strong>. <strong><code>&lt;my-app&gt;&lt;/my-app&gt;</code></strong>.
p. p.
A component consists of two parts; the <strong>annotation section</strong> A component consists of two parts; the <strong>annotation section</strong>
and the <strong>component controller</strong>. and the <strong>component controller</strong>.
pre.prettyprint.linenums pre.prettyprint.linenums
@ -113,7 +113,7 @@ p.
The <code>selector</code> property is a CSS selector which specifies the HTML tag for the component. The <code>selector</code> property is a CSS selector which specifies the HTML tag for the component.
p. p.
The <code>@Template</code> annotation defines the template to apply to the component. The <code>@Template</code> annotation defines the template to apply to the component.
This component uses an inline template, but external templates are This component uses an inline template, but external templates are
available as well. To use an external template specify a <code>url</code> property available as well. To use an external template specify a <code>url</code> property
and give it the path to the html file. and give it the path to the html file.
@ -162,11 +162,11 @@ p.
h2#section-transpile 4. Bootstrap h2#section-transpile 4. Bootstrap
p The last step to load the component on the page. At the bottom of <code>app.es6</code> call the <code>bootstrap()</code> function. p The last step to load the component on the page. At the bottom of <code>app.es6</code> call the <code>bootstrap()</code> function.
pre.prettyprint.linenums pre.prettyprint.linenums
code bootstrap(MyAppComponent); code bootstrap(MyAppComponent);
p. p.
Angular provides a <code>bootstrap</code> function that renders a Angular provides a <code>bootstrap</code> function that renders a
component to the page. The <code>bootstrap</code> function takes a component to the page. The <code>bootstrap</code> function takes a
@ -203,19 +203,19 @@ p.
.l-main-section .l-main-section
h2#section-load-component-module 5. Load the component h2#section-load-component-module 5. Load the component
p. p.
The last step is to load the module for the my-app component. The last step is to load the module for the my-app component.
The es6-shim file comes packaged with the System library. We'll The es6-shim file comes packaged with the System library. We'll
use System to load the component we created above. use System to load the component we created above.
.l-sub-section .l-sub-section
h3 System.js h3 System.js
p. p.
System is a third-party open sourced library. Most browsers today do not support ES6 module loading. System System is a third-party open sourced library. Most browsers today do not support ES6 module loading. System
provides module loading functionality to these browsers. provides module loading functionality to these browsers.
p. p.
To load the needed modules, System needs to know where to To load the needed modules, System needs to know where to
load the files from. The paths property in System specifies load the files from. The paths property in System specifies
@ -226,7 +226,7 @@ p.
li Angular: The Angular framework. li Angular: The Angular framework.
li Runtime assertions: Optional assertions for runtime type checking. li Runtime assertions: Optional assertions for runtime type checking.
li The my-app component created above: The component to display on the page. li The my-app component created above: The component to display on the page.
pre.prettyprint.linenums pre.prettyprint.linenums
code. code.
&lt;my-app&gt;&lt;/my-app&gt; &lt;my-app&gt;&lt;/my-app&gt;
@ -242,7 +242,7 @@ p.
// Kick off the application // Kick off the application
System.import('app'); System.import('app');
&lt;/script&gt; &lt;/script&gt;
// STEP 6 - Declare the HTML ########################## // STEP 6 - Declare the HTML ##########################
.l-main-section .l-main-section

14
public/resources/css/module/_dropdown.scss
View File

@ -3,13 +3,23 @@
z-index: $layer-5; z-index: $layer-5;
.dropdown-button { .dropdown-button {
background: none; background: rgba($snow, .1);
border: none; border: none;
text-transform: none; text-transform: none;
font-weight: normal; font-weight: normal;
line-height: $unit * 4; line-height: $unit * 4;
padding: 0px $unit; padding: 0px ($unit * 4) 0px ($unit * 2);
cursor: pointer; cursor: pointer;
position: relative;
.icon {
position: absolute;
top: 5px;
right: $unit;
z-index: $layer-1;
font-size: 20px;
opacity: .87;
}
} }
.dropdown-menu { .dropdown-menu {