diff --git a/docs/api/avatar.md b/docs/api/avatar.md index 86fb904812a..e7a005fa719 100644 --- a/docs/api/avatar.md +++ b/docs/api/avatar.md @@ -1,11 +1,6 @@ --- title: "ion-avatar" -hide_table_of_contents: true -demoUrl: "/docs/demos/api/avatar/index.html" -demoSourceUrl: "https://github.com/ionic-team/ionic-docs/tree/main/static/demos/api/avatar/index.html" --- -import Tabs from '@theme/Tabs'; -import TabItem from '@theme/TabItem'; import Props from '@site/static/auto-generated/avatar/props.md'; import Events from '@site/static/auto-generated/avatar/events.md'; @@ -20,186 +15,36 @@ import Slots from '@site/static/auto-generated/avatar/slots.md'; import EncapsulationPill from '@components/page/api/EncapsulationPill'; -import APITOCInline from '@components/page/api/APITOCInline'; -

Contents

- - - - - Avatars are circular components that usually wrap an image or icon. They can be used to represent a person or an object. Avatars can be used by themselves or inside of any element. If placed inside of an `ion-chip` or `ion-item`, the avatar will resize to fit the parent component. To position an avatar on the left or right side of an item, set the slot to `start` or `end`, respectively. +## Basic +import Basic from '@site/static/usage/avatar/basic/index.md'; + -## Usage +## Chip Avatar - +import Chip from '@site/static/usage/avatar/chip/index.md'; - + -```html - - - +## Item Avatar - - - - - Chip Avatar - - - - - - - Item Avatar - -``` +import Item from '@site/static/usage/avatar/item/index.md'; - + +## Theming - +import Theming from '@site/static/usage/avatar/theming/index.md'; -```html - - - - - - - - - Chip Avatar - - - - - - - Item Avatar - -``` - - - - - - -```tsx -import React from 'react'; -import { IonAvatar, IonChip, IonItem, IonLabel, IonContent } from '@ionic/react'; - -export const AvatarExample: React.FC = () => ( - - - - - - - - - - Chip Avatar - - - - - - - Item Avatar - - -); -``` - - - - - - -```tsx -import { Component, h } from '@stencil/core'; - -@Component({ - tag: 'avatar-example', - styleUrl: 'avatar-example.css' -}) -export class AvatarExample { - render() { - return [ - - - , - - - - - - Chip Avatar - , - - - - - - Item Avatar - - ]; - } -} -``` - - - - - - -```html - - - -``` - - - - + ## Properties @@ -217,4 +62,4 @@ export default defineComponent({ ## Slots - \ No newline at end of file + diff --git a/static/demos/api/avatar/avatar.svg b/static/demos/api/avatar/avatar.svg index 90c4d0e9cbd..bd0cec9a9c1 100644 --- a/static/demos/api/avatar/avatar.svg +++ b/static/demos/api/avatar/avatar.svg @@ -1 +1,12 @@ - \ No newline at end of file + + + + + + + + + + + + diff --git a/static/img/avatar.svg b/static/img/avatar.svg index 90c4d0e9cbd..bd0cec9a9c1 100644 --- a/static/img/avatar.svg +++ b/static/img/avatar.svg @@ -1 +1,12 @@ - \ No newline at end of file + + + + + + + + + + + + diff --git a/static/usage/avatar/basic/angular.md b/static/usage/avatar/basic/angular.md new file mode 100644 index 00000000000..0e544a336b8 --- /dev/null +++ b/static/usage/avatar/basic/angular.md @@ -0,0 +1,5 @@ +```html + + Silhouette of a person's head + +``` diff --git a/static/usage/avatar/basic/demo.html b/static/usage/avatar/basic/demo.html new file mode 100644 index 00000000000..f4b499736c2 --- /dev/null +++ b/static/usage/avatar/basic/demo.html @@ -0,0 +1,27 @@ + + + + + + + Avatar + + + + + + + + + + +
+ + Silhouette of a person's head + +
+ + + + + diff --git a/static/usage/avatar/basic/index.md b/static/usage/avatar/basic/index.md new file mode 100644 index 00000000000..5c31f3f5306 --- /dev/null +++ b/static/usage/avatar/basic/index.md @@ -0,0 +1,8 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +import react from './react.md'; +import vue from './vue.md'; +import angular from './angular.md'; + + diff --git a/static/usage/avatar/basic/javascript.md b/static/usage/avatar/basic/javascript.md new file mode 100644 index 00000000000..0e544a336b8 --- /dev/null +++ b/static/usage/avatar/basic/javascript.md @@ -0,0 +1,5 @@ +```html + + Silhouette of a person's head + +``` diff --git a/static/usage/avatar/basic/react.md b/static/usage/avatar/basic/react.md new file mode 100644 index 00000000000..419456d4733 --- /dev/null +++ b/static/usage/avatar/basic/react.md @@ -0,0 +1,15 @@ +```tsx +import React from 'react'; +import { IonAvatar } from '@ionic/react'; + +function Example() { + return ( + <> + + Silhouette of a person's head + + + ); +} +export default Example; +``` diff --git a/static/usage/avatar/basic/vue.md b/static/usage/avatar/basic/vue.md new file mode 100644 index 00000000000..95bee27c769 --- /dev/null +++ b/static/usage/avatar/basic/vue.md @@ -0,0 +1,16 @@ +```html + + + +``` diff --git a/static/usage/avatar/chip/angular.md b/static/usage/avatar/chip/angular.md new file mode 100644 index 00000000000..767e5bc3ff3 --- /dev/null +++ b/static/usage/avatar/chip/angular.md @@ -0,0 +1,8 @@ +```html + + + Silhouette of a person's head + + Chip Avatar + +``` diff --git a/static/usage/avatar/chip/demo.html b/static/usage/avatar/chip/demo.html new file mode 100644 index 00000000000..bf827440dd6 --- /dev/null +++ b/static/usage/avatar/chip/demo.html @@ -0,0 +1,30 @@ + + + + + + + Avatar + + + + + + + + + + +
+ + + Silhouette of a person's head + + Chip Avatar + +
+ + + + + diff --git a/static/usage/avatar/chip/index.md b/static/usage/avatar/chip/index.md new file mode 100644 index 00000000000..2acfeb4b578 --- /dev/null +++ b/static/usage/avatar/chip/index.md @@ -0,0 +1,8 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +import react from './react.md'; +import vue from './vue.md'; +import angular from './angular.md'; + + diff --git a/static/usage/avatar/chip/javascript.md b/static/usage/avatar/chip/javascript.md new file mode 100644 index 00000000000..767e5bc3ff3 --- /dev/null +++ b/static/usage/avatar/chip/javascript.md @@ -0,0 +1,8 @@ +```html + + + Silhouette of a person's head + + Chip Avatar + +``` diff --git a/static/usage/avatar/chip/react.md b/static/usage/avatar/chip/react.md new file mode 100644 index 00000000000..237cbd54d64 --- /dev/null +++ b/static/usage/avatar/chip/react.md @@ -0,0 +1,17 @@ +```tsx +import React from 'react'; +import { IonAvatar, IonChip, IonLabel } from '@ionic/react'; +function Example() { + return ( + <> + + + Silhouette of a person's head + + Chip Avatar + + + ); +} +export default Example; +``` diff --git a/static/usage/avatar/chip/vue.md b/static/usage/avatar/chip/vue.md new file mode 100644 index 00000000000..fe07bebe1ad --- /dev/null +++ b/static/usage/avatar/chip/vue.md @@ -0,0 +1,19 @@ +```html + + + +``` diff --git a/static/usage/avatar/item/angular.md b/static/usage/avatar/item/angular.md new file mode 100644 index 00000000000..20a7db662dc --- /dev/null +++ b/static/usage/avatar/item/angular.md @@ -0,0 +1,8 @@ +```html + + + Silhouette of a person's head + + Item Avatar + +``` diff --git a/static/usage/avatar/item/demo.html b/static/usage/avatar/item/demo.html new file mode 100644 index 00000000000..dde84e47480 --- /dev/null +++ b/static/usage/avatar/item/demo.html @@ -0,0 +1,30 @@ + + + + + + + Avatar + + + + + + + + + + +
+ + + Silhouette of a person's head + + Item Avatar + +
+ + + + + diff --git a/static/usage/avatar/item/index.md b/static/usage/avatar/item/index.md new file mode 100644 index 00000000000..43630dba17e --- /dev/null +++ b/static/usage/avatar/item/index.md @@ -0,0 +1,8 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +import react from './react.md'; +import vue from './vue.md'; +import angular from './angular.md'; + + diff --git a/static/usage/avatar/item/javascript.md b/static/usage/avatar/item/javascript.md new file mode 100644 index 00000000000..20a7db662dc --- /dev/null +++ b/static/usage/avatar/item/javascript.md @@ -0,0 +1,8 @@ +```html + + + Silhouette of a person's head + + Item Avatar + +``` diff --git a/static/usage/avatar/item/react.md b/static/usage/avatar/item/react.md new file mode 100644 index 00000000000..b652100dbeb --- /dev/null +++ b/static/usage/avatar/item/react.md @@ -0,0 +1,17 @@ +```tsx +import React from 'react'; +import { IonAvatar, IonItem, IonLabel } from '@ionic/react'; +function Example() { + return ( + <> + + + Silhouette of a person's head + + Item Avatar + + + ); +} +export default Example; +``` diff --git a/static/usage/avatar/item/vue.md b/static/usage/avatar/item/vue.md new file mode 100644 index 00000000000..745d67ed32e --- /dev/null +++ b/static/usage/avatar/item/vue.md @@ -0,0 +1,19 @@ +```html + + + +``` diff --git a/static/usage/avatar/theming/angular/example_component_css.md b/static/usage/avatar/theming/angular/example_component_css.md new file mode 100644 index 00000000000..5a97e1fc6ae --- /dev/null +++ b/static/usage/avatar/theming/angular/example_component_css.md @@ -0,0 +1,5 @@ +```css +ion-avatar { + --border-radius: 4px; +} +``` diff --git a/static/usage/avatar/theming/angular/example_component_html.md b/static/usage/avatar/theming/angular/example_component_html.md new file mode 100644 index 00000000000..0e544a336b8 --- /dev/null +++ b/static/usage/avatar/theming/angular/example_component_html.md @@ -0,0 +1,5 @@ +```html + + Silhouette of a person's head + +``` diff --git a/static/usage/avatar/theming/demo.html b/static/usage/avatar/theming/demo.html new file mode 100644 index 00000000000..0d3c4b67ac2 --- /dev/null +++ b/static/usage/avatar/theming/demo.html @@ -0,0 +1,32 @@ + + + + + + + Avatar + + + + + + + + + + + +
+ + Silhouette of a person's head + +
+ + + + + diff --git a/static/usage/avatar/theming/index.md b/static/usage/avatar/theming/index.md new file mode 100644 index 00000000000..e586aae743b --- /dev/null +++ b/static/usage/avatar/theming/index.md @@ -0,0 +1,32 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; + +import reactTSX from './react/main_tsx.md'; +import reactCSS from './react/main_css.md'; + +import vue from './vue.md'; + +import angularHTML from './angular/example_component_html.md'; +import angularCSS from './angular/example_component_css.md'; + + diff --git a/static/usage/avatar/theming/javascript.md b/static/usage/avatar/theming/javascript.md new file mode 100644 index 00000000000..96e64bcf277 --- /dev/null +++ b/static/usage/avatar/theming/javascript.md @@ -0,0 +1,11 @@ +```html + + + + Silhouette of a person's head + +``` diff --git a/static/usage/avatar/theming/react.md b/static/usage/avatar/theming/react.md new file mode 100644 index 00000000000..7d0e98290b8 --- /dev/null +++ b/static/usage/avatar/theming/react.md @@ -0,0 +1,20 @@ +```tsx +import React from 'react'; +import { IonAvatar, IonItem, IonLabel } from '@ionic/react'; + +import './main.css'; + +function Example() { + return ( + <> + + + Silhouette of a person's head + + Item Avatar + + + ); +} +export default Example; +``` diff --git a/static/usage/avatar/theming/react/main_css.md b/static/usage/avatar/theming/react/main_css.md new file mode 100644 index 00000000000..5a97e1fc6ae --- /dev/null +++ b/static/usage/avatar/theming/react/main_css.md @@ -0,0 +1,5 @@ +```css +ion-avatar { + --border-radius: 4px; +} +``` diff --git a/static/usage/avatar/theming/react/main_tsx.md b/static/usage/avatar/theming/react/main_tsx.md new file mode 100644 index 00000000000..4824f336b9c --- /dev/null +++ b/static/usage/avatar/theming/react/main_tsx.md @@ -0,0 +1,18 @@ + +```tsx +import React from 'react'; +import { IonAvatar } from '@ionic/react'; + +import './main.css'; + +function Example() { + return ( + <> + + Silhouette of a person's head + + + ); +} +export default Example; +``` diff --git a/static/usage/avatar/theming/vue.md b/static/usage/avatar/theming/vue.md new file mode 100644 index 00000000000..235fb00ea0b --- /dev/null +++ b/static/usage/avatar/theming/vue.md @@ -0,0 +1,22 @@ +```html + + + + + +``` diff --git a/static/usage/chip/slots/angular.md b/static/usage/chip/slots/angular.md index 6387a0e55ba..3fbc4818f43 100644 --- a/static/usage/chip/slots/angular.md +++ b/static/usage/chip/slots/angular.md @@ -1,7 +1,7 @@ ```html - + Silhouette of a person's head Avatar Chip diff --git a/static/usage/chip/slots/demo.html b/static/usage/chip/slots/demo.html index fd3f22a72df..4888fb8d911 100644 --- a/static/usage/chip/slots/demo.html +++ b/static/usage/chip/slots/demo.html @@ -18,7 +18,7 @@
- + Silhouette of a person's head Avatar Chip diff --git a/static/usage/chip/slots/javascript.md b/static/usage/chip/slots/javascript.md index 6387a0e55ba..3fbc4818f43 100644 --- a/static/usage/chip/slots/javascript.md +++ b/static/usage/chip/slots/javascript.md @@ -1,7 +1,7 @@ ```html - + Silhouette of a person's head Avatar Chip diff --git a/static/usage/chip/slots/react.md b/static/usage/chip/slots/react.md index 25fd0d192b1..7a36f9b68c5 100644 --- a/static/usage/chip/slots/react.md +++ b/static/usage/chip/slots/react.md @@ -8,7 +8,7 @@ function Example() { <> - + Silhouette of a person's head Avatar Chip diff --git a/static/usage/chip/slots/vue.md b/static/usage/chip/slots/vue.md index 29e12166788..24ef77077f2 100644 --- a/static/usage/chip/slots/vue.md +++ b/static/usage/chip/slots/vue.md @@ -2,7 +2,7 @@