Keine Beschreibung

ons-row.js 2.8KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172
  1. import _Object$getPrototypeOf from 'babel-runtime/core-js/object/get-prototype-of';
  2. import _classCallCheck from 'babel-runtime/helpers/classCallCheck';
  3. import _possibleConstructorReturn from 'babel-runtime/helpers/possibleConstructorReturn';
  4. import _inherits from 'babel-runtime/helpers/inherits';
  5. /*
  6. Copyright 2013-2015 ASIAL CORPORATION
  7. Licensed under the Apache License, Version 2.0 (the "License");
  8. you may not use this file except in compliance with the License.
  9. You may obtain a copy of the License at
  10. http://www.apache.org/licenses/LICENSE-2.0
  11. Unless required by applicable law or agreed to in writing, software
  12. distributed under the License is distributed on an "AS IS" BASIS,
  13. WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  14. See the License for the specific language governing permissions and
  15. limitations under the License.
  16. */
  17. import onsElements from '../ons/elements';
  18. import BaseElement from './base/base-element';
  19. /**
  20. * @element ons-row
  21. * @category grid
  22. * @description
  23. * [en]Represents a row in the grid system. Use with `<ons-col>` to layout components.[/en]
  24. * [ja]グリッドシステムにて行を定義します。ons-colとともに使用し、コンポーネントの配置に使用します。[/ja]
  25. * @codepen GgujC {wide}
  26. * @guide theming.html
  27. * [en]Layouting guide[/en]
  28. * [ja]レイアウト調整[/ja]
  29. * @seealso ons-col
  30. * [en]The `<ons-col>` component is used as children of `<ons-row>`.[/en]
  31. * [ja]ons-colコンポーネント[/ja]
  32. * @note
  33. * [en]For Android 4.3 and earlier, and iOS6 and earlier, when using mixed alignment with ons-row and ons-col, they may not be displayed correctly. You can use only one vertical-align.[/en]
  34. * [ja]Android 4.3以前、もしくはiOS 6以前のOSの場合、ons-rowとons-colを組み合わせてそれぞれのons-col要素のvertical-align属性の値に別々の値を指定すると、描画が崩れる場合があります。vertical-align属性の値には一つの値だけを指定できます。[/ja]
  35. * @example
  36. * <ons-row>
  37. * <ons-col width="50px"><ons-icon icon="fa-twitter"></ons-icon></ons-col>
  38. * <ons-col>Text</ons-col>
  39. * </ons-row>
  40. */
  41. /**
  42. * @attribute vertical-align
  43. * @type {String}
  44. * @description
  45. * [en]Short hand attribute for aligning vertically. Valid values are top, bottom, and center.[/en]
  46. * [ja]縦に整列するために指定します。top、bottom、centerのいずれかを指定できます。[/ja]
  47. */
  48. var RowElement = function (_BaseElement) {
  49. _inherits(RowElement, _BaseElement);
  50. function RowElement() {
  51. _classCallCheck(this, RowElement);
  52. return _possibleConstructorReturn(this, (RowElement.__proto__ || _Object$getPrototypeOf(RowElement)).apply(this, arguments));
  53. }
  54. return RowElement;
  55. }(BaseElement);
  56. export default RowElement;
  57. onsElements.Row = RowElement;
  58. customElements.define('ons-row', RowElement);