diff --git a/src/components/o-mdc-list/o-mdc-list.item.tsx b/src/components/o-mdc-list/o-mdc-list.item.tsx new file mode 100644 index 0000000..9a97515 --- /dev/null +++ b/src/components/o-mdc-list/o-mdc-list.item.tsx @@ -0,0 +1,16 @@ +import { Component, Prop, CssClassMap } from '@stencil/core'; + +@Component({ + tag: 'o-mdc-list-item', + styleUrl: 'o-mdc-list.scss', + shadow: true +}) +export class MdcListItemComponent { + render() { + return ( +
  • + +
    • + ); + } +} diff --git a/src/components/o-mdc-list/o-mdc-list.scss b/src/components/o-mdc-list/o-mdc-list.scss new file mode 100644 index 0000000..0c3421e --- /dev/null +++ b/src/components/o-mdc-list/o-mdc-list.scss @@ -0,0 +1,18 @@ +@import "@material/list/mdc-list"; + + .mdc---bordered { + /* remove the side padding. we'll be placing it around the item instead. */ + padding-right: 0; + padding-left: 0; + } + .mdc-list--bordered .mdc-list-item { + /* Add the list side padding padding to the list item. */ + padding: 0 16px; + /* Add a border around each element. */ + border: 1px solid rgba(0, 0, 0, .12); + } + /* Ensure adjacent borders don't collide with one another. */ + .mdc-list--bordered .mdc-list-item:not(:first-child) { + border-top: none; + } + diff --git a/src/components/o-mdc-list/o-mdc-list.spec.tsx b/src/components/o-mdc-list/o-mdc-list.spec.tsx new file mode 100644 index 0000000..d30ce68 --- /dev/null +++ b/src/components/o-mdc-list/o-mdc-list.spec.tsx @@ -0,0 +1,9 @@ +import { flush, render } from '@stencil/core/testing'; +import { MdcListComponent } from './o-mdc-list'; + +describe('o-mdc-Menu', () => { + it('should build', () => { + expect(new MdcListComponent()).toBeTruthy(); + }); + +}); diff --git a/src/components/o-mdc-list/o-mdc-list.tsx b/src/components/o-mdc-list/o-mdc-list.tsx new file mode 100644 index 0000000..67203a8 --- /dev/null +++ b/src/components/o-mdc-list/o-mdc-list.tsx @@ -0,0 +1,31 @@ +import { Component, Prop, CssClassMap } from '@stencil/core'; + +@Component({ + tag: 'o-mdc-list', + styleUrl: 'o-mdc-list.scss', + shadow: true +}) +export class MdcListComponent { + + @Prop()id : string; + @Prop()dense : boolean; + @Prop()avatarList : boolean; + @Prop()twoLine : boolean; + @Prop()bordered : boolean; + + render() { + const listClasses: CssClassMap = { + 'mdc-list': true, + 'mdc-list--dense': this.dense, + 'mdc-list--avatar-list': this.avatarList, + 'mdc-list--two-line': this.twoLine, + 'mdc-list--bordered': this.bordered + }; + + return ( + + ); + } +} diff --git a/src/components/o-mdc-list/readme.md b/src/components/o-mdc-list/readme.md new file mode 100644 index 0000000..cf59d27 --- /dev/null +++ b/src/components/o-mdc-list/readme.md @@ -0,0 +1,11 @@ +# o-mdc-select + + + + + + + +---------------------------------------------- + +*Built by [StencilJS](https://stenciljs.com/)* diff --git a/src/index.html b/src/index.html index d37ebe9..dfe2d07 100644 --- a/src/index.html +++ b/src/index.html @@ -19,7 +19,7 @@ - + Title Start @@ -91,7 +91,7 @@

    Text field demo

    Select demo

    - +
    @@ -121,6 +121,24 @@

    Snackbar demo

    + +
    +

    List demo

    + + + Caso + + + Caso 2 + + + Caso 3 + + + Caso 4 + + +