Skip to content

Commit

Permalink
feat(ohos): test special char height in ohos
Browse files Browse the repository at this point in the history
  • Loading branch information
@etkmao
etkmao committed Aug 23, 2024
1 parent fa4120a commit d55392e
Show file tree
Hide file tree
Showing 16 changed files with 55 additions and 415 deletions.
372 changes: 6 additions & 366 deletions driver/js/examples/hippy-vue-demo/src/components/demos/demo-p.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,378 +4,18 @@
:style="{color: topColor}"
>
<div>
<label>不带样式：</label>
<p
class="p-demo-content"
@touchstart="onTouchTextStart"
@touchmove="onTouchTextMove"
@touchend="onTouchTextEnd"
>
这是最普通的一行可点击文字
</p>
<p
class="p-demo-content-status"
>
当前touch状态: {{ labelTouchStatus }}
</p>
<label>颜色：</label>
<p class="p-demo-1 p-demo-content">
这行文字改变了颜色
</p>
<label>尺寸：</label>
<p class="p-demo-2 p-demo-content">
这行改变了大小
</p>
<label>粗体：</label>
<p class="p-demo-3 p-demo-content">
这行加粗了
</p>
<label>下划线：</label>
<p class="p-demo-4 p-demo-content">
这里有条下划线
</p>
<label>删除线：</label>
<p class="p-demo-5 p-demo-content">
这里有条删除线
</p>
<label>自定义字体：</label>
<p class="p-demo-6 p-demo-content">
腾讯字体 Hippy
</p>
<p
class="p-demo-6 p-demo-content"
style="font-weight: bold"
>
腾讯字体 Hippy 粗体
</p>
<p
class="p-demo-6 p-demo-content"
style="font-style: italic"
>
腾讯字体 Hippy 斜体
</p>
<p
class="p-demo-6 p-demo-content"
style="font-weight: bold; font-style: italic"
>
腾讯字体 Hippy 粗斜体
</p>
<label>文字阴影：</label>
<p
class="p-demo-7 p-demo-content"
:style="textShadow"
@click="changeTextShadow"
>
这里是文字灰色阴影，点击可改变颜色
</p>
<p
class="p-demo-7 p-demo-content"
:style="textShadow"
@click="changeTextColor"
>
验证属性继承更改效果，点击可改变整体颜色
</p>
<label>文本字符间距</label>
<p
class="p-demo-8 p-demo-content"
style="margin-bottom: 5px"
>
Text width letter-spacing -1
</p>
<p
class="p-demo-9 p-demo-content"
style="margin-top: 5px"
>
Text width letter-spacing 5
</p>
<label>字体 style：</label>
<div class="p-demo-content">
<p style="font-style: normal">
font-style: normal
</p>
<p style="font-style: italic">
font-style: italic
</p>
<p>font-style: [not set]</p>
</div>
<label>numberOfLines={{ textMode.numberOfLines }} | ellipsizeMode={{ textMode.ellipsizeMode }}</label>

<div class="p-demo-content">
<p
:numberOfLines="textMode.numberOfLines"
:ellipsizeMode="textMode.ellipsizeMode"
:style="{ backgroundColor: '#40b883', marginBottom: 10, paddingHorizontal: 10, paddingVertical: 5 }"
>
<span style="font-size: 19px; color: white">先帝创业未半而中道崩殂，今天下三分，益州疲弊，此诚危急存亡之秋也。</span>
<span>然侍卫之臣不懈于内，忠志之士忘身于外者，盖追先帝之殊遇，欲报之于陛下也。</span>
</p>
<p
:numberOfLines="textMode.numberOfLines"
:ellipsizeMode="textMode.ellipsizeMode"
:style="{ backgroundColor: '#40b883', marginBottom: 10, paddingHorizontal: 10, paddingVertical: 5 }"
>
{{ 'line 1\n\nline 3\n\nline 5' }}
</p>
<p
:numberOfLines="textMode.numberOfLines"
:ellipsizeMode="textMode.ellipsizeMode"
:style="{
backgroundColor: '#40b883',
marginBottom: 10,
paddingHorizontal: 10,
paddingVertical: 5,
fontSize: 14
}"
>
<img
:style="{ width: 24, height: 24 }"
:src="img1"
>
<img
:style="{ width: 24, height: 24 }"
:src="img2"
>
</p>
<div class="button-bar">
<button
class="button"
@click="incrementLine"
>
<span>加一行</span>
</button>
<button
class="button"
@click="decrementLine"
>
<span>减一行</span>
</button>
</div>
<div class="button-bar">
<button
class="button"
@click="() => changeMode('clip')"
>
<span>clip</span>
</button>
<button
class="button"
@click="() => changeMode('head')"
>
<span>head</span>
</button>
<button
class="button"
@click="() => changeMode('middle')"
>
<span>middle</span>
</button>
<button
class="button"
@click="() => changeMode('tail')"
>
<span>tail</span>
</button>
</div>
</div>
<label v-if="Platform === 'android'">break-strategy={{ breakStrategy }}</label>
<div
v-if="Platform === 'android'"
class="p-demo-content"
>
<p
:break-strategy="breakStrategy"
style="border-width: 1; border-color: gray;"
>
{{ longText }}
</p>
<div class="button-bar">
<button
class="button"
@click="() => changeBreakStrategy('simple')"
>
<span>simple</span>
</button>
<button
class="button"
@click="() => changeBreakStrategy('high_quality')"
>
<span>high_quality</span>
</button>
<button
class="button"
@click="() => changeBreakStrategy('balanced')"
>
<span>balanced</span>
</button>
</div>
</div>
<label>vertical-align</label>
<div class="p-demo-content">
<p style="line-height: 50; background-color: #40b883; padding-horizontal: 10; padding-vertical: 5;">
<img
style="width: 24; height: 24; vertical-align: top;"
:src="img2"
>
<img
style="width: 18; height: 12; vertical-align: middle;"
:src="img2"
>
<img
style="width: 24; height: 12; vertical-align: baseline;"
:src="img2"
>
<img
style="width: 36; height: 24; vertical-align: bottom;"
:src="img2"
>
<img
style="width: 24; height: 24; vertical-align: top;"
:src="img3"
>
<img
style="width: 18; height: 12; vertical-align: middle;"
:src="img3"
>
<img
style="width: 24; height: 12; vertical-align: baseline;"
:src="img3"
>
<img
style="width: 36; height: 24; vertical-align: bottom;"
:src="img3"
>
<span style="font-size: 16; vertical-align: top;">字</span>
<span style="font-size: 16; vertical-align: middle;">字</span>
<span style="font-size: 16; vertical-align: baseline;">字</span>
<span style="font-size: 16; vertical-align: bottom;">字</span>
</p>
<p v-if="Platform === 'android'">
legacy mode:
</p>
<p
v-if="Platform === 'android'"
style="lineHeight: 50; background-color: #40b883; padding-horizontal: 10; padding-vertical: 5;"
>
<img
style="width: 24; height: 24; vertical-alignment: 0;"
:src="img2"
>
<img
style="width: 18; height: 12; vertical-alignment: 1;"
:src="img2"
>
<img
style="width: 24; height: 12; vertical-alignment: 2;"
:src="img2"
>
<img
style="width: 36; height: 24; vertical-alignment: 3;"
:src="img2"
>
<img
style="width: 24; height: 24; top: -10;"
:src="img3"
>
<img
style="width: 18; height: 12; top: -5;"
:src="img3"
>
<img
style="width: 24; height: 12;"
:src="img3"
>
<img
style="width: 36; height: 24; top: 5;"
:src="img3"
>
<span style="font-size: 16;">字</span>
<span style="font-size: 16;">字</span>
<span style="font-size: 16;">字</span>
<span style="font-size: 16;">字</span>
</p>
</div>
<label>tint-color & background-color</label>
<div class="p-demo-content">
<p style="background-color: #40b883; padding-horizontal: 10; padding-vertical: 5;">
<img
style="width: 24; height: 24; vertical-align: middle; tint-color: orange;"
:src="img2"
>
<img
style="width: 24; height: 24; vertical-align: middle; tint-color: orange; background-color: #ccc;"
:src="img2"
>
<img
style="width: 24; height: 24; vertical-align: middle; background-color: #ccc;"
:src="img2"
>
<span style="vertical-align: middle; background-color: #99f;">text</span>
</p>
<p v-if="Platform === 'android'">
legacy mode:
</p>
<p
v-if="Platform === 'android'"
style="background-color: #40b883; padding-horizontal: 10; padding-vertical: 5;"
>
<img
style="width: 24; height: 24; tint-color: orange;"
:src="img2"
>
<img
style="width: 24; height: 24; tint-color: orange; background-color: #ccc;"
:src="img2"
>
<img
style="width: 24; height: 24; background-color: #ccc;"
:src="img2"
>
</p>
</div>
<label>margin</label>
<div class="p-demo-content">
<p style="line-height: 50; background-color: #40b883; padding-horizontal: 10; padding-vertical: 5;">
<img
style="width: 24; height: 24; vertical-align: top; background-color: #ccc; margin: 5;"
:src="img2"
>
<img
style="width: 24; height: 24; vertical-align: middle; background-color: #ccc; margin: 5;"
:src="img2"
>
<img
style="width: 24; height: 24; vertical-align: baseline; background-color: #ccc; margin: 5;"
:src="img2"
>
<img
style="width: 24; height: 24; vertical-align: bottom; background-color: #ccc; margin: 5;"
:src="img2"
>
</p>
<p v-if="Platform === 'android'">
legacy mode:
</p>
<p
v-if="Platform === 'android'"
style="line-height: 50; background-color: #40b883; padding-horizontal: 10; padding-vertical: 5;"
>
<img
style="width: 24; height: 24; vertical-alignment: 0; background-color: #ccc; margin: 5;"
:src="img2"
>
<img
style="width: 24; height: 24; vertical-alignment: 1; background-color: #ccc; margin: 5;"
:src="img2"
>
<img
style="width: 24; height: 24; vertical-alignment: 2; background-color: #ccc; margin: 5;"
:src="img2"
>
<img
style="width: 24; height: 24; vertical-alignment: 3; background-color: #ccc; margin: 5;"
:src="img2"
>
<span style="font-size: 19px; color: white">小肥ཽε</span>
<span>:</span>
<span>等到的时候散户手上的票全部跌了80%，你能涨的上去吗</span>
</p>

</div>

</div>
</div>
</template>
Expand Down
2 changes: 1 addition & 1 deletion framework/examples/android-demo/res/vue2/asyncComponentFromHttp.android.js
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

Loading

0 comments on commit d55392e

Please sign in to comment.