|
@@ -123,7 +123,7 @@ TextIcon.story = {
|
|
|
export const _Paragraph = () => (
|
|
|
<div>
|
|
|
<Paragraph>
|
|
|
- Semi Design 是由互娱社区前端团队与 UED
|
|
|
+ Semi Design 是由抖音前端团队与 UED
|
|
|
团队共同设计开发并维护的设计系统。设计系统包含设计语言以及一整套可复用的前端组件,帮助设计师与开发者更容易地打造高质量的、用户体验一致的、符合设计规范的
|
|
|
Web 应用。
|
|
|
<br />
|
|
@@ -141,7 +141,7 @@ export const _Paragraph = () => (
|
|
|
</Paragraph>
|
|
|
<br />
|
|
|
<Paragraph spacing="extended">
|
|
|
- Semi Design 是由互娱社区前端团队与 UED
|
|
|
+ Semi Design 是由抖音前端团队与 UED
|
|
|
团队共同设计开发并维护的设计系统。设计系统包含设计语言以及一整套可复用的前端组件,帮助设计师与开发者更容易地打造高质量的、用户体验一致的、符合设计规范的
|
|
|
Web 应用。
|
|
|
<br />
|
|
@@ -163,14 +163,14 @@ export const _Paragraph = () => (
|
|
|
export const EllipsisSingle = () => (
|
|
|
<div>
|
|
|
<Paragraph ellipsis style={{ width: 350 }}>
|
|
|
- 这是一个单行截断的例子: Semi Design 是由互娱社区前端团队与 UED
|
|
|
+ 这是一个单行截断的例子: Semi Design 是由抖音前端团队与 UED
|
|
|
团队共同设计开发并维护的设计系统。设计系统包含设计语言以及一整套可复用的前端组件,帮助设计师与开发者更容易地打造高质量的、用户体验一致的、符合设计规范的
|
|
|
Web 应用。 区别于其他的设计系统而言,Semi Design
|
|
|
以用户中心、内容优先、设计人性化为设计理念,具有四大优势。
|
|
|
</Paragraph>
|
|
|
<br />
|
|
|
<Paragraph ellipsis={{ expandable: true }} style={{ width: 350 }}>
|
|
|
- 单行截断并且支持展开:Semi Design 是由互娱社区前端团队与 UED
|
|
|
+ 单行截断并且支持展开:Semi Design 是由抖音前端团队与 UED
|
|
|
团队共同设计开发并维护的设计系统。设计系统包含设计语言以及一整套可复用的前端组件,帮助设计师与开发者更容易地打造高质量的、用户体验一致的、符合设计规范的
|
|
|
Web 应用。 区别于其他的设计系统而言,Semi Design
|
|
|
以用户中心、内容优先、设计人性化为设计理念,具有四大优势。
|
|
@@ -181,21 +181,21 @@ export const EllipsisSingle = () => (
|
|
|
</Paragraph>
|
|
|
<br />
|
|
|
<Paragraph ellipsis={{ expandable: true, expandText: 'Show More' }} style={{ width: 350 }}>
|
|
|
- 单行截断并且支持展开,自定义展开文本: Semi Design 是由互娱社区前端团队与 UED
|
|
|
+ 单行截断并且支持展开,自定义展开文本: Semi Design 是由抖音前端团队与 UED
|
|
|
团队共同设计开发并维护的设计系统。设计系统包含设计语言以及一整套可复用的前端组件,帮助设计师与开发者更容易地打造高质量的、用户体验一致的、符合设计规范的
|
|
|
Web 应用。 区别于其他的设计系统而言,Semi Design
|
|
|
以用户中心、内容优先、设计人性化为设计理念,具有四大优势。
|
|
|
</Paragraph>
|
|
|
<br />
|
|
|
<Paragraph ellipsis={{ expandText: 'Show More' }} style={{ width: 350 }}>
|
|
|
- 单行截断,自定义展开文本但是不能展开哦: Semi Design 是由互娱社区前端团队与 UED
|
|
|
+ 单行截断,自定义展开文本但是不能展开哦: Semi Design 是由抖音前端团队与 UED
|
|
|
团队共同设计开发并维护的设计系统。设计系统包含设计语言以及一整套可复用的前端组件,帮助设计师与开发者更容易地打造高质量的、用户体验一致的、符合设计规范的
|
|
|
Web 应用。 区别于其他的设计系统而言,Semi Design
|
|
|
以用户中心、内容优先、设计人性化为设计理念,具有四大优势。
|
|
|
</Paragraph>
|
|
|
<br />
|
|
|
<Paragraph ellipsis={{ showTooltip: true }} style={{ width: 350 }}>
|
|
|
- 单行截断,展示tooltip: Semi Design 是由互娱社区前端团队与 UED
|
|
|
+ 单行截断,展示tooltip: Semi Design 是由抖音前端团队与 UED
|
|
|
团队共同设计开发并维护的设计系统。设计系统包含设计语言以及一整套可复用的前端组件,帮助设计师与开发者更容易地打造高质量的、用户体验一致的、符合设计规范的
|
|
|
Web 应用。 区别于其他的设计系统而言,Semi Design
|
|
|
以用户中心、内容优先、设计人性化为设计理念,具有四大优势。
|
|
@@ -209,7 +209,7 @@ export const EllipsisSingle = () => (
|
|
|
ellipsis={{ suffix: '喵喵喵', expandText: 'Show More', expandable: true }}
|
|
|
style={{ width: 250 }}
|
|
|
>
|
|
|
- 单行截断,有suffix哦: Semi Design 是由互娱社区前端团队与 UED
|
|
|
+ 单行截断,有suffix哦: Semi Design 是由抖音前端团队与 UED
|
|
|
团队共同设计开发并维护的设计系统。设计系统包含设计语言以及一整套可复用的前端组件,帮助设计师与开发者更容易地打造高质量的、用户体验一致的、符合设计规范的
|
|
|
Web 应用。 区别于其他的设计系统而言,Semi Design
|
|
|
以用户中心、内容优先、设计人性化为设计理念,具有四大优势。
|
|
@@ -219,7 +219,7 @@ export const EllipsisSingle = () => (
|
|
|
ellipsis={{ suffix: '喵喵喵', expandText: 'Show More', expandable: true }}
|
|
|
style={{ width: '50%' }}
|
|
|
>
|
|
|
- 单行截断,要自动适配宽度才可以: Semi Design 是由互娱社区前端团队与 UED
|
|
|
+ 单行截断,要自动适配宽度才可以: Semi Design 是由抖音前端团队与 UED
|
|
|
团队共同设计开发并维护的设计系统。设计系统包含设计语言以及一整套可复用的前端组件,帮助设计师与开发者更容易地打造高质量的、用户体验一致的、符合设计规范的
|
|
|
Web 应用。 区别于其他的设计系统而言,Semi Design
|
|
|
以用户中心、内容优先、设计人性化为设计理念,具有四大优势。
|
|
@@ -234,7 +234,7 @@ EllipsisSingle.story = {
|
|
|
export const EllipsisMultiple = () => (
|
|
|
<div>
|
|
|
<Paragraph ellipsis={{ rows: 3 }} style={{ width: 300 }}>
|
|
|
- 这是一个多行截断的例子: Semi Design 是由互娱社区前端团队与 UED
|
|
|
+ 这是一个多行截断的例子: Semi Design 是由抖音前端团队与 UED
|
|
|
团队共同设计开发并维护的设计系统。设计系统包含设计语言以及一整套可复用的前端组件,帮助设计师与开发者更容易地打造高质量的、用户体验一致的、符合设计规范的
|
|
|
Web 应用。 区别于其他的设计系统而言,Semi Design
|
|
|
以用户中心、内容优先、设计人性化为设计理念,具有四大优势。
|
|
@@ -252,7 +252,7 @@ export const EllipsisMultiple = () => (
|
|
|
</Paragraph>
|
|
|
<br />
|
|
|
<Paragraph ellipsis={{ rows: 3, expandable: true }} style={{ width: 280 }}>
|
|
|
- 多行截断并且支持展开:Semi Design 是由互娱社区前端团队与 UED
|
|
|
+ 多行截断并且支持展开:Semi Design 是由抖音前端团队与 UED
|
|
|
团队共同设计开发并维护的设计系统。设计系统包含设计语言以及一整套可复用的前端组件,帮助设计师与开发者更容易地打造高质量的、用户体验一致的、符合设计规范的
|
|
|
Web 应用。 区别于其他的设计系统而言,Semi Design
|
|
|
以用户中心、内容优先、设计人性化为设计理念,具有四大优势。
|
|
@@ -262,28 +262,28 @@ export const EllipsisMultiple = () => (
|
|
|
ellipsis={{ expandable: true, rows: 3, expandText: 'Show More' }}
|
|
|
style={{ width: 250 }}
|
|
|
>
|
|
|
- 多行截断并且支持展开,自定义展开文本: Semi Design 是由互娱社区前端团队与 UED
|
|
|
+ 多行截断并且支持展开,自定义展开文本: Semi Design 是由抖音前端团队与 UED
|
|
|
团队共同设计开发并维护的设计系统。设计系统包含设计语言以及一整套可复用的前端组件,帮助设计师与开发者更容易地打造高质量的、用户体验一致的、符合设计规范的
|
|
|
Web 应用。 区别于其他的设计系统而言,Semi Design
|
|
|
以用户中心、内容优先、设计人性化为设计理念,具有四大优势。
|
|
|
</Paragraph>
|
|
|
<br />
|
|
|
<Paragraph ellipsis={{ rows: 3, expandText: 'Show More' }} style={{ width: 250 }}>
|
|
|
- 多行截断,自定义展开文本但是不能展开哦: Semi Design 是由互娱社区前端团队与 UED
|
|
|
+ 多行截断,自定义展开文本但是不能展开哦: Semi Design 是由抖音前端团队与 UED
|
|
|
团队共同设计开发并维护的设计系统。设计系统包含设计语言以及一整套可复用的前端组件,帮助设计师与开发者更容易地打造高质量的、用户体验一致的、符合设计规范的
|
|
|
Web 应用。 区别于其他的设计系统而言,Semi Design
|
|
|
以用户中心、内容优先、设计人性化为设计理念,具有四大优势。
|
|
|
</Paragraph>
|
|
|
<br />
|
|
|
<Paragraph ellipsis={{ rows: 3, showTooltip: true }} style={{ width: 250 }}>
|
|
|
- 多行截断,展示tooltip: Semi Design 是由互娱社区前端团队与 UED
|
|
|
+ 多行截断,展示tooltip: Semi Design 是由抖音前端团队与 UED
|
|
|
团队共同设计开发并维护的设计系统。设计系统包含设计语言以及一整套可复用的前端组件,帮助设计师与开发者更容易地打造高质量的、用户体验一致的、符合设计规范的
|
|
|
Web 应用。 区别于其他的设计系统而言,Semi Design
|
|
|
以用户中心、内容优先、设计人性化为设计理念,具有四大优势。
|
|
|
</Paragraph>
|
|
|
<br />
|
|
|
<Paragraph ellipsis={{ rows: 3, showTooltip: { type: 'popover' } }} style={{ width: 250 }}>
|
|
|
- 多行截断,展示popover: Semi Design 是由互娱社区前端团队与 UED
|
|
|
+ 多行截断,展示popover: Semi Design 是由抖音前端团队与 UED
|
|
|
团队共同设计开发并维护的设计系统。设计系统包含设计语言以及一整套可复用的前端组件,帮助设计师与开发者更容易地打造高质量的、用户体验一致的、符合设计规范的
|
|
|
Web 应用。 区别于其他的设计系统而言,Semi Design
|
|
|
以用户中心、内容优先、设计人性化为设计理念,具有四大优势。
|
|
@@ -293,7 +293,7 @@ export const EllipsisMultiple = () => (
|
|
|
ellipsis={{ rows: 3, expandText: 'Show More', showTooltip: { type: 'popover' } }}
|
|
|
style={{ width: 250 }}
|
|
|
>
|
|
|
- 多行截断,有展开文字但是不能展开所以不能展示popover: Semi Design 是由互娱社区前端团队与 UED
|
|
|
+ 多行截断,有展开文字但是不能展开所以不能展示popover: Semi Design 是由抖音前端团队与 UED
|
|
|
团队共同设计开发并维护的设计系统。设计系统包含设计语言以及一整套可复用的前端组件,帮助设计师与开发者更容易地打造高质量的、用户体验一致的、符合设计规范的
|
|
|
Web 应用。 区别于其他的设计系统而言,Semi Design
|
|
|
以用户中心、内容优先、设计人性化为设计理念,具有四大优势。
|
|
@@ -304,14 +304,14 @@ export const EllipsisMultiple = () => (
|
|
|
</Paragraph>
|
|
|
<br />
|
|
|
<Paragraph ellipsis={{ rows: 3, suffix: '喵喵喵', expandable: true }} style={{ width: 250 }}>
|
|
|
- 多行截断,有suffix哦: Semi Design 是由互娱社区前端团队与 UED
|
|
|
+ 多行截断,有suffix哦: Semi Design 是由抖音前端团队与 UED
|
|
|
团队共同设计开发并维护的设计系统。设计系统包含设计语言以及一整套可复用的前端组件,帮助设计师与开发者更容易地打造高质量的、用户体验一致的、符合设计规范的
|
|
|
Web 应用。 区别于其他的设计系统而言,Semi Design
|
|
|
以用户中心、内容优先、设计人性化为设计理念,具有四大优势。
|
|
|
</Paragraph>
|
|
|
<br />
|
|
|
<Paragraph ellipsis={{ rows: 3, suffix: '喵喵喵', expandable: true }} style={{ width: '50%' }}>
|
|
|
- 多行截断,要自动适配宽度才可以: Semi Design 是由互娱社区前端团队与 UED
|
|
|
+ 多行截断,要自动适配宽度才可以: Semi Design 是由抖音前端团队与 UED
|
|
|
团队共同设计开发并维护的设计系统。设计系统包含设计语言以及一整套可复用的前端组件,帮助设计师与开发者更容易地打造高质量的、用户体验一致的、符合设计规范的
|
|
|
Web 应用。 区别于其他的设计系统而言,Semi Design
|
|
|
以用户中心、内容优先、设计人性化为设计理念,具有四大优势。
|
|
@@ -334,7 +334,7 @@ EllipsisMultiple.story = {
|
|
|
export const EllipsisChaos = () => (
|
|
|
<div>
|
|
|
<Paragraph ellipsis={{ rows: 3 }} style={{ width: 300 }}>
|
|
|
- 不可以有非文本,要抛出来warning: Semi Design 是由互娱社区前端团队与 UED
|
|
|
+ 不可以有非文本,要抛出来warning: Semi Design 是由抖音前端团队与 UED
|
|
|
团队共同设计开发并维护的设计系统。
|
|
|
<br />{' '}
|
|
|
设计系统包含设计语言以及一整套可复用的前端组件,帮助设计师与开发者更容易地打造高质量的、用户体验一致的、符合设计规范的
|
|
@@ -343,7 +343,7 @@ export const EllipsisChaos = () => (
|
|
|
</Paragraph>
|
|
|
<br />
|
|
|
<Paragraph ellipsis copyable style={{ width: 350 }}>
|
|
|
- 还可以复制哦: Semi Design 是由互娱社区前端团队与 UED
|
|
|
+ 还可以复制哦: Semi Design 是由抖音前端团队与 UED
|
|
|
团队共同设计开发并维护的设计系统。设计系统包含设计语言以及一整套可复用的前端组件,帮助设计师与开发者更容易地打造高质量的、用户体验一致的、符合设计规范的
|
|
|
Web 应用。 区别于其他的设计系统而言,Semi Design
|
|
|
以用户中心、内容优先、设计人性化为设计理念,具有四大优势。
|
|
@@ -360,14 +360,14 @@ export const EllipsisChaos = () => (
|
|
|
}}
|
|
|
style={{ width: 350 }}
|
|
|
>
|
|
|
- 不要复制成功了: Semi Design 是由互娱社区前端团队与 UED
|
|
|
+ 不要复制成功了: Semi Design 是由抖音前端团队与 UED
|
|
|
团队共同设计开发并维护的设计系统。设计系统包含设计语言以及一整套可复用的前端组件,帮助设计师与开发者更容易地打造高质量的、用户体验一致的、符合设计规范的
|
|
|
Web 应用。 区别于其他的设计系统而言,Semi Design
|
|
|
以用户中心、内容优先、设计人性化为设计理念,具有四大优势。
|
|
|
</Paragraph>
|
|
|
<br />
|
|
|
<Paragraph ellipsis link style={{ width: 350 }}>
|
|
|
- 是一个链接呢: Semi Design 是由互娱社区前端团队与 UED
|
|
|
+ 是一个链接呢: Semi Design 是由抖音前端团队与 UED
|
|
|
团队共同设计开发并维护的设计系统。设计系统包含设计语言以及一整套可复用的前端组件,帮助设计师与开发者更容易地打造高质量的、用户体验一致的、符合设计规范的
|
|
|
Web 应用。 区别于其他的设计系统而言,Semi Design
|
|
|
以用户中心、内容优先、设计人性化为设计理念,具有四大优势。
|
|
@@ -378,7 +378,7 @@ export const EllipsisChaos = () => (
|
|
|
ellipsis={{ expandable: true, rows: 3, expandText: 'Show More' }}
|
|
|
style={{ width: 250 }}
|
|
|
>
|
|
|
- 是一个链接还能展开呢: Semi Design 是由互娱社区前端团队与 UED
|
|
|
+ 是一个链接还能展开呢: Semi Design 是由抖音前端团队与 UED
|
|
|
团队共同设计开发并维护的设计系统。设计系统包含设计语言以及一整套可复用的前端组件,帮助设计师与开发者更容易地打造高质量的、用户体验一致的、符合设计规范的
|
|
|
Web 应用。 区别于其他的设计系统而言,Semi Design
|
|
|
以用户中心、内容优先、设计人性化为设计理念,具有四大优势。
|
|
@@ -390,21 +390,21 @@ export const EllipsisChaos = () => (
|
|
|
ellipsis={{ expandable: true, rows: 3, expandText: 'Show More' }}
|
|
|
style={{ width: 250 }}
|
|
|
>
|
|
|
- 是一个链接还能展开呢还能复制呢: Semi Design 是由互娱社区前端团队与 UED
|
|
|
+ 是一个链接还能展开呢还能复制呢: Semi Design 是由抖音前端团队与 UED
|
|
|
团队共同设计开发并维护的设计系统。设计系统包含设计语言以及一整套可复用的前端组件,帮助设计师与开发者更容易地打造高质量的、用户体验一致的、符合设计规范的
|
|
|
Web 应用。 区别于其他的设计系统而言,Semi Design
|
|
|
以用户中心、内容优先、设计人性化为设计理念,具有四大优势。
|
|
|
</Paragraph>
|
|
|
<br />
|
|
|
<Title heading={2} ellipsis={{ showTooltip: true }} style={{ width: 250 }}>
|
|
|
- 是个2号标题哦: Semi Design 是由互娱社区前端团队与 UED
|
|
|
+ 是个2号标题哦: Semi Design 是由抖音前端团队与 UED
|
|
|
团队共同设计开发并维护的设计系统。设计系统包含设计语言以及一整套可复用的前端组件,帮助设计师与开发者更容易地打造高质量的、用户体验一致的、符合设计规范的
|
|
|
Web 应用。 区别于其他的设计系统而言,Semi Design
|
|
|
以用户中心、内容优先、设计人性化为设计理念,具有四大优势。
|
|
|
</Title>
|
|
|
<br />
|
|
|
<Title heading={4} link ellipsis={{ showTooltip: true }} style={{ width: 250 }}>
|
|
|
- 是个4号标题链接呢: Semi Design 是由互娱社区前端团队与 UED
|
|
|
+ 是个4号标题链接呢: Semi Design 是由抖音前端团队与 UED
|
|
|
团队共同设计开发并维护的设计系统。设计系统包含设计语言以及一整套可复用的前端组件,帮助设计师与开发者更容易地打造高质量的、用户体验一致的、符合设计规范的
|
|
|
Web 应用。 区别于其他的设计系统而言,Semi Design
|
|
|
以用户中心、内容优先、设计人性化为设计理念,具有四大优势。
|
|
@@ -415,7 +415,7 @@ export const EllipsisChaos = () => (
|
|
|
ellipsis={{ rows: 3, showTooltip: { type: 'popover' } }}
|
|
|
style={{ width: 250 }}
|
|
|
>
|
|
|
- 是个警告文本呢: Semi Design 是由互娱社区前端团队与 UED
|
|
|
+ 是个警告文本呢: Semi Design 是由抖音前端团队与 UED
|
|
|
团队共同设计开发并维护的设计系统。设计系统包含设计语言以及一整套可复用的前端组件,帮助设计师与开发者更容易地打造高质量的、用户体验一致的、符合设计规范的
|
|
|
Web 应用。 区别于其他的设计系统而言,Semi Design
|
|
|
以用户中心、内容优先、设计人性化为设计理念,具有四大优势。
|
|
@@ -428,7 +428,7 @@ export const EllipsisChaos = () => (
|
|
|
ellipsis={{ showTooltip: true }}
|
|
|
style={{ width: 250 }}
|
|
|
>
|
|
|
- 是个5号标题链接还有个小小的图标啦: Semi Design 是由互娱社区前端团队与 UED
|
|
|
+ 是个5号标题链接还有个小小的图标啦: Semi Design 是由抖音前端团队与 UED
|
|
|
团队共同设计开发并维护的设计系统。设计系统包含设计语言以及一整套可复用的前端组件,帮助设计师与开发者更容易地打造高质量的、用户体验一致的、符合设计规范的
|
|
|
Web 应用。 区别于其他的设计系统而言,Semi Design
|
|
|
以用户中心、内容优先、设计人性化为设计理念,具有四大优势。
|
|
@@ -451,7 +451,7 @@ export const EllipsisCollapsible = () => (
|
|
|
}}
|
|
|
style={{ width: 300 }}
|
|
|
>
|
|
|
- Semi Design 是由互娱社区前端团队与 UED
|
|
|
+ Semi Design 是由抖音前端团队与 UED
|
|
|
团队共同设计开发并维护的设计系统。设计系统包含设计语言以及一整套可复用的前端组件,帮助设计师与开发者更容易地打造高质量的、用户体验一致的、符合设计规范的
|
|
|
Web 应用。 区别于其他的设计系统而言,Semi Design
|
|
|
以用户中心、内容优先、设计人性化为设计理念,具有四大优势。
|
|
@@ -467,7 +467,7 @@ export const EllipsisCollapsible = () => (
|
|
|
}}
|
|
|
style={{ width: 300 }}
|
|
|
>
|
|
|
- 自定义的收起:Semi Design 是由互娱社区前端团队与 UED
|
|
|
+ 自定义的收起:Semi Design 是由抖音前端团队与 UED
|
|
|
团队共同设计开发并维护的设计系统。设计系统包含设计语言以及一整套可复用的前端组件,帮助设计师与开发者更容易地打造高质量的、用户体验一致的、符合设计规范的
|
|
|
Web 应用。 区别于其他的设计系统而言,Semi Design
|
|
|
以用户中心、内容优先、设计人性化为设计理念,具有四大优势。
|
|
@@ -483,7 +483,7 @@ export const EllipsisCollapsible = () => (
|
|
|
}}
|
|
|
style={{ width: 300 }}
|
|
|
>
|
|
|
- 不让你收起来略:Semi Design 是由互娱社区前端团队与 UED
|
|
|
+ 不让你收起来略:Semi Design 是由抖音前端团队与 UED
|
|
|
团队共同设计开发并维护的设计系统。设计系统包含设计语言以及一整套可复用的前端组件,帮助设计师与开发者更容易地打造高质量的、用户体验一致的、符合设计规范的
|
|
|
Web 应用。 区别于其他的设计系统而言,Semi Design
|
|
|
以用户中心、内容优先、设计人性化为设计理念,具有四大优势。
|
|
@@ -499,7 +499,7 @@ export const EllipsisCollapsible = () => (
|
|
|
}}
|
|
|
style={{ width: 300 }}
|
|
|
>
|
|
|
- 又可以复制啦:Semi Design 是由互娱社区前端团队与 UED
|
|
|
+ 又可以复制啦:Semi Design 是由抖音前端团队与 UED
|
|
|
团队共同设计开发并维护的设计系统。设计系统包含设计语言以及一整套可复用的前端组件,帮助设计师与开发者更容易地打造高质量的、用户体验一致的、符合设计规范的
|
|
|
Web 应用。 区别于其他的设计系统而言,Semi Design
|
|
|
以用户中心、内容优先、设计人性化为设计理念,具有四大优势。
|
|
@@ -515,7 +515,7 @@ export const EllipsisCollapsible = () => (
|
|
|
}}
|
|
|
style={{ width: 300 }}
|
|
|
>
|
|
|
- 又来测试链接啦啦啦:Semi Design 是由互娱社区前端团队与 UED
|
|
|
+ 又来测试链接啦啦啦:Semi Design 是由抖音前端团队与 UED
|
|
|
团队共同设计开发并维护的设计系统。设计系统包含设计语言以及一整套可复用的前端组件,帮助设计师与开发者更容易地打造高质量的、用户体验一致的、符合设计规范的
|
|
|
Web 应用。 区别于其他的设计系统而言,Semi Design
|
|
|
以用户中心、内容优先、设计人性化为设计理念,具有四大优势。
|
|
@@ -539,7 +539,7 @@ export const EllipsisFromCenter = () => (
|
|
|
}}
|
|
|
style={{ width: 300 }}
|
|
|
>
|
|
|
- 多行中间截断还能展开和折叠:Semi Design 是由互娱社区前端团队与 UED
|
|
|
+ 多行中间截断还能展开和折叠:Semi Design 是由抖音前端团队与 UED
|
|
|
团队共同设计开发并维护的设计系统。设计系统包含设计语言以及一整套可复用的前端组件,帮助设计师与开发者更容易地打造高质量的、用户体验一致的、符合设计规范的
|
|
|
Web 应用。 区别于其他的设计系统而言,Semi Design
|
|
|
以用户中心、内容优先、设计人性化为设计理念,具有四大优势。
|
|
@@ -558,28 +558,28 @@ export const EllipsisFromCenter = () => (
|
|
|
}}
|
|
|
style={{ width: 300 }}
|
|
|
>
|
|
|
- 单行中间截断还能展开和折叠: Semi Design 是由互娱社区前端团队与 UED
|
|
|
+ 单行中间截断还能展开和折叠: Semi Design 是由抖音前端团队与 UED
|
|
|
团队共同设计开发并维护的设计系统。设计系统包含设计语言以及一整套可复用的前端组件,帮助设计师与开发者更容易地打造高质量的、用户体验一致的、符合设计规范的
|
|
|
Web 应用。 区别于其他的设计系统而言,Semi Design
|
|
|
以用户中心、内容优先、设计人性化为设计理念,具有四大优势。
|
|
|
</Paragraph>
|
|
|
<br />
|
|
|
<Paragraph ellipsis={{ pos: 'middle', expandable: true }} style={{ width: 300 }}>
|
|
|
- 单行中间截断还能展开超厉害: Semi Design 是由互娱社区前端团队与 UED
|
|
|
+ 单行中间截断还能展开超厉害: Semi Design 是由抖音前端团队与 UED
|
|
|
团队共同设计开发并维护的设计系统。设计系统包含设计语言以及一整套可复用的前端组件,帮助设计师与开发者更容易地打造高质量的、用户体验一致的、符合设计规范的
|
|
|
Web 应用。 区别于其他的设计系统而言,Semi Design
|
|
|
以用户中心、内容优先、设计人性化为设计理念,具有四大优势。
|
|
|
</Paragraph>
|
|
|
<br />
|
|
|
<Paragraph ellipsis={{ pos: 'middle' }} style={{ width: '50%' }}>
|
|
|
- 单行中间截断: Semi Design 是由互娱社区前端团队与 UED
|
|
|
+ 单行中间截断: Semi Design 是由抖音前端团队与 UED
|
|
|
团队共同设计开发并维护的设计系统。设计系统包含设计语言以及一整套可复用的前端组件,帮助设计师与开发者更容易地打造高质量的、用户体验一致的、符合设计规范的
|
|
|
Web 应用。 区别于其他的设计系统而言,Semi Design
|
|
|
以用户中心、内容优先、设计人性化为设计理念,具有四大优势。
|
|
|
</Paragraph>
|
|
|
<br />
|
|
|
<Paragraph ellipsis={{ rows: 3, pos: 'middle', expandable: true }} style={{ width: '50%' }}>
|
|
|
- 自动适配的多行中间截断:Semi Design 是由互娱社区前端团队与 UED
|
|
|
+ 自动适配的多行中间截断:Semi Design 是由抖音前端团队与 UED
|
|
|
团队共同设计开发并维护的设计系统。设计系统包含设计语言以及一整套可复用的前端组件,帮助设计师与开发者更容易地打造高质量的、用户体验一致的、符合设计规范的
|
|
|
Web 应用。 区别于其他的设计系统而言,Semi Design
|
|
|
以用户中心、内容优先、设计人性化为设计理念,具有四大优势。
|
|
@@ -623,7 +623,7 @@ EllipsisFromCenter.story = {
|
|
|
export const Copyable = () => (
|
|
|
<div>
|
|
|
<Paragraph copyable>
|
|
|
- Semi Design 是由互娱社区前端团队与 UED
|
|
|
+ Semi Design 是由抖音前端团队与 UED
|
|
|
团队共同设计开发并维护的设计系统。设计系统包含设计语言以及一整套可复用的前端组件,帮助设计师与开发者更容易地打造高质量的、用户体验一致的、符合设计规范的
|
|
|
Web 应用。 区别于其他的设计系统而言,Semi Design
|
|
|
以用户中心、内容优先、设计人性化为设计理念,具有四大优势。
|
|
@@ -636,7 +636,7 @@ export const Copyable = () => (
|
|
|
}} >点击右边的图标复制文本。</Paragraph>
|
|
|
<br />
|
|
|
<Paragraph spacing="extended" copyable>
|
|
|
- Semi Design 是由互娱社区前端团队与 UED
|
|
|
+ Semi Design 是由抖音前端团队与 UED
|
|
|
团队共同设计开发并维护的设计系统。设计系统包含设计语言以及一整套可复用的前端组件,帮助设计师与开发者更容易地打造高质量的、用户体验一致的、符合设计规范的
|
|
|
Web 应用。
|
|
|
<br />
|
|
@@ -655,7 +655,7 @@ export const Copyable = () => (
|
|
|
<br />
|
|
|
<Paragraph spacing="extended" copyable>
|
|
|
<span>
|
|
|
- Semi Design 是由互娱社区前端团队与 UED
|
|
|
+ Semi Design 是由抖音前端团队与 UED
|
|
|
团队共同设计开发并维护的设计系统。设计系统包含设计语言以及一整套可复用的前端组件,帮助设计师与开发者更容易地打造高质量的、用户体验一致的、符合设计规范的
|
|
|
Web 应用。 ➡️
|
|
|
</span>
|