From be74a7866efaa33559a6c173c55a008db5be57ab Mon Sep 17 00:00:00 2001 From: Yan Zhu Date: Sat, 11 Mar 2017 18:13:22 +0800 Subject: Update docs text --- docs/components.html | 50 +++++++++++++++++++++++++------------------------- 1 file changed, 25 insertions(+), 25 deletions(-) (limited to 'docs/components.html') diff --git a/docs/components.html b/docs/components.html index aaa17f6..7a1b8cb 100644 --- a/docs/components.html +++ b/docs/components.html @@ -173,7 +173,7 @@
-

Add a container element with the class form-autocomplete. There are 2 parts of it, one is form-autocomplete-input, another is menu component. You may add the class is-focused to form-autocomplete-input to make it appear as focus state.

+

Add a container element with the form-autocomplete class. There are 2 parts of it, one is form-autocomplete-input, another is menu component. You may add the is-focused class to form-autocomplete-input to make it appear as focus state.

Spectre.css does NOT include JavaScript code, you will need to implement your JS to interact with the autocomplete. The autocomplete HTML structure is exampled below.

@@ -258,8 +258,8 @@
-

Add the class avatar to <img> element. There are 4 additional sizes available, including avatar-xl (64px), avatar-lg (48px), avatar-sm (24px), and avatar-xs (16px). By default, the avatar size is 32px.

-

For users who don't have profile pictures, you may use their initials for avatars. Add the class avatar and avatar size class to <div> element. The attribute data-initial is the name appear inside the avatar.

+

Add the avatar class to <img> element. There are 4 additional sizes available, including avatar-xl (64px), avatar-lg (48px), avatar-sm (24px), and avatar-xs (16px). By default, the avatar size is 32px.

+

For users who don't have profile pictures, you may use their initials for avatars. Add the avatar class and avatar size class to <div> element. The data-initial attribute is the name appear inside the avatar.

@@ -335,7 +335,7 @@
-

Add the class badge to non self closing elements. And add the attribute data-badge to define the content of a badge. The badge will appear in the top-right direction of the element.

+

Add the badge class to non self closing elements. And add the data-badge attribute to define the content of a badge. The badge will appear in the top-right direction of the element.

If there is no data-badge or the attribute is not specified, the badge will appear as a dot.

@@ -402,7 +402,7 @@
-

Add a container element with the class bar. And add child elements with the class bar-item. The width percentage value is needed for every bar-item.

+

Add a container element with the bar class. And add child elements with the bar-item class. The width percentage value is needed for every bar-item.

There is a class bar-sm for thinner Bars. Also, you could use Tooltips for any bar-item.

@@ -512,7 +512,7 @@
- +
@@ -526,7 +526,7 @@
-

Add a container element with the class card. And add child elements with the class name card-image, card-header, card-body and/or card-footer. The card-image can be placed in any position.

+

Add a container element with the card class. And add child elements with the card-image, card-header, card-body and/or card-footer classes. The card-image can be placed in any position.

@@ -589,7 +589,7 @@
-

Add a container element with the class chip. And add child text element, buttons or avatars with the class avatar.

+

Add a container element with the chip class. And add child text element, buttons or avatars with the avatar class.

@@ -672,7 +672,7 @@
-

Add a container element with the class menu. And add child elements with the classname menu-item. You can separate menu items with a divider or menu-header. Spectre.css does not include JavaScript code, you will need to implement your JS to interact with the menus.

+

Add a container element with the menu class. And add child elements with the menu-item class. You can separate menu items with a divider or menu-header. Spectre.css does not include JavaScript code, you will need to implement your JS to interact with the menus.

@@ -789,10 +789,10 @@

Dropdown menus component is built entirely in CSS. It is triggered by :focus event.

-

Add a container element with the class dropdown. And add a focusable element with the classname dropdown-toggle for the button and a menu component right next to it. You also need to add tabindex to make the buttons focusable. If the dropdown is close to the right edge of the browser, you can add the class dropdown-right to the container to prevent it appearing off screen.

+

Add a container element with the dropdown class. And add a focusable element with the dropdown-toggle class for the button and a menu component right next to it. You also need to add tabindex to make the buttons focusable. If the dropdown is close to the right edge of the browser, you can add the dropdown-right class to the container to prevent it appearing off screen.

-

Also, you can implement your JS to interact with the dropdown menus by adding the class active to the dropdown.

+

Also, you can implement your JS to interact with the dropdown menus by adding the active class to the dropdown.

@@ -870,8 +870,8 @@
-

Add a container element with the class modal. And add a real container modal-container and overlay modal-overlay inside it. You can add child elements with the class name modal-header, modal-content and modal-footer - any or all of them.

-

Spectre.css does not include JavaScript code, you will need to implement your JS to interact with modals. To make a modal appear, add the class active to the modal container.

+

Add a container element with the modal class. And add a real container modal-container and overlay modal-overlay inside it. You can add child elements with the modal-header, modal-content and modal-footer - any or all of them.

+

Spectre.css does not include JavaScript code, you will need to implement your JS to interact with modals. To make a modal appear, add the active class to the modal container.

@@ -955,7 +955,7 @@
-

Add the class modal-sm for a smaller modal dialog.

+

Add the modal-sm class for a smaller modal dialog.

@@ -1010,7 +1010,7 @@
-

Add a container element with the class breadcrumb. And add child elements with the classname breadcrumb-item.

+

Add a container element with the breadcrumb class. And add child elements with the breadcrumb-item class.

@@ -1078,7 +1078,7 @@
-

Add a container element with the class tab. And add child elements with the classname tab-item. You can add the class tab-block for a full-width tab. The tab-item or its child <a> with the class active will be highlighted.

+

Add a container element with the tab class. And add child elements with the tab-item class. You can add the tab-block class for a full-width tab. The tab-item or its child <a> with the active class will be highlighted.

@@ -1185,7 +1185,7 @@
-

You could add a search box or buttons inside a tab. Add the class tab-action to the tab-item.

+

You could add a search box or buttons inside a tab. Add the tab-action class to the tab-item.

@@ -1264,7 +1264,7 @@
-

Add a container element with the class pagination. And add child elements with the classname page-item. The page-item with the class active will be highlighted.

+

Add a container element with the pagination class. And add child elements with the page-item class. The page-item with the active class will be highlighted.

@@ -1366,7 +1366,7 @@
-

Add a container element with the class nav. And add child elements with the classname nav-item. The nav-item with the class active will be highlighted.

+

Add a container element with the nav class. And add child elements with the nav-item class. The nav-item with the active class will be highlighted.

@@ -1442,7 +1442,7 @@
-

Add a container element with the class step. And add child elements with the classname step-item. The step-item with the class active will be highlighted and indicate the current state of progress.

+

Add a container element with the step class. And add child elements with the step-item class. The step-item with the active class will be highlighted and indicate the current state of progress.

@@ -1506,7 +1506,7 @@
-

Add a container with the class tile. And add child elements with the class name tile-icon, tile-content and tile-action. The tile-icon and tile-action are optional.

+

Add a container with the tile class. And add child elements with the tile-icon, tile-content or/and tile-action classes. The tile-icon and tile-action are optional.

There are tile-title and tile-meta classes for title and meta text styles.

@@ -1529,7 +1529,7 @@

There is compact version of Tiles component, which is often used as contact and file info blocks.

-

Add the class tile-centered to the container tile. The tile-icon, tile-content and tile-action will be vertically centered.

+

Add the tile-centered class to the container tile. The tile-icon, tile-content and tile-action will be vertically centered.

@@ -1585,7 +1585,7 @@
-

Add a container element with the class toast. You can add any text within the container, and even icons. You may also add a close button with the class btn-clear if you need.

+

Add a container element with the toast class. You can add any text within the container, and even icons. You may also add a close button with the btn-clear class if you need.

@@ -1608,7 +1608,7 @@
-

And you can add the class toast-primary, toast-success or toast-danger for additional toast colors.

+

And you can add the toast-primary, toast-success or toast-danger class for additional toast colors.

@@ -1647,7 +1647,7 @@

Tooltips component is built entirely in CSS.

-

Add the class tooltip and the attribute data-tooltip, which contains the tooltip content, to non self closing elements. And add the class name tooltip-right, tooltip-bottom or tooltip-left to define the position of a tooltip. By default, the tooltip appears above the element.

+

Add the tooltip class and the data-tooltip attribute, which contains the tooltip content, to non self closing elements. And add the tooltip-right, tooltip-bottom or tooltip-left class to define the position of a tooltip. By default, the tooltip appears above the element.

-- cgit v1.3.1-23-gd82d